Canvas3 [Canvas] 유용한 삼각함수 정리 두 지점사이 거리구하기 const getDistance = (p1, p2) => { const dx = p2.x - p1.x const dy = p2.y - p1.y return Math.sqrt(dx*dx + dy*dy) } 두 지점사이 각도구하기 export const getAngle = (p1, p2) => { const dx = p2.x - p1.x const dy = p2.y - p1.y return Math.atan2(dy, dx) } 두 지점사이의 거리를 알 때 X 좌표 거리 구하기 x = distance x cosθ 두 지점사이의 거리를 알 때 Y 좌표 거리 구하기 y = distance x sinθ 2023. 5. 16. [React & Canvas] 리엑트와 캔버스 사용시 메모리 누수 방지 안녕하세요, 개발자 Sean입니다. 최근 캔버스를 이용해 어플을 제작하는 재미에 푹 빠져있는데요, 회사 프로젝트에도 한번 사용해 보려고 프리로딩 컴포넌트를 캔버스를 이용해 제작했습니다. 웹 어플 라이브러리로 리엑트를 사용하고 있기 때문에 useRef로 캔버스를 제어해 아래와 같이 멋진 다이내믹한 프리로딩 이펙트를 만들었습니다. 원이 돌아가며 작은 입자를 뿌리는 방식의 애니메이션 입니다. 하지만 오늘 이것저것 테스트 진행 도중 심각한 기능저하 문제를 발견했습니다. 프리로더가 언마운트 된 뒤에 어플의 속도가 급격하게 느려지는 문제가 발생했습니다 :( 우선 개발자 도구를 통해 퍼포먼스를 측정해 보았습니다. 역시나 메모리 누수가 발생하고 있는 것을 확인할 수 있었습니다. 어디가 원인인지 한참을 고민하다가 req.. 2023. 4. 27. [Canvas] window.requestAnimationFrame이란 안녕하세요, 개발자 Sean입니다. 본격적으로 3D관련 기술 공부를 시작했는데 window.requestAnimationFame이란 메서드를 보고 정리해 두면 좋겠다 생각되어 정리해 올려봅니다. MDN의 정의에 따르면 아래와 같습니다. **window.requestAnimationFrame()**은 브라우저에게 수행하기를 원하는 애니메이션을 알리고 다음 리페인트가 진행되기 전에 해당 애니메이션을 업데이트하는 함수를 호출하게 합니다. 이 메서드는 리페인트 이전에 실행할 콜백을 인자로 받습니다. const animate = () => { window.requestAnimationFrame(animate); ctx.clearRect(0,0,canvasWidth, canvasHeight); particle.dr.. 2023. 2. 15. 이전 1 다음
