​

let offset = 0;

let r, g, b;

let w, h;

let extraCanvas;

let bubbleSize = 0;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  extraCanvas = createGraphics(windowWidth, windowHeight);

  background(173, 216, 230); // dilema: this color disappears when mouse pressed, but if put it in the draw, it will cover my rainbow and bubbles.

}

​

function draw() {

  //bubbles

  extraCanvas.clear();

  extraCanvas.noStroke();

  extraCanvas.fill(random(0, 255), random(0, 255), random(0, 255), 100);

  extraCanvas.ellipse(mouseX, mouseY, bubbleSize);

  bubbleSize = abs(mouseX - pmouseX);

​

  image(extraCanvas, 0, 0, width, height);

​

  rainbow();

}

​

function rainbow() {

  r = noise(offset * 0.2) * 255;

  g = noise(offset * 0.3) * 255;

  b = noise(offset * 0.1) * 255;

​

  stroke(r, g, b);

  strokeWeight(20);

  w = noise(offset * 0.1) * width;

  h = noise(offset * 0.1) * height * 1.5;

​

  offset = offset + 0.03;

  arc(width / 2, (height / 10) * 8, w, h, PI, 0);

}

​

function mousePressed() {

  let fs = fullscreen();

  fullscreen(!fs);

}

​

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

}

​