let particles = [];

function setup() {
	canvas = createCanvas(innerWidth, innerHeight);
	canvas.canvas.parentElement.id = "bg_processing";
	background(255, 0, 0);
	noStroke();
	n = 30;
	
	for (var i = 0; i < n; i++) {
		particles.push(new ball(random(innerWidth), random(innerHeight)));
	}
}

function draw() {
	background(255);
	

	if (mouseIsPressed) {
		particles.push(new ball(mouseX, mouseY));
		n++;
	}

	for (var i = n-1; i >= 0; i--) {
		if (particles[i]) {
			if (particles[i].out()) {
				particles.splice(i, 1);
				n--;
			} else {
				particles[i].draw();
			}
		}
	}

}

function mousePressed() {

}


class ball {
	constructor(x, y) {
		this.x = x;
		this.y = y;
		this.t = 0;
		this.r = random(2, 20);

		this.xVel = random(-2, 2);
		this.yVel = random(-2, 2);

	}

	draw() {
		fill(this.t);
		ellipse(this.x, this.y, this.r, this.r);
		this.x += this.xVel;
		this.y += this.yVel;
		this.t++;
	}

	out() {
		return (this.x < 0 || this.x > innerWidth || this.y < 0 || this.y > innerHeight) || (this.t > 266);
	}
}