[다운로드]
http://p5js.org/download/ (p5.js, p5.min.js)
https://github.com/bmoren/p5.collide2D (p5.collide2d.js)
[index.html]
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel="stylesheet" href="/css/style.css">
<script src="/javascripts/lib/p5.js"></script>
<script src="/javascripts/lib/p5.dom.js"></script>
<script src="/javascripts/lib/p5.collide2d.js"></script>
<script src="/javascripts/collide.js"></script>
</head>
<body>
<div id="myContainer"></div>
</body>
</html>
[collide.js]
var cir;
var drops = [];
var numdrops = 20;
function setup() {
canvas = createCanvas(1000, 400);
canvas.parent('myContainer');
canvas.position(10, 10);
cir = new circleObj(20);
for(i=0;i<numdrops;i++){
r = new rainObj(random(width),random(height), random(10,50));
drops.push(r); //add it to the array.
}
}
function draw() {
background(255);
noStroke();
ellipse(width/2, height/2, 100, 100);
hit = collidePointCircle(mouseX,mouseY,width/2,height/2,100);
//collidePointCircle(pointX, pointY, circleX, circleY, diameter)
if(hit){ //change color!
fill('purple')
for(i=0;i<50; i++){
for(j=0;j<50; j++){
ellipse(i*100,j*100,50,50)
}
}
}else{
fill('green')
}
for(i=0;i<numdrops;i++){
drops[i].disp();
drops[i].collide( cir ); //collide against the circle object
}
cir.disp(mouseX,mouseY);
}
function mousePressed(){
circleButton(width/2,height/2,100, buttonHit) //run our check for the button below
}
function circleButton(x,y,diameter, callback){
var hit = false;
hit = collidePointCircle(mouseX,mouseY,x,y,diameter); //see if the mouse is in the rect
if(hit){ //if its inside fire the callback
callback(hit);
}
}
function buttonHit(callbackData){
//do things when the button gets pressed.......
for(i=0;i<50; i++){
for(j=0;j<50; j++){
ellipse(i*100,j*100,50,50);
}
}
}
function circleObj(dia){
this.dia = dia;
this.color = color(random(255),random(255),random(255))
this.x;
this.y;
this.disp = function(x,y){
this.x = x;
this.y = y;
noStroke();
fill(this.color);
ellipse(this.x,this.y,this.dia,this.dia);
}
}
function rainObj(x,y,dia){
this.x = x;
this.y = y;
this.dia = dia;
this.color = color(random(255),random(255),random(255));
this.hit = false;
this.collide = function(obj){
this.hit = collideCircleCircle(this.x, this.y, this.dia, obj.x, obj.y, obj.dia); //collide the cir object into this circle object.
if(this.hit){
this.color = color(0); //set this rectangle to be black if it gets hit
}
};
this.disp = function(){
noStroke();
fill(this.color);
this.y += 0.5; //move to the bottom!
if(this.y > height){ //loop to the top!
this.y = -this.dia;
this.x = random(width);
}
ellipse(this.x,this.y,this.dia);
};
}
출처: https://github.com/bmoren/p5.collide2D
'Development > Processing' 카테고리의 다른 글
| p5.particle.js 2d 오브젝트의 파티클 라이브러리 (0) | 2017.04.20 |
|---|---|
| p5.scribble.js 손글씨 형태의 2D Object (0) | 2017.04.12 |
| p5.js dom library, Beyond the canvas (0) | 2017.03.15 |
| p5.js sound library, FFT 이용한 sound visualization (2) | 2017.03.14 |
