JavaScript 입문 : Canvas Animation VII - 입자를 추가하여 둘 사이 거리를 선으로 이어주는 효과로 애니메이션 완성

이제 Canvas를 통한 Animation 기본 시간이 끝나갑니다. Canvas를 공부하면서 기본적인 속성에 대해 알아가는 시간이었던 것 같습니다. 물론 훨씬 복잡하고 어려운 코드가 많으나 최초 목적인 기초 단계의 Canvas 속성을 아는 것만으로도 성과가 있을 것으로 보여집니다. 

 

이제 조금 더 들어가서 현재는 100개의 입자를 생성하여 애니메이션 효과를 보았는데 이중반복을 통해 두입자 사이의 거리를 계산하고 그 거리를 선으로 잇는 효과를 적용한다면 상당히 아름다운 효과를 표현할 수 있을겁니다. 

 

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

 

1. 입자 사이 거리 계산식 추론

 

입자를 하나 더 만들어 입자사이를 계산한다면 어떤 형식의 공식이 필요할까요?

 

다음 그림으로 고민해 보겠습니다. 

 

 

상기 그림을 보면 두점 A와 B사이의 거리가 필요합니다. x끼리의 거리를 dx로 y끼리의 거리를 dy로 표현하면 dx= x1 - x2가 되고 dy = y1 - y2로 생각할 수 있습니다. 이 거리가 나오면 A와 B의 거리인 distance는 피타고라스 정리에 의해 dx제곱과 dy제곱에 Root값으로 나타낼 수 있습니다. 

 

2. 입자사이 거리 자바스크립트

 

이제는 1번의 식을 자바스크립트로 표현할 수 있습니다. showPartciles(  )함수에 적용해 줘야 겠지요. 우선 이중반복문을 만들고 해당식을 반영하면 됩니다. 

 

 

3. 두입자 연결 효과 만들기 

 

거리에 대한 기준점이 필요합니다. 일단 100px로 해보죠. 

 

만일 100px이하의 거리인 경우 선을 두입자 사이에 적용해 주는데 color는 이미 hsl을 통해서 만들었으니 첫번째 i기준으로 채워주고 두 점 사이 선을 만들어 줍니다. 

 

 

4. 결과보기 

 

화면에는 무지개색으로 변하면서 두 입자사이 선이 이어지는 효과가 보여집니다. 참 아름답습니다. 이런것을 고민하고 만드는 개발자들은 정말 훌륭하다고 느겨지네요.

 

아래 화면을 마우스로 유영해 보시죠.