Programming/p5.js
-
p5.js 시작하기 (2) / p5.js Tutorial (2)Programming/p5.js 2023. 4. 28. 07:14
이어서 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강 화면의 왼쪽 위에서 화면..
-
p5.js 시작하기 (1) / p5.js Tutorial (1)Programming/p5.js 2023. 4. 26. 06:19
p5.js를 시작해보려 한다. 자바스크립트 언어도 공부해보면서 다양한 작업을 할 수 있어 꽤 유용하지 않을까 싶다. 유튜브에 p5.js를 잘 정리해주신 강의가 있어 이걸 보면서 따라해볼 예정이다. 이런 좋은 콘텐츠를 무료로 올려주시다니.. 참 감사하다. * 공부에 큰 도움을 받은 유튜브 강좌 링크를 첨부한다. (생활코딩 - 모션그래픽을 위한 p5.js) https://youtu.be/31JEsy40XBU 1강 1. 환경 세팅하기 크게 p5.js를 작성할 수 있는 방법은 두가지이다. 코드에디터에서 태그에 p5.js의 링크를 첨부하여 사용하는 방법. 그리고 p5.js에서 제공하는 에디터 사용하기. 에디터는 p5.js 공식 홈페이지에 들어가면 사용이 가능하다. https://p5js.org/ko/ home |..