Last active
September 7, 2018 07:05
-
-
Save pixlpa/9397682 to your computer and use it in GitHub Desktop.
Super basic particle drawing with canvas
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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(); | |
}; | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.