[Canvas-불꽃놀이-10] 불꽃놀이 꼬리의 위치와 속도 구현

이전 글 : [Canvas-불꽃놀이-09] 파티클 관리와 객체 폴링 [Canvas-불꽃놀이-09] 파티클 관리와 객체 폴링이전 글 : [Canvas-불꽃놀이-08] 애니메이션 기본 틀잡기 [Canvas-불꽃놀이-08] 애니메이션 기본 틀잡기이전 글 : 2024.11.18 - [개발/Canvas] - [Canvas-불꽃놀이-07] 불꽃놀이 Particle들의 부모 클래스 [Canvas-불jinsk-joy.tistory.com 불꽃놀이 꼬리 구현하기 (x 좌표값들과 속도)이제 기본적인 토대는 다 완성이 되었으므로 세부적인 구현에 들어가고자 한다.먼저 불꽃의 꼬리 구현부터 시작하겠다.꼬리의 개수는 5개이며 중앙에 1개, 왼쪽 2개, 오른쪽 2개에서 미리 정의된 x좌표 배열과 y 속도 배열을 기반으로 생성된다...

• format_list_bulleted Canvas/불꽃놀이 프로젝트
• · 2024. 11. 22.
• textsms

[Canvas-불꽃놀이-09] 파티클 관리와 객체 폴링

이전 글 : [Canvas-불꽃놀이-08] 애니메이션 기본 틀잡기 [Canvas-불꽃놀이-08] 애니메이션 기본 틀잡기이전 글 : 2024.11.18 - [개발/Canvas] - [Canvas-불꽃놀이-07] 불꽃놀이 Particle들의 부모 클래스 [Canvas-불꽃놀이-07] 불꽃놀이 Particle들의 부모 클래스이전 글 : 2024.11.18 - [개발/Canvas] - [Canvas-불꽃놀이-06] Tjinsk-joy.tistory.com 파티클 매니저와 객체 폴링1. 객체 폴링불꽃놀이 이벤트에서는 수많은 파티클들이 동시에 화면에 표시되었다 사라진다. 특히 텍스트를 구현하기 위해서는 한 글자당 최소 700개 정도의 파티클이 필요하다.최대 입력기준인 10글자 입력하면 최소 6~7,000개 이상의 ..

• format_list_bulleted Canvas/불꽃놀이 프로젝트
• · 2024. 11. 22.
• textsms

[Canvas-불꽃놀이-08] 애니메이션 기본 틀잡기

이전 글 : [Canvas-불꽃놀이-07] 불꽃놀이 Particle들의 부모 클래스 [Canvas-불꽃놀이-07] 불꽃놀이 Particle들의 부모 클래스이전 글 : 2024.11.18 - [개발/Canvas] - [Canvas-불꽃놀이-06] TextData 클래스 [Canvas-불꽃놀이-06] TextData 클래스이전 글 : 2024.11.18 - [개발/Canvas] - [Canvas-불꽃놀이-05] 화면 전환, 입력 이벤트 정의 [Canvas-불jinsk-joy.tistory.com requestAnimationFrame 메서드로 애니메이션 구현하기 1. requestAnimationFrame() : MDN 문서window객체의 메서드인 requestAnimationFrame() 은 브라우저가 ..

• format_list_bulleted Canvas/불꽃놀이 프로젝트
• · 2024. 11. 20.
• textsms

[Canvas-불꽃놀이-07] 불꽃놀이 Particle들의 부모 클래스

이전 글 : [Canvas-불꽃놀이-06] TextData 클래스 [Canvas-불꽃놀이-06] TextData 클래스이전 글 : 2024.11.18 - [개발/Canvas] - [Canvas-불꽃놀이-05] 화면 전환, 입력 이벤트 정의 [Canvas-불꽃놀이-05] 화면 전환, 입력 이벤트 정의이전글 : 2024.11.17 - [개발/Canvas] - [Canvas-불꽃놀이-04] Canvas 설정jinsk-joy.tistory.com Particle들의 부모 클래스 생성1. 부모 Particle 클래스를 생성하려는 이유불꽃놀이에 필요한 파티클의 종류를 4가지로 결정했다.TailParticle : 불꽃놀이의 꼬리 부분을 표현하는 파티클SparkParticle : 불꽃놀이 잔상 효과를 표현하는 파티클T..

• format_list_bulleted Canvas/불꽃놀이 프로젝트
• · 2024. 11. 18.
• textsms

[Canvas-불꽃놀이-06] TextData 클래스

이전 글 : 2024.11.18 - [개발/Canvas] - [Canvas-불꽃놀이-05] 화면 전환, 입력 이벤트 정의 [Canvas-불꽃놀이-05] 화면 전환, 입력 이벤트 정의이전글 : 2024.11.17 - [개발/Canvas] - [Canvas-불꽃놀이-04] Canvas 설정 - 물리적 크기와 CSS 크기 [Canvas-불꽃놀이-04] Canvas 설정 - 물리적 크기와 CSS 크기이전 글 : 2024.11.16 - [개발/Canvas] - [Canvas-불꽃놀이-03jinsk-joy.tistory.com 파티클을 그릴때 필요한 데이터를 얻기 위해 TextData 클래스 생성1. TextData class 생성유저가 입력한 text를 캔버스에 그리고 픽셀 데이터를 가져오기 위해 TextData..

• format_list_bulleted Canvas/불꽃놀이 프로젝트
• · 2024. 11. 18.
• textsms

[Canvas-불꽃놀이-05] index.js에서 중요 이벤트 정의

이전글 : [Canvas-불꽃놀이-04] Canvas 설정 - 물리적 크기와 CSS 크기 [Canvas-불꽃놀이-04] Canvas 설정 - 물리적 크기와 CSS 크기이전 글 : 2024.11.16 - [개발/Canvas] - [Canvas-불꽃놀이-03] Canvas 설정하기 [Canvas-불꽃놀이-03] Canvas 설정하기이전글 : 2024.11.15 - [개발/Canvas] - [Canvas-불꽃놀이-02] UI 구성 [Canvas-불꽃놀이-02] UI 구성이전jinsk-joy.tistory.com 중요 이벤트 정의 (화면 전환, 리사이즈, 입력)1. 이벤트 전달을 index.js에 캔버스 객체 생성하기const canvas = new Canvas(); 2. 화면 전환 (MDN-hashchange..

• format_list_bulleted Canvas/불꽃놀이 프로젝트
• · 2024. 11. 18.
• textsms