const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
var tablica = [];
var radius = 20;

function circle(x, y, radius, color1, color2, color3) {
	this.x = x;
	this.y = y;
	this.radius = radius;
	this.color1 = color1;
	this.color2 = color2;
	this.color3 = color3;
}

function move(x, y, radius, color1, color2, color3, i, speedX, speedY) {
	this.x = x;
	this.y = y;
	this.radius = radius;
	this.color1 = color1;
	this.color2 = color2;
	this.color3 = color3;
	this.i = i;
	this.speedX = speedX;
	this.speedY = speedY;

	if (this.x-radius < 0 || this.x+radius > canvas.width) {
		this.speedX = -(this.speedX);
	}
	if (this.y-radius < 0 || this.y+radius > canvas.height) {
		this.speedY = -(this.speedY);
	}

	this.x = this.x + this.speedX;
	this.y = this.y + this.speedY;

	tablica[this.i].x = this.x;
	tablica[this.i].y = this.y;
	tablica[this.i].speedX = this.speedX;
	tablica[this.i].speedY = this.speedY;

	setTimeout(move, 25, this.x, this.y, this.radius, this.color1, this.color2, this.color3, this.i, this.speedX, this.speedY);
}

function aktual() {
	ctx.clearRect(0, 0, canvas.width, canvas.height);
	for (var i=0; i<tablica.length; i++) {
		ctx.beginPath();
		ctx.arc(tablica[i].x, tablica[i].y, tablica[i].radius, 0, 2*Math.PI);
		ctx.fillStyle = "rgba(" + tablica[i].color1 + "," + tablica[i].color2 + "," + tablica[i].color3 + "," + "1)";
		ctx.fill();
		ctx.strokeStyle = "rgba(" + (tablica[i].color1-100) + "," + (tablica[i].color2-100) + "," + (tablica[i].color3-100) + "," + "1)";
		ctx.stroke();
	}
	setTimeout(aktual, 1);
}

for (var i=0; i<75; i++) {
	var x = -10;
	var y = -10;
	while (x-radius < 0 || x+radius > canvas.width) {
		var x = Math.floor((Math.random()*canvas.width)+0);
	}
	while (y-radius < 0 || y+radius > canvas.height) {
		var y = Math.floor((Math.random()*canvas.height)+0);
	}
	var color1 = Math.floor(Math.random()*255);
	var color2 = Math.floor(Math.random()*255);
	var color3 = Math.floor(Math.random()*255);
	var speedX = Math.floor(Math.random()*10-5);
	var speedY = Math.floor(Math.random()*10-5);
	var Circle = new circle(x, y, radius, color1, color2, color3);
	ctx.beginPath();
	ctx.arc(x, y, radius, 0, 2*Math.PI);
	ctx.fillStyle = "rgba(" + color1 + "," + color2 + "," + color3 + "," + "1)";
	ctx.fill();
	ctx.strokeStyle = "rgba(" + (color1-100) + "," + (color2-100) + "," + (color3-100) + "," + "1)";
	ctx.stroke();
	tablica.push(Circle);
	move(x, y, radius, color1, color2, color3, i, speedX, speedY);
}

aktual();