A Pen by Justin Herrick.

HfgGo.markdown

HfgGo

A Pen by Justin Herrick on CodePen.

License.

index.html

<!-- Drawing with JS and Canvas -->

<!-- Look Ma, no HTML/CSS! -->

script.js

document.addEventListener('DOMContentLoaded', function(){

  document.body.appendChild(document.createElement('canvas'));
  var canvas = document.getElementsByTagName('canvas')[0];

  canvas.width = 800;
  canvas.height = 600;
  canvas.style.display = 'block';
  canvas.style.margin  = ' 0 auto';
  var ctx = canvas.getContext('2d');
  var oldTime, delta;

  var imgObj = {
    name: 'face',
    colors: {
      teal:  'rgb(175, 218, 214)',
      black: 'rgb(0,0,0)'
    },
    layers: [
      { color: 'teal', x: 10, y:  0,  width: 100, height: 10 },
      { color: 'teal', x:  0, y: 10,  width: 120, height: 10 },
      { color: 'teal', x:  0, y: 20,  width: 120, height: 80 },
      { color: 'teal', x: 10, y: 100, width: 100, height: 10 },
      { color: 'black', x: 30, y: 30,  width:  10, height: 10 },
      { color: 'black', x: 80, y: 30,  width:  10, height: 10 },
      { color: 'black', x: 30, y: 70,  width:  10, height: 10 },
      { color: 'black', x: 80, y: 70,  width:  10, height: 10 },
      { color: 'black', x: 40, y: 80,  width:  40, height: 10 }
    ]
  };

  function draw(img, x, y) {
    for (var i = 0; i < img.layers.length; i++) {
      var data = img.layers[i];
      var loc  = {
            x: (x||0) + data.x,
            y: (y||0) + data.y
          };
      ctx.fillStyle = img.colors[data.color];
      ctx.fillRect(loc.x, loc.y, data.width, data.height);
    }
  }

  var bounceFace = { 
    pos: { 
      x: 150, 
      y: 0
    },
    speed:10,
    image: imgObj,
    draw: function() {
      draw(this.image, this.pos.x, this.pos.y);
    },
    
    direction: 'down',

    update: function() {
      var dir = this.direction, movement;

      if(dir == 'up'   && this.pos.y <=   0) { this.direction = 'down'}
      if(dir == 'down' && this.pos.y > 100)  { this.direction = 'up'  }
      
      movement = this.speed * delta * { up: -1, down: 1 }[dir];

      this.pos.y += movement;
    }
  };
  
  function update() {
    bounceFace.update();
  }
  
  function tick(time) {
    time = Date.now();
    delta = (((time - oldTime) / 100) || 0);
    oldTime = time;
    window.requestAnimationFrame(tick);
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    draw(imgObj);
    bounceFace.draw();
    update();
    oldTime = time;
  }
  window.requestAnimationFrame(tick);
});