rkarp1 – Project-03 – Section A

Rachel Karp – Dynamic Drawing

var d = 10; // distance between triangles

/*
This drawing consists of three "modes"
1) "Old" mode, when mouseY is above the middle of the canvas
(minus variable d, the space between the triangles)
2) "Young" mode, when mouseY is below the middle of the canvas
(plus variable d, the space between the triangles)
3) "Contemplative" mode, when mouseY is within the space between the traingles
*/

function setup() {
    createCanvas(480, 640);
}

function draw() {
    //BACKGROUND
    //set background color for "old" mode
    background(0);
    //background color changes in "young" mode
    if(mouseY>height/2+d){
        background(255, 255, 77);
    }
    //backgrond color changes in "contemplatative" mode
    if(mouseY>=height/2-d & mouseY<=height/2+d){
        background(255);
    }

    //set outline color
    stroke(255);

    //TOP TRIANGLE
    //set color in "young" mode
    fill(255, 51, 0);
    //set color in "old" mode
    if(mouseY<height/2-d){
        fill(150);
    }
    //set color in "contemplative" mode
    if(mouseY>=height/2-d & mouseY<=height/2+d){
        fill(255);
    }
    //draw triangle dependent on mouseY
    triangle(width/4, height/2-d, width/2, mouseY, 
        width-width/4, height/2-d);

    //BOTTOM TRIANGLE
    //set color in "young" mode
    fill(255, 51, 0);
    //set color in "old" mode
    if(mouseY<height/2-d){
        fill(150);
    }
    //set color in "contemplative" mode
    if(mouseY>=height/2-d & mouseY<=height/2+d){
        fill(255);
    }
    //draw triangle dependent on mouseY
    triangle (width/4, height/2+d, width/2, height-mouseY, 
        width-width/4, height/2+d);

    //TOP TRIANGLE LINE (age line)
    strokeWeight(3);
    //draw line dependent on mouse Y
    line(0, mouseY, width, mouseY);

    //BOTTOM TRIANGLE LINE (age line)
    //draw line dependent on mouse Y
    line(0, height-mouseY, width, height-mouseY);

    //TEXT
    //add text in "young" mode
    if(mouseY>height/2+d){
        fill(102,102,255);
        //set font size dependent on mouseX
        //constrain font size so that "young!" will remain visible relative to mouseX
        var sizeX = constrain(mouseX, 0, 160);
        textSize(sizeX);
        textAlign(RIGHT);
        text("I feel " + mouseX + " years young!", width, mouseY);
    } 
    //add text in "old" mode
    if(mouseY<height/2-d){
        fill(107, 107, 71);
        //set font size dependent on mouseX
        //constrain font size so that "old." will remain visible relative to mouseX
        var sizeX = constrain(mouseX, 0, 300);
        textSize(sizeX);
        textAlign(RIGHT);
        text("I feel " + mouseX + " years old.", width, mouseY);
    }
    //add text in "contemplative" mode
    if(mouseY>=height/2-d & mouseY<=height/2+d){
        fill(0);
        noStroke();
        textSize(50);
        textAlign(CENTER);
        text("I feel...", width/2, mouseY);
    }

}

I had a hard time coming up with a concept for this project. I knew I wanted to experiment with triangles because I thought I hadn’t made myself work with them much before, and I knew I wanted to experiment with text. I ended up with this. I like the “age lines” that track age based on mouseX, and I like that I got to learn about constrain().