February 4, 2018

Animation

Animation is just a sequence of frames. If I would clear everything and draw slightly different image — it would be an animation! All code that is in the update function would be called each frame. It would receive delta time from last frame and full time as arguments.

Pixelart canvas is optimized for drawing only changed pixels.

By the way, you can see some numbers above the canvas. They are displaying the amount of points that have changed from the previous frame


px.frameRate = 24
rect(0,0,w,h, 0x00006A)
update = function(dt, t){
  rect(0,0,w,h,0x00006A);
  var rainbow = [0xff0000, 0xffff00, 0x00ff00,0x00ffff, 0x0000ff];

  for(var i = 0; i < 50; i++) {
        var x = rand( w );
        point( x, rand( h - (x-20)/w*h )+(x-10)/w*h/2, rand( rainbow ) );
  }
    
  rainbow.forEach(function(color, y){
      for(var x = 0; x < w; x++){            
          point(
            x, 
            sin(x/5+t*20)*h/6*(w-x)/h+h/2+y, 
            color
          );
      }
  });
}

Nyan


px.frameRate = 2
rect(0,0,w,h, 0x00006A);

var nyanColors = {
    stroke: 0x010002, // stroke
    bread: 0xffd2a0, // bread
    pink: 0xffa4ff, // pink
    pinkerDots: 0xff44ae, // pinker dots
    grey: 0xa8a8a8, // grey legs
    cheeks: 0xffa3a8, // cheeks
    whites: 0xffa3a8 // whites
};
var bodyW = 16, bodyH = 14;
var randDots = [];
for(var i = 0; i < bodyW/2; i++){
    randDots.push(new Point(rand(bodyW-5)+3, rand(bodyH-5)+3))
}
var drawNyan = function(x, y){
    var left = x-bodyW/2+2, top = y - bodyH/2, bottom = y + bodyH/2, right = x+bodyW/2+2;




    rect(left+1, top+1, bodyW-1, bodyH-1, nyanColors.bread)
    rect(left+3, top+3, bodyW-5, bodyH-5, nyanColors.pink)

    line(left+2, top, right - 2, top, nyanColors.stroke);
    line(left+2, bottom, right - 2, bottom, nyanColors.stroke);
    line(left, top+2, left, bottom-2, nyanColors.stroke);
    line(right, top+2, right, bottom-2, nyanColors.stroke);

    point(left+1, top+1, nyanColors.stroke);
    point(right-1, top+1, nyanColors.stroke);
    point(left+1, bottom-1, nyanColors.stroke);
    point(right-1, bottom-1, nyanColors.stroke);

    randDots.forEach((p)=>point(p.x+left, p.y+top, nyanColors.pinkerDots))
};
update = function(dt, t){
    rect(0,0,w,h,0x00006A);
    var rainbow = [0xff0000, 0xffff00, 0x00ff00,0x00ffff, 0x0000ff];

    for(var i = 0; i < 50; i++) {
        var x = rand( w );
        point( x, rand( h - (x-15)/w*h )+(x-10)/w*h/2, rand( rainbow ) );
    }

    rainbow.forEach(function(color, y){
        for(var x = 0; x < w-20; x++){
            point(
                x,
                sin(x/5+t*20)*h/6*(w-x-10)/h+h/2+y,
                color
            );
        }
    });
    var x = w-18-8, y = 2;
    drawNyan(w - 18|0, sin(x/5+t*20)*h/6*(w-x-10)/h+h/2+y|0)

}