음악, 삶, 개발

/* 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 안에 코드를 변경한뒤 저장하면 자동으로 반영된다.