음악, 삶, 개발

/* sketch.js */ let mousePositions = [] const MAX_POS = 100 function setup() { createCanvas(500, 500) } function draw() { background('tomato') ellipse(mouseX, mouseY, 50, 50) mousePositions.push({x: mouseX, y: mouseY}) if (mousePositions.length > MAX_POS) mousePositions.shift() for (let i = 0; i < mousePositions.length; ++i) { ellipse(mousePositions[i].x, mousePositions[i].y, i, i) } }

https://www.youtube.com/watch?v=Su792jEauZg&ab_channel=TheCodingTrain Vue 포스팅에서도 다루기는 했지만, 일반 p5 개발환경에서 먼저 instance mode 를 사용하는것을 간단히 코드로 정리해놓았다. 추후 Vue 개발을 위해 p5 환경에서도 인스턴스 모드로 코드를 작성하는것이 좋을것이다. 그래야만 복붙 할수있다. /* sketch.js */ // p5 인스턴에 사용할 sketch 객체 정의 const sketch = (p) => { p.setup = () => { const parentId = 'p5-container' // 부모 태그의 id p.createCanvas(500, 500).parent(parentId) p.noL..

1. 먼저 아래와 같이 폴더를 만들고, 2개의 파일을 만든다. 2. 이 폴더를 VScode 에서 통채로 연다. 3. 각 파일에 아래와 같이 코드를 작성한다. /* sketch.js */ function setup() { createCanvas(500, 500) } function draw() { background('blue') } 4. VSCode 에서 Live Server 팩을 설치한다. 5. VSCode 의 커맨트창에서 Open with Live Server 를 실행하면.. 6. 브라우저 창이 켜지면서 나의 index.html 이 실행된다. 이제부터 sketch.js 안에 코드를 변경한뒤 저장하면 자동으로 반영된다.

www.npmjs.com/package/p5 Youtube : Instance mode (a.k.a name spacing) Instance container p5.js 는 HTML5 의 를 엄청나게 확장해주는 그래픽 라이브러리이다. 물론 가 기본적으로 제공하는 함수들만으로도 그려볼수있겠지만 복잡한 도형들을 그려낼려면 엄청난 노가다를 해야한다. p5.js 가 제공하는 수많은 함수들을 사용하면, 훨씬 더 우아한 그림들을 그려낼수있다. 구글에서 p5 를 vue 에서 사용하는 것을 검색했을때, 결과가 거의 나오지않았다. 나오더라도 vue 3 의 composition api 를 사용하지않은 예제들이 대부분이었다. 그래서 ..