곁다리… 앞서 만든 게임에서 폭파효과를 주기 위해 필요해서 따로 예제를 만들어 보았다.
<!doctype html>
<html lang="ko">
<head>
<meta name="viewport" content="width=device-width, user-scalable=no">
<meta charset="UTF-8">
<meta name="Description" content="">
<title>P5.JS 연습</title>
<style type="text/css">
body{overflow-x : hidden; overflow-y: hidden; text-align: center;}
p{
font-size: .9em;
}
#defaultCanvas0{
}
</style>
<!--공통-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.min.js"></script>
<!--프로젝트 스크립트-->
<script src="sketch20.js"></script>
<script src="explode.js"></script>
<script src="firework.js"></script>
</head>
<body>
<h1>P5.js Example 20(Particle system)</h1>
<p>마우스를 클릭하세요</p>
</body>
</html>
마우스를 클릭하면 사방으로 퍼지는 파티클이 생성되었다가 사라진다.
var fireworks = []; //array
function setup(){
createCanvas(640, 480);
}
function draw(){
background(0);
for(var i = 0; i < fireworks.length; i++){
fireworks[i].run();
if(fireworks.length>10){
fireworks.splice(0, 1);
}
}
}
// 마우스를 클릭하면 새로운 파티클을 firewroks array에 추가한다.
function mousePressed() {
fireworks.push(new Firework(mouseX, mouseY));
}
이중구조 배열에 파티클을 담는다.
function Particle(x, y){
this.pos = createVector(x, y);
this.vel = createVector(random(-2, 2), random(-2, 2));
this.acc = createVector(0,0);
this.alpha = 255;
this.finished = function(){
return this.alpha < 0;
}
// 중력을 주고 싶으면 사용
this.applyForce = function(force){
this.acc.add(force);
}
this.update = function(){
this.vel.add(this.acc);
this.pos.add(this.vel);
this.acc.mult(0);
this.alpha -= 6;
}
this.show = function(){
stroke(255, this.alpha);
strokeWeight(2);
point(this.pos.x, this.pos.y);
}
}
그 결과는 아래 링크에서 확인 하자.
