Project 03: Dynamic Drawing

sketchDownload

var angle;  
var rStart = 209; 
var rSlope = -186/400; 
var bStart = 237;
var bSlope = -173/400; 
var gStart = 255;
var gSlope = -163/400;
var oSlope = 235/400; 

function setup() {
    createCanvas(300, 400);
    background(220);
}

function get_color(mouseY) { //background color 
    if (mouseY <= 400) {
        var r = rStart + (mouseY*rSlope); 
        var g = bStart + (mouseY*bSlope); 
        var b = gStart + (mouseY*gSlope); 
        return [r, g, b];
    }
    else { //if mouse exceeds bounds
        return [23, 64, 92]; //keep color same 
    }
}

function get_opacity(mouseY) { //flower opacity
    if (mouseY <= 400) { 
        var opacity = 255 - (mouseY*oSlope);
        return opacity; 
    }
    else { //if mouse exceeds bounds 
        return 20; //keep opacity same
    }
}

function get_grass(mouseX) { //????
    if (mouseX <= 300) {
        if (mouseX <= 150) {
            var grR = ((65/150)*(mouseX) + 56);
            return [grR, 121, 18];
        }
        else {
            var grG = ((-37/150)*(mouseX-150) + 121);
            return [121, grG, 18];
        }
    }
    else { //if mouse exceeds bounds
        return [121,84,18]; //brown
    }
}


function draw() {
    var rgb = get_color(mouseY);
    var opacity = get_opacity(mouseY);
    var [gr,gg,gb] = get_grass(mouseX);
    background(rgb[0], rgb[1], rgb[2]);


    //flower
        noFill();
            stroke(143, 167, 65, opacity);
            strokeWeight(8)
            bezier(135,225,180,230,190,300,158,380); //leftstem
            bezier(224,168,250,180,220,320,150,370); //rightstem
        noStroke();
            fill(178, 123, 210, opacity); //lightpurple
                ellipse(130,210,30);
                ellipse(150,220,30);
                ellipse(143,243,30);
                ellipse(120,235,30); //end of flower left
                ellipse(220,150,30);
                ellipse(243,160,30);
                ellipse(233,183,30);
                ellipse(210,175,30); //end of flower right
            noStroke();
            fill(223, 186, 244, opacity);
            ellipse(224,168,15) //topflowermiddle
            fill(223, 186, 244, opacity);
            ellipse(135,225,15); //bottomflowermiddle

    //leaves 
        noStroke();
        fill(143,167,65, opacity);
        arc(175,280,190,190, 0, PI/2, OPEN); //rightleafright
        fill(143,167,65, opacity);
        arc(270,375,190,190, PI,-PI/2, OPEN); //rightleafleft
        noStroke();
        fill(143,167,65, opacity);
        arc(79,375,190,190, -PI/2, 0,OPEN); //leftleafright
        fill(143,167,65, opacity);
        arc(174,280,190,190, PI/2, PI, OPEN); //leftleafleft

    //grass
    dy = 0
    if(mouseY > 300){
        dy = -30
    }
    noStroke();
        fill(gr,gg,gb); //greengrasscolor
            triangle(0,dy+400,25,dy+400,0,dy+330); //blades of grass from left to right
            triangle(8,dy+400,35,dy+400,18,dy+290); 
            triangle(15,dy+400,30,dy+400,30,dy+305); 
            triangle(30,dy+400,50,dy+400,45,dy+305);
            triangle(45,dy+400,75,dy+400,68,dy+320);
            triangle(70,dy+400,100,dy+400,80,dy+330);
            triangle(80,dy+400,110,dy+400,95,dy+320);
            triangle(108,dy+400,135,dy+400,118,dy+300); 
            triangle(115,dy+400,130,dy+400,130,dy+315); 
            triangle(130,dy+400,150,dy+400,145,dy+315);
            triangle(130,dy+400,150,dy+400,145,dy+305);
            triangle(145,dy+400,175,dy+400,168,dy+320);
            triangle(170,dy+400,200,dy+400,180,dy+330);
            triangle(180,dy+400,210,dy+400,195,dy+320);
            triangle(200,dy+400,225,dy+400,220,dy+320);
            triangle(180,dy+400,200,dy+400,195,dy+305);
            triangle(215,dy+400,245,dy+400,238,dy+320);
            triangle(240,dy+400,270,dy+400,260,dy+310);
            triangle(250,dy+400,275,dy+400,270,dy+315);
            triangle(270,dy+400,290,dy+400,285,dy+325);
            triangle(285,dy+400,300,dy+400,297,dy+310);
            rect(0,dy+395,300,dy+100);
                

    fill(212, 220, 192);
    noStroke();
    textSize(12);
    textAlign(CENTER);
    text("ISAIAH 40:8",262,393);

    //bible
    rotate(angle - QUARTER_PI);
    noStroke();
    fill(75, 45, 20);
    rect(35,40,150,90);
    noStroke();
    fill(255, 239, 226);
    ellipse(125,49,35);
    ellipse(95,49,35);
    noFill();
    strokeWeight(3);
    stroke(255, 239, 226);
    bezier(45,50,70,60,90,10,110,48); //toplineleft
    bezier(45,120,70,130,90,90,110,120); //bottomlineleft
    line(45,50,45,120);
    line(175,50,175,120);
    bezier(110,120,130,90,150,130,175,120); //bottomlineright
    bezier(110,48,130,10,150,60,175,50); //toplineright
    fill(255, 239, 226); //biblefill
    quad(45,51,45,107,175,107,175,51);
    quad(45,120,45,105,100,105,55,120); //bottomleftcorner
    quad(175,120,175,105,120,105,165,120); //bottomrightcorner
    triangle(61,50,80,40,70,100); //toplefttri
    triangle(155,48,132,38,70,100); //toprighttri
    triangle(110,120,85,90,135,90); //bottomtri
    noStroke();
    fill(224, 211, 184);
    quad(110,40,110,122,120,110,120,32);
    push();

    //biblerotate
    if (mouseX > 115 & mouseX < 205){
        angle = mouseX * (1/200);
    }
}

Leave a Reply