[Canvas-불꽃놀이-20] Particle 클래스 단위 테스트

이전 글 : [Canvas-불꽃놀이-19] CanvasOption 단위 테스트 [Canvas-불꽃놀이-19] CanvasOption 단위 테스트이전 글 : [Canvas-불꽃놀이-18] utils.js 단위 테스트 [Canvas-불꽃놀이-18] utils.js 단위 테스트이전 글 : [Canvas-불꽃놀이-17] Jest 설정과 테스트 진행 순서 [Canvas-불꽃놀이-17] Jest 설정과 테스트 진행 순jinsk-joy.tistory.com Particle 클래스 단위 테스트 진행 Particle 클래스 단위 테스트Particle.js 전체 코드 확인더보기import { randomFloat, setRgbaColor } from "@/js/utils.js";import { PARTICLE } from..

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

[Canvas-불꽃놀이-19] CanvasOption 단위 테스트

이전 글 : [Canvas-불꽃놀이-18] utils.js 단위 테스트 [Canvas-불꽃놀이-18] utils.js 단위 테스트이전 글 : [Canvas-불꽃놀이-17] Jest 설정과 테스트 진행 순서 [Canvas-불꽃놀이-17] Jest 설정과 테스트 진행 순서이전 글 : [Canvas-불꽃놀이-16] SparkParticle로 잔상효과 적용하기 [Canvas-불꽃놀이-16] SparkPajinsk-joy.tistory.com CanvasOption 클래스를 테스트하여 캔버스 크기, 속성 등 검증하기 CanvasOption 환경 설정CanvasOption 클래스 전체 코드더보기import { ANIMATION, SCREEN, POS, FONT } from "@/js/constants.js";cla..

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

[Canvas-불꽃놀이-16] SparkParticle로 잔상효과 적용하기

이전 글 : [Canvas-불꽃놀이-15] CircleParticle 구현과 업데이트 [Canvas-불꽃놀이-15] CircleParticle 구현과 업데이트이전 글 : [Canvas-불꽃놀이-14] 원형 불꽃 효과 생성 [Canvas-불꽃놀이-14] 원형 불꽃 효과 생성이전 글 : [Canvas-불꽃놀이-13] TextParticle 구현과 적용 [Canvas-불꽃놀이-13] TextParticle 구현과 적용이전 글 :jinsk-joy.tistory.com 불꽃놀이에 잔상 효과를 적용해 생동감 더해주기 앞서 완성한 불꽃놀이를 보면 움직임은 있으나 잔상이 없어서 정적인 느낌이 강하고 단조로워 보였다.이에 각 파티클에 붙는 잔상 효과를 추가하여 움직임이 좀 더 자연스럽고 생동감 있는 불꽃놀이를 만들어보기..

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

[Canvas-불꽃놀이-15] CircleParticle 구현과 업데이트

이전 글 : [Canvas-불꽃놀이-14] 원형 불꽃 효과 생성 [Canvas-불꽃놀이-14] 원형 불꽃 효과 생성이전 글 : [Canvas-불꽃놀이-13] TextParticle 구현과 적용 [Canvas-불꽃놀이-13] TextParticle 구현과 적용이전 글 : [Canvas-불꽃놀이-12] text 픽셀 데이터 생성 [Canvas-불꽃놀이-12] text 픽셀 데이터 생성이전 글jinsk-joy.tistory.com CircleParticle 클래스를 완성하여 화면에 렌더 해보기이전 글에 원형 불꽃 효과를 생성하였다. 이번에는 이 효과를 적용할 CircleParticle 클래스를 완성하여 실제로 화면에 렌더 해보겠다. 1. CircleParticle 클래스 구현이전의 원형 불꽃 효과의 내용을 바..

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

[Canvas-불꽃놀이-14] 원형 불꽃 효과 생성

이전 글 : [Canvas-불꽃놀이-13] TextParticle 구현과 적용 [Canvas-불꽃놀이-13] TextParticle 구현과 적용이전 글 : [Canvas-불꽃놀이-12] text 픽셀 데이터 생성 [Canvas-불꽃놀이-12] text 픽셀 데이터 생성이전 글 : [Canvas-불꽃놀이-11] 불꽃놀이 꼬리 완성 [Canvas-불꽃놀이-11] 불꽃놀이 꼬리 완성이전 글 : [Cajinsk-joy.tistory.com  원형 불꽃 효과 구현텍스트 파티클 만으로는 시각적으로 밋밋하고 불꽃놀이의 느낌을 전달하기엔 현재의 상태가 부족하다고 느꼈다.그래서 원형 모양의 효과를 추가해 좀 더 화려하고 생생한 느낌의 불꽃놀이를 만들어 보기로 했다.처음에 도넛 모양을 유지하면서 퍼지는 형태를 구현하거나,..

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

[Canvas-불꽃놀이-13] TextParticle 구현과 적용

이전 글 : [Canvas-불꽃놀이-12] text 픽셀 데이터 생성 [Canvas-불꽃놀이-12] text 픽셀 데이터 생성이전 글 : [Canvas-불꽃놀이-11] 불꽃놀이 꼬리 완성 [Canvas-불꽃놀이-11] 불꽃놀이 꼬리 완성이전 글 : [Canvas-불꽃놀이-10] 불꽃놀이 꼬리의 위치와 속도 구현 [Canvas-불꽃놀이-10] 불꽃놀이 꼬리의 위jinsk-joy.tistory.com TextParticle 클래스 구현과 화면에 렌더 하기1.  TextParticle 클래스 세부 구현기존에 틀만 만들어 놓은 TextParticle의 세부적인 내용을 정의한다. 1-1. 생성자와 멤버변수TextParticle을 생성할 때 파티클을 생성할 위치 (x, y), 파티클의 속도 (vx, vy), 파티클..

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