​

/*Please see debugging process below:

let c = 0;

let bubbleSize = 0;

​

function setup() {

  background1();

}

​

function draw() {

  background1();

  bubble();//Bug: the bubbles couldn't appear sequentially in the canva as I moved the mouse.

​

Debugging: I wrote down on what I had done and broke down what the problem was. After that I still couldn't solve it, I took the advantage of weekly Q&A session to consult with peers and found out the reason was overwritting the background.}

​

function keyPressed() {

  if (c == 0) {

    c = c+10}else{c=c+20;if(c>255){c=0}}

}

​

​

function doubleClicked(){background(255)}//Bug: There is no effect after double clicking. Debugging: In order to check if the function works, I used console.log and it worked ok. 

​

​

function bubble() {

  strokeWeight(10);

  fill(255, 100,c);

  ellipse(mouseX, mouseY, bubbleSize);

  bubbleSize = abs(mouseX - pmouseX);

}

​

​

function background1() {

  createCanvas(800, 800);//This should be written in the setup.

  background(216, 203, c);//This is the overwriting part and the reason of why I couldn't draw the bubbles as well as the double clicked couldn't work."

​

  strokeWeight(0.5);

  fill(197, 168, 26);

  triangle(200, 0, 140, 90, 250, 110);

​

  fill(121, 133, 116, 200);

  ellipse(240, 140, 130, 130);

​

  fill(119, 67, 152);

  ellipse(70, 80, 80, 80);

​

  strokeWeight(2);

  line(55, 0, 100, 240);

​

  strokeWeight(1);

  line(0, 80, 200, 80);

​

  strokeWeight(5);

  line(100, 0, 230, 120);

​

  strokeWeight(1);

  line(20, 180, 220, 180);

​

  fill(123, 0, 0);

  strokeWeight(3);

  rect(292, 180, 55, 50);

​

  line(327, 202, 361, 202);

​

  strokeWeight(4);

  line(327, 210, 361, 210);

}*/

​

​

let c = 0;

let bubbleSize = 0;

​

function setup() {

  createCanvas(800, 800);

}

​

function draw() {

  background1();

  bubble();

}

​

function mousePressed() {

  if (c == 0) {

    c = (216);

  } else {

    c = 0;

  }

  background(c,203,187);

}

​

// User defined function 1:

​

function bubble() {

  strokeWeight(0.2);

  fill(0, 100, 255, 50);

  ellipse(mouseX, mouseY, bubbleSize);

  bubbleSize = abs(mouseX - pmouseX);

}

​

// User defined function 2:

function background1() {

  strokeWeight(0.5);

  fill(197, 168, 26);

  triangle(200, 0, 140, 90, 250, 110);

​

  fill(121, 133, 116, 200);

  ellipse(240, 140, 130, 130);

​

  fill(119, 67, 152);

  ellipse(70, 80, 80, 80);

​

  strokeWeight(2);

  line(55, 0, 100, 240);

​

  strokeWeight(1);

  line(0, 80, 200, 80);

​

  strokeWeight(5);

  line(100, 0, 230, 120);

​

  strokeWeight(1)

  line(20, 180, 220, 180);

​

  fill(123, 0, 0);

  strokeWeight(3);

  rect(292, 180, 55, 50);

​

  line(327, 202, 361, 202);

​

  strokeWeight(4);

  line(327, 210, 361, 210);

}

​

​