블로그 메인 canvas에 이스터에그 만들기

최근에 블로그 메인 애니메이션에 내가 어디에 있냐는 질문을 3번 받았다. 사실 내 이미지를 넣지 않아서 나는 여기에 없다. 맨날 없다고 말하는 것도 부끄러우니까. 이미지 넣고 이스터에그도 추가해봤다.
 

 
 
우선 추가할 이미지를 아이패드로 그렸다. 

 
 
그리고 해당 이미지를 추가하여 무료 사이트에 호스팅했다. 이거 서버터지면 블로그 어쩌지. 하지만 돈이 없다.
https://www.zpat.info/

Zpat - 무료 이미지 호스팅

 
 
 
이미지 스프라이트 사용해서 한장만 있으면 된다.

 
 
음 이러고 끝났는데, 뭔가 아쉬웠다. 이전에 친구 한명이 나를 찾아서 클릭하면 깃허브나 포트폴리오 사이트로 이동되게끔하면 좋겠다라고 조언해준게 생각이 났다. 그래서 해봤다.
 
근데 이게 고민이였던게, 해당 canvas 는 계속 움직이기 때문에 특정한 영역의 마우스 포인터 값만을 사용하는 것만으로는 이 문제를 해결할 수 없었다. 그래서 가변되는 내 이미지의 좌표 또한 필요했다.
 
아래는 내이미지 좌표를 얻기위한 과정이다. Peep 이라는 원래 사용하던 클래스에 id 프로퍼티를 하나 더 만들었다.

class Peep {
  constructor({
    image,
    rect,
    id,
  }) {
    this.image = image
    this.setRect(rect)
    this.id=id
    this.x = 0
    this.y = 0
    this.anchorY = 0
    this.scaleX = 1
    this.walk = null
  }
 
  setRect (rect) {
    this.rect = rect
    this.width = rect[2]
    this.height = rect[3]
   
    this.drawArgs = [
      this.image,
      ...rect,
      0, 0, this.width, this.height
    ]  
  }
 
  render (ctx) {
    ctx.save()
    ctx.translate(this.x, this.y)
    ctx.scale(this.scaleX, 1)
    ctx.drawImage(...this.drawArgs)
    ctx.restore()
  }
}

 
 
 
그리고 나의 이미지에 id='uzi' 라는 값을 할당하고, 나머지에는 그냥 people 을 넣었다.

function createPeeps () {
  const {
    rows,
    cols
  } = config
  const {
    naturalWidth: width,
    naturalHeight: height
  } = img
  const total = rows * cols
  const rectWidth = width / rows
  const rectHeight = height / cols
 
  for (let i = 0; i < total; i++) {
    if(i===79){
      allPeeps.push(new Peep({
      image: img,
      id:'uzi',
      rect: [
        (i % rows) * rectWidth,
        (i / rows | 0) * rectHeight,
        rectWidth,
        rectHeight,
      ]
    }))
    }
    else{
      allPeeps.push(new Peep({
      image: img,
      id:'people',
      rect: [
        (i % rows) * rectWidth,
        (i / rows | 0) * rectHeight,
        rectWidth,
        rectHeight,
      ]
    }))
    }
  
  }  
}

 
 
그리고 ctx 렌더할때 peep 클래스에 저장된 x 좌표와 y 좌표를 상위 스코프(전역)에 있는 uziX, uziY 에 할당했다.

function render () {
  canvas.width = canvas.width
  ctx.save()
  ctx.scale(devicePixelRatio, devicePixelRatio)
  
  crowd.forEach((peep) => {
    if(peep.id === 'uzi') {
      uziX = peep.x
      uziY = peep.y
    }
    peep.render(ctx)
  })
 
  ctx.restore()
}

 
 
그다음 canvas에 onClick이벤트를 넣어서 클릭시의  마우스 포인터X - uzi X  ,  마우스 포인터 Y - uziY 값을 사용했다.
이미지가 가로 200, 세로 250 으로 잘리기 때문에 해당 값을 if 문에 넣었다.
코드에 나와있듯이 클릭하면 내 깃허브 페이지로 이동한다. (이딴게 이스터에그?)

canvas.onclick =  function(event){
  const x = event.clientX - ctx.canvas.offsetLeft; 
  const y = event.clientY - ctx.canvas.offsetTop;  
  if (Math.abs(x - uziX)<200 && Math.abs(y - uziY)<250){
    window.open('https://github.com/ehddud1006') 
  }
  
  // console.log('mouseX',x)
  // console.log('mouseY',y)

  // console.log('uziX',uziX)
  // console.log('uziY',uziY)
}

 
개발 하니 재밌다.