Canvas 2D: 텍스트를 픽셀로 다루기

// 1. 컨텍스트 획득
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

// 2. 폰트 설정 + 텍스트 측정
ctx.font = '900 64px sans-serif';
ctx.textBaseline = 'alphabetic';
const metrics = ctx.measureText('FUZZY');
// metrics.width = 전체 폭
// metrics.actualBoundingBoxAscent = 기준선 위 높이 (예: 47px)
// metrics.actualBoundingBoxDescent = 기준선 아래 높이 (예: 1px)

// 3. 텍스트를 비트맵으로 렌더링
ctx.fillStyle = '#fff';
ctx.fillText('FUZZY', 0, metrics.actualBoundingBoxAscent);

// 4. 비트맵을 다른 캔버스로 복사 (행 단위 가능)
targetCtx.drawImage(
  sourceCanvas,  // 소스
  sx, sy, sw, sh,  // 소스 영역 (x, y, width, height)
  dx, dy, dw, dh   // 대상 영역
);

let lastFrameTime = 0;
const frameDuration = 1000 / 60; // 60fps = 16.67ms 간격

const run = (timestamp: number) => {
  // 목표 fps보다 빠르면 스킵
  if (timestamp - lastFrameTime < frameDuration) {
    requestAnimationFrame(run);
    return;
  }
  lastFrameTime = timestamp;

  // 여기서 clearRect + drawImage 반복
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  // ... 그리기 로직 ...

  requestAnimationFrame(run);
};
requestAnimationFrame(run);

// 오프스크린 캔버스 생성 — 원본 텍스트를 한 번만 그려놓고 재사용
const offscreen = document.createElement('canvas');
const offCtx = offscreen.getContext('2d');

offCtx.font = `${fontWeight} ${fontSizeStr} ${computedFontFamily}`;
offCtx.textBaseline = 'alphabetic';

// measureText로 정확한 바운딩 박스 계산
const metrics = offCtx.measureText(text);
const actualAscent = metrics.actualBoundingBoxAscent;   // 예: 47px
const actualDescent = metrics.actualBoundingBoxDescent; // 예: 1px
const tightHeight = Math.ceil(actualAscent + actualDescent); // 48px

offscreen.width = textBoundingWidth + 10;  // 여유분 10px
offscreen.height = tightHeight;

// alphabetic 기준선에 맞춰 텍스트 렌더링
offCtx.fillText(text, xOffset, actualAscent);

for (let j = 0; j < tightHeight; j++) {
  let dx = 0, dy = 0;
  if (direction === 'horizontal' || direction === 'both') {
    // intensity 0.18, fuzzRange 30일 때 최대 오프셋: ±2.7px
    dx = Math.floor(currentIntensity * (Math.random() - 0.5) * fuzzRange);
  }
  if (direction === 'vertical' || direction === 'both') {
    dy = Math.floor(currentIntensity * (Math.random() - 0.5) * fuzzRange * 0.5);
  }
  // 오프스크린의 j번째 행(높이 1px)을 dx/dy만큼 밀어서 그린다
  ctx.drawImage(offscreen, 0, j, offscreenWidth, 1, dx, j + dy, offscreenWidth, 1);
}

// 상태 우선순위: click > glitch > hover > base
if (isClicking) {
  targetIntensity = 1;
} else if (isGlitching) {
  targetIntensity = 1;
} else if (isHovering) {
  targetIntensity = hoverIntensity; // 기본 0.5
} else {
  targetIntensity = baseIntensity;  // 기본 0.18
}

mousemove -> isInsideTextArea(x, y)? -> isHovering = true/false
  -> targetIntensity 결정
  -> currentIntensity 보간 (transitionDuration > 0일 때)
  -> dx = currentIntensity * random * fuzzRange
  -> drawImage(offscreen, 0, j, ..., dx, j, ...)

return () => {
  isCancelled = true;
  window.cancelAnimationFrame(animationFrameId);
  clearTimeout(glitchTimeoutId);
  clearTimeout(glitchEndTimeoutId);
  clearTimeout(clickTimeoutId);
  if (canvas && canvas.cleanupFuzzyText) {
    canvas.cleanupFuzzyText(); // canvas 요소에 직접 붙인 커스텀 메서드 — 이벤트 리스너 제거
  }
};

import Matter from 'matter-js';
const { Engine, Render, World, Bodies, Runner, Mouse, MouseConstraint } = Matter;

const engine = Engine.create();
engine.world.gravity.y = 1; // 1 = 기본 중력, 0 = 무중력, 3 = 3배 중력

// 정적 바닥 — isStatic: true면 중력/충돌에 영향받지 않는다
const floor = Bodies.rectangle(width / 2, height + 25, width, 50, {
  isStatic: true
});

// 동적 바디 — 중력에 의해 떨어지고 다른 바디와 충돌한다
const box = Bodies.rectangle(100, 50, 80, 40, {
  restitution: 0.8,   // 반발 계수: 0=안 튀김, 1=완전 탄성 충돌
  frictionAir: 0.01,  // 공기 저항: 0=없음, 높을수록 빨리 감속
  friction: 0.2        // 접촉 마찰: 0=미끄러움, 높을수록 빨리 멈춤
});

World.add(engine.world, [floor, box]);

// 매 프레임: 물리 바디의 위치/각도를 DOM 요소에 반영
wordBodies.forEach(({ body, elem }) => {
  const { x, y } = body.position;
  elem.style.left = `${x}px`;
  elem.style.top = `${y}px`;
  elem.style.transform = `translate(-50%, -50%) rotate(${body.angle}rad)`;
});

useEffect(() => {
  if (!textRef.current) return;
  const words = text.split(' ');
  // 각 단어를 span.word로 감싸서 DOM에 추가
  const newContent = words
    .map(word => {
      const isHighlighted = highlightWords.some(hw => word.startsWith(hw));
      return `<span class="word ${isHighlighted ? highlightClass : ''}">${word}</span>`;
    })
    .join(' ');
  textRef.current.textContent = '';
  // DOM에 단어별 span을 주입한다
  const template = document.createElement('template');
  template.innerHTML = newContent;
  textRef.current.appendChild(template.content);
}, [text, highlightWords, highlightClass]);

// 정적 벽 4개 — 바닥, 좌벽, 우벽, 천장
const floor = Bodies.rectangle(width / 2, height + 25, width, 50, boundaryOptions);
const leftWall = Bodies.rectangle(-25, height / 2, 50, height, boundaryOptions);
const rightWall = Bodies.rectangle(width + 25, height / 2, 50, height, boundaryOptions);
const ceiling = Bodies.rectangle(width / 2, -25, width, 50, boundaryOptions);

// 각 단어 span의 위치/크기로 물리 바디를 생성
const wordBodies = Array.from(wordSpans).map(elem => {
  const rect = elem.getBoundingClientRect();
  const x = rect.left - containerRect.left + rect.width / 2;
  const y = rect.top - containerRect.top + rect.height / 2;

  const body = Bodies.rectangle(x, y, rect.width, rect.height, {
    restitution: 0.8,    // 반발 계수
    frictionAir: 0.01,   // 공기 저항
    friction: 0.2         // 접촉 마찰
  });

  // 초기 속도로 흩뿌리기
  Matter.Body.setVelocity(body, { x: (Math.random() - 0.5) * 5, y: 0 });
  Matter.Body.setAngularVelocity(body, (Math.random() - 0.5) * 0.05);
  return { elem, body };
});

span.getBoundingClientRect() -> (x, y, width, height)
  -> Bodies.rectangle(x, y, w, h) = 물리 바디
  -> setVelocity(random) = 초기에 흩뿌리기
  -> World.add(engine.world, bodies)
  -> rAF: Matter.Engine.update(engine) 반복
  -> body.position -> elem.style.left/top/transform

// 마우스로 단어를 드래그할 수 있는 제약 조건
const mouse = Mouse.create(containerRef.current);
const mouseConstraint = MouseConstraint.create(engine, {
  mouse,
  constraint: {
    stiffness: mouseConstraintStiffness,
    render: { visible: false }
  }
});
render.mouse = mouse;

const updateLoop = () => {
  wordBodies.forEach(({ body, elem }) => {
    const { x, y } = body.position;
    elem.style.left = `${x}px`;
    elem.style.top = `${y}px`;
    elem.style.transform = `translate(-50%, -50%) rotate(${body.angle}rad)`;
  });
  Matter.Engine.update(engine);
  requestAnimationFrame(updateLoop);
};
updateLoop();