let cloudStart = 0;

​

function setup() {

  createCanvas(600, 600);  

  let spacing = width / 163;

  for (let i = 0; i < width; i += spacing) {

    manyRectangles.push( new SineRect(i, 10 + i * 2)  );

  }

  strokeWeight(3);

}

​

function draw() {

  // sky color + dragon's flames

  let r = random(100, 220);

  let g = random(100, 120);

  let b = random(100, 120);

  if (mouseIsPressed == true){

    background(r, g, b);

  }

  else { 

  background(140, 200, 250);

  }

  // clouds

  cloudStart += 1;

  fill(255);

  noStroke();

  // cloud1

  ellipse( cloudStart + 75, 100, 100);

  ellipse( cloudStart + 150, 100, 100);

  ellipse( cloudStart + 100, 55, 100);

  // cloud3

  ellipse( (cloudStart * 1.3) + 175, 525, 75);

  ellipse( (cloudStart * 1.3) + 150, 550, 75);

  ellipse( (cloudStart * 1.3) + 200, 550, 75);

   ellipse( (cloudStart * 1.3) + 210, 510, 75);

    // cloud2

    ellipse( (cloudStart * 0.8) + 265, 240, 100);

  ellipse( (cloudStart * 0.8) + 240, 210, 100);

  ellipse( (cloudStart * 0.8) + 310, 210, 110);

​

  if (cloudStart >= width){

    cloudStart = -500

  }

// dragon's body color

  fill(140, 70, 70);

  stroke(80, 50, 50);

​

  for (let i = 0; i < manyRectangles.length; i++) {

    manyRectangles[i].drawRect();

  }

​

}

​

class SineRect {

  constructor(x, rectWidth, rectHeight) {

    this.x = x;

    this.rectWidth = rectWidth;

    this.rectHeight = 200;   

    this.speed = 0.01;

  }

​

  // dragon body + movement

 drawRect() {

    rect(

      this.x,

      map(sin((frameCount + this.x) * this.speed), -1, 1, 10, height / 2),

  this.rectWidth, this.rectHeight, 20

      );

  }

}