Creating Illusions in p5.js-Part 2 (Scintillating Grid Illusion)
In the previous tutorial, Ebbinghaus Illusion was created using ellipse function in p5.js. This tutorial is about how to create Scintillating Grid Illusion , using lines function in p5.js.
What is Scintillating Grid Illusion?
Scintillating Grid Illusion is a simultaneous lightness contrast illusion which was discovered by J. R. Bergen (1985). It is the improved version of Hermann grid.
In Scintillating Grid illusion, as you allow your gaze to roam around, the white dots on the intersection seem to flash black to white in a scintillating effect.The effect is due to inhibitory processes in the retinal ganglion cells, the neurons that transmit signals from the eye to the brain. Further explanation of this illusion can be found in The Illusions Index. Here is how it is going to look at the end of this tutorial. Let’s start.
Create a new project using p5.js Web Editor ,where you are provided with two functions, setup() and draw().In the previous blog , it was discussed that the setup() runs once, while the draw() runs repeatedly. In this project ,we will be mostly working in the draw() function.
In the function draw(), let’s make a line(x1 , y1 , x2 ,y2).
Now, to give color to the line stroke(color) function is used. For making the line thicker ,use the function strokeWeight(weight). It is used to set the width of the stroke used for lines, points, and the border around shapes. All widths are set in units of pixels so as we increase the strokeWeight() the line becomes thicker.
Challenge:
Try , making lines in the vertical and diagonal directions. Then, try increasing the strokeWeight() .
In order to make multiple lines ,the easiest way is to use loops ,which is the repetition of the block of code. Here ,we are going to use for loop .The for loop have three parameters. First one is initialisation ,second is condition and the third is update. Initialisation is from where the loop should start.After it starts ,the next step is to look at the condition, that how many times the code needs to execute and then the update function , keeps the count until the condition is met.Once the condition is met the loop stops.
for(initial value ; condition ; update){ block of code}
Let’s make the first loop of lines in the horizontal direction.So, what we have done here is that, i is the variable which has an initial value. The condition is that i is less than width(i.e 400 canvas width) and it increments by 50 pixels creating the spacing between the lines. Now, place the i variable in y1 and y2-axis parameters of the line. While the x1 starts from 0 and x2 ends at width (i.e 400 canvas width). In the x-axis the line extends from 0 to the width ,in the y-axis new lines start forming.
Loop inside a loop, is called a Nested Loop . To create second loop for the vertical lines, use the similar method . Let’s add another line() function for making vertical lines and place the variable j of the second loop into the x1 and x2-axis of the second line. While the y1 start from 0 and y2 ends at height(i.e 400 canvas height). So now, the lines start extending from 0 to height and the new lines are formed in the x-axis.
Challenge:
Now , in the similar way make another nested loop for ellipse to appear at the intersection of the lines.And fill the ellipse with white (255) and use noStroke() function , so the ellipse don’t have borders around them.
Congratulations!!! you made Scintillating Grid Illusion.You can check the solution code here.
By using the same code , play around with the for loop variables and make different designs ,you can also make other interesting illusion like this one .
This illusion is called Wundt Illusion ,in which the lines appears to bend in, it can also be made by using the same code. You can always reference the solution code
Resources:
1- Getting Started with p5.js - A book about programming for in p5.js.
2- The Illusions Index- is an open-access resource fully searchable, interactive curated collection of illusions.
3-BiteSizeCoding-YouTube channel with lots of fun resources for beginners.
