P5.js学习(1) Bubble

bubble1

运行效果（浮动的气泡）

sketch.js

var bubbles=[];
function setup() {createCanvas(1500,800);for(var i=0;i<40;i++){bubbles[i]={x:random(0,width),y:random(0,height),display:function(){stroke(255);noFill();ellipse(this.x,this.y,24,24);},move:function(){this.x=this.x+random(-1,1);this.y=this.y+random(-1,1);}}}}function draw() {background(0,197,205);for(var i=0;i<bubbles.length;i++){bubbles[i].move();bubbles[i].display();}
}

 bubble2

在bubble1的基础上加入了鼠标交互，固定了数组长度，将超出长度的元素删除。

效果如图：

sketch.js

var bubbles=[];
function setup() {createCanvas(1500,800);
}/*function mousePressed(){bubbles.push(new Bubble(mouseX,mouseY));
} */
function mouseDragged(){bubbles.push(new Bubble(mouseX,mouseY));
} function draw() {background(0,197,205);for(var i=0;i<bubbles.length;i++){bubbles[i].move();bubbles[i].display();}if(bubbles.length>50){bubbles.splice(0,1);//利用该函数删除数组中的元素，参数一：起始数组元素索引位置、参数二：删除个数}
}function Bubble(x,y){//构造方法，一般用来给对象做初始化//this.x=random(0,width);//this.y=random(0,height);this.x=x;this.y=y;this.display=function(){stroke(255);noFill();ellipse(this.x,this.y,24,24);}this.move=function(){this.x=this.x+random(-1,1);this.y=this.y+random(-1,1);}}

bubble3

    利用鼠标交互，点击气泡内更换颜色，并且将bubble对象的相关内容单独拎出来，放在bubble.js中。

效果如图：

 sketch.js

var bubbles=[];
function setup() {createCanvas(1500,800);for(var i=0;i<10;i++){var x=random(width);var y=random(height);bubbles.push(new Bubble(x,y));}
}function mousePressed(){for(var i=0;i<bubbles.length;i++){bubbles[i].clicked();}
}
function draw() {background(0,197,205);for(var i=0;i<bubbles.length;i++){bubbles[i].move();bubbles[i].display();}}

  bubble.js

function Bubble(x,y){//构造方法，一般用来给对象做初始化this.x=x;this.y=y;this.col=color(255,100);this.display=function(){stroke(255);fill(this.col);ellipse(this.x,this.y,24,24);}this.display1=function(){stroke(255);fill(this.col);rect(this.x,this.y,24,24);}this.clicked=function(){var d=dist(mouseX,mouseY,this.x,this.y)if(d<12){this.col=color(255,0,255);}}this.move=function(){this.x=this.x+random(-1,1);this.y=this.y+random(-1,1);}}

bubble4

       引入lifespan这一变量控制透明度，用透明度的减小来让一个个小气泡消失，但是它们没有真正从数组里删除，所以又利用了splice，但是在使用的过程中我做了一件很危险的事情，就是当我一遍遍历数组一边去删除一些元素的时候，没有考虑到当删除了某个元素以后，其他元素也应该跟着挪位置。所以后面利用它一直在改变的数组长度，i--来做循环了.

效果如下：

 sketch.js

var bubbles=[];
function setup() {createCanvas(1500,800);}function mousePressed(){var b=new Bubble(mouseX,mouseY);bubbles.push(b);
}
function draw() {background(0,197,205);for(var i=bubbles.length-1;i>=0;i--){bubbles[i].move();bubbles[i].display();if(bubbles[i].isFinished()){bubbles.splice(i,1);}}}

 bubble.js

function Bubble(x,y){//构造方法，一般用来给对象做初始化this.x=x;this.y=y;this.lifespan=255;this.display=function(){stroke(255);fill(255,this.lifespan);ellipse(this.x,this.y,24,24);}this.isFinished=function(){if(this.lifespan<0){return true;}else{return false;}}this.move=function(){this.x=this.x+random(-1,1);this.y=this.y+random(-1,1);this.lifespan=this.lifespan-1;}}

bubble5

小气泡的碰撞检测碰撞则会改变色彩

效果如图：

  sketch.js

var b1;
var b2;
function setup() {createCanvas(1500,800);b1=new Bubble(250,200);b2=new Bubble(350,200);
}function draw() {background(0,197,205);b1.update();b2.update();b1.display();b2.display();if(b1.intersects(b2)){b1.changeColor();b2.changeColor();}
}

bubble.js

function Bubble(x,y){//构造方法，一般用来给对象做初始化this.x=x;this.y=y;this.r=48;this.col=color(255);this.display=function(){stroke(255);fill(this.col);ellipse(this.x,this.y,this.r*2,this.r*2);}this.update=function(){this.x=this.x+random(-1,1);this.y=this.y+random(-1,1);}this.changeColor=function(){this.col=color(random(255),random(255),random(255));}this.intersects=function(other){var d=dist(this.x,this.y,other.x,other.y);if(d<this.r+other.r){return true;}else{return false;}}}