xxxxxxxxxx
136
//Goal:Combine 2 of my previous sketches, and create unique functions with a different name for every setup() and draw() function of each sketch.Every time when the mouse clicks or key presses, the background color will change.
/*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);
}