//var offset = 200;

//var scalar = 30; //数量

//var speed = 0.05;

var Bubbles = [];

var BackgroundColor;

​

var Hue = 0;

var Lgt = 210;

var LgtDirection;

​

function setup() {

  colorMode(HSB);

  createCanvas(600, 400);

  LgtDirection = 1;

  for (var i = 0; i < 4; i++) {

    let b = new Bubble(90*i,(10)*i) ;

    Bubbles.push(b);

    //Bubbles.push(new Bubble(90*i,(10)*i));

  }

}

​

function draw() {

  //var Lgt = map (Hue,200,230,255,0)

  //print(Lgt);

  background(190, 40, Lgt);

  Lgt += LgtDirection;

  if (Lgt <= 20 || Lgt >= 250) {

    LgtDirection = -LgtDirection;

  }

​

  Hue += 1;

   for (var i = 0; i < Bubbles.length; i++){

  Bubbles[i].waveline(10);

  Bubbles[i].waveline(20);

  //Bubbles[i].wavebo();

    print(Lgt);

   }

  //Hue= constrain (hue,0,230);

  /*var y1 = offset + sin(angle) * scalar //why * scalar

  var y2 = offset + sin(angle + 0.4) * scalar;

  var y3 = offset + sin(angle + 0.8) * scalar;

  ellipse(80, y1, 40, 40);

  ellipse(120, y2, 40, 40);

  ellipse(160, y3, 40, 40);

  angle += speed;*/

}

//class BackgroundColor {};

class Bubble {

  constructor(angle,x) {

    this.angle = angle;

    this.offset = 200;

    this.scalar = 40; //数量

    this.speed = 0.05;

    this.y = 1;

    this.x =x;

  }

  waveline() {

    //this.x=x;

    noStroke();

    fill(255,0,60,5);

    this.y = this.offset + sin(this.angle) * this.scalar //why * scalar

    ellipse(this.x, this.y, 10, 10);

    this.angle += this.speed;

  }

  wavebo() {

    this.x = this.x+10;

  }

​

​

}