![[OLD FALL 2017] 15-104 • Introduction to Computing for Creative Practice](wp-content/uploads/2020/08/stop-banner.png)
function setup() {
createCanvas(640, 480);
}
//Snow variables
var snow=0
var snowTwo=0
var snowThree=0
function draw() {
background(45,138,185)
//Tree variables
var trunkWidth=30
var trunkHeight=430-mouseY
var leafHeight=mouseY-40
var leafWidth=70+mouseY
strokeWeight(0);
//Limits the trees' growth
if(mouseY<250){
trunkHeight=180
leafHeight=210
leafWidth=320}
//Summer sun
if(mouseX<=160){
fill(63,147,169);
triangle(660,-30,0,480,400,480)
fill(78,156,155);
triangle(650,-10,100,480,300,480);
fill(45,138,185)
rect(575,0,90,90)
fill(255,252,0);
ellipse(575,70,60);
}
//Trunks--as mouse moves up, the trunks grow
fill(115,72,22);
rect(75,480-trunkHeight,trunkWidth,trunkHeight);
rect(210,480-trunkHeight,trunkWidth,trunkHeight);
rect(345,480-trunkHeight,trunkWidth,trunkHeight);
rect(480,480-trunkHeight,trunkWidth,trunkHeight);
//Leaves--as mouse moves up, position of leaves moves up
fill(21,148,42)
//tree one
triangle(25,leafWidth,90,leafHeight,155,leafWidth);
triangle(30,leafWidth-70,90,leafHeight-70,150,leafWidth-70);
triangle(35,leafWidth-140,90,leafHeight-140,145,leafWidth-140);
triangle(40,leafWidth-210,90,leafHeight-210,140,leafWidth-210);
//tree two
triangle(160,leafWidth,225,leafHeight,290,leafWidth);
triangle(165,leafWidth-70,225,leafHeight-70,285,leafWidth-70);
triangle(170,leafWidth-140,225,leafHeight-140,280,leafWidth-140);
triangle(175,leafWidth-210,225,leafHeight-210,275,leafWidth-210);
//tree three
triangle(295,leafWidth,360,leafHeight,425,leafWidth);
triangle(300,leafWidth-70,360,leafHeight-70,420,leafWidth-70);
triangle(305,leafWidth-140,360,leafHeight-140,415,leafWidth-140);
triangle(310,leafWidth-210,360,leafHeight-210,410,leafWidth-210);
//tree four
triangle(430,leafWidth,495,leafHeight,560,leafWidth);
triangle(435,leafWidth-70,495,leafHeight-70,555,leafWidth-70);
triangle(440,leafWidth-140,495,leafHeight-140,550,leafWidth-140);
triangle(445,leafWidth-210,495,leafHeight-210,545,leafWidth-210);
//Summer birds--change position depending on mouse
if(mouseX<=160){
strokeWeight(5);
line(mouseX,mouseY-50,mouseX+10, mouseY-40);
line(mouseX+10,mouseY-40,mouseX+20,mouseY-50);
line(mouseX-30,mouseY-30,mouseX-20,mouseY-20);
line(mouseX-20,mouseY-20, mouseX-10,mouseY-30);
line(mouseX-30,mouseY-70,mouseX-20,mouseY-60);
line(mouseX-20,mouseY-60, mouseX-10,mouseY-70);
line(mouseX-60,mouseY-90,mouseX-50,mouseY-80);
line(mouseX-50,mouseY-80,mouseX-40,mouseY-90);
line(mouseX-60,mouseY-10,mouseX-50,mouseY);
line(mouseX-50,mouseY,mouseX-40,mouseY-10);
//Summer text
textSize(30)
fill(0);
text("Summer", 40,40)
}
//Autumnn
if(mouseX>160 & mouseX<=320){
//pumpkins
fill(205,123,28)
ellipse(0,460,80,90)
ellipse(95,460,75,75)
ellipse(170,460,50,50);
ellipse(250,460,100,100)
ellipse(345,460,60,60)
ellipse(450,460,120,100)
ellipse(560,460,75,75)
ellipse(640,460,60,60)
//ghost--changes position depending on mouse
//and the mouth changes shape depending on x coordinates
fill(256);
rect(mouseX,mouseY-90,60,80);
ellipse(mouseX+30,mouseY-95,60)
fill(0);
ellipse(mouseX+15,mouseY-100,20)
ellipse(mouseX+45,mouseY-100,20)
ellipse(mouseX+30,mouseY-60,40,mouseX-250)
text("Autumn",40,40)
}
//Snow and rain
//three different speeds for snow
snow+=6;
snowTwo+=5;
snowThree+=3;
if(mouseX>320){
//if it's winter, make snow on the ground
if(mouseX<=480){
fill(256);
ellipse(320,480,640,100);}
//if it's spring, make rainclouds in the sky
else{
fill(100);
ellipse(0,0,130,70);
ellipse(100,20,150,80);
ellipse(200,10,140,90);
ellipse(300,0,130,70);
ellipse(400,10,140,80);
ellipse(500,0,130,90);
ellipse(600,20,150,70)
}
//if it's winter, make snow white
if(mouseX<=480){
fill(256);}
//if it's spring, make rain blue
else{
fill(18,38,169)
}
//droplets of snow/rain
ellipse(10,snow,10);
ellipse(10,snowTwo+30,10);
ellipse(40,snow+30,10);
ellipse(40,snowThree,10);
ellipse(70,snowTwo+30,10);
ellipse(70,snowThree,10);
ellipse(100,snow+60,10);
ellipse(100,snowTwo+30,10);
ellipse(130,snow+60,10);
ellipse(130,snowThree+30,10);
ellipse(160,snowThree+60,10);
ellipse(160,snowTwo+40,10);
ellipse(190,snow,10);
ellipse(190,snowTwo+70,10);
ellipse(220,snow+20,10);
ellipse(220,snowThree,10);
ellipse(250,snowTwo+60,10);
ellipse(250,snowThree,10);
ellipse(280,snowThree+60,10);
ellipse(280,snowTwo+10,10);
ellipse(310,snowTwo,10);
ellipse(310,snow+30,10);
ellipse(340,snow,10);
ellipse(340,snowThree+60,10);
ellipse(370,snowThree+20,10);
ellipse(370,snowTwo,10);
ellipse(400,snowTwo+30,10);
ellipse(400,snowThree+50,10);
ellipse(430,snow+30,10);
ellipse(430,snowTwo+60,10);
ellipse(500,snowThree,10);
ellipse(500,snow+60,10);
ellipse(530,snowTwo+30,10);
ellipse(530,snowThree,10);
ellipse(560,snow+20,10);
ellipse(560,snowTwo,10);
ellipse(590,snowThree+60,10);
ellipse(590,snow+10,10);
ellipse(620,snowTwo+20);
ellipse(620,snowThree+40,10);
//Winter text
if(mouseX<=480){
fill(0);
text("Winter",40,40);}
if(mouseX>480){
//Spring flowers
//stems
fill(52,108,8)
rect(145,575-trunkHeight,10,trunkHeight);
rect(295,575-trunkHeight,10,trunkHeight);
rect(420,575-trunkHeight,10,trunkHeight);
//petals--mouseX makes color change
fill(215,mouseX-500,32);
ellipse(140,580-trunkHeight,20);
ellipse(145,565-trunkHeight,20);
ellipse(153,585-trunkHeight,20);
ellipse(160,573-trunkHeight,20);
ellipse(290,580-trunkHeight,20);
ellipse(295,565-trunkHeight,20);
ellipse(303,585-trunkHeight,20);
ellipse(310,573-trunkHeight,20);
ellipse(415,580-trunkHeight,20);
ellipse(420,565-trunkHeight,20);
ellipse(427,585-trunkHeight,20);
ellipse(435,573-trunkHeight,20);
//centers
fill(85,47,27);
ellipse(150,575-trunkHeight,15);
ellipse(300,575-trunkHeight,15);
ellipse(425,575-trunkHeight,15);
//Spring text
textSize(30);
fill(0);
text("Spring",40,40)
}
}
//Loops the snow
if(snow>480){
snow=-60}
if (snowTwo>480){
snowTwo=-60}
if(snowThree>480){
snowThree=-60}
}
This assignment was very cool! I didn’t use as many variables as I thought I would, mainly because I thought it made more sense to input mouseX and mouseY instead of setting them equal to a variable and then inputting that variable. I forgot that wordpress doesn’t allow a width of 640, which unfortunately means that you can’t see the sun or the flowers change color on the blog. I also wish I had been able to make the rain and snow look more random, but since that wasn’t the point of the exercise I decided to spend more time on adding aspects that changed according to the mouse–the birds, the ghost, the flowers, etc. Overall I’m pretty pleased with how it came out!