Skip to content

Instantly share code, notes, and snippets.

@pixlpa
Last active September 7, 2018 07:05
Show Gist options
  • Save pixlpa/9397682 to your computer and use it in GitHub Desktop.
Save pixlpa/9397682 to your computer and use it in GitHub Desktop.
Super basic particle drawing with canvas
var palette = ['#b8cab5','#9fc3bc','#338ab3'];
var frame = window.setInterval(framedraw,40);
var blitx = new Array();
var canvas = document.getElementById('cc');
var c = canvas.getContext('2d');
for(var i = 0;i<100;i++){
blitx[i] = new Blit(Math.random()*800,Math.random()*400,10,10);
blitx[i].vx = Math.random()*5-2.5;
blitx[i].vy = Math.random()*5-2.5;
}
function framedraw(){
c.strokeStyle='ddd';
c.clearRect(0,0,800,400);
for(var i = 0;i<100;i++){
if(i>0){
c.beginPath();
c.moveTo(blitx[i-1].x,blitx[i-1].y);
c.lineTo(blitx[i].x,blitx[i].y);
c.stroke();
c.closePath();
}
}
for(var i = 0;i<100;i++){
blitx[i].draw();
}
}
c.fillStyle = '#000';
c.fillRect(0,0,20,20);
function Blit(x,y,w,h){
this.x = x;
this.y = y;
this.vx = 0;
this.vy = 0;
this.color = palette[Math.floor(Math.random()*3)];
this.w = w;
this.h = h;
this.draw = function(){
this.x += this.vx;
if(this.x>800 || this.x<0) this.vx *= -1;
this.y += this.vy;
if(this.y>400 || this.y<0) this.vy *= -1;
c.moveTo(this.x-this.w*0.5,this.y+this.h*0.5);
c.beginPath(); c.lineTo(this.x,this.y-this.h*0.5);
c.lineTo(this.x+this.w*0.5,this.y+this.h*0.5);
c.lineTo(this.x-this.w*0.5,this.y+this.h*0.5);
c.closePath();
c.fillStyle= this.color;
c.fill();
};
};
@fxi
Copy link

fxi commented Sep 7, 2018

For lazy people, here is a jsfiddle with this code :
http://jsfiddle.net/fxi/agmutsLh/
There is an issue with the width of the canvas, but we see moving things, which is already fun.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment