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