let bubbleSize = 0;

​

function setup() {

  background1();

}

​

function draw() {

  background1();// to achieve color change

  bubble();// 

}

​

function keyPressed() {

  if (c == 0) {

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

}

​

​

function doubleClicked(){background(255)}//? no effect, checked the console log and it worked, so the reason why it didnt show coz it got covered by the below background.

​

// User defined function 1:

​

function bubble() {

  strokeWeight(10);

  fill(255, 100,c);

  ellipse(mouseX, mouseY, bubbleSize);

  bubbleSize = abs(mouseX - pmouseX);

}

​

​

// User defined function 2:

function background1() {

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

  background(216, 203, c);/*this is the overwriting part, thats the reason why can't I run the draw the bubbles as wellas the double clicked doesnt work. because the "background"was written here, which also writen in "function setup() {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);

}

​