initial commit, and probably the last

This commit is contained in:
Mahdi Dibaiee 2015-01-06 18:59:15 +03:30
commit fd8d4aca74
3 changed files with 110 additions and 0 deletions

18
index.html Normal file
View File

@ -0,0 +1,18 @@
<!DOCTYPE html>
<html>
<head>
<title>Scatter</title>
<meta charset='UTF-8'>
</head>
<style>
body, html {
margin: 0;
}
</style>
<body>
<canvas id='c' width='1000' height='700'></canvas>
<script src='main.js'></script>
</body>
</html>

92
main.js Normal file
View File

@ -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();

BIN
scr.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 21 KiB