HTML
>
Canvas
>
Processing
>Bevegelse
Bevegelse
Krasj
Det er t0 involverte processing-filer:
_crashingBalls.pde
/*
we set up a number of moving balls and make them change direction when they collide
*/
//import ddf.minim.*;
//Minim minim;
//AudioSample hit;
// some balls
Ball[] runners;
void setup(){
size(600,600);
//minim = new Minim(this);
// load hit.wav from the data folder
/*hit = minim.loadSample( "hit.mp3", // filename
512 // buffer size
);*/
// make balls
runners=new Ball[10];
for(int i=0;i<runners.length;i++){
runners[i]=new Ball(color(255,0,0),i);
// we dont want to start with overlapping balls
for(int j=0;j<i;j++)
if(runners[j].touchBall(runners[i]))
runners[i].visible=false;
}
}
void draw(){
background(255);
// draw
for(int i=0;i<runners.length;i++){
runners[i].drawMe();
}
// collisions and move
traffic();
}
void traffic(){
// check collisions
for(int i=0;i<runners.length;i++){
for(int j=i+1;j < runners.length; j++){
if(runners[i].touchBall(runners[j])){
runners[i].crash(runners[j]);
}
}
}
// move (with new speeds)
for(int i=0;i<runners.length;i++)
runners[i].moveMe();
}
og
_Ball.pde
/*
class describing a ball with position, speed, color, radius
speed is interpreted as points pr frame
extended from simple_balls
*/
class Ball{
PVector pos;
PVector speed;
color c;
float radius;
boolean visible;
int index;
Ball(color c,int index){
this.c=c;
this.index=index;
pos=new PVector(random(radius,width-radius),random(radius,height-radius));
speed=new PVector(random(-3.0,3.0),random(-3.0,3.0));
radius=15;
visible=true;
}
// draw it if it is visble
void drawMe(){
if(visible){
fill(c);
ellipse(pos.x,pos.y,radius*2,radius*2);
// show index
fill(0);
text(index,pos.x,pos.y);
// show speed
PVector copyOfPos=pos.get();
PVector copyOfSpeed=speed.get();
copyOfSpeed.mult(20);// a reasonable number
copyOfPos.add(copyOfSpeed);
line(pos.x,pos.y,copyOfPos.x,copyOfPos.y);
}
}
// move according to speed
void moveMe(){
pos.add(speed);
//make sure we are on sketch and avoid flickering
if(pos.x+radius > width)
speed.x=-abs(speed.x);
if(pos.x-radius <0)
speed.x=abs(speed.x);
if(pos.y +radius >height)
speed.y=-abs(speed.y);
if(pos.y -radius<0){
speed.y=abs(speed.y);
}
}
// do this ball overlap an other ball
boolean touchBall(Ball otherBall){
if(!visible)
return false;
if(!otherBall.visible)
return false;
return pos.dist(otherBall.pos) <= radius+otherBall.radius;
}
// what we do when they overlap, crash
void crash(Ball otherBall){
// will not crash if one of them is not visible
if(otherBall.visible && visible){
// swap speed
PVector oldSpeed=speed.get();
speed=otherBall.speed.get();
otherBall.speed=oldSpeed.get();
playClick();
}
}
}
Javascriptkoden er slik, med to funksjoner som kaller skissen:
_index.js
function playClick(){
var theSound=document.getElementById('hit');
theSound.pause();
theSound.play();
}