Project 3: Dynamic Drawing

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);
}

Leave a Reply