Code for the Above Animation:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Image Styling</title>
</head>
<body>
<canvas id="canvas" style="border: 1px solid black; width:100%; height:100%;"></canvas>
<script>
var body = document.querySelector('body');
body.style.margin = 0;
var canvas = document.getElementById('canvas');
canvas.width = innerWidth;
canvas.height = innerHeight;
var c = canvas.getContext('2d');
window.addEventListener('mousemove', function() {
console.log('yes')
})
const colors = ['red', 'green', 'yellow', 'purple', 'blue']
function Circle(x, y, dx, dy, r, color) {
this.x = x;
this.y = y;
this.dx = dx;
this.dy = dy;
this.r = r;
this.draw = function() {
console.log('drawing');
c.beginPath();
c.arc(this.x, this.y, r, Math.PI*2, false);
c.strokeStyle = "green";
c.stroke();
c.fillStyle = color;
c.fill();
}
this.update = function() {
if (this.x > innerWidth) {
this.dx = -this.dx;
}
if (this.y > innerHeight - this.r) {
this.dy = -this.dy;
}
if (this.y < this.r) {
this.dy = -this.dy;
}
if (this.x > innerWidth - this.r) {
this.dx = -this.dx;
}
if (this.x <= this.r) {
this.dx = -this.dx;
}
this.x+= this.dx;
this.y+= this.dy;
this.draw();
}
}
var circleArray = [] ;
for (var i=0; i<100; i++) {
var cx = Math.random()*innerWidth;
var cy = Math.random()*innerHeight;
var dx = (Math.random() - 0.5)*7;
var dy = (Math.random() - 0.5)*8;
var radius = Math.random()*15 + 2;
var color = colors[Math.floor(Math.random()*colors.length)]
circleArray.push(new Circle(cx, cy, dx, dy, radius, color));
}
function animate() {
requestAnimationFrame(animate);
c.clearRect(0, 0, innerWidth, innerHeight);
for (var i=0; i < circleArray.length; i++) {
circleArray[i].update();
}
}
animate()
</script>
</body>
</html>
