<canvas id="canvas"></canvas>
body{
margin:0;
padding:0;
overflow:hidden;
background: url("https://d2v9y0dukr6mq2.cloudfront.net/video/thumbnail/A2KqU29/seamless-blue-particle-background-in-4k_41uagba1l__F0000.png") no-repeat center;
background-size: cover;
}
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
canvas.width = innerWidth;
canvas.height = innerHeight;
var mouse = {
x: undefined,
y: undefined
}
var maxRadius = 40;
var minRadius = 5;
var colors = ['rgba(42,130,216,.85)','rgba(0,92,188,.5)','rgba(255,255,255,.25)','rgba(157,205,255,.5)'];
var blurs = ['5px','10px','2px','0px','0px','5px'];
window.addEventListener('mousemove',function(e){
mouse.x = e.x;
mouse.y = e.y;
});
window.addEventListener('resize',function(){
canvas.width = innerWidth;
canvas.height = innerHeight;
init();
});
function Circle(x, y, dx, dy, radius) {
this.x = x;
this.y = y;
this.dx = dx;
this.dy = dy;
this.radius = radius;
this.color = colors[Math.floor(Math.random() * colors.length)];
this.draw = function(){
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2, false);
ctx.lineWidth = "2";
ctx.fillStyle = this.color;
ctx.fill();
}
this.update = function(){
if (this.x + this.radius > innerWidth || this.x - this.radius < 0) {
this.dx = -this.dx;
}
if (this.y + this.radius > innerHeight || this.y - this.radius < 0) {
this.dy = -this.dy;
}
this.x += this.dx*2;
this.y += this.dy*2;
/*interactivity
if (mouse.x - this.x < 50 && mouse.x - this.x > -50
&& mouse.y - this.y < 50 && mouse.y - this.y > -50) {// kiem tra chuot di chuyen vi tri so voi circle {
if (this.radius < maxRadius) { // neu radius <40 thi no se to len toi khi no =39 sau khi minh re chuot rra ngoai thi se // chay else if o duoi la radius>2 no se giam xuong' con 2
this.radius += 2;
}
} else if (this.radius >minRadius) {
this.radius -=2;
}*/
this.draw();
}
}
var circleArray = [];
function init() {
circleArray = [];
for (var i = 0; i < 100; i++) {
var radius = Math.random()*15 + 1;
var x = Math.random() * (innerWidth - radius*2) + radius;
var y = Math.random() * (innerHeight - radius*2) + radius;
var dx = (Math.random() - 0.5);
var dy = (Math.random() - 0.5);
circleArray.push(new Circle(x, y, dx, dy, radius));
}
}
function animate(){
requestAnimationFrame(animate);
ctx.clearRect(0, 0, innerWidth, innerHeight);
for (var i = 0; i < circleArray.length; i++) {
circleArray[i].update();
};
}
animate();
init();
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.