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().