음악, 삶, 개발
p5 의 instance 모드 사용하기 본문
< 참고 자료 >
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.noLoop()
}
p.draw = () => {
console.log('hey!')
}
}
// p5 instance 를 sketch 객체를 이용하여 생성
const canvas = new p5(sketch)
// 나의 함수로 p5 인스턴스를 변경
setInterval(() => {
const color = ['red', 'blue', 'green', 'yellow'][Math.floor(Math.random() * 4)]
canvas.background(color)
}, 200)<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="p5-container"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.min.js"></script>
<script src="sketch.js"></script>
</body>
</html>
'개발 Web/p5.js' Related Articles
more
