let r = 50; // red

let b = 200; // blue

​

let offset = 0.0;

let offset2 = 0.2;

let offset3 = 0.3;

let offset4 = 0.4;

​

function setup() {

  createCanvas(500, 500);

  frameRate(30);

}

​

function draw() {

  // for loop does not work, why?

  // for (let g = 50; g <= 255; g = g + 1) {

  //   background(255, g, 50);

  // }

​

  //random color flashing

  // let g = random(0, 100)

  // background(200, g, 50)

​

  //increase x by 1 every time the for loop runs

  for (let x = 0; x <= width; x = x + 1) {

    noFill();

    strokeWeight(1);

    let g = 200 - x / 2; // vary the "g" value according on the "x" value

    stroke(r, g, b);

    line(x, 0, x, height); //draw line from (x, 0) to (x, height) from left to right to create gradient

  }

​

  r = r + 1; // gradually increase r value by 1

  b = b + 1; // gradually increase r value by 1

​

  drawBubbles();

}

​

function drawBubbles() {

  noStroke();

  fill(0, 0, 150, 50);

​

  offset = offset + 0.003;

  let n = noise(offset) * width;

  circle(n, n, 0.4 * n);

​

  offset2 = offset2 + 0.003;

  let v = noise(offset2) * 200;

  circle(v - 10, 400, 0.4 * v);

​

  offset3 = offset3 + 0.003;

  let k = noise(offset3) * width;

  circle(400, k, 0.2 * k);

​

  offset4 = offset4 + 0.003;

  let u = noise(offset4) * width;

  circle(40, u, 0.3 * k);

}

​