# For anidados ilusion

**URL:** <https://discourse.processing.org/t/for-anidados-ilusion/37415>\
**Category:** Español\
**Created:** [June 9, 2022, 12:43am UTC](https://discourse.processing.org/t/for-anidados-ilusion/37415 "2022-06-09T00:43:23Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Jony16](https://avatars.discourse-cdn.com/v4/letter/j/7c8e57/32.png) [@Jony16](https://discourse.processing.org/u/Jony16)\
**Post date:** [June 9, 2022, 12:43am UTC](https://discourse.processing.org/t/for-anidados-ilusion/37415/1 "2022-06-09T00:43:23Z")

</div>

> please format code with \</\> button \* [homework policy](https://discourse.processing.org/faq/#homework) \* [asking questions](https://discourse.processing.org/t/2147)

Como puedo iniciar esta ilusion optica?

 ![IMG-20220608-WA0040](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/e/6/e67e86ecd46fb6e82f349a1e5514e47033133560.jpeg)

---

<div class="post-metadata">

**Author:** ![RichardDL](https://avatars.discourse-cdn.com/v4/letter/r/f475e1/32.png) [@RichardDL](https://discourse.processing.org/u/RichardDL)\
**Post date:** [June 9, 2022, 8:56am UTC](https://discourse.processing.org/t/for-anidados-ilusion/37415/2 "2022-06-09T08:56:54Z")

</div>

“How can I start this optical illusion?”

Hi @Jony16, Welcome to the forum. Please excuse me replying in English.

You have Processing installed? and you’ve tried Java mode (the default) and P5.js mode? I ask about P5 because that makes a web-page and the image you’re showing looks like a tab in a browser. Having said that I think you should start in Java mode because the repeated cycle of adjusting the sketch and re-running is faster.

See File, Examples, Basics, Control EmbeddedIteration. This makes a grid pattern and I think is a good starting point to modify towards making it look like your image.

There are always different ways to do things, depends how you see that pattern. I see it as a yellow background, some outline black squares, and filled in black squares. So in that example, change the bg to yellow, don’t draw a white dot, draw a black outline square, and an offset solid black square.

Then think about changing the coordinate so it has an x and y offset added each time, to make a diagonal. For those areas in the centre where the grid is different, there will be some conditional e.g. if (x \< 5 && x \< 10) {some different coordinate calculation;}

I was looking at someone’s tiled floor (in Italy) which seemed to give the illusion of curved lines, so I made this one to replicate it.

```auto

size (600, 500);
int ixG;
int ixX = 0;
int ixY = -3;
int iGX;
int iGY;
int iScale = 40;
int iOffs = 10;

for (ixG = 0; ixG < 1000; ixG++)
{
  iGX = ixX * iScale - ixY * iOffs;
  iGY = ixX * iOffs + ixY * iScale;
  rect(iGX, iGY, iScale, iScale);
  ixX++;
  if (iGX > width)
  {
    ixX = 0;
    ixY++;
  }
}

```

![img](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/0/4/04258039fc8269f07fe19265bbc06e921496702c.png)

See that the example has a counter for x and y, where mine has just one counter with x and y incremented as it goes. Many ways to do things.

Have fun.

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [June 9, 2022, 11:07am UTC](https://discourse.processing.org/t/for-anidados-ilusion/37415/3 "2022-06-09T11:07:06Z")

</div>

Hello @Jony16,

Lots of resources here:  
[https://processing.org/](https://processing.org/)

I see two patterns:

- The background with diagonals
- The inside pattern with diagonals
- A border around the inside pattern

Consider doing these separately and overly one on top of the other.

Reference:  
[https://processing.org/reference/for.html](https://processing.org/reference/for.html)  
[https://processing.org/tutorials](https://processing.org/tutorials)

`:)`

---

<div class="post-metadata">

**Author:** ![Jony16](https://avatars.discourse-cdn.com/v4/letter/j/7c8e57/32.png) [@Jony16](https://discourse.processing.org/u/Jony16)\
**Post date:** [June 9, 2022, 11:55am UTC](https://discourse.processing.org/t/for-anidados-ilusion/37415/4 "2022-06-09T11:55:30Z")

</div>

Muchas gracias, me encuentro perdido pero con algunas ideas . Saludos !

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [June 10, 2022, 1:02am UTC](https://discourse.processing.org/t/for-anidados-ilusion/37415/5 "2022-06-10T01:02:08Z")

</div>

Hello @Jony16,

One approach using modulo operator:

```auto
size(600, 600);

boolean tog = false;
  
background(0);
  
for(int y=0; y<30; y++)
  {
  if(y%3 ==0) tog = !tog; 
  
  for(int x=0; x<30; x++)
    {
    if((x-y)%3 == 0) tog = !tog;
    if (tog)
     fill(255, 255, 0);
    else
     fill(0);

    circle(x*20+10, y*20+10, 20); 
    }
  }

```

I only provided the above as an example.

Just one of many ways to do this.

I focused on generating the pattern for each new line and took advantage of my comfort with the modulo operator.

Almost there:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/6/c/6c4e8e2c7b0daf2836f1442bb9830639945061a6.png)

References:  
[https://processing.org/reference/modulo.html](https://processing.org/reference/modulo.html)

A much simpler approach is simply to generate the desired pattern in an array and use that to generate each row:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/d/c/dccd96f4a5be69779c214d9db7952d9f7eb087c2.png)

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/3/6/36c05404906e5deb51bdf92eb4fe9de6555813de.png)

`:)`