In this tutorial, we are going to make Ebbinghaus Illusion using p5.js.
What is the Ebbinghaus Illusion?
Before developing this illusion, let’s look at the origin of this illusion. It was discovered by the German psychologist Hermann Ebbinghaus (1850–1909). This illusion is also called Titchener circles. In this illusion, the yellow circle on the right seems to bigger in size as compared to the left hand side yellow circle .But in reality, both the circles are of the same size.This happens because the perception changes due to bigger and smaller petals of the flower. Possible in depth explanations of this illusion can be found at The Illusions Index. Here is how it is going to look at the end of this tutorial.
Create a new project using p5.js Web Editor. Functions are piece of code which take some input, process it and return an output. A new project in the p5js Web Editor has following two functions. The setup() function runs only once and draw() function runs in a loop. In setup() function a canvas of 600 pixels width and 400 pixels height is created. Canvas is an element in the browser window where we are going to draw our shapes. We will be doing most of the work in the draw function.
In the draw function, let’s make two circles of equal size using the function ellipse(x-axis , y-axis , width , height) , at different positions at the x-axis while the y-axis remains the same.Now ,give the same colour to both the circles in the fill(color).
You will have two circle appeared on your screen like this.
Now, around the first circle let’s draw bigger circles for petals .Start from the upper two circles .The y-axis of both the upper circles is same ,while the x-axis are calculated accordingly.
Give a different colour to the petals using RGB in the fill(r , g , b).Here ,we gave purple colour to the petals were r is 155, g is 0 and blue is 215. Add a noStroke() to remove borders around the circles.
In the similar way , now try making the side and lower petals by adjusting their x-axis and y-axis.
Start making small size petals around the second circle . Keep the same color of all the petals but reduce the size of the petal to 25.
Now try, arranging the rest of the petals by adjusting their x-axis and y-axis .The second circle with petals will appear like this.
This illusion is almost ready, now let’s add map() function to make the petals disappear and appear. This function re-maps a number from one range to another. In this case, we are going to map one range which is the position of mouse along x-axis starting from 0 in the left most side, ending at the width of canvas on right most side to another range starting from 200 and ending at 0.
Now ,put the local variable assigned to map() into the alpha value of the petals fill(r , g , b , alpha) function .In the fill, after the RGB values ,alpha value can be assigned to make the colours lighter.The lesser (0 –150) the alpha value the more the transparency .And the more the alpha value(150-255), lesser the transparency.So as the programme start, petals are visible and then they disappear as we move cursor across.
You can check the solution code here.
Try, increasing and decreasing the size of the petals by using the map()function and change the alpha value.
Congratulations!!! you made your first illusion.For more fun with illusions check this other simple illusion to try yourself.
Getting Started with p5.js- A book about programming for in p5.js.