sketchDownload
var r = 161;
var g = 242;
var b = 228;
var eyesX = 5;
var eyesY =7;
s
function setup() {
createCanvas(600, 450);
background(r, g, b);
fill(255);
text("ribbit", 550, 430);
}
function draw() {
//setup for color of the water
background(r, g, b, 100);
noFill();
stroke(255);
strokeWeight(0.5);
ellipse(mouseX, mouseY, 50, 50);
if(mouseX<200){
background(17, 38, 92, 100);
} else if (mouseX<400){
background(26, 147, 139, 100);
}
//this draws water ripples
noFill();
stroke(255);
//left most ripple
ellipse(5, height/2, 200*mouseX*0.01, 200*mouseX*0.01);
ellipse(5, height/2, 200*mouseX*0.004, 200*mouseX*0.004);
//bottom ripple
ellipse(300, 360, 200*mouseX*0.01, 200*mouseX*0.01);
ellipse(300, 360, 200*mouseX*0.004, 200*mouseX*0.004);
//right ripple
ellipse(580, 160, 200*mouseX*0.01, 200*mouseX*0.01);
ellipse(580, 160, 200*mouseX*0.004, 200*mouseX*0.004);
//draws lilypads above the water
noStroke();
fill(112, 221, 85, 255);
if(mouseX<200){
fill(21, 57, 42, 255);
} else if (mouseX<400) {
fill(25, 131, 36, 255);
}
ellipse(70, 90, 150, 95);
ellipse(190, 50, 190, 110);
ellipse(300, 280, 165, 110);
ellipse(80, 400, 170, 140);
ellipse(550, 90, 230, 120);
ellipse(430, 135, 160, 95);
ellipse(530, 430, 220, 130);
//draws shadow of lilypads
fill(112, 221, 85, 70);
if(mouseX<200){
fill(21, 57, 42, 70);
} else if (mouseX<400) {
fill(25, 131, 36, 70);
}
ellipse(60, 90, 130, 95);
ellipse(180, 50, 190, 110);
ellipse(290, 280, 165, 110);
ellipse(70, 400, 170, 140);
ellipse(540, 90, 230, 120);
ellipse(420, 135, 160, 95);
ellipse(520, 430, 220, 130);
//draws frog figure
fill(63, 190, 31, 255);
if(mouseX<200){
fill(11, 129, 80);
} else if(mouseX<400){
fill(9, 101, 18);
}
rect(40, 60, 50, 50);
rect(40, 50, 20, 20);
rect(70, 50, 20, 20);
rect(77, 89, 21, 21);
rect(30, 89, 21, 21);
//frog tummy
fill(119, 202, 137);
rect(51, 85, 28, 25);
//frog eyes
fill(255);
rect(45, 52, 10, 10);
rect(75, 52, 10, 10);
//frog pupils
fill(0);
rect(47, 55, eyesX, eyesY);
rect(77, 55, eyesX, eyesY);
rect(50, 70, 29, 2);
rect(39, 96, 1, 14);
rect(89, 96, 1, 14);
//draws frog under water
fill(63, 190, 31, 255);
if(mouseX<200){
fill(11, 129, 80);
} else if(mouseX<400){
fill(9, 101, 18);
}
rect(40+mouseX*0.5, 190, 60, 20);
rect(40+mouseX*0.5, 180, 20, 20);
rect(80+mouseX*0.5, 180, 20, 20);
//frog eyes
fill(255);
rect(45+mouseX*0.5, 182, 10, 10);
rect(85+mouseX*0.5, 182, 10, 10);
//frog pupils
fill(0);
rect(47+mouseX*0.5, 185, eyesX, eyesY);
rect(87+mouseX*0.5, 185, eyesX, eyesY);
rect(55+mouseX*0.5, 200, 29, 2);
}