# Squares and circles (grid) (recursion vs. nested for-loops)
**URL:** https://discourse.processing.org/t/squares-and-circles-grid-recursion-vs-nested-for-loops/30433
**Category:** Beginners
**Created:** [June 2, 2021, 12:44am UTC](https://discourse.processing.org/t/squares-and-circles-grid-recursion-vs-nested-for-loops/30433 "2021-06-02T00:44:56Z")
**Posts on this page:** 16
**Page:** 1
### Author:  [@goner88](https://discourse.processing.org/u/goner88)
#### Post date: [June 2, 2021, 12:44am UTC](https://discourse.processing.org/t/squares-and-circles-grid-recursion-vs-nested-for-loops/30433/1 "2021-06-02T00:44:56Z")
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
---
### Author:  [@goner88](https://discourse.processing.org/u/goner88)
#### Post date: [June 2, 2021, 12:47am UTC](https://discourse.processing.org/t/squares-and-circles-grid-recursion-vs-nested-for-loops/30433/2 "2021-06-02T00:47:53Z")
I have drawn this with paint to explain more what I am trying to do hope it is clearer now.
---
### Author:  [@debxyz](https://discourse.processing.org/u/debxyz)
#### Post date: [June 2, 2021, 2:09am UTC](https://discourse.processing.org/t/squares-and-circles-grid-recursion-vs-nested-for-loops/30433/3 "2021-06-02T02:09:22Z")
Hello @goner88
> [@goner88](#):
>
> anyone has done this before ?
Yes, I’m sure someone has done this before.
🙂
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:
> **[Reference](https://processing.org/reference/)**
>
> Find further documentation of the Processing language
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.
🤓
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [June 2, 2021, 9:05am UTC](https://discourse.processing.org/t/squares-and-circles-grid-recursion-vs-nested-for-loops/30433/4 "2021-06-02T09:05:18Z")
> [@goner88](#):
>
> Should I use a recursive function here?
No, you should not. This would be possible but would be too hard.
---
### Author:  [@goner88](https://discourse.processing.org/u/goner88)
#### Post date: [June 2, 2021, 11:56am UTC](https://discourse.processing.org/t/squares-and-circles-grid-recursion-vs-nested-for-loops/30433/5 "2021-06-02T11:56:21Z")
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.
```auto
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
---
### Author:  [@goner88](https://discourse.processing.org/u/goner88)
#### Post date: [June 2, 2021, 11:57am UTC](https://discourse.processing.org/t/squares-and-circles-grid-recursion-vs-nested-for-loops/30433/6 "2021-06-02T11:57:49Z")
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.
---
### Author:  [@goner88](https://discourse.processing.org/u/goner88)
#### Post date: [June 2, 2021, 1:12pm UTC](https://discourse.processing.org/t/squares-and-circles-grid-recursion-vs-nested-for-loops/30433/8 "2021-06-02T13:12:12Z")
I have this now, I dont know why the circle is being skipped like this
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [June 2, 2021, 1:18pm UTC](https://discourse.processing.org/t/squares-and-circles-grid-recursion-vs-nested-for-loops/30433/9 "2021-06-02T13:18:12Z")
Each field has 8 neighbors not 4
---
### Author:  [@goner88](https://discourse.processing.org/u/goner88)
#### Post date: [June 2, 2021, 1:33pm UTC](https://discourse.processing.org/t/squares-and-circles-grid-recursion-vs-nested-for-loops/30433/10 "2021-06-02T13:33:55Z")
Thank you it worked but I didn’t understand why is it like this ? it depends on what ? what are the neighbors here ?
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [June 2, 2021, 3:07pm UTC](https://discourse.processing.org/t/squares-and-circles-grid-recursion-vs-nested-for-loops/30433/11 "2021-06-02T15:07:17Z")
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
---
### Author:  [@jb4x](https://discourse.processing.org/u/jb4x)
#### Post date: [June 2, 2021, 5:05pm UTC](https://discourse.processing.org/t/squares-and-circles-grid-recursion-vs-nested-for-loops/30433/12 "2021-06-02T17:05:14Z")
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:
```auto
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.
---
### Author:  [@debxyz](https://discourse.processing.org/u/debxyz)
#### Post date: [June 2, 2021, 6:07pm UTC](https://discourse.processing.org/t/squares-and-circles-grid-recursion-vs-nested-for-loops/30433/13 "2021-06-02T18:07:04Z")
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 🙂). 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.**
🤨
This can be better solved (more easily manipulated and visualized) using a **while loop** ~or~ **nested for loops**.
**Tutorials of interest below:**
https://www.youtube.com/embed/1JFGzq0wwMo?feature=oembed&wmode=opaque&list=PL632BB8C3F7E776BA
or
[ ](https://www.youtube.com/watch?v=h4ApLHe8tbk&t=80s)
or
[ ](https://www.youtube.com/watch?v=H7frvcAHXps&t=341s)
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:
[ ](https://www.youtube.com/watch?v=jPsZwrV9ld0)
And there are several examples on [openprocessing.org](http://openprocessing.org) that implement more **complex** grid structures as well.
🤓
---
### Author:  [@goner88](https://discourse.processing.org/u/goner88)
#### Post date: [June 2, 2021, 6:20pm UTC](https://discourse.processing.org/t/squares-and-circles-grid-recursion-vs-nested-for-loops/30433/14 "2021-06-02T18:20:26Z")
Thank you so much for this reply, I am going to check everything, and try to do it again.
---
### Author:  [@goner88](https://discourse.processing.org/u/goner88)
#### Post date: [June 2, 2021, 6:20pm UTC](https://discourse.processing.org/t/squares-and-circles-grid-recursion-vs-nested-for-loops/30433/15 "2021-06-02T18:20:59Z")
Understood, I will try to do it again without recursion.
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [June 2, 2021, 10:21pm UTC](https://discourse.processing.org/t/squares-and-circles-grid-recursion-vs-nested-for-loops/30433/17 "2021-06-02T22:21:18Z")
There are different techniques or tools for different purposes:
- if-clause for a condition
- for loop for a list
- nested for-loop for a grid (2D array)
- triple for-loop for a cube (3D array)
- recursion for tree structures. E.g. when you search a file in a folder which has subfolders and each of the sub-folders has files and folders in turn. This is a tree.
Here is an example of recursion for art: [Need clarification on how this piece of found code is working (recursion) - #4 by Chrisir](https://discourse.processing.org/t/need-clarification-on-how-this-piece-of-found-code-is-working-recursion/29969/4)
Chrisir
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [June 2, 2021, 10:43pm UTC](https://discourse.processing.org/t/squares-and-circles-grid-recursion-vs-nested-for-loops/30433/18 "2021-06-02T22:43:52Z")
for example here the function runs 37449 times for 30 cells
you can see how bad this is…
```auto
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);
}
}
```