I was inspired by album art by the band Surfaces. I liked the way their album art had soft pastel colors and the depth it always presented. I started with the background mountains, trees, and roads first. It took me a while to make all the trees because I had to layer triangles, and the car took a lot of time to accurately have all the car parts move with respect to mouseX. If you click, the headlights thickness will increase, and the color of the sun will change. If you move mouseX, the car will move. If you move mouseY, the clouds will move, the background sky color will change, and the sun size will change.
sketch//Annie Kim
//andrewID anniekim
//SectionB
var sunangle = 0
var suncolorR = 242
var suncolorG = 244
var suncolorB = 190
var headlighttop = 370
var headlightbottom = 395
var star1angle = 0
var star2angle = 0
var star3angle = 0
var star4angle = 0
var sundiameter = 150
function setup() {
createCanvas(600, 450);
background(14, 40, 91); //blue background
}
function draw() {
//background sky - blue if mouseY is in top half, pink if in bottom half
if (mouseY < (height * 0.50)) {
background(15, 40, 91);
} else if (mouseY > (height * 0.5)) {
background(240, 210, 209);
}
//sun rising and moving
push();
translate(300, 225); //moving sun's origin to middle of screen
rotate(radians(sunangle)); // rotating in circle clockwise
fill(suncolorR, suncolorG, suncolorB);
noStroke();
circle(50, 150, sundiameter + (mouseY/3)); //sun made
pop();
sunangle = sunangle + 2.5; //med rotation speed
//cloud#1
fill(255); //white color
stroke(255);
point(mouseY - 140, 55); //points of the first cloud to connect
point(mouseY - 185, 50);
point(mouseY - 220, 52)
point(mouseY - 260, 54);
point(mouseY - 290, 55);
point(mouseY - 138, 60);
beginShape();
curveVertex(mouseY - 140, 55); //connecting first cloud
curveVertex(mouseY - 140, 55);
curveVertex(mouseY - 185, 50);
curveVertex(mouseY - 220, 52);
curveVertex(mouseY - 260, 54);
curveVertex(mouseY - 290, 55);
curveVertex(mouseY - 138, 60);
curveVertex(mouseY - 138, 60);
endShape();
//cloud#2
point(mouseY, 91); //points of the second cloud to connect
point(mouseY - 10, 93);
point(mouseY -20, 98);
point(mouseY - 60, 105);
point(mouseY - 70, 115);
point(mouseY + 30, 125);
point(mouseY + 60, 125);
point(mouseY + 170, 120);
point(mouseY + 155, 110);
point(mouseY + 130, 85);
point(mouseY + 90, 90);
beginShape();
curveVertex(mouseY, 91); //connecting second cloud
curveVertex(mouseY, 91);
curveVertex(mouseY - 10, 93);
curveVertex(mouseY -20, 98);
curveVertex(mouseY - 60, 105);
curveVertex(mouseY - 70, 115);
curveVertex(mouseY + 30, 125);
curveVertex(mouseY + 60, 125);
curveVertex(mouseY + 170, 120);
curveVertex(mouseY + 155, 110);
curveVertex(mouseY + 130, 85);
curveVertex(mouseY + 90, 90);
curveVertex(mouseY + 90, 90);
endShape();
//mountain layer 1 (light coral color)
fill(250, 180, 175);
stroke(250, 180, 175);
strokeWeight(5);
point(0, 255);
point(0, 385);
point(30, 230);
point(150, 210);
point(195, 190);
point(215, 200);
point(260, 215);
point(290, 220);
point(310, 215);
point(380, 175);
point(420, 190);
point(460, 145);
point(510, 185);
point(540, 165);
point(580, 155);
point(600, 160);
point(600, 375);
beginShape();
curveVertex(0, 385);
curveVertex(0, 385);
curveVertex(0, 255);
curveVertex(30, 230);
curveVertex(150, 210);
curveVertex(195, 190);
curveVertex(215, 200);
curveVertex(260, 215);
curveVertex(290, 220);
curveVertex(310, 215);
curveVertex(380, 175);
curveVertex(420, 190);
curveVertex(460, 145);
curveVertex(510, 185);
curveVertex(540, 165);
curveVertex(580, 155);
curveVertex(600, 160);
curveVertex(600, 375);
curveVertex(600, 375);
endShape();
//mountain layer #2
fill(230, 195, 210);
stroke(230, 195, 210);
point(0, 170);
point(0, 370);
point(10, 155);
point(25, 145);
point(55, 130);
point(80, 140);
point(105, 180);
point(140, 200);
point(170, 205);
point(210, 225);
point(250, 225);
point(250, 370);
beginShape();
curveVertex(0, 370);
curveVertex(0, 370);
curveVertex(0, 170);
curveVertex(10, 155);
curveVertex(25, 145);
curveVertex(55, 130);
curveVertex(80, 140);
curveVertex(105, 180);
curveVertex(140, 200);
curveVertex(170, 205);
curveVertex(210, 225);
curveVertex(250, 225);
curveVertex(250, 370);
curveVertex(250, 370);
endShape();
//mountain layer #3 (purple layer)
fill(200, 180, 222);
stroke(200, 180, 222);
point(250, 390);
point(250, 265);
point(280, 260);
point(300, 270);
point(310, 280);
point(320, 290);
point(340, 287);
point(350, 285);
point(370, 270);
point(390, 267);
point(410, 280);
point(430, 300);
point(440, 298);
point(450, 295);
point(460, 285);
point(490, 270);
point(500, 260);
point(515, 265);
point(525, 275);
point(535, 280);
point(565, 276);
point(585, 270);
point(600, 260);
beginShape();
curveVertex(250, 390);
curveVertex(250, 390);
curveVertex(250, 265);
curveVertex(280, 260);
curveVertex(300, 270);
curveVertex(310, 280);
curveVertex(320, 290);
curveVertex(340, 287);
curveVertex(350, 285);
curveVertex(370, 270);
curveVertex(390, 267);
curveVertex(410, 280);
curveVertex(430, 300);
curveVertex(440, 298);
curveVertex(450, 295);
curveVertex(460, 285);
curveVertex(490, 270);
curveVertex(500, 260);
curveVertex(515, 265);
curveVertex(525, 275);
curveVertex(535, 280);
curveVertex(565, 276);
curveVertex(585, 270);
curveVertex(600, 260);
curveVertex(600, 390);
curveVertex(600, 390);
endShape();
//trees layer 1 (lightest green layer)
fill(176, 231, 228); //first tree on left
stroke(176, 231, 228);
triangle(0, 250, 70, 390, 0, 390); //layering triangles
triangle(0, 200, 35, 260, 0, 260);
triangle(0, 230, 50, 300, 0, 300);
triangle(0, 260, 60, 340, 0, 340);
//second tree from the left
triangle(75, 250, 110, 180, 145, 250);
triangle(60, 300, 110, 220, 160, 300);
triangle(45, 350, 110, 260, 175, 350);
triangle(30, 390, 110, 300, 190, 390);
//third tree from the left
triangle(225, 195, 260, 170, 295, 195);
triangle(222, 205, 260, 180, 298, 205);
triangle(219, 215, 260, 190, 301, 215);
triangle(216, 225, 260, 200, 304, 225);
triangle(213, 235, 260, 210, 307, 235);
triangle(210, 245, 260, 220, 310, 245);
triangle(207, 255, 260, 230, 313, 255);
triangle(204, 265, 260, 240, 316, 265);
triangle(201, 275, 260, 250, 319, 275);
triangle(198, 285, 260, 260, 322, 285);
triangle(195, 295, 260, 270, 325, 295);
triangle(192, 305, 260, 280, 328, 305);
triangle(180, 315, 260, 290, 331, 315);
triangle(177, 325, 260, 300, 334, 325);
triangle(150, 390, 260, 260, 361, 390);
//tree in the middle
triangle(320, 305, 340, 200, 360, 305);
triangle(340, 200, 320, 270, 363, 270);
triangle(363, 300, 390, 255, 410, 300);
triangle(358, 320, 387, 275, 415, 320);
triangle(420, 310, 440, 270, 460, 310);
triangle(490, 240, 480, 300, 500, 300);
//tree on the far right
triangle(550, 160, 560, 145, 570, 160);
triangle(545, 170, 560, 155, 575, 170);
triangle(540, 180, 560, 165, 580, 180);
triangle(535, 190, 560, 175, 585, 190);
triangle(530, 200, 560, 185, 590, 200);
triangle(525, 210, 560, 195, 595, 210);
triangle(520, 220, 560, 205, 600, 220);
triangle(515, 230, 560, 215, 605, 230);
triangle(510, 240, 560, 225, 610, 240);
triangle(505, 250, 560, 235, 615, 250);
triangle(500, 260, 560, 245, 620, 260);
triangle(495, 270, 560, 255, 625, 270);
triangle(490, 280, 560, 265, 630, 280);
triangle(485, 290, 560, 275, 635, 290);
triangle(480, 300, 560, 285, 640, 300);
triangle(475, 310, 560, 295, 645, 310);
triangle(470, 320, 560, 305, 650, 320);
//trees layer 2 (med green layer)
//first tree from the left
fill(156, 208, 204);
stroke(156, 208, 204);
triangle(40, 200, 60, 160, 80, 200);
triangle(35, 220, 60, 180, 85, 220);
triangle(30, 240, 60, 200, 90, 240);
triangle(25, 260, 60, 220, 95, 260);
triangle(20, 280, 60, 240, 100, 280);
triangle(15, 300, 60, 260, 105, 300);
triangle(10, 320, 60, 280, 110, 320);
triangle(5, 340, 60, 300, 115, 340);
triangle(0, 360, 60, 320, 120, 360);
triangle(-5, 380, 60, 240, 125, 380);
triangle(-7.5, 390, 60, 250, 127.5, 390);
//second tree from the left
triangle(150, 320, 170, 260, 190, 320);
triangle(145, 360, 170, 300, 195, 360);
triangle(138, 390, 170, 330, 203, 390);
//middle tree
triangle(280, 245, 300, 225, 320, 245);
triangle(270, 260, 300, 235, 330, 260);
triangle(260, 275, 300, 245, 340, 275);
triangle(250, 290, 300, 255, 350, 290);
triangle(240, 305, 300, 265, 360, 305);
triangle(230, 320, 300, 275, 370, 320);
triangle(220, 335, 300, 285, 380, 335);
triangle(210, 350, 300, 295, 390, 350);
triangle(200, 365, 300, 315, 400, 365);
triangle(190, 380, 300, 325, 410, 380);
triangle(195, 390, 300, 330, 415, 390);
//fourth tree from the left
triangle(400, 320, 420, 300, 440, 320);
triangle(395, 340, 420, 310, 445, 340);
triangle(390, 360, 420, 320, 450, 360);
triangle(385, 380, 420, 330, 455, 380);
triangle(380, 390, 420, 340, 460, 390);
//fifth tree from the left
triangle(460, 260, 480, 240, 500, 260);
triangle(450, 285, 480, 245, 510, 285);
triangle(440, 310, 480, 250, 520, 310);
triangle(430, 335, 480, 255, 530, 335);
triangle(420, 360, 480, 260, 540, 360);
triangle(410, 385, 480, 265, 550, 385);
triangle(405, 390, 480, 270, 555, 390);
//far right tree
triangle(600, 240, 570, 280, 600, 280);
triangle(600, 245, 550, 320, 600, 320);
triangle(600, 250, 530, 360, 600, 360);
triangle(600, 255, 510, 390, 600, 390);
//trees layer 3 (darkest green layer)
fill(131, 180, 177);
stroke(131, 180, 177);
//middle tree
triangle(200, 230, 190, 260, 210, 260);
triangle(200, 240, 185, 270, 215, 270);
triangle(200, 250, 175, 290, 225, 290);
triangle(200, 260, 170, 310, 230, 310);
triangle(200, 270, 165, 330, 235, 330);
triangle(200, 280, 160, 350, 240, 350);
triangle(200, 290, 155, 370, 245, 370);
triangle(200, 300, 150, 390, 250, 390);
//first left tree
triangle(60, 300, 90, 270, 120, 300);
triangle(50, 320, 90, 275, 130, 320);
triangle(40, 340, 90, 280, 140, 340);
triangle(30, 360, 90, 285, 150, 360);
triangle(20, 380, 90, 290, 160, 380);
triangle(10, 390, 90, 295, 170, 390);
//third tree from left
triangle(370, 335, 390, 300, 410, 335);
triangle(360, 380, 390, 305, 420, 380);
triangle(350, 390, 390, 310, 430, 390);
//far right tree
triangle(515, 280, 535, 240, 555, 280);
triangle(510, 300, 535, 245, 560, 300);
triangle(505, 320, 535, 250, 565, 320);
triangle(500, 340, 535, 255, 570, 340);
triangle(495, 360, 535, 260, 575, 360);
triangle(490, 390, 535, 265, 580, 390);
//road
strokeWeight(2);
fill(144, 148, 165);
noStroke();
rect(0, 390, 600, 60);
//road stripes
stroke(242, 244, 190);
line(0, 415, 600, 415);
line(0, 420, 600, 420);
//front headlights: moves with respect to mouseX so it stays connected to the car
fill(226, 204, 128);
stroke(226, 204, 128);
triangle(mouseX + 100, 381, mouseX + 225, headlighttop, mouseX + 225, headlightbottom);
//car that moves with respect to mouseX
fill(239, 184, 145);
stroke(239, 184, 145);
rect(mouseX, 340, 100, 53); //layering shapes to build car shape
triangle(mouseX, 340, mouseX - 3.5, 393, mouseX, 393);
rect(mouseX + 100, 370, 15, 23);
triangle(mouseX + 100, 340, mouseX + 115, 370, mouseX + 100, 370);
//white strip on top of the car that moves with respect to mouseX
stroke(255);
fill(255);
quad(mouseX, 340, mouseX + 5, 335, mouseX + 95, 335, mouseX + 100, 340);
//windows that move with respect to mouseX
stroke(170);
fill(170);
rect(mouseX + 5, 346, 30, 10);
rect(mouseX + 43, 346, 26, 10);
quad(mouseX + 76, 346, mouseX + 97, 346, mouseX + 102, 356, mouseX + 76, 356);
//door marks that move with respect to mouseX
stroke(200, 175, 145);
line(mouseX + 39, 343, mouseX + 39, 393);
line(mouseX + 72.5, 343, mouseX + 72.5, 393);
stroke(255);
line(mouseX + 65, 372, mouseX + 70, 372); //door handles
line(mouseX + 75.5, 372, mouseX + 80.5, 372); //door handles
//wheels that move with respect to mouseX
fill(100);
stroke(100);
circle(mouseX + 15, 393, 25);
circle(mouseX + 95, 393, 25);
//wheel covers
fill(200);
stroke(200);
circle(mouseX + 15, 393, 11);
circle(mouseX + 95, 393, 11);
//front wheels that is near the headlights, move with respect to mouseX
fill(100);
stroke(100);
point(mouseX + 116, 368);
point(mouseX + 121, 370);
point(mouseX + 121, 393);
point(mouseX + 116, 393);
beginShape();
curveVertex(mouseX + 116, 368);
curveVertex(mouseX + 116, 368);
curveVertex(mouseX + 121, 370);
curveVertex(mouseX + 121, 393);
curveVertex(mouseX + 116, 393);
curveVertex(mouseX + 116, 393);
endShape();
//back bumper that moves with respect to mouseX
fill(200);
stroke(200);
rect(mouseX - 5, 385, 6, 3);
}
function mouseClicked() {
suncolorR = suncolorR + 6; //everytime you click, the color of sun gets darker red/orange
suncolorG = suncolorG - 9; //everytime you click, the color of sun gets darker red/orange
suncolorB = suncolorB - 9; //everytime you click, the color of sun gets darker red/orange
headlighttop = headlighttop - 2.5 //everytime you click, the headlight thickness should appear to increase
headlightbottom = headlightbottom + 2.5 //everytime you click, the headlight thickness should appear to increase
}
![[OLD FALL 2020] 15-104 • Introduction to Computing for Creative Practice](../../../../wp-content/uploads/2021/08/cropped-notcurrentsemester.jpg){kind=small}
![[OLD FALL 2020] 15-104 • Introduction to Computing for Creative Practice](../../../../wp-content/uploads/2021/09/stop-banner.png)
