Bezier_and_tween

Bezier.md

복수의 조절점을 이용해 매끄러운 곡선을 그릴 수 있는 방법

1차원 a-b 사이에 t

A --- B라는 선이 있고 t가 이 중간의 .5에 위치해 있다면 p = (.5 * A) + (.5 * B); 위의 식을 일반화 하면 P = (s * A) + (t * B)여기에서 s는 1-t라고 할 수 있음 만약 t가 0이라면 a는 1 반대로 1 이라면 0

2차원 a-b 사이에 p

  b

a

라는 두 지점이 있고 그 중간에 t가 있다면 p는 (b-a)=(Bx - Ax), (By - Ay)에 위치한다고 할 수 있음 Px = (s * Ax) + (t * Bx) Py = (s * Ay) + (t * By) p = {Px, Py)

Ax = 20; Ay = 144; Bx = 198; By = 72;

t = 0.5; // 어느 지점에 있는지

const blend = (t, x, y:) => (1-t * x) + (t * y);

p = {
  x: blend(t, Ax, Bx),
  y: blend(t, Ay, BY)
}

Interpolation.md

위의 2차원 베지어의 t를 0 -> 1로 변하는 과정을 보여주기 위해서는 보간(Interpolation)의 개념의 이해가 필요함

requestAnimationFrame

윈도우의 함수로서 현재 프레임의 시간을 알려주는 함수인데 무한 루프를 돌면서 보간값을 업데이트하는데 사용됨

function interpolator(Ax, Bx, Ay, By, duration) {
  return function(update) {
    const blendX = blender.bind(null, Ax, Bx);
    const blendY = blender.bind(null, Ay, By);
    let startTime = 0;
    
    function step(timestamp) {
      console.log(timestamp);
      if (!startTime) {
        startTime = timestamp;
      }

      const pastTime = timestamp - startTime;
      let progress = pastTime / duration;
      
      if (progress > 1) {
        update(blendX(1), blendY(1));
        return;
      }

      update(blendX(progress), blendY(progress));

      requestAnimationFrame(step);
    }
    
    requestAnimationFrame(step);
  }
}