HTML Canvas Text Interaction1-2

들어가면서,

지난시간에는 Canvas 상에 텍스트를 출력하고,그것을 픽셀로 변환하는 Effect클래스를 작성하였는데요.

이번시간에는, 마우스를 가져다 대었을 때, 각 픽셀들의 움직임을 제어하는 Particle 클래스를 작성하여 보겠습니다.

코드 전체는 아래 링크를 통해 공개되어 있습니다.

질문은 자유롭게 댓글을 통해서 해주시면 됩니다.

See the Pen pixelizing by jimmy jung (@idjjm92) on CodePen.

구현에 필요한 아이디어

1. 캔버스 상의 텍스트를 픽셀로 변환시키기(Effect 클래스에서 다룸)
2. 변환된 픽셀에 애니메이션, 마우스 인터렉션 추가하기

---

1. Particle 클래스

• 픽셀의 위치를 조정해서 애니메이션 효과처럼 보이게 함
• 마우스 가져다 대었을 때 픽셀의 움직임 정의

class Particle{
  constructor(effect, x, y, colour){
    this.effect = effect;
    this.originX = x;
    this.originY = y;
    this.x = Math.random() * this.effect.canvasWidth;
    this.y = Math.random() * this.effect.canvasHeight;
    this.ease = Math.random() * 0.09 + 0.02;
    this.angle = 0;
    this.vx = 0;
    this.vy = 0;
    this.force = 0;
    this.friction = Math.random() * 0.3 + 0.000000001;
    this._dy=0;
    this._dx=0;
  };
  draw(){
    this.effect.context.fillStyle=this.colour;
    this.effect.context.fillRect(this.x, this.y, this.effect.gap, this.effect.gap);
  }
  update(){
    this._dy =  this.y - this.effect.mouse.y;
    this._dx = this.x - this.effect.mouse.x;
    const dist = Math.hypot(this._dy, this._dx);
    this.force = this.effect.mouse.radius/dist;
    if(this.effect.mouse.radius > dist){
      this.angle = Math.atan2(this._dy,this._dx);
      this.vx += Math.cos(this.angle) * this.force;
      this.vy += Math.sin(this.angle) * this.force;
    }
      this.x += (this.vx *= this.friction) + (this.originX - this.x) * this.ease;
      this.y += (this.vy *= this.friction) + (this.originY - this.y) * this.ease;
  }
}

구현내용: codepen
구현내용: https://github.com/jimyeong/animations