let particles = [];

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

function draw() {
	background(255);
	

	if (mouseIsPressed) {
		p = particles[total_i];
		p.init();
		p.x = innerWidth/2+x;
		p.y = innerHeight/2+y-230;
		particles[pc] = p;


	}
	//for (var j = 0; j < 7; j++) {
		for (var i = 0; i < n; i++) {
			particles[i].draw();
		}
	//}
	

	if (frameCount%1==0) {
		console.log("sdd");
		pc = 0;
		nc = 90;
		step = nc/TWO_PI;
		total_i = 0;
		for (var i = 0; i < nc; i++) {
			y = sin(i*step)*140;
			x = cos(i*step)*140;
			p = particles[total_i];
			if (p) {
				p = particles[total_i];
				total_i++;
			}
			p.init();
			p.x = innerWidth/2+x;
			p.y = innerHeight/2+y-230;
			particles[pc] = p;

			pc++;
			total_i++;
		}

		x = 0;
		y = -370;
		for (var i = 0; i < 28; i++) {

			p = particles[total_i];
			p.init();
			p.x = innerWidth/2+x;
			p.y = innerHeight/2+y;
			particles[pc] = p;
			y = y + 10;
			pc++;
			total_i++;

		}

		x = 0;
		y = -270;
		for (var i = 0; i < 12; i++) {

			y = y + 10;
			x = x + 10;


			p = particles[total_i];
			p.init();
			p.x = innerWidth/2-x;
			p.y = innerHeight/2+y;
			particles[pc] = p;

			pc++;
			total_i++;

			p = particles[total_i];
			p.init();
			p.x = innerWidth/2+x;
			p.y = innerHeight/2+y;
			particles[pc] = p;

			pc++;
			total_i++;
		}
	}


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


	

}

function mousePressed() {

}


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

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

		this.speed = 20;

	}

	init() {
		this.t = 0;
		this.st = 3;
		this.r = random(2, 20);

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

		this.speed = 20;
	}

	draw() {
		if (this.t > 10) {
			this.st = this.st + 2;
			fill(this.t*5, this.t+70, 200);
		} else {
			fill(40, 0, 20);
		}
		ellipse(this.x, this.y, this.r, this.r);
		this.x += this.xVel;
		this.y += this.yVel;
		this.y-=(this.t/15);
		this.t+=this.st;
		if (this.speed > 0) {
			this.speed = this.speed - 0.4;
		}
	}

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