So what did I do exactly?
I made my input the location of my mouse (the x and y coordinates). I then worked to declare the type of movement I wanted to happen. It wasn’t anything particularly special, but this is essentially the more organized way of getting movement for multiple objects.
If I really wanted to I could have a million circles. I didn’t want to do that, because I wanted to show how the mouse input works as clearly as possible.
I could have just as easily done the keyboard, Up, Down, Left, Right arrow keys, but I like the real time updates this way… I am kind of a press and hold sort of person and I get annoyed easily if I hav to repeatedly press the keys.
Anyway… this is my code (you can also see it in the video).
const MAX_BALLS = 10000, balls = [];
let bg;
function setup() {
pixelDensity(displayDensity());
createCanvas(500, 500).mousePressed(createBall);
frameElement && (frameElement.width = width, frameElement.height = height);
bg = color(random(255),random(255),random(255));
}
function draw() {
background(bg);
ellipseMode(CENTER).noLoop();
strokeWeight(2.5).stroke((random(255), random(255),random(255))).fill((random(255), random(255),random(255)));
for (let b of balls) b.display();
}
function createBall() {
const b = balls.length == MAX_BALLS && balls.shift() || new Ball;
balls.push(b.setXY(mouseX, mouseY));
redraw();
}
class Ball {
static get DIAM() { return 50; }
constructor(x, y) { this.setXY(x, y); }
setXY(x, y) {
this.x = x, this.y = y;
return this;
}
display() { ellipse(this.x, this.y, Ball.DIAM, Ball.DIAM); }
}