please format code with </> button * homework policy * asking questions

Como puedo iniciar esta ilusion optica?

please format code with </> button * homework policy * asking questions

Como puedo iniciar esta ilusion optica?

“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.

```
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++;
}
}
```

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.

Hello @Jony16,

Lots of resources here:

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/tutorials

`:)`

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

Hello @Jony16,

One approach using modulo operator:

```
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:

References:

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:

`:)`