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;
		}
	}

}