Project 3: Dynamic Drawing

function setup() {
    createCanvas(600, 450);
}

function draw() {
    var positionY = constrain(mouseY, 80, 400); //relative Y position for everything that is constrained so the sun doesnt shoot off into the sky etc
    background(139,214,241);
    fill(21,8,29, mouseY - 80); //transitions background to night sky by decreasing transparency with mouseY position
    rect(0,0,600,300);

    var rainbowAlpha = map(constrain(mouseY,80,400), 80, 250, 255, 0); //variable to control transparency of the rainbow as it goes down

    noStroke();
    
    fill(255,0,0,rainbowAlpha); //the rainbow: red
    ellipse(300, positionY + 100, 700, 200);
    fill(254,98,48,rainbowAlpha); //orange
    ellipse(300, positionY + 120, 700, 200);
    fill(255,246,2,rainbowAlpha); //yellow
    ellipse(300, positionY + 140, 700, 200);
    fill(1,179,2,rainbowAlpha); //green
    ellipse(300, positionY + 160, 700, 200);
    fill(4,1,119,rainbowAlpha); //blue
    ellipse(300, positionY + 180, 700, 200);
    fill(35,3,114,rainbowAlpha); //violet
    ellipse(300, positionY + 200, 700, 200,);
    fill(139,214,241); //"clear" ellipse that is the same color as the day background
    ellipse(300, positionY + 220, 700, 200,); 
    fill(21,8,29, mouseY - 80); //"clear" ellipse that tranistions to night sky same why the regular background does
    ellipse(300, positionY + 220, 700, 200); 


    fill(255,246,2); //sun
    circle(150, positionY - 50, 50);

    fill(241,222,150); //moon
    circle(390, positionY - 325, 30);

    fill(233,233,255,mouseY - 250); //stars
    circle(40,96,10);
    circle(250,15,10);
    circle(330,62,10);
    circle(470,340,10);
    circle(580,70,10);
    circle(346,54,10);
    circle(200,30,10);
    circle(475,120,10);
    circle(175,60,10);
    circle(275,115,10);
    circle(430,50,10);
    circle(20,20,10);
    circle(100,40,10);
    circle(270,50,10);
    circle(80,130,10);
    circle(500,25,10);
    circle(400,100,10);
    circle(150,85,10);
    circle(500,55,10);


    var positionX = constrain(mouseX,35,565);

    fill(141,196,39); //green "field"
    rect(0,300,600, 150);

    var oppositeX = map(positionX, 0, 600, 600, 0);

    fill(103,62,16); //left dog
    ellipse(positionX, 350,30,15); //body
    circle(positionX + 15, 345,15); //head
    ellipse(positionX-10,355, 5,8); //leg
    ellipse(positionX + 10, 355, 5, 8); //leg
    ellipse(positionX-15,350,15,5); //tail
    triangle(positionX+9,340,positionX+12,335,positionX+16,340); //ear
    triangle(positionX+14,340,positionX+17,335,positionX+20,340); //ear
    fill(0);
    circle(positionX+16,343,2); //eyes
    circle(positionX+19,343,2);

    fill(103,62,16); //right dog
    ellipse(oppositeX, 390,30,15); //body
    circle(oppositeX - 15, 385,15); //head
    ellipse(oppositeX + 10,395, 5,8); //leg
    ellipse(oppositeX - 10, 395, 5, 8); //leg
    ellipse(oppositeX + 15,390,15,5); //tail
    triangle(oppositeX - 9,380,oppositeX - 12,375,oppositeX - 16,380); //ear
    triangle(oppositeX - 14,380,oppositeX - 17,375,oppositeX - 20,380); //ear
    fill(0);
    circle(oppositeX - 16,383,2); //eyes
    circle(oppositeX - 19,383,2);



}