JavaScript 입문 : Canvas Animation IV - 클래스 이용 여러 객체 만들고 버블 애니메이션 적용하기

지난 시간까지 마우스를 따라 다니는 원을 만들어 보았습니다. 지난 시간의 코드를 계속 업데이트 하면서 공부를 진행하고 있기 때문에 반드시 1편부터 개념을 익히고 와야합니다. 

 

복습을 해 보자면 캔버스의 속성을 이해하고 사각형과 원을 그리는 방법을 배웠습니다. 다양한 애니메이션 기법을 응용하기 위하여 캔버스 좌표를 연결하는 법을 배웠고 이를 위하여 PointerEvent와 MouseEvent를 활용하였습니다. 응용된 효과를 위하여 이제는 다양한 사이즈의 원을 생성해 내고 애니메이션 효과를 보도록 하겠습니다. 

 

역시 Animation 학습은  'Franks laboratory의 Master HTML Canvas 2021'을 기본으로 공부하고 있습니다. 

 

 

1. 클래스 이용 다양한 사이즈 원 만들기

 

하나의 코드에서 비숫한 객체를 만들어 낼 때 자바스크립트 문법인 class를 배운적이 있습니다. 이 메소드는 공장에서 제품을 생산하는 원리라고 보면 되는데 자동차 공장을 예로 들면 하나의 라인에서 다양한 사양의 자동차를 만들어 낸다고 보면 됩니다. 

 

2022.09.07 - [컴퓨터 알아가기/JavaScript] - JavaScript 입문 : 클래스 기본 구조

JavaScript 입문 : 클래스 기본 구조

 

지난 시간은 원을 하나 만들어 애니메이션을 적용했다면 class를 이용하여 좀 더 고급스러운 애니메이션을 공부하도록 하겠습니다.

 

① class 기본 구조 

 

 

상기 코드를 설명하자면

 

마우스가 움직이는 좌표를 this에 담아 공통으로 만들어 주고 첫번째로 다양한 사이즈를 랜덤하게 만들어 줍니다. Math.random(  )은 0이상 1미만이므로 사이즈가 1 ~ 6사이에서 랜덤하게 사이즈를 만들어 낼 수 있구요. 두번째 speedX는 결과값이 양수이면 우측으로 음수이면 최측으로 이동하는 변수를 만들어 준 것이며 sppedY는 아래와 위로 움직이는 변수를 만들어 준 것입니다. 이 변수는 랜덤 숫자이기 때문에 속도도 모두 다릅니다. 

 

② new Particle(  ) 생성자를 동작하게 만드는 함수 만들기

 

궁극적으로 마우스가 움직이는 지점을 받는 좌표가 필요하기 때문에 이 부분을 반영한 함수를 만들어 줍니다. 

 

 

이런 업데이트가 반영될 수 있도록 그리기 함수를 이 곳에 반영합니다. 지난시간 만들어 놓았던 그리기 함수를 class내 함수로 이동하면 됩니다.

 

코드에서 mouse.x와 mouse.y는 constructor(  )에서 this.x와 this.y로 반영해 줘야합니다. 

 

 

class를 사용하는 목적은 좀 더 간단한 코드를 통하여 원하는 수만큼 객체를 만들어 내는 장점이 있기 때문에 new 생성자를 위한 초기 함수를 만들어 줍니다.

 

Particle이라는 입자를 100개 만들 예정입니다. 이를 위해서는 빈배열을 담을 변수도 만들어 줍니다. 

 

 

 

정말 100개의 Particle이 어떤 형태로 들어가 있는지 콘솔에서 확인을 해 보면 다음과 같이 반영이 되어 있습니다. 

 

 

이 중 하나의 Particle을 좀 더 자세히 살펴보면 사이즈와 방향성은 랜덤하게 100개가 반영이 되었는데 x와 y의 좌표가 undefined로 되어 있습니다. 

 

 

이는 최초 x, y의 마우스 변수값을 undefined로 설정하였기 때문입니다. 죄표 또한 랜덤하게 움직여야 하기때문에 다음과 같이 class내 constructor(  )에 반영합니다. 

 

 

다시 콘솔에서 확인해 보면 좌표 역시 무작위로 생성이 된 것을 볼 수 있습니다. 

 

 

 

③ particleArray에 100개 원 반영

 

100개의 Particle 인덱스가 반영이 되어있으니 각 인덱스별로 constructor(  ) 함수에서 만든 update(  )와 draw(  ) 함수를 반영합니다. 

 

 

결과값을 보면 무작위 위치와 방향, 그리고 속도가 반영이 되고요. MouseEvent 속성에 따라 Bubble효과가 적용되어 캔버스내 100개의 원이 퍼졌다가 천천히 사라지는 효과를 볼 수 있습니다. 이를 위해서는 showParticles(  ) 함수 호출을 미리 만들어 놓은 애니메이션 함수에 반영하면 됩니다. 

 

 

브라우저는 다음과 같이 결과가 나옵니다.  

 

 

 

결과화면이 멈춰 있으니 효과를 모를 수 있으니 코드펜으로 실제 움직이는 모습을 전체 코드와 같이 한번 보기 바랍니다. 

See the Pen bubbleCircle by skkim0303 (@skkim0303) on CodePen.