"Random Moving in Canvas "
Bootstrap 3.0.0 Snippet by MohamedSamiKhiari

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <canvas id="nokey" width="800" height="800"> </canvas> </div> </div>
*{ -webkit-box-sizing: border-box; box-sizing: border-box; } html, body{ height: 100%; margin: 0; padding: 0; background-color: #333; overflow: hidden; } canvas{ background-color: #000; }
var canvas = document.getElementById('nokey'), can_w = parseInt(canvas.getAttribute('width')), can_h = parseInt(canvas.getAttribute('height')), ctx = canvas.getContext('2d'); // console.log(typeof can_w); var ball = { x: 0, y: 0, vx: 0, vy: 0, r: 0, alpha: 1, phase: 0 }, ball_color = { r: 207, g: 255, b: 4 }, R = 2, balls = [], alpha_f = 0.03, alpha_phase = 0, // Line link_line_width = 0.8, dis_limit = 260, add_mouse_point = true, mouse_in = false, mouse_ball = { x: 0, y: 0, vx: 0, vy: 0, r: 0, type: 'mouse' }; // Random speed function getRandomSpeed(pos){ var min = -1, max = 1; switch(pos){ case 'top': return [randomNumFrom(min, max), randomNumFrom(0.1, max)]; break; case 'right': return [randomNumFrom(min, -0.1), randomNumFrom(min, max)]; break; case 'bottom': return [randomNumFrom(min, max), randomNumFrom(min, -0.1)]; break; case 'left': return [randomNumFrom(0.1, max), randomNumFrom(min, max)]; break; default: return; break; } } function randomArrayItem(arr){ return arr[Math.floor(Math.random() * arr.length)]; } function randomNumFrom(min, max){ return Math.random()*(max - min) + min; } console.log(randomNumFrom(0, 10)); // Random Ball function getRandomBall(){ var pos = randomArrayItem(['top', 'right', 'bottom', 'left']); switch(pos){ case 'top': return { x: randomSidePos(can_w), y: -R, vx: getRandomSpeed('top')[0], vy: getRandomSpeed('top')[1], r: R, alpha: 1, phase: randomNumFrom(0, 10) } break; case 'right': return { x: can_w + R, y: randomSidePos(can_h), vx: getRandomSpeed('right')[0], vy: getRandomSpeed('right')[1], r: R, alpha: 1, phase: randomNumFrom(0, 10) } break; case 'bottom': return { x: randomSidePos(can_w), y: can_h + R, vx: getRandomSpeed('bottom')[0], vy: getRandomSpeed('bottom')[1], r: R, alpha: 1, phase: randomNumFrom(0, 10) } break; case 'left': return { x: -R, y: randomSidePos(can_h), vx: getRandomSpeed('left')[0], vy: getRandomSpeed('left')[1], r: R, alpha: 1, phase: randomNumFrom(0, 10) } break; } } function randomSidePos(length){ return Math.ceil(Math.random() * length); } // Draw Ball function renderBalls(){ Array.prototype.forEach.call(balls, function(b){ if(!b.hasOwnProperty('type')){ ctx.fillStyle = 'rgba('+ball_color.r+','+ball_color.g+','+ball_color.b+','+b.alpha+')'; ctx.beginPath(); ctx.arc(b.x, b.y, R, 0, Math.PI*2, true); ctx.closePath(); ctx.fill(); } }); } // Update balls function updateBalls(){ var new_balls = []; Array.prototype.forEach.call(balls, function(b){ b.x += b.vx; b.y += b.vy; if(b.x > -(50) && b.x < (can_w+50) && b.y > -(50) && b.y < (can_h+50)){ new_balls.push(b); } // alpha change b.phase += alpha_f; b.alpha = Math.abs(Math.cos(b.phase)); // console.log(b.alpha); }); balls = new_balls.slice(0); } // loop alpha function loopAlphaInf(){ } // Draw lines function renderLines(){ var fraction, alpha; for (var i = 0; i < balls.length; i++) { for (var j = i + 1; j < balls.length; j++) { fraction = getDisOf(balls[i], balls[j]) / dis_limit; if(fraction < 1){ alpha = (1 - fraction).toString(); ctx.strokeStyle = 'rgba(150,150,150,'+alpha+')'; ctx.lineWidth = link_line_width; ctx.beginPath(); ctx.moveTo(balls[i].x, balls[i].y); ctx.lineTo(balls[j].x, balls[j].y); ctx.stroke(); ctx.closePath(); } } } } // calculate distance between two points function getDisOf(b1, b2){ var delta_x = Math.abs(b1.x - b2.x), delta_y = Math.abs(b1.y - b2.y); return Math.sqrt(delta_x*delta_x + delta_y*delta_y); } // add balls if there a little balls function addBallIfy(){ if(balls.length < 20){ balls.push(getRandomBall()); } } // Render function render(){ ctx.clearRect(0, 0, can_w, can_h); renderBalls(); renderLines(); updateBalls(); addBallIfy(); window.requestAnimationFrame(render); } // Init Balls function initBalls(num){ for(var i = 1; i <= num; i++){ balls.push({ x: randomSidePos(can_w), y: randomSidePos(can_h), vx: getRandomSpeed('top')[0], vy: getRandomSpeed('top')[1], r: R, alpha: 1, phase: randomNumFrom(0, 10) }); } } // Init Canvas function initCanvas(){ canvas.setAttribute('width', window.innerWidth); canvas.setAttribute('height', window.innerHeight); can_w = parseInt(canvas.getAttribute('width')); can_h = parseInt(canvas.getAttribute('height')); } window.addEventListener('resize', function(e){ console.log('Window Resize...'); initCanvas(); }); function goMovie(){ initCanvas(); initBalls(20); window.requestAnimationFrame(render); } goMovie(); // Mouse effect canvas.addEventListener('mouseenter', function(){ console.log('mouseenter'); mouse_in = true; balls.push(mouse_ball); }); canvas.addEventListener('mouseleave', function(){ console.log('mouseleave'); mouse_in = false; var new_balls = []; Array.prototype.forEach.call(balls, function(b){ if(!b.hasOwnProperty('type')){ new_balls.push(b); } }); balls = new_balls.slice(0); }); canvas.addEventListener('mousemove', function(e){ var e = e || window.event; mouse_ball.x = e.pageX; mouse_ball.y = e.pageY; // console.log(mouse_ball); });

Related: See More


Questions / Comments: