p5.js example let t = 0; // time variable let r, g, b; function setup() { createCanvas(400, 400); noStroke(); r= random(255); g = random(255); b = random(255); } function draw() { background(10, 10); // translucent background (creates trails) // make a x and y grid of ellipses for (let x = 0; x <= width; x = x + 30) { for (let y = 0; y <= height; y = y + 30) { // starting point of each circle depends on mouse position const xAngle = map(mouseX, random(0.12), width, PI, 4 * PI, true); const yAngle = map(mouseY, random(0.12), height, PI, 4 * PI, true); // and also varies based on the particle's location const angle = xAngle * (x / width) + yAngle * (y / height); // each particle moves in a circle const myX = x + 100 * cos(2 * PI * t + angle); const myY = y + 100 * sin(2 * PI * t + angle); // was // const myX = x + 10 * sin(2 * PI * t + angle); // const myY = y + 10 * cos(2 * PI * t + angle); // fill(r, g, b, 127); ellipse(myX, myY, 20); // draw particle, value changed from 10 } } t = t + 0.005; // update time, value changd from 0.01 } // When the user clicks the mouse function mousePressed() { // Check if mouse is inside the circle let d = dist(mouseX, mouseY, 400, 400); if (d < 400) { // Pick new random color values r = random(255); g = random(255); b = random(255); } }