모션그래픽 p5.js(Processing 같은원리)

index.html

0.00MB

main.js

0.00MB

2학년때 처음 객체를 공부했던 객체지향언어와실습에서 학습한 Processing과 같은 원리다.

processing과 같은원리의 p5.js

크게 function setup()과 function draw()로 나뉜다.

setup은 시작시 기본으로 셋팅되는 배경이고,

draw는 계속해서 실행이되면서 적용되는 일종의 반복 함수이다.

 

그리고 위에서 적용된 도형/메소드는 내려갈수록 덮어쓰기가 된다.

 

 

웹을 만들때는 아래와같이 적용하면된다.

head에서 script에 p5js를 불러오고, body에서 적용 script를 넣어준다.

 

역동적인효과 예시

draw로 계속 실행된다.

 

mousePressed 오버라이드 VS mouseIsPressed(입력장치 되게 짧은시간에 많이입력됨)

직관적으로는 mousePressed메소드를 오버라이드해서 사용하는게 좋다.

 

 

입체감을 더해주는 방법

피타고라스정리 이용

sqrt( (mouseX-pmouseX)^2 +(mouseY-pmouseY)^2 ) = 빗변의 길이 = 속도

 

circle의 반지름을 속도로 하면 마우스 이동속도에따라 원의 크기가 커지는 듯한 효과를 줄 수 있다.