From pixels to Animation

Filters and Effects

포토샵과 같은 그래픽프로그램에서 사진을 수정하고 색상을 변경하듯 브라우저에서도 비슷한 효과를 줄수있다.

이와관련된 라이브러리가 이미 존재하지만 기능을 배워보도록하자.

imageData

var imageData = context.getImageData(0,0,imageObj.width, imageObj.height);
var data = imageData.data;

• width

• height

• data(Uint8ClampedArray)

unsigned ir contains only positive value

int8 8bitnumber rgbargbargba

• createImageData

• getImageData

• putImageData

Make Grayscale Image

ctx.drawImage(image, 0, 0);
var imageData = ctx.getImageData(0,0,200, 200);
var data = imageData.data;
for(var i = 0; i < data.length; i += 4) {
var brightness = 0.34 * data[i] + 0.5 * data[i + 1] + 0.16 * data[i + 2];
// red
data[i] = brightness;
// green
data[i + 1] = brightness;
// blue
data[i + 2] = brightness;
}
// overwrite original image
ctx.putImageData(imageData, 0, 0);

Play vidoes with canvas

<video id="v" src="http://media.w3.org/2010/05/sintel/trailer.mp4" controls loop></video>
<canvas id="c"></canvas>

document.addEventListener("DOMContentLoaded", function(){
  var canvas =  document.getElementById('c');
  var video =  document.getElementById('v');
  var ctx = canvas.getContext('2d');

  video.addEventListener('loadedmetadata',function(){
    canvas.width = this.videoWidth;
    canvas.height = this.videoHeight;
  });

  var draw = function(){
    ctx.drawImage(v,0,0);
    requestAnimationFrame(draw);
    //setInterval(draw);

  }

  video.addEventListener('play', function() {
    if(video.paused || video.ended) return;
    draw();
  });
});

The Game Loop / User input

function draw() {
    // request to execute this function at the next earliest convenience
    requestAnimationFrame(draw);
    processInput();
    moveObjectsAndEnemies();
    drawAllTheThings();
}

키보드 인풋

유저의 키보드 인풋을 처리하기위해 Kibo 라이브러리를 사용하면 간단하다.

var k = new Kibo();
k.down(['up', 'w'], function() {
    // Do something cool on the canvas
});

k.up(['enter', 'q'], function() {
    // Do other stuff.
});

마우스 인풋

<canvas id="c" width="200" height="200"></canvas>

var c = document.getElementById('c');
var ctx = c.getContext('2d');
ctx.fillStyle = "white"
ctx.fillRect(0,0,200,200);
ctx.strokeRect(0,0,200,200);


function handleClick(e){
  x = e.clientX - c.offsetLeft - 2.5;
  y = e.clientY - c.offsetTop - 2.5;
  ctx.strokeRect(x,y,5,5);
}

c.addEventListener("click", handleClick, false);

canvas로 게임만들어보자