Squares and circles (grid) (recursion vs. nested for-loops)

Hey I want to create a window with squares that have circles inside of them on the whole window. anyone has done this before ? Should I use a recursive function here? Appreciate the help and thank you

1 Like

processingg.

I have drawn this with paint to explain more what I am trying to do hope it is clearer now.

Hello @goner88

Yes, I’m sure someone has done this before.
:slight_smile:

It’s preferred that you post your code attempt. Otherwise we don’t know what you already understand.

A good place to start is the reference:

https://processing.org/reference/

And just wondering, why do you think a recursive function is a good way to solve this? You need to supply more information about your thought process and code.

:nerd_face:

1 Like

No, you should not. This would be possible but would be too hard.

Hey thank you for the reply.
I did some researches and all of the results I found were in recursive function, it said it was easier and smaller code to do.

void setup() {
  size(384, 320);
  noStroke();
  noLoop();
}
void draw() {
  
  drawShape(0, 0, 64, 64, 6);
}


void drawShape(int x, int y, int sizex, int sizey, int level) {
  int iCircle=32;
  rectMode(RADIUS);
  rect(x, y, sizex, sizey);
  float tt = 126 * 6/4.0;
  fill(tt);
  if (level > 1) {
    level = level - 1;
    ellipse(x+iCircle, y+iCircle, sizex, sizey);
    iCircle+=32;
    drawShape(x+sizex, y, sizex, sizey, level);
    drawShape(x, y-sizey, sizex, sizey, level);
  }
}

I am trying to do it this way I didn’t finish yet but here is the code I have now

Hey thank you for the reply. Ok, I will check but I saw everywhere that using recursion here is the best option that’s why I asked about it.

1 Like

I have this now, I dont know why the circle is being skipped like this

2 Likes

Each field has 8 neighbors not 4

Thank you it worked but I didn’t understand why is it like this ? it depends on what ? what are the neighbors here ?

As I said, recursion is not the way to go here

Make a counter (outside of the function) and count how many circles are drawn - far too many, and not 36

2 Likes

As Chrisir said, don’t use recursion. If you can’t do it by yourself without using recursion, I doubt you will understand how the recursion is working.

Imagine your grid is numbered, first column is 0 then 1 then 2 and so on until the number of desired columns. Then you do the same for the row from 0 to the last one.

What you want to do is to draw a circle in the cell (0, 0) - 0th row and 0th column - and then one in the cell (0, 1) - 0th row and 1st column - and so on until you meet the last cell of the row 0.
After you move to the next line and do the same thing: first (1, 0) then (1, 1) and so on until last column.

This sort of things can be achieve with a for loop like so:

for (int row = 0; row < nbOfRow; row++) {
  for (int col = 0; col < nbOfCol; col++) {
    drawCircleInCell(row, col)
  }
}

Now it is up to you to code the function drawCircleInCell(row, col)

The idea is to use the row and column number to get the (x, y) coordinate of the center of the cell (easy to do if you know the width and height of a cell) and draw a circle there.

3 Likes

Hello @goner88

You have raised an interesting beginners conundrum.
Basically, how to find the appropriate level of code simplicity or complexity when solving a problem.

Setting up a grid pattern of primitive shapes is a simple problem (no shade intended :slight_smile:). Which means there is likely a simple solution. Simple problem == simple solution.

Your decision to use recursion to solve this problem is a fundamental mismatch—you have a simple problem but implementing a complicated solution.

CAN it be solved with recursion? Yes.
SHOULD it be solved with recursion? Probably not.
:face_with_raised_eyebrow:

This can be better solved (more easily manipulated and visualized) using a while loop ~or~ nested for loops.

Tutorials of interest below:


or

or

If you really want to use recursion, better to work on a problem that is more suited to that solution.
Good overview to recursion here:

And there are several examples on openprocessing.org that implement more complex grid structures as well.
:nerd_face:

2 Likes

Thank you so much for this reply, I am going to check everything, and try to do it again.

2 Likes

Understood, I will try to do it again without recursion.

There are different techniques or tools for different purposes:

Chrisir

2 Likes

for example here the function runs 37449 times for 30 cells

you can see how bad this is…


int i=0; 

void setup() {
  size(384, 320);
  noStroke();
  noLoop();
}

void draw() {
  rectMode(RADIUS);
  drawShape(0, 0, 64, 64, 6);

  println(i);
}


void drawShape(int x, int y, int sizex, int sizey, int level) {

  i++;

  //  int iCircle=32;

  stroke(255);
  rect(x+sizex/2, y+sizex/2, 
    sizex/2, sizey/2);
  float tt = 126 * 6/4.0;
  fill(tt);

  stroke(255);
  ellipse(x+sizex/2, y+sizex/2, 
    sizex, sizey);

  if (level > 1) {
    level = level - 1;

    // iCircle+=32;
    drawShape(x+sizex, y, sizex, sizey, level);
    drawShape(x, y-sizey, sizex, sizey, level);

    drawShape(x-sizex, y, sizex, sizey, level);
    drawShape(x, y+sizey, sizex, sizey, level);

    drawShape(x+sizex, y+sizex, sizex, sizey, level);
    drawShape(x+sizex, y-sizey, sizex, sizey, level);

    drawShape(x-sizex, y-sizex, sizex, sizey, level);
    drawShape(x-sizex, y+sizey, sizex, sizey, level);
  }
}