Art & Code: décembre 2010

vendredi 17 décembre 2010

Explosion - Code source

~/Documents/Aptana Studio Workspace/ParticuleDemo/Particule.js.html

var canvas;
var ctx;
//var trace ;
//var DEBUG = true;
var cw = 800;
var ch = 600;
var lstParts = [];
var nbrParts = 1000;
var p;


setupCanvas = function(){
    canvas =  document.createElement("canvas");
    ctx = canvas.getContext("2d");
    canvas.width = cw;
    canvas.height = ch;
    document.body.appendChild(canvas);
    ctx.setTransform(1,0,0,-1,cw/2,ch/2);
}


Particule = function(x,y) {

    this.x = 0;
    this.y = 0;
    this.prevx = 0;
    this.prevy = 0;
    this.angle = Math.PI;
    this.velx = 0;
    this.vely = 0;
    this.radius = Math.random()*8-4;
    this.color = "rgb(255,0,0)";
    this.dead = false;
    this.age = 0;

    this.draw = function(){
        ctx.strokeStyle = "rgb("+ Math.round(Math.random()*255)+","+
                                   Math.round(Math.random()*255)  + ","+
                                    Math.round(Math.random()*255) + ")";
        ctx.beginPath();
        ctx.moveTo(this.x,this.y);
        ctx.lineTo(this.x+this.velx,this.y+this.vely);
        ctx.closePath();
        ctx.stroke();
    }



    this.update = function(){
        this.age += 1;
        this.x +=  this.velx*0.5;
        this.y +=  this.vely*0.5;
        if (this.age > 100){
            this.dead = true;
        }
    }
}


Emitter = function(){

    this.setup = function(){
        var angle = 0;
        var r = 1;
        var x = Math.round(Math.random()*400-200);
        var y = Math.round(Math.random()*400-200);
        for (i=0; i< nbrParts; i++){
            var p = new Particule();
            p.x = x;
            p.y = y;
            p.velx = r*Math.cos(angle);
            p.vely = r*Math.sin(angle);
            lstParts.push(p);
            angle += Math.random()*6-3;
            r += .05;
        }
    }

    this.draw = function(){
        for (i=0; i< nbrParts; i++){
            lstParts[i].draw();
        }
    }


    this.update = function(){
        for (i=0; i< nbrParts; i++){
            lstParts[i].update();
            if (lstParts[i].dead == true){
                lstParts.splice(i,1);
            }
        }
    }
}

clearRect = function(){
    ctx.fillStyle =   "#00002"
    ctx.fillRect(-400,300,800,-600);
}

startAnimation = function(){
    clearRect();
    if (lstParts.length <= 0){
        p = new Emitter();
        p.setup();
    }
    p.update();
    p.draw();
}

main = function(){
    setupCanvas();
    p = new Emitter();
    p.setup();
    p.draw();
    setInterval("startAnimation()",10);
}

main();

jeudi 16 décembre 2010

HTML5-Canvas Explosion

Click to see the animation
Click to close

dimanche 5 décembre 2010

Code source de l'animation 'Bouncing'

~/Untitled.html

<!DOCTYPE>
<html>
<body>
<canvas id="canvas" /><br />
<script type="text/jscript" >

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');
var cw = 600;
var ch = 600;

canvas.width = cw;
canvas.height = ch;

random = Math.random;

// On définie un objet Particule
// et ses attributs.
Particule = function(){
                this.x = 0;
                this.y = 0;
                this.r = 0;
                this.vx = 0;
                this.vy = 0;
                this.dt = 0.1;
};

// Méthode partagée par tous
// les objets de type Particule
// L'appel de cette méthode permet d'initialiser
// les attributs définis dans la classe de base
Particule.prototype.init = function(){
    this.x = cw/2;
    this.y = ch/2;
    this.r = random()*40+3;
    this.vx = random()*20-5;
    this.vy = random()*20-5;
}

// Méthode partagée par tous
// les objets de type Particule
// L'appel de cette méthode permet 
// de visualiser une particule.
Particule.prototype.draw =  function(){
    ctx.beginPath();
    ctx.arc(this.x,this.y,this.r,0,Math.PI*2,false)
    ctx.closePath();
    ctx.shadowOffsetX = 5;
    ctx.shadowOffsetY = 5;
    ctx.shadowBlur    = 4;
    ctx.shadowColor   = 'rgba(255, 0, 0, 0.5)';
    ctx.fillStyle   = 'rgba(255, 130, 0, 0.5)';
    ctx.fill();
}

// Méthode partagée par tous
// les objets de type Particule
// L'appel de cette méthode permet 
// de mettre à jour les positions et 
// vitesses de chaque particule
Particule.prototype.update = function(){
    if (this.x > cw) this.vx *= -1;
    if (this.x < 0) this.vx *= -1;
    if (this.y < 0) this.vy *= -1;
    if (this.y > ch) this.vy  *= -1;
    this.x += this.vx*this.dt;
    this.y += this.vy*this.dt;
}

// Liste contenant les particules
lstPart = [];

// Nombre de particules
nbrPart = 55;


// On crée les particules et on les ajoute
// à la liste
for (var i = 0; i < nbrPart; i++){
    p = new Particule();
    p.init();
    lstPart.push(p)
}

// Procédure appelé  à interval régulier
updateScene = function() {
    ctx.clearRect(0,0,cw,ch)
    for (var i=0; i< nbrPart; i++){
        lstPart[i].update();
        lstPart[i].draw();
    }
}

// La procédure 'updateScene' est appelée
// 30 fois par seconde
setInterval('updateScene()',30);
</script>

</body>
</html>

Bouncing

Click to see the animation