P5js


#1

found this code in a book about p5js. although i copied the code into p5js to see what it does , i still have no idea what the code is saying or how it makes ht eporgram perform what is is trying to do the book explained it like this but I still don’t get it could someone explain it in English please by going thorugh what each individual line of code does exactly? :

what the book says: example 11- 8: in this example, there are two arrays to store the position of the mouse, one for the x coordinate and one for the y coordinate. these arrays store the location of the mouse for the previous 60 frames. with each new frame, the oldest x and y coordinate values are removed and replaced with the current mouseX and mouseY values. the new values are added to the first position of the array but before this happens each value in the array is moved from one position to the right. also at each frame, all 60 coordinates are used to draw a series of ellipses on the screen.
The book is: Make Getting Started With p5.js

heres the code just put it in the p5js web ediotr to see what it does:

var num = 60;
var x = [];
var y = [];

function setup() {
createCanvas(500, 500);
noStroke();

for (var i = 0; i < num; i++) {
x[i] = 0;
y[i] = 0;
}
}
function draw() {
background(0);
//copy array values from back to front
for (var i = num - 1; i > 0; i–) {
x[i] = x[i-1];
y[i] = y[i-1];
}
x[0] = mouseX; // set first element
y[0] = mouseY; // set first element
for (var i = 0; i < num; i++) {
fill(i * 4);
ellipse(x[i], y[i], 40, 40);
}
}