Animation and Mouse

Computers are meant for expressing the concepts that are moving and creating patterns, finding optimum solution and repetitive tasks. It is not meant for static image like the one created in the earlier entry, shown below

Lets animate the things on the canvas. To animate the draw function plays a vital role. Because it is function that is Forever in loop. Anything that is put in there is created again and again. To create something that changes, we need something called variables. P5 allows us to use all the variable types of Javascript.

Variables in P5

Starting by Declaring, Initialize and then Use. Declaring is done at the top of the P5 code. Then initialising can happen either at setup function or draw function. Things have slowed down because the frameRate has been reduced to 25. Why the circle is moving continuosly away from the place it start? Take your mouse on the canvas and give a click

Map & Random Function

• windowWidth
• windowHeight
• width
• height

There is more to P5 than it meets the eyes. Map function that converts a particular range of values to a different range and assigns it to a variable. Random function returns a number between two values. These two functions are used in below visual...

The radius of circle is fluctuating due to the random() function, and try changing the location of the mouse and observe the color of the background change. That change is created by the map function. It opens up to interesting outcomes....like following