Creating Illusions in p5.js -Dynamic Kanizsa Illusion -Part 4
Optical illusions are the fascinating way to explore the inner working of our brain’s perception of the world.In our final tutorial about illusions we will be creating the dynamic version of Kanizsa Illusion.
What is a Kanizsa Illusion ?
In this Illusion , the illusory contours gives the perception of shape .The shape seem to sit higher than the Pac-Man arcs forming it.This illusion was first discovered in 1955 by Gaetano Kanizsa , an Italian artist and psychologist. The physiological explanation according to Peterhans et al. (1986) is — The illusory completed contour can be explained by the action of end-stopped neurons in the visual cortex. These cells correspond to elongated receptive fields on the retina and can fire selectively for both length and orientation of stimulus.
There are two kinds of Kanizsa illusions — Kanizsa square and Kanizsa triangle.
This tutorial is inspired by the Royal Institution Christmas lecture of Professor Bruce Hood where he explained about this illusion.
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.
Start by making an arc(x-axis , y-axis , width , height , start angle , end angle).In the start angle give PI (or 180 degrees) and in the end angle give HALF_PI( or 90 degrees) .In degrees PI+HALF_PI makes 270 degrees angle , giving a Pac-Man like arc.
To rotate in 2D ,we need to translate it first.Use the function translate(),put the values we have given before in the x and y of arc in it .Translate becomes the new origin of the arc , so in the arc we now will put x=0 and y=0.It quiet helpful, as it makes the object rotate around its own axis.
In this figure it is shown , how to position the arcs by using HALF_PI ,will give the following pattern.So, the first arc on the left will have HALF_PI , the second arc on the right will have HALF_PI *2 and in the similar way the right lower and then left lower arcs will be rotated.
Let’s start with the first arc on the left and in the rotate() put HALF_PI to position it. Now, put the code inside the push() and pop() function to consolidate your code .This means the code for one arc does not affect the code for the other arcs.
In the second arc on the right rotate HALF_PI *2.
Similarly the third arc on the bottom right will have HALF_PI *3.
Finally , the fourth arc on the bottom left will have HALF_PI *4. There you go ,the first pattern is ready .But it still needs the angle variable to rotate.
Make the global variable of angle and initiate it by 0.
Then , increment the variable angle in the function draw().
Now, add the variable angle in each of the function rotate().The arcs are rotating but in different ways. Not something we are expecting.Hmm!!
If we make the 1 and 3 arcs rotate clockwise by adding the angle and the 2 and 4 arcs rotate anticlockwise by subtracting the angle, we should get the unified movement of the arcs. Let’s try.
Yes!!! ,it worked and now we can see the arcs forming a illusion of a box as they reach the middle.
Challenge:
Try, positioning the arcs in this way now . Hint: Use the marked numbers to position the arcs . Now , use the angle in such a way that the square seems to move across.
If you have done it .Congratulations!!!. If not don’t worry .
You can check the solution code here. Happy Coding!!!!.
Some other examples of Kanizsa Illusion.
Reference:
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- Website with lots of fun resources for beginners.
4-RI Channel-Royal Institution of Science YouTube Channel.
