# 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()**,

**and**

*translate()***functions using the p5.js.**

*rotate()***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

**In the previous**

*draw().*

*blog***it was discussed that the setup() runs once, while the draw() runs repeatedly. In this project ,we will be mostly working in the**

*,***function.**

*draw()*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

**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 .**

*pop()*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

**Here , the angle is measured in**

*rotate(angle).***We are using**

*RADIANS .***,which is half the ratio of the circumference of a circle to its diameter and**

*HALF_PI***,which is one quarter the ratio of the circumference of a circle to its diameter.**

*QUARTER_PI*If you add ** HALF_PI** and

**to the first arc and**

*variable i***and**

*QUARTER_PI***to the**

*variable j***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.