패스트캠퍼스 환급챌린지 3일차 미션 (2월 3일) : 초격차 패키지 : 21개 프로젝트로 완성하는 인터랙티브 웹 개발 with Three.js & Canvas 강의 후기

챌린지

패스트캠퍼스 환급챌린지 3일차 미션 (2월 3일) : 초격차 패키지 : 21개 프로젝트로 완성하는 인터랙티브 웹 개발 with Three.js & Canvas 강의 후기

양나니 2024. 2. 3. 14:12

오늘은 파트2 Canvas 강의의 ch1과 ch07을 들었습니다.

듣는 순서는 상관없다기에 ㅎㅎ 기초적인 강의만 듣고 개인적으로 재밌어보이는 강의부터 들었네요.

캔버스도 매번 사용할 때마다 검색하면서 썼던 것 같은데 한 번 따로 정리해 두는 게 좋을 것 같네요.

챕터 01에서는 캔버스 사이즈에 대한 기초 지식부터, 기본 파티클 그리는 방법 그리고 생성한 파티클에 다양한 애니메이션을 적용해 볼 수 있었고 마지막에는 캔버스 resize하는 방법에 대해서도 배울 수 있었습니다.

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d') // 드로잉 컨택스트

// 채워진 사각형 그리기 (x, y, w, h)
ctx.fillRect(10,10,50,50)

// 원 그리기
ctx.beginPath();
ctx.arc(100, 100, 50, 0, Math.PI/180*360) // 각도는 라디안 단위
ctx.fill() //채우기. 선은 stroke()
ctx.closePath()

캔버스의 디폴트 크기는 300 * 150 px로 설정되어 있다. 캔버스의 사이즈를 변경하는 방식에는 2가지가 있는데,

첫번쨰 방식은 css값을 직접 수정하는 것이고 두번째는 캔버스 자체 width와 height를 수정하는 것이다.

// css 수정
canvas.style.width = 300 + 'px'
canvas.style.height = 300 + 'px'

이 방법은 캔버스 높이를 강제로 2배 늘리는거라 캔버스에 그린 요소의 높이가 함께 변경될 수 있다.

canvas.width = 300
canvas.height = 300

그렇기에 위 코드처럼 캔버스 고유 크기도 같은 값으로 변경해줘야한다.

html상에서 변경할거면 아래처럼 속성값으로 줘도 된다.

<canvas id="canvas" width="300" height="300"></canvas>

DPR(Device Pixel Ratio)에 대해서도 간단히 언급하셨는데, dpr=1인 디스플레이와 2인 디스플레이(ex 레티나 디스플레이)에서 1픽셀을 그리는 게 어떻게 다른지 알려주셨다. DPR이 높을수록 더 선명한 그래픽을 보여줄 수 있는 이유는 하나의 CSS 픽셀을 실제로 그리는데 4개의 (물리적)픽셀을 사용하기 때문이다.

* dpr : 장치의 물리적 픽셀과 CSS 픽셀의 비율 (물리적 픽셀/CSS 픽셀)

* dpr 값은 window.devicePixelRatio로 확인 가능

이미지 출처: https://tomroth.com.au/dpr/DPR_viz.svg

requestAnimationFrame

아 이것도... 늘 헷갈리는 개념.. 따로 정리를 해두는 게 좋을 것 같다.

여러 프레임이 모여 하나의 애니메이션이 되는 원리를 기억. x, y 좌표를 프레임마다 변경하여 애니메이션을 만든다. 이때 requestAnimationFrame을 사용. (setInterval 등은 애니메이션이 끊기는 느낌이 남)

function animate() {
    // animate 실행 후 다시 실행 (=매 프레임마다 계속 실행)
    window.requestAnimationFrame(animate)
    console.log(1)
}

1초에 60~ 240*번의 프레임이 실행되고 그때마다 내부에 작성한 console.log가 실행됨.

* 모니터 주사율에 따라 다름 (보통 60Hz ~ 144Hz)

모니터 주사율이 모두 다르기 때문에 어떤 사람은 1초에 내부 코드가 144번, 다른 사람은 60번 이렇게 다르게 실행될 수 있어서 delta 값을 사용해서 정규화를 해준다.

FPS(Frame Per Second): 초당 프레임 횟수. 1초에 requestAnimationFrame을 몇 번 실행 시킬까

예를 들어 내 모니터 주사율이 60hz 라는 것은 1초에 60번 실행된다는 것이고 이는 약 16ms 마다 requestAnimationFrame이 실행된다는 것. 이때 FPS를 10으로 둔다면, 1초에 10번 프레임을 실행된다는 것이고 다른말로는 100ms마다 requestAnimationFrame을 실행하라는 의미!

delta 값을 now - then 값으로 두고, delta 값이 목표 Interval 값보다 커질 때 애니메이션을 동작!

이때 then 값을 now - (delta % interval)로 갱신해준다. (100으로 나눈 나머지값을 빼줌으로써 then값이 1100, 1200, 1300.. 으로 갱신됨)

SVG 필터 입히기