Skip to content

Instantly share code, notes, and snippets.

@maxlibin
Created November 19, 2013 08:22
Show Gist options
  • Save maxlibin/7542055 to your computer and use it in GitHub Desktop.
Save maxlibin/7542055 to your computer and use it in GitHub Desktop.
A Pen by max.
<canvas id="myCanvas" width="1200" height="800"></canvas>
window.requestAnimFrame = (function(callback) {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
var canvas = document.getElementById("myCanvas"),
ctx = canvas.getContext("2d");
var amount = 20,
particle = [];
trans = 0.4;
function Particles(x, y, distance, _color){
this.x =x;;
this.y =y;
this.distance = distance;
this.velocity = distance * (Math.random());
this.radius = distance * 3;
this.color = _color;
}
Particles.prototype.draw = function(){
ctx.fillStyle = this.color;
ctx.beginPath();
ctx.arc(this.x,this.y, this.radius, 0, 2*Math.PI, false);
ctx.fill();
}
function loop(){
clearContext();
for(i =0; i< particle.length; i++){
var p = particle[i];
(p.x > canvas.width) ? p.x =0 : p.x +=p.distance * (Math.random() * trans);
(p.y > canvas.width) ? p.y =0 : p.y +=p.distance * (Math.random() * trans);
for(j = i +1; j< particle.length; j++){
p2 = particle[j];
distance(p, p2);
}
function distance(p1, p2){
var dx = p1.x-p2.x;
var dy = p1.y-p2.y;
var ax = dx/20000
ay = dy/20000;
if((dx + dy) < 500){
// Draw the line
ctx.beginPath();
ctx.strokeStyle = p.color;
ctx.moveTo(p.x, p.y);
ctx.lineTo(p2.x, p2.y);
ctx.stroke();
p1.x -=ax;
p2.x -=ax;
p1.y -=ay;
p2.y -=ay
}
}
/*p.y -=1;*/
/*p.x +=Math.sin(t)*1000; */
/* (p.x > canvas.width) ? p.x -=1 : p.x +=1;*/
p.draw();
}
requestAnimFrame(loop);
}
for(i=0; i < amount; i++){
var randomColor = ["white", "blue", "white", "green", "red", "#eec41b", "#f32a2a", "#1beee2", "#ee661b"];
var randomNum = Math.round( Math.random() * randomColor.length) + 1;
ps= new Particles(Math.random() * canvas.width, Math.random()*canvas.height, Math.random() * 3, randomColor[randomNum]);
particle.push(ps);
}
requestAnimFrame(loop);
clearContext = function(){
ctx.clearRect(0,0,canvas.width,canvas.height);
}
body { background:#000;}
#canvas {
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment