p5.js의 draw함수로 간단한 수축 후 폭발하는 효과 만들기

 

p5란? 

 

p5는 자바 스크립트 언어로 간단한 드로잉 기능을 제공하는 하는 오픈소스 라이브러리이다.

가끔 그림판 말고 코딩으로 그림 그리면 재밌다 ㅋㅋ

 

---

 

 

웹 브라우저를 통해서 코드의 진행 상황을 봐도 되지만 작업할 때 불편하기 때문에 우선 vs code의 기준으로 설명하면

 

extensions탭에 들어가 p5 canvas를 받아준다.

 

 

 

다운이 완료되면 vs code 왼쪽 아래에 다음과 같은 창이 생긴다 

 

 

 

그리고 이 창을 누르면

 

 

이렇게 실시간으로 코드 진행 상황을 확인 할 수 있는 창이 하나 생긴다. 굳이 코드의 변화를 확인하기 위해 브라우저로 왔다 갔다 할 필요 없다.

 

 

 

 

---

 

 

기본적인 세팅을 완료하고 뭘 그려볼까 하다가 최근에 배운 draw 함수를 이용해 폭발 효과 에니메이션을 그려봤다.

 

코드는 다음과 같다.

 

// 폭발의 초기 크기
let blowSize = 600; 

function draw() {
    background(0, 0, 0); 
    blowSize -= 10;
    
    fill(255, 0, 0);
    ellipse(200, 298, blowSize, blowSize);
    
    // 땅
    fill(76, 168, 67);
    rect(0, 300, 400, 100);
}

 

draw함수는 함수내에 객체를 넣어주고 효과 값을 넣어준다면 자동으로 실시간 변화를 주는 기능을 한다.

 

나는 초기 폭발의 사이즈를 600으로 설정했고 draw함수 내에 blowSize가 1초마다 -10이 되는 연산을 활용했다.

아 그리고 배경인 background를 함수 내에 적용한 이유는 바깥에다 놓으면 매 함수 내에 있는 객체들은 매 초마다 실시간으로 변하는 데 반해 배경은 그렇지 않아 계속해서 잔상이 남기 때문이다.

 

 

실행 결과는 다음과 같다.

 

 

 

끝.