Creating Illusions in p5.js -Part 3 (Moving Dot Illusion)

This tutorial is about how to create the Moving Dot Illusion in p5.js .In Part1 and Part2 ,their was a discussion about ellipse(),line() and for loop.In this tutorial, we will use the function arc(),translate() and rotate() functions using the p5.js.

What is the Moving Dots Illusion?

In this Moving Dots Illusion ,the dots seems to move in a wave like motion,but in reality the dots are rotating on their place , just creating an illusion of wave motion.Here it how it looks.

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 an arc(x , y , width , height , start , stop) .Arc takes seven parameters to start with.

Now ,give the fill(‘color’) , stroke(‘color’) and strokeWeight(thickness).

Challenge:

Try , making the arc in the opposite direction now.Hint: Keep all the parameters same and change the last two parameters to PI ,0.And give the same fill() and strokeWeight() but different stroke() color.

Welldone! , you have made your first circle with help of arcs .Now, to make multiple of these all across and down , let’s use the for loop to make our lives easier.

Next step is to make the arcs rotate at different speed.The first step is to use the function translate(x,y).This function changes the original x-axis and y-axis positions .For example , the origin is x=20 and y=20 ,now translate it to a new origin x=250 and y=250.

Since, both the arcs needs to be translated and rotate separately ,we need to put the code of arcs separately inside the push() and pop() functions .The push() and pop() functions consolidates the code of one arc from affecting the other arc .Now, the translate() of both arcs ,will take variable i and j in it .

Let’s make a global variable of angle and set it’s value to zero.

In the function draw , add at the very end the angle variable and increment it.

Let’s use rotate() function now ,it uses the angle variable in it rotate(angle).Here , the angle is measured in RADIANS .We are using HALF_PI ,which is half the ratio of the circumference of a circle to its diameter and QUARTER_PI ,which is one quarter the ratio of the circumference of a circle to its diameter.

If you add HALF_PI and variable i to the first arc and QUARTER_PI and variable j to the second arc rotate codes, the arcs will start to rotate at the different rates .

Last thing to do , is to change the background to either blue or cyan or any other colour you have chosen for the arcs.Congratulations!! the illusion is ready to try out.

You can check the solution code here.

Reference:

1-Getting Started with p5.js- A book about programming for in p5.js.

2-p5.js Reference: p5.js website with reference for different functionalities.