​

​

​

function setup() {

  createCanvas(400, 400);

  bubble1=new Bubble()

  bubble2=new Bubble()

}

​

function draw() {

  background(0);

    bubble1.move()

   bubble1.show()

 bubble2.move()

   bubble2.show()

​

}

​

​

class Bubble{

constructor(x,y){this.x=random(0,400),this.y=random(0,400)}

//move

 move(){ this.x=this.x+random(-1,1)

  this.y=this.y+random(-1,1)}

​

​

​

 show(){ellipse(this.x,this.y,50)}

}

​

​

//用createGraphics制造出一样的效果

​

/*let extraCanvas

let x=200

let y=200

let a=150

let b=300

​

​

function setup() {

  createCanvas(400, 400);

​

  extraCanvas=createGraphics(400,400);

​

​

​

}

​

function draw() {

   // main canvas

    background(0);

  fill(0,255,30)

  ellipse(x,y,50)

  x=x+random(-5,5)

  y=y+random(-5,5)

  //extraCanvas

​

    extraCanvas.clear()

    extraCanvas.fill(255,0,0)

​

  extraCanvas.ellipse(a,b,60)

  a=a+random(-1,1)

  b=b+random(-1,1)

​

  image(extraCanvas,0,0)

}*/