Grid Animation

This animation is made of four, four by four grid growing lines animating at different time intervals that repeats itself through the canvas.I created this in a few steps. First I figured out how to create a regular array of growing lines. Then I learned how to change direction of the lines and finally the time interval. Through this script I learned a few syntax :

- sin(), cos(), tan()

- frameCount

- for loop

- push(); pop();

I set up the animation to allow some variables to be controlled which allows the output to be changed. The output can be changed by changing the distance between the dots, thickness of the line, the size of the circles, the speed of the animation and each change generates a different outcome. Some videos below show different outputs that can be generated through changing the variables.

Click on image for live version!