var canvas, ctx, h, w; var num, speed, rad, conn_dis, line_color; var particles = []; var current ; var colors = [ "#8C1178", "#F23869", "#BF30B6", "#1B4C8C", "#0F8AA6", "#3DFF00", "#FFFF00" ]; var mouse = { x: undefined, y: undefined }; //function to change visual when window is resized and on loading window.addEventListener("load", init); window.addEventListener("resize", init); function init() { //establishing some stuff canvas = document.getElementById("canvas"); ctx = canvas.getContext("2d"); h = canvas.height = window.innerHeight-8; w = canvas.width = window.innerWidth; let ran = Math.floor(Math.random() * (colors.length - 1)); line_color = colors[ran]; // control player by mousemovement canvas.onmousemove = e => { e.preventDefault(); mouse.x = e.clientX; mouse.y = e.clientY; }; canvas.ontouchmove = e => { mouse.x = e.touches[0].pageX; mouse.y = e.touches[0].pageY; } //to cancel touch effect after a while setInterval(function(){ mouse = { x: undefined, y: undefined }; },2400); particles = []; num = Math.floor((h > w ? h : w) / 3.2); speed = 1.7; rad = 1.5; conn_dis = 63; //console.log("width : " + w + "\nheight : " + h); for (let i = 0; i < num; i++) { particles.push(new Particle()); } //to get fps current = Date.now(); fps = document.getElementById("fps"); //console.log(particles); animate(); } //animation function animate() { calcFPS () //to paint the whole canvas ctx.beginPath(); ctx.fillStyle = "#262626"; ctx.rect(0, 0, w, h); ctx.fill(); ctx.closePath(); //to update obstacles for (let i = 0; i < particles.length; i++) { particles[i].draw(); particles[i].connect(); particles[i].update(); } requestAnimationFrame(animate); } //to draw circles function draw_circle( x, y, radius, angle_from, angle_to, fill_color, stroke_color, line_width ) { ctx.beginPath(); ctx.fillStyle = fill_color; ctx.arc(x, y, radius, angle_from, angle_to, false); ctx.fill(); ctx.closePath(); } class Particle { constructor() { this.x = Math.random() * (w - 2*rad) + rad; this.y = Math.random() * (h - 2*rad) + rad; this.vx = random(-speed,speed); this.vy = random(-speed,speed); } update() { //mouse move animation let diffX = Math.abs(this.x - mouse.x); let diffY = Math.abs(this.y - mouse.y); if (diffX < conn_dis && diffY < conn_dis) { if (this.x < mouse.x && this.x - diffX > 5) { this.x -= speed ; if (this.vx > 0) { this.vx = -this.vx; } } else if (this.x > mouse.x && this.x + mouse.x < w) { this.x += speed ; if (this.vx < 0) { this.vx = -this.vx; } } if (this.y < mouse.y && this.y - diffY > 5) { this.y -= speed ; if (this.vy > 0) { this.vy = -this.vy; } } else if (this.y > mouse.y && this.y + mouse.x < h) { this.y += speed ; if (this.vy < 0) { this.vy = -this.vy; } } } if (this.x > w-rad || this.x < rad) { this.vx = -this.vx; } if (this.y > h-rad || this.y < rad) { this.vy = -this.vy; } this.x += this.vx; this.y += this.vy; } draw() { draw_circle( this.x, this.y, rad, 0, Math.PI * 2, "yellow", "transparent", 0 ); } connect() { let a = { x: this.x, y: this.y }; for (let i = 0; i < particles.length; i++) { let b = { x: particles[i].x, y: particles[i].y }; let bet_dis = get_dis(a, b); if (bet_dis <= conn_dis) { ctx.beginPath(); ctx.lineWidth = 0.09; ctx.strokeStyle = line_color; //ctx.strokeStyle = "rgba(255,255,255," + bet_dis / conn_dis + ")"; ctx.moveTo(a.x, a.y); ctx.lineTo(b.x, b.y); ctx.closePath(); ctx.stroke(); } } } } function get_dis(a, b) { return Math.sqrt((a.x - b.x) * (a.x - b.x) + (a.y - b.y) * (a.y - b.y)); } //calculation of fps function calcFPS() { //current time - last let timeDiff = Date.now()- current; //update time current = Date.now(); fps.innerText = "fps: "+Math.floor(1000/timeDiff); } const random = (min,max) => { return Math.random()*(max-min) + min ; }

particle-connect