commit fd8d4aca7449671dcf50c44e4185dd0eac6f4309 Author: Mahdi Dibaiee Date: Tue Jan 6 18:59:15 2015 +0330 initial commit, and probably the last diff --git a/index.html b/index.html new file mode 100644 index 0000000..1408df9 --- /dev/null +++ b/index.html @@ -0,0 +1,18 @@ + + + + Scatter + + + + + + + + + + diff --git a/main.js b/main.js new file mode 100644 index 0000000..5a43fad --- /dev/null +++ b/main.js @@ -0,0 +1,92 @@ +var $c = document.getElementById('c'), + c = $c.getContext('2d'), + // RGBA colors + colors = [[224, 56, 56, 1], [252, 191, 22, 1], + [129, 219, 39, 1], [39, 162, 219, 1], + [219, 39, 159, 1]], + balls = []; + + +// To reduce calculations +const fourty = Math.PI/4; +const ninety = Math.PI/2; + +// Degrees, used to move circles in their direction +// 45, 135, 225, 315 +var degrees = [fourty, fourty*3, Math.PI+fourty, Math.PI+fourty*3]; + +function add(x, y) { + var index = Math.floor(Math.random()*colors.length); + var radius = Math.random()*10; + balls.push({ + color: colors[index].slice(0), + x: Math.random() < 0.5 ? x+Math.random() : x-Math.random(), + y: Math.random() < 0.5 ? y+Math.random() : y-Math.random(), + r: radius, + deg: degrees[Math.floor(Math.random()*degrees.length)] + }); +} + +(function loop() { + mozRequestAnimationFrame(function() { + c.clearRect(0, 0, $c.width, $c.height); + + for( var i = 0; i < balls.length; i++ ) { + var ball = balls[i]; + + // If ball has faded away completly, remove it + if(ball.color[3] < 0.01) { + balls = balls.slice(0, i).concat(balls.slice(i+1, balls.length)); + i--; + continue; + } + ball.color[3] -= 0.01; + + var dx = ball.x + Math.random()*5*Math.sin(ball.deg); + var dy = ball.y + Math.random()*5*Math.cos(ball.deg); + ball.x = dx; + ball.y = dy; + ball.r = ball.r + 1; + + c.beginPath(); + c.fillStyle = 'rgba(' + ball.color.join(',') + ')'; + c.arc(dx, dy, ball.r, 0, 2*Math.PI); + c.fill(); + } + loop(); + }) +})(); + + +var isMouseDown = false, + interval = null, + mouse = {}; + +$c.addEventListener('mousedown', function(e) { + isMouseDown = true; + mouse = {x: e.pageX, y: e.pageY}; + interval = setInterval(function() { + if(isMouseDown) { + add(mouse.x, mouse.y); + } + }, 100) +}) +$c.addEventListener('mouseup', function() { + isMouseDown = false; + clearInterval(interval); +}) +$c.addEventListener('mousemove', function(e) { + if(isMouseDown) { + add(e.pageX, e.pageY) + } + mouse = {x: e.pageX, y: e.pageY}; +}) + + +window.onresize = function() { + $c.setAttribute('width', window.innerWidth); + $c.setAttribute('height', window.innerHeight); +} + +window.onresize(); + diff --git a/scr.png b/scr.png new file mode 100644 index 0000000..add2509 Binary files /dev/null and b/scr.png differ