p5.js 시작하기 (2) / p5.js Tutorial (2)

이어서 p5.js 튜토리얼 영상을 보며 공부한 내용을 정리해본다.

 

유튜브 채널 생활코딩에서 올려주신 모션그래픽을 위한 p5.js 강좌를 보며 공부중이다!

https://youtu.be/nxG4hzciL7Q

 

 

 

 

 

 

 

 

7강

 

코딩으로 그림을 그릴 때 가장 큰 장점이라고 할 수 있는 애니메이션을 진행해봤다.

console.log 라는 함수를 호출하면 console창에 값을 띄울 수 있다. (원하는 값은 파라미터에 넣어준다.)

그외 random함수를 통해 0에서 400까지의 x위치 y위치 사이에 랜덤하게 원이 나타나도록 설정했다.

같은 방식으로 색상, 크기도 바꿔주었다.

random(400) -> 0에서 400사이 랜덤값 호출

random(100, 255) -> 0에서 255사이 랜덤값 호출

 

 

 

 

 

8강

 

화면의 왼쪽 위에서 화면의 오른쪽 아래로 쭉 내려가는 애니메이션을 만들어보았다.

x,y 변수를 설정하고 draw문에서 값을 더해가면 된다.

 

windowWidth와 windowHeigh를 사용하면 웹사이트에 크기에 꽉 맞는 캔버스를 설정할 수 있다.

내가 윈도우 크기를 바꾸면 그에 맞게 캔버스 크기도 바뀐다. 

 

 

 

 

 

 

 

9강

 

p5.js 공식 홈페이지에서 레퍼런스에 이벤트 인식에 들어가면,

다양한 상호작용을 위한 함수/변수들을 찾아볼 수 있다.

웹캠, 오디오, 터치 그리고 스마트폰에서 흔들거나 기울이는 것까지 인터랙션으로 

활용할 수 있다고 한다!

 

스크롤을 내리면 아래에 더 있다.

 

 

 

 

mouseX, mouseY를 활용해 마우스를 움직이면 그에 따라 원들이 생겨난다.

참고로 색상을 랜덤으로 하고 싶다면, fill()안에 ' ' 없이 바로 random함수들을 작성해주어야 한다.

(-> 원래는 fill('pink'); 처럼 ' '을 쓰지만 random은 ' ' 안에 쓰지 않는다.)

 

 

 

 

10강

 

if 문과 mouseIsPressed변수를 통해, 마우스를 클릭하고 있는 동안 다시 배경이 하얀색으로 바뀌도록 만들었다.

 

 

 

 

 

 

mousePressed() 함수를 사용해서 마우스를 클릭하면 배경이 하얀색으로 칠해지도록 설정했다.

function이라는 구문을 적어 mousePressed() 함수를 선언해주었다.

mousePressed()와 mouseIsPressed의 차이점은 mouseIsPressed는 누르고 있는 동안에도

계속 배경이 하얀색으로 바뀌지만 (클릭 되어있는지를 봄)

mousePressed()는 누르고 있어도 한번 클릭으로 인식되어 배경이 한번만 리셋된다.

 

 

 

 

 

 

 

 

11강

 

마지막 강의이다. 

이번에는 상호작용의 심화편. p5.js에서 제공해주는 기본 변수/함수들과 수학원리를 이용하여

예제들을 만들어보는 실습을 했다.

 

 

pmouseX와 pmouseY는 p5.js에서 제공하는 변수이다.

이전 마우스의 x,y 좌표값을 가지고 있다.

때문에 line함수로 이전좌표와 현재 마우스 위치를 연결해주도록 하면 마우스로 그림을 그릴 수 있다.

약간의 문제라한다면 직선간의 연결이기 때문에 마우스를 빠르게 움직이면 곡선이 아닌,

직선이 연결된 그림처럼 보이는 것을 알 수 있다.

 

 

 

 

 

피타고라스의 정리를 이용해 마우스가 느리게 움직이면 작은 원을, 빠르게 움직이면 큰 원을 그리도록 만들었다.

pow() 함수는 p5.js에서 제공해주는 함수로, 제곱된 값을 구해준다.

(pow(3,2)라면 3의 제곱, 9를 반환한다.)

sqrt() 함수는 제곱근을 구해준다.

(sqrt(9)라면 제곱해서 9가 나오는 3을 반환한다.)

두가지의 함수를 이용해 전마우스좌표와 현마우스좌표 사이의 거리를 구하고, 

그 거리를 ellipse의 크기를 담당하는 파라미터안에 넣어주었다. 

 

 

 

 

 

 

 

 

 

 

 

 

짧게 튜토리얼을 마치면서 p5.js가 어떤 것인지 살펴보았다.

생각보다 processing과 언어만 다른게 아닐까 느낄 정도로 비슷하고,

심지어 이름이 아예 같은 자체 함수와 변수들도 많은 것 같다.

JavaScript에 대한 기본 문법을 공부할 필요성을 느끼게 된 것 같다.

JavaScript 공부를 먼저 마친 뒤, 다시 돌아오면 p5.js로 더 다양한 작업을

진행할 수 있을 것 같다는 기대가 된다!

 

 

 

 

 

 

 

 

 

 

 

자료 출처: YouTube/ 생활코딩 / 모션그랙픽을 위한 p5.js

https://www.youtube.com/@coohde