Project 3: Dynamic Drawing

sketch
//Ilyas Khan
//Section D
//this program focuses on the y axis with minimal to no change in the x

let yChange = 0; //the rate of change for most of the shape dimensions in this program.
function setup() {
    createCanvas(600, 450);
    background(0);
}
function draw() {
    yChange = mouseY/50 //the rate of change for most of the shape dimensions in this program.
    background(0);

    fill(255, 231, 179);
    stroke(240, 203, 158);
    quad(300,175/yChange,220,150,300,130,380,150); //top
    //dome (made of ellipses to appear dome-like from a distance)
    fill(119, 199, 195); 
    stroke(240, 176, 0)
    strokeWeight(0.1);
    ellipse(300,150,100,25);
    ellipse(300,148,100,25);
    ellipse(300,146,100,25);
    ellipse(300,144,96,24);
    ellipse(300,142,96,24);
    ellipse(300,140,92,23);
    ellipse(300,138,92,23);
    ellipse(300,136,84,22);
    ellipse(300,134,84,22);
    ellipse(300,132,74,21);
    ellipse(300,130,74,21);
    ellipse(300,128,62,18);
    ellipse(300,126,62,16);
    ellipse(300,124,46,14);
    ellipse(300,122,36,12);
    ellipse(300,120,26,10);
    ellipse(300,118,16,8);
    fill(255, 231, 179);
    stroke(240, 203, 158);
    quad(220,150,300,175/yChange,300,300/yChange,220,275/yChange); //left side
    quad(300,300/yChange,300,175/yChange,380,150,380,275/yChange); //right side
    
    if (mouseY < 50) { //the top view of the cube
        scaleY = (20-mouseY)/5; //"zoom factor" for zooming in on the cube
        if (scaleY < 1) {
            scaleY = 1;
        }
        background(0);
        translate(300,175); //translation to the center of the cube for "zooming"
        newY = 175;
        scale(scaleY);
        quad(0,0,-80,-25,0,-45,80,-25); //top
        quad(-80,-25,0,0,0,125,-80,100); //left side 
        quad(0,125,0,0,80,-25,80,100); //right side
        //dome (composed of ellipses to appear dome-like from a distance)
        fill(119+(mouseY),199+(mouseY),195+(mouseY)); 
        stroke(240, 176, 0)
        strokeWeight(0.1);
        ellipse(0,150-newY,100,25);
        ellipse(0,148-newY,100,25);
        ellipse(0,146-newY,100,25);
        ellipse(0,144-newY,96,24);
        ellipse(0,142-newY,96,24);
        ellipse(0,140-newY,92,23);
        ellipse(0,138-newY,92,23);
        ellipse(0,136-newY,84,22);
        ellipse(0,134-newY,84,22);
        ellipse(0,132-newY,74,21);
        ellipse(0,130-newY,74,21);
        ellipse(0,128-newY,62,18);
        ellipse(0,126-newY,62,16);
        ellipse(0,124-newY,46,14);
        ellipse(0,122-newY,36,12);
        ellipse(0,120-newY,26,10);
        ellipse(0,118-newY,16,8);
    }
    if(mouseY >= 91){  //the beginning of the interior cube view
        background(mouseY-91*(mouseY/91)+(mouseX/10),mouseY-27*(mouseY/91)+(mouseX/10),mouseY-38*(mouseY/91)+(mouseX/10)); //a background that changes color
        quad(300,175/(91/50),220,150,300,300/(91/50)+(mouseY-91),380,150); //bottom
        quad(220,150-(mouseY-91),300,175/(91/50)-(mouseY-91),300,300/yChange-(yChange*10),220,275/(91/50)); //left side
        quad(300,300/yChange-(yChange*10),300,175/(91/50)-(mouseY-91),380,150-(mouseY-91),380,275/(91/50)); //right side
        //pillar
        fill(mouseY-100);
        stroke(240, 176, 0)
        beginShape();
        vertex(270,140-(yChange*10));
        vertex(285,150-(yChange*10));
        vertex(315,150-(yChange*10));
        vertex(330,140-(yChange*10));
        vertex(315,130-(yChange*10));
        vertex(285,130-(yChange*10));
        endShape(CLOSE);
        quad(270,140,285,150,285,150-(yChange*10),270,140-(yChange*10));
        quad(315,150,330,140,330,140-(yChange*10),315,150-(yChange*10));
        noStroke();
        quad(285,150-(yChange*10),315,150-(yChange*10),315,150,285,150);
        if(mouseY >= 124){ //the filling out of the interior cube view
            background(mouseY-91*(mouseY/91)+(mouseX/10),mouseY-27*(mouseY/91)+(mouseX/10),mouseY-38*(mouseY/91)+(mouseX/10));
            fill(255, 231, 179);
            stroke(240, 203, 158);
            quad(220,150-(mouseY-91),300,175/(91/50)-(mouseY-91),300,300/(91/50),220,275/(91/50)); //left side
            quad(300,300/(91/50),300,175/(91/50)-(mouseY-91),380,150-(mouseY-91),380,275/(91/50)); //right side
            quad(300,175/(91/50),220,150,300,300/(91/50)+(mouseY-91),380,150); //bottom
            //pillar
            fill(mouseY-100);
            stroke(240, 176, 0)
            beginShape();
            vertex(270,140-(mouseY-91));
            vertex(285,150-(mouseY-91));
            vertex(315,150-(mouseY-91));
            vertex(330,140-(mouseY-91));
            vertex(315,130-(mouseY-91));
            vertex(285,130-(mouseY-91));
            endShape(CLOSE);
            quad(270,140,285,150,285,150-(mouseY-91),270,140-(mouseY-91));
            quad(315,150,330,140,330,140-(mouseY-91),315,150-(mouseY-91));
            noStroke();
            quad(285,150-(mouseY-91),315,150-(mouseY-91),315,150,285,150);
            if (mouseY >= 185){ //the zooming part of the inner cube view
                background(mouseY-91*(mouseY/91)+(mouseX/10),mouseY-27*(mouseY/91)+(mouseX/10),mouseY-38*(mouseY/91)+(mouseX/10));
                scaleY = -1*(185-mouseY)/8; //the "zoom" factor for the zoom in on the cube
                if (scaleY < 1) {
                    scaleY = 1;
                }
                fill(255, 231, 179);
                stroke(240, 203, 158);
                translate(300,175/(91/50)); //translates to the center of the cube for "zooming"
                scale(scaleY); 
                quad(-80,150-(185-91)-175/(91/50),0,175/(91/50)-(185-91)-175/(91/50),0,300/(91/50)-175/(91/50),-80,275/(91/50)-175/(91/50)); //left side
                quad(0,300/(91/50)-175/(91/50),0,175/(91/50)-(185-91)-175/(91/50),80,150-(185-91)-175/(91/50),80,275/(91/50)-175/(91/50)); //right side
                quad(0,175/(91/50)-175/(91/50),-80,150-175/(91/50),0,300/(91/50)+(185-91)-175/(91/50),80,150-175/(91/50)); //bottom
                //pillar
                fill(mouseY-100);
                stroke(240, 176, 0)
                beginShape();
                vertex(-30,140-(mouseY-91)-175/(91/50));
                vertex(-15,150-(mouseY-91)-175/(91/50));
                vertex(15,150-(mouseY-91)-175/(91/50));
                vertex(30,140-(mouseY-91)-175/(91/50));
                vertex(15,130-(mouseY-91)-175/(91/50));
                vertex(-15,130-(mouseY-91)-175/(91/50));
                endShape(CLOSE);
                quad(-30,140-175/(91/50),-15,150-175/(91/50),-15,150-(mouseY-91)-175/(91/50),-30,140-(mouseY-91)-175/(91/50));
                quad(15,150-175/(91/50),30,140-175/(91/50),30,140-(mouseY-91)-175/(91/50),15,150-(mouseY-91)-175/(91/50));
                noStroke();
                quad(-15,150-(mouseY-91)-175/(91/50),15,150-(mouseY-91)-175/(91/50),15,150-175/(91/50),-15,150-175/(91/50));
            }
            
        }
    }
    print(mouseY);

}

Leave a Reply