{"id":69357,"date":"2021-12-04T18:27:55","date_gmt":"2021-12-04T23:27:55","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=69357"},"modified":"2021-12-04T18:27:55","modified_gmt":"2021-12-04T23:27:55","slug":"final-project-iceberg","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/12\/04\/final-project-iceberg\/","title":{"rendered":"Final Project: Iceberg"},"content":{"rendered":"<!DOCTYPE html PUBLIC \"-\/\/W3C\/\/DTD HTML 4.0 Transitional\/\/EN\" \"http:\/\/www.w3.org\/TR\/REC-html40\/loose.dtd\">\n<html><body><div class=\"wp-block-file\"><a class=\"p5_sketch_link\" data-height=\"400\" data-width=\"400\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/12\/sketch-22.js\">sketch<\/a><a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/12\/sketch-22.js\" class=\"wp-block-file__button\" download>Download<\/a><iframe src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/plugins\/p5-embedder\/p5_iframe.html\" class=\"p5_exampleFrame\" width=\"400\" height=\"400\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\n\/\/ ICE VAR\nvar terraine = [];          \/\/ array for ice terraine y coordinates\nvar noiseParam = 0;         \/\/ x value of noise func\nvar noiseStep = .02;        \/\/ how much x increases by\nvar icesize = noiseStep*2500;\n\n\/\/ OBJECT VAR\nvar washer;\nvar handwasher;\n    var bubble;\nvar bubs = [];\nvar waterbottle;\nvar reusebottle;\nvar car;\nvar bus;\nvar shoponline;\nvar shoplocal;\n\nvar allobj = [];            \/\/ holds all objects once they are created\nvar len;                    \/\/ length of allobj array\nvar n = 0;                  \/\/ initial spot in allobj array\nvar q;\nvar isMouseClicked = -1; \/\/ boolean for click\n\n\/\/ AUDIO VAR\nvar waterdrop;  \nvar watersplash;      \n\n\n\/\/ OBJECT FUNCTIONS\nfunction makeWasher(cx, cy) {\n    washer = { x: cx, \n               y: cy,\n               show: drawWasher,\n               melt: 4,\n               txt: \"Use electric washer\" }\n    return washer;\n}\n\nfunction makeHandwasher(cx, cy) {\n    for (var i=0; i&lt;30; i++) {\n        bubx = random(-35, 35);\n        buby = -random(-.5, 3)*i;\n        var bub = makeBubble(bubx, buby);\n        bubs.push(bub);\n    }\n    handwasher = { x: cx, \n                   y: cy,\n                   show: drawHandwasher,\n                   melt: 1,\n                   txt: \"Hand-wash clothing\"  }\n    return handwasher;\n}\n\nfunction makeBubble(bubx, buby) {;\n    bubble = {x: bubx,\n              y: buby,\n              sz: random(2, 6),\n              show: drawBubble }\n    return bubble;\n}\n\nfunction makeWaterbottle(cx, cy) {\n    waterbottle = {x: cx, \n                   y: cy, \n                   show: drawWaterbottle,\n                   melt: 3,\n                   txt: \"Plastic water bottle\"}\n    return waterbottle;\n}\n\nfunction makeReusebottle(cx, cy) {\n    reusebottle = {x: cx, \n                   y: cy, \n                   show: drawReusebottle,\n                   melt: 1,\n                   txt: \"Reusable water bottle\"}\n    return reusebottle;\n}\n\nfunction makeCar(cx, cy) {\n    car = {x: cx, \n           y: cy, \n           show: drawCar,\n           melt: 5,\n           txt: \"Drive a car\"}\n    return car;\n}\n\nfunction makeBus(cx, cy) {\n    bus = {x: cx, \n           y: cy, \n           show: drawBus,\n           melt: 1,\n           txt: \"Take public transportation\"}\n    return bus;\n}\n\nfunction makeOnline(cx, cy) {\n    shoponline = {x: cx, \n           y: cy, \n           show: drawOnline,\n           melt: 10,\n           txt: \"Shop online\"}\n    return shoponline;\n}\n\nfunction makeLocal(cx, cy) {\n    shoplocal = {x: cx, \n           y: cy, \n           show: drawLocal,\n           melt: 1,\n           txt: \"Shop local\"}\n    return shoplocal;\n}\n\n\n\/\/ PRELOAD FOR AUDIO FILES\nfunction preload() {\n    waterdrop = loadSound(\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/splash.wav\");\n    watersplash = loadSound(\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/12\/bigsplash.mp3\");\n}\n\n\/\/ SETUP\nfunction setup() {\n    createCanvas(400, 400);\n    strokeWeight(2);\n    rectMode(CENTER);\n    textAlign(CENTER);\n    textFont('Georgia');\n    textSize(13);\n    useSound();\n\n    \/\/ fill terraine array w coordinates for ice:\n    for (var i=0; i&lt;icesize; i++) {\n        var n = noise(noiseParam);      \/\/ n is between 0 and 1\n        var value = map(n, 0, 1, height\/3, height);     \/\/ draws onto canvas nicely\n        terraine.push(value);           \/\/ value is the y coordinate at x=i\n        noiseParam += noiseStep;\n    }\n\n    \/\/ create objects:\n    washer = makeWasher(125, 100);\n    handwasher = makeHandwasher(275, 100);\n    waterbottle = makeWaterbottle(265, 100);\n    reusebottle = makeReusebottle(135, 100);\n    car = makeCar(125, 100);\n    bus = makeBus(275, 100);\n    shoponline = makeOnline(290, 100);\n    shoplocal = makeLocal(115, 100);\n\n    allobj = [washer, handwasher, \n              reusebottle, waterbottle, \n              car, bus, \n              shoplocal, shoponline];\n    len = allobj.length;\n}\n\n\/\/ SOUND SETUP\nfunction soundSetup() { \/\/ setup for audio file\n    waterdrop.setVolume(0.5);\n    watersplash.setVolume(0.5);\n}\n\n\n\/\/ DRAW\nfunction draw() {\n\n    \/\/ blue sky:\n    background(100, 175, 240);\n\n    \/\/ ice:\n    drawIce();\n\n    \/\/ it melts:\n    meltIce();\n\n    \/\/ draw objects:\n    if (terraine.length &gt; 1) {\n        q = n%(len);        \/\/ loops through array by 2s\n        allobj[q].show();\n        allobj[q+1].show();\n    }\n}\n\n\/\/ WHEN USER CLICKS\nfunction mousePressed() {\n    let onObj = checkClick();\n    if (onObj == true) {\n        isMouseClicked = -isMouseClicked;\n        n += 2;                 \/\/ loops through array by 2s\n        isMouseClicked = -isMouseClicked;\n    }\n\n}\n\nfunction checkClick() {\n    if (mouseX&gt;75 & mouseX<175 && mouseY>50 && mouseY<150) {\n        meltMore(allobj[q]);\n        return true;\n    }\n    if (mouseX&gt;225 & mouseX<325 && mouseY>50 && mouseY<150) {\n        meltMore(allobj[q+1]);\n        return true;\n    }\n}\n\n\n\/\/ DRAW ICE\nfunction drawIce() {\n    fill(255);\n    stroke(0);\n    strokeWeight(1);\n    beginShape();\n    vertex(-5, height);\n    vertex(-5, terraine[0]);\n    for (var j=0; j&lt;terraine.length-1; j++) {\n        vertex(j*5, terraine[j]);\n    }\n    vertex((terraine.length-1)*icesize, terraine[terraine.length]);\n    vertex((terraine.length-1)*5, height);\n    endShape();\n\n    \/\/ check if completely melted:\n    checkIce();\n}\n\n\/\/ MELT ICE constantly\nfunction meltIce() {\n    \/\/ when ice is melted, 'game' over\n    if (terraine.length == 1) { return }\n    \/\/ as ice melts, water drop audio is played\n    if (frameCount%250==0) {\n        terraine.pop();\n        waterdrop.play();\n    }\n}\n\n\/\/ MELT MORE! when environmentally more harmful choice is picked\nfunction meltMore(obj) {\n    for (var k=0; k&lt;obj.melt; k++) {\n        terraine.pop();\n    }\n    if (obj.melt == 1) { waterdrop.play() }\n    else { watersplash.play() }\n}\n\n\/\/ CHECK IF COMPLETELY MELTED\nfunction checkIce() {\n    if (terraine.length &lt;= 1) {\n        rect(width\/2, height\/2, 350, 350);\n        textAlign(CENTER);\n        textSize(35);\n        fill(0);\n        text(\"Oh No!\", width\/2, 150);\n        textSize(16);\n        fill(150, 0, 0);\n        text(\"Looks like your choices caused global warming.\", width\/2, 175);\n        textSize(20);\n        fill(0);\n        text(\"Next time, try to make better choices.\", width\/2, 215);\n        textSize(13);\n        text(\"You were already trying to make good choices?\", width\/2, 300);\n        text(\"You picked the best options that were avaiable to you?\", width\/2, 325);\n        textSize(18);\n        fill(150, 0, 0);\n        text(\"Have better options next time I guess.\", width\/2, 350);\n        textSize(11);\n        noStroke();\n        fill(255);\n        text(\"Refresh this page for another try!\", width\/2, 390);\n        noLoop();\n    }\n}\n\n\/\/ DRAW OBJECTS:\n\/\/ washer\nfunction drawWasher() {\n    push();\n    translate(this.x, this.y);\n\n    fill(220);\n    square(0, 0, 100, 5);\n\n    fill(150);\n    circle(0, 0, 75);\n\n    \/\/ water in washer:\n    noStroke();\n    fill(75, 125, 225);\n    beginShape();\n    vertex(-30, 0);\n    vertex(-30, 0);\n    curveVertex(-24, 2);\n    curveVertex(-18, 0);\n    curveVertex(-12, 2);\n    curveVertex(-6, 0);\n    curveVertex(0, 2);\n    curveVertex(6, 0);\n    curveVertex(12, 2);\n    curveVertex(18, 0);\n    curveVertex(24, 2);\n    vertex(30, 0);\n    curveVertex(26, 16);\n    curveVertex(15, 26);\n    curveVertex(0, 30);\n    curveVertex(-15, 26);\n    curveVertex(-26, 16);\n    vertex(-30, 0);\n    vertex(-30, 0);\n    endShape();\n\n    \/\/ door partially see-through:\n    stroke(0);\n    fill(175, 200, 255, 175);\n    circle(0, 0, 60);\n\n    \/\/ glare on glass door\n    noStroke();\n    push();\n    rotate(radians(40));\n    fill(200, 215, 255);\n    ellipse(0, -15, 30, 5);\n    ellipse(0, -20, 15, 3);\n    pop();\n\n    \/\/ bottons + stuff\n\n    fill(200, 0, 0);\n    circle(40, -40, 3);\n    fill(75);\n    circle(35, -40, 3);\n    circle(30, -40, 3);\n    fill(150);\n    circle(35, -33, 7);\n\n    \/\/ text\n    fill(0);\n    text(this.txt, 0, 62);\n\n    pop();\n}\n\n\/\/ handwash basin\nfunction drawHandwasher() {\n    push();\n    translate(this.x, this.y);\n\n    \/\/ basin\n    fill(200);\n    quad(-50, 0, 50, 0, 35, 40, -35, 40);\n    arc(0, 0, 100, 25, 0, PI);\n    arc(0, 0, 100, 15, PI, 2*PI);\n\n    \/\/ clothes\n    noStroke();\n    fill(58, 101, 74);\n    quad(-30, -7, -15, -8, -15, 10, -32, 8);\n    fill(200, 100, 150);\n    quad(-20, -8, -7, -9, -5, 10, -25, 10);\n\n    \/\/ water\n    fill(100, 140, 240);\n    beginShape();\n    vertex(-45, 6);\n    vertex(-45, 5);\n    curveVertex(-36, 5);\n    curveVertex(-27, 6);\n    curveVertex(-18, 5);\n    curveVertex(-9, 6);\n    curveVertex(0, 5);\n    curveVertex(9, 6);\n    curveVertex(18, 5);\n    curveVertex(27, 6);\n    curveVertex(36, 5);\n    vertex(45, 5);\n    curveVertex(29, 10);\n    curveVertex(0, 12);\n    curveVertex(-29, 10);\n    vertex(-45, 5);\n    vertex(-45, 6);\n    endShape();\n\n    \/\/ suds + bubbles\n    fill(200, 215, 255);\n    stroke(100, 140, 240);\n    strokeWeight(.25);\n    for (var i=0; i&lt;30; i++) {\n        bubs[i].show()\n    }\n\n    \/\/ text\n    fill(0);\n    strokeWeight(1);\n    text(this.txt, 0, 62);\n    pop();\n}\n\n\/\/ bubble\nfunction drawBubble() {\n    circle(this.x, this.y, this.sz);\n}\n\n\/\/ plastic bottle\nfunction drawWaterbottle() {\n    \/\/ cap\n    stroke(0);\n    strokeWeight(1);\n    fill(240);\n    rect(this.x, this.y-45, 15, 10);\n\n    \/\/ body of bottle\n    fill(225, 230, 255);\n    arc(this.x, this.y-18, 42, 47, radians(290), radians(250), OPEN);\n    beginShape();\n    vertex(this.x+21, this.y-15);\n    vertex(this.x+21, this.y-15);\n    curveVertex(this.x+20, this.y+6);\n    curveVertex(this.x+23, this.y+30);\n    curveVertex(this.x+19, this.y+50);\n    curveVertex(this.x, this.y+50);\n    curveVertex(this.x-19, this.y+50);\n    curveVertex(this.x-23, this.y+30);\n    curveVertex(this.x-20, this.y+6);\n    vertex(this.x-21, this.y-15);\n    vertex(this.x-21, this.y-15);\n    endShape();\n\n    \/\/ lines on cap\n    stroke(190);\n    for (var l=0; l&lt;14; l+=2) {\n        line(this.x-6 + l, this.y-41, this.x-6 + l, this.y - 47);\n    }\n\n    \/\/ wrapper\n    fill(75, 125, 200);\n    noStroke();\n    beginShape();\n    vertex(this.x+21, this.y-15);\n    vertex(this.x+21, this.y-15);\n    vertex(this.x+20, this.y-2);\n    vertex(this.x+20, this.y+8);\n    vertex(this.x+22, this.y+20);\n    vertex(this.x-22, this.y+20);\n    vertex(this.x-20, this.y+8);\n    vertex(this.x-20, this.y-2);\n    vertex(this.x-21, this.y-15);\n    vertex(this.x-21, this.y-15);\n    endShape();\n\n    \/\/ details\n    stroke(190, 210, 250);\n    noFill();\n    arc(this.x, this.y-18, 30, 47, radians(-65), radians(-10));\n    arc(this.x, this.y-18, 10, 47, radians(-80), radians(-20));\n    arc(this.x, this.y-18, 10, 47, radians(200), radians(260));\n    arc(this.x, this.y-18, 30, 47, radians(190), radians(245));\n    arc(this.x, this.y+23, 70, 9, radians(10), radians(170));\n    arc(this.x, this.y+30, 60, 10, radians(10), radians(170));\n    arc(this.x, this.y+37, 55, 11, radians(10), radians(170));\n\n    \/\/wrapper details\n    strokeWeight(2);\n    stroke(90, 145, 220);\n    beginShape();  \n    vertex(this.x+15, this.y+10);\n    vertex(this.x+15, this.y+10);\n    curveVertex(this.x+10, this.y);\n    curveVertex(this.x-8, this.y-5);\n    vertex(this.x-15, this.y-10);\n    vertex(this.x-15, this.y-10);\n    endShape();\n    beginShape();  \n    vertex(this.x+15, this.y+10);\n    vertex(this.x+15, this.y+10);\n    curveVertex(this.x+8, this.y+5);\n    curveVertex(this.x-10, this.y);\n    vertex(this.x-15, this.y-10);\n    vertex(this.x-15, this.y-10);\n    endShape();\n\n    \/\/ text\n    fill(0);\n    strokeWeight(1);\n    text(this.txt, this.x, this.y+62);\n}\n\n\/\/ reusable bottle\nfunction drawReusebottle() {\n    stroke(0);\n    strokeWeight(1);   \n\n    \/\/ water\n    fill(100, 155, 230);\n    stroke(90, 145, 220);\n    beginShape();\n    vertex(this.x-23, this.y-18);\n    vertex(this.x-23, this.y-18);\n    curveVertex(this.x-17, this.y-19);\n    curveVertex(this.x-10, this.y-18);\n    curveVertex(this.x, this.y-19);\n    curveVertex(this.x+10, this.y-18);\n    curveVertex(this.x+17, this.y-19);\n    vertex(this.x+23, this.y-18);\n    vertex(this.x+23, this.y-18);\n    endShape();\n    noStroke();\n    beginShape();\n    vertex(this.x+23, this.y-18);\n    vertex(this.x+23, this.y-18);\n    curveVertex(this.x+24, this.y+30);\n    curveVertex(this.x+19, this.y+50);\n    curveVertex(this.x-19, this.y+50);\n    curveVertex(this.x-24, this.y+30);\n    vertex(this.x-23, this.y-18);\n    vertex(this.x-23, this.y-18);\n    endShape();\n\n    \/\/ body of bottle\n    noStroke();\n    fill(200, 100, 150, 100);\n    arc(this.x, this.y-18, 46, 45, radians(185), radians(-5), OPEN);\n    noFill();\n    stroke(0);\n    arc(this.x, this.y-18, 46, 45, radians(290), radians(0), OPEN);\n    arc(this.x, this.y-18, 46, 45, radians(180), radians(250), OPEN);\n    fill(200, 100, 150, 100);\n    beginShape();\n    vertex(this.x+23, this.y-20);\n    vertex(this.x+23, this.y-20);\n    curveVertex(this.x+24, this.y+30);\n    curveVertex(this.x+19, this.y+50);\n    curveVertex(this.x-19, this.y+50);\n    curveVertex(this.x-24, this.y+30);\n    vertex(this.x-23, this.y-20);\n    vertex(this.x-23, this.y-20);\n    endShape();\n\n    \/\/ lines on body of bottle\n    stroke(190, 90, 140, 200);\n    for (var u=0; u&lt;12; u+=1) {\n        line(this.x-15, this.y-15+(u*5), this.x-22, this.y-15+(u*5));\n    }\n\n    \/\/ stickers!\n    \/\/ smiley face\n    stroke(0);\n    strokeWeight(.5);\n    fill(250, 225, 0);\n    push();\n    translate(this.x+16, this.y+20);\n    rotate(radians(32));\n    arc(0, 0, 20, 20, radians(8), radians(287), OPEN);\n    arc(0, 0, 13, 13, radians(10), radians(170));\n    strokeWeight(1);\n    line(-2, 0, -2, -2);\n    line(2, 0, 2, -2);\n    pop();\n\n    \/\/ flower\n    push();\n    fill(225, 125, 255);\n    translate(this.x+9, this.y+36);\n    rotate(radians(-20));\n    let rot = 0;\n    for (var r=0; r&lt;7; r++) {\n        push();\n        rotate(radians(rot));\n        ellipse(6, 0, 8, 4);\n        pop();\n        rot += 360\/7;\n    }\n    fill(175, 200, 100);\n    circle(0, 0, 5);\n    pop();\n\n    \/\/ cap\n    noFill();\n    strokeWeight(2);\n    stroke(200);\n    arc(this.x+14, this.y-50, 29, 25, radians(200), radians(90));\n    stroke(0)\n    strokeWeight(1);\n    arc(this.x+14, this.y-50, 28, 23, radians(200), radians(90));\n    arc(this.x+14, this.y-50, 33, 27, radians(200), radians(90));\n    fill(200);\n    rect(this.x, this.y-52, 15, 5, 2);\n    rect(this.x, this.y-45, 25, 15, 2);\n    stroke(225);\n    strokeWeight(6);\n    line(this.x, this.y-40, this.x, this.y-45);\n    line(this.x-8, this.y-40, this.x-8, this.y-45);\n    line(this.x+8, this.y-40, this.x+8, this.y-45);\n    stroke(0);\n    strokeWeight(1);\n    rect(this.x, this.y-38, 28, 2, 3);\n\n    \/\/ text\n    fill(0);\n    text(this.txt, this.x, this.y+62);\n}\n\n\/\/ car\nfunction drawCar() {\n    let carcol = color(150, 0, 0);\n    let detailcol = color(100, 0, 0);\n\n    \/\/ exhaust pipe\n    fill(120);\n    noStroke();\n    rect(this.x+60, this.y+27, 5, 3);\n\n    \/\/ body of car\n    stroke(detailcol);\n    fill(carcol);\n    beginShape();\n    vertex(this.x-40, this.y);\n    vertex(this.x-40, this.y+1);\n    curveVertex(this.x-20, this.y-22);\n    curveVertex(this.x+25, this.y-22);\n    curveVertex(this.x+48, this.y);\n    curveVertex(this.x+57, this.y+3);\n    curveVertex(this.x+58, this.y+10);\n    curveVertex(this.x+59, this.y+25);\n    curveVertex(this.x+45, this.y+30);\n    curveVertex(this.x-60, this.y+30);\n    curveVertex(this.x-65, this.y+8);\n    vertex(this.x-40, this.y+1);\n    vertex(this.x-40, this.y+1);\n    endShape();\n\n    \/\/ windows\n    stroke(150, 160, 200);\n    fill(150, 160, 200);\n    beginShape();\n    vertex(this.x-35, this.y+1);\n    vertex(this.x-35, this.y+1);\n    curveVertex(this.x-15, this.y-19);\n    curveVertex(this.x+20, this.y-19);\n    curveVertex(this.x+40, this.y-1);\n    curveVertex(this.x+30, this.y+1);\n    vertex(this.x-35, this.y+1);\n    vertex(this.x-35, this.y+1);\n    endShape();\n    fill(carcol);\n    stroke(carcol);\n    strokeWeight(4);\n    line(this.x+2, this.y+2, this.x+2, this.y-22);\n    strokeWeight(2);\n    line(this.x+33, this.y+2, this.x+33, this.y-16);\n\n    \/\/ lights\n    noStroke();\n    fill(230, 230, 175);\n    push();\n    translate(this.x-62, this.y+9);\n    rotate(radians(-35));\n    ellipse(0, 0, 10, 7);\n    ellipse(-7, 1, 3, 3);\n    pop();\n    rect(this.x+57, this.y+21, 5, 7, 2);\n    rect(this.x+57, this.y+15, 2, 4, 2);\n\n    \/\/ handles \n    stroke(detailcol);\n    line(this.x-5, this.y+7, this.x, this.y+7);\n    line(this.x+4, this.y+7, this.x+9, this.y+7);\n\n    \/\/ wheels\n    fill(25);\n    stroke(0);\n    ellipse(this.x+35, this.y+30, 25, 25);\n    ellipse(this.x-40, this.y+30, 25, 25);\n    let wrot = 0;\n    for (var j=0; j&lt;5; j++) {\n        push();\n        translate(this.x+35, this.y+30);\n        rotate(radians(wrot));\n        line(-10, 0, 10, 0);\n        pop();\n        push();\n        translate(this.x-40, this.y+30);\n        rotate(radians(wrot));\n        line(-10, 0, 10, 0);\n        pop();\n        wrot+=360\/10;\n    }\n\n    \/\/ text\n    fill(0);\n    strokeWeight(1);\n    text(this.txt, this.x, this.y+62);\n}\n\n\/\/ bus\nfunction drawBus() {\n    let buscol = color(50, 75, 255);\n    let busdetails = color(20, 40, 200);\n\n    \/\/ exhaust pipe\n    fill(120);\n    noStroke();\n    rect(this.x+50, this.y-27, 3, 5);\n\n    \/\/ bus body\n    fill(buscol);\n    stroke(busdetails);\n    strokeWeight(2);\n    rect(this.x, this.y, 120, 50, 2);\n\n    \/\/details\n    line(this.x-45, this.y+8, this.x+55, this.y+8);\n    strokeWeight(1);\n    line(this.x-45, this.y+10, this.x+55, this.y+10);\n\n    \/\/ windows\n    stroke(150, 160, 200);\n    strokeWeight(2);\n    fill(150, 160, 200);\n    rect(this.x-57, this.y-5, 5, 25);\n    for (var r=0; r&lt;10; r++) {\n        rect(this.x-41+(10*r), this.y-3, 7, 15);\n    }\n\n    \/\/ wheels\n    fill(25);\n    stroke(0);\n    ellipse(this.x+38, this.y+30, 15, 15);\n    ellipse(this.x+22, this.y+30, 15, 15);\n    ellipse(this.x-45, this.y+30, 15, 15);\n    ellipse(this.x-29, this.y+30, 15, 15);\n    strokeWeight(1);\n    let wrot = 0;\n    for (var j=0; j&lt;5; j++) {\n        push();\n        translate(this.x+38, this.y+30);\n        rotate(radians(wrot));\n        line(-7, 0, 7, 0);\n        pop();\n        push();\n        translate(this.x+22, this.y+30);\n        rotate(radians(wrot));\n        line(-7, 0, 7, 0);\n        pop();\n        push();\n        translate(this.x-45, this.y+30);\n        rotate(radians(wrot));\n        line(-7, 0, 7, 0);\n        pop();\n        push();\n        translate(this.x-29, this.y+30);\n        rotate(radians(wrot));\n        line(-7, 0, 7, 0);\n        pop();\n        wrot+=360\/10;\n    }\n\n    \/\/ lights\n    noStroke();\n    fill(230, 230, 175);\n    ellipse(this.x-58, this.y+15, 7, 10);\n    rect(this.x-59, this.y+15, 5, 10, 3);\n    rect(this.x+57, this.y+21, 5, 7, 2);\n\n    \/\/ text\n    fill(0);\n    strokeWeight(1);\n    text(this.txt, this.x, this.y+62);\n}\n\n\/\/ plane\nfunction drawOnline() {\n    fill(200);\n    stroke(0);\n\n    push();\n    translate(this.x, this.y)\n    \/\/back wing\n    arc(-9, 10, 150, 16, radians(90), radians(270));\n    push();\n    translate(-25, 13);\n    rotate(radians(31));   \n    arc(-6, 0, 40, 14, radians(270), radians(90));\n    circle(-6, 0, 14);\n    pop();\n    \/\/small tail wing back\n    arc(55, 35, 45, 10, radians(90), radians(270));\n    push();\n    rotate(radians(31));\n    \/\/body\n    arc(10, 0, 150, 40, radians(175), radians(357));\n    rotate(radians(-6));\n    arc(10, 0, 150, 40, radians(4), radians(185));\n    noStroke();\n    ellipse(-60, -3, 10, 14);\n    stroke(0);\n    line(-65, -1, -65, -6);\n    rotate(radians(6));\n    \/\/ windows\n    strokeWeight(.5);\n    fill(150, 160, 200);\n    quad(-61, -6, -65, -1, -40, -1, -40, -6);\n    for (var r=0; r&lt;10; r++) {\n        ellipse((10*r)-30, -7, 6, 7);\n    }\n    pop();\n    \/\/back fin thingy\n    stroke(0);\n    fill(200);\n    push();\n    translate(52, 13);\n    rotate(radians(22));\n    beginShape();\n    vertex(0, 0);\n    vertex(0, 0);\n    curveVertex(15, -3);\n    vertex(30, -15);\n    vertex(30, 16);\n    vertex(30, 16);\n    endShape();\n    pop();\n    \/\/small tail wing front\n    arc(70, 35, 45, 10, radians(260), radians(100));\n    \/\/front wing\n    arc(12, 8, 175, 20, radians(220), radians(0));\n    arc(12, 8, 175, 15, radians(0), radians(50));\n    push();\n    translate(25, 13);\n    rotate(radians(31));  \n    arc(-10, 0, 40, 14, radians(270), radians(90));\n    circle(-10, 0, 14);\n    pop();  \n\n    \/\/ text\n    fill(0);\n    strokeWeight(1);\n    text(this.txt, 0, 62);    \n  \n    pop();\n}\n\n\/\/ store\nfunction drawLocal() {\n    square(this.x, this.y, 100);\n    noFill();\n    push();\n    translate(this.x, this.y);\n\n    \/\/ building\n    fill(150, 170, 150);\n    stroke(0);\n    rect(0, 15, 100, 70);\n    stroke(125, 145, 125);\n    for(var l=0; l&lt;11; l++) {\n        line(-49, -15+(l*6), 49, -15+(l*6));\n    }\n\n    \/\/roof\n    stroke(0);\n    fill(150, 100, 50);\n    quad(-60, -20, 60, -20, 50, -50, -50, -50);\n\n    \/\/door\n    stroke(15, 75, 15);\n    fill(15, 75, 15);\n    rect(0, 37, 16, 25);\n    arc(0, 25, 16, 30, radians(180), radians(0));\n    stroke(0);\n    line(7, 30, 2, 30);\n\n\n    \/\/windows\n    strokeWeight(.5);\n    fill(150, 160, 200);\n    rect(-30, 15, 30, 40);\n    rect(30, 15, 30, 40);\n    for (var m=0; m&lt;3; m++) {\n        line(-38+(m*8), 35, -38+(m*8), -5);\n        line(38-(m*8), 35, 38-(m*8), -5);\n        line(-45, 5+(m*10), -15, 5+(m*10));\n        line(45, 5+(m*10), 15, 5+(m*10));\n    }\n\n    \/\/signs in windows\n    fill(180);\n    line(15, 15, 30, 25);\n    line(45, 15, 30, 25);\n    rect(30, 25, 15, 8);\n    line(-15, 15, -30, 25);\n    line(-45, 15, -30, 25);\n    rect(-30, 25, 15, 8);\n    noStroke()\n    fill(150, 0, 0);\n    textAlign(CENTER);\n    textSize(4);\n    text('OPEN!', -30, 26);\n    fill(0);\n    textSize(3);\n    text('Hours:', 28, 25);\n    stroke(0);\n    line(26, 26, 35, 26);\n    line(26, 27, 35, 27);\n    fill(100);\n\n    \/\/ text\n    fill(0);\n    textSize(13);\n    strokeWeight(1);\n    text(this.txt, 0, 62);\n\n    pop();\n}\n\n\n<\/code><\/pre><\/div>\n\n\n\n<p>My program depicts an iceberg that is melting, and presents the player with common choices that people have to make on a regular basis. The canvas reacts to the decisions that the player makes. The choices all have varying environmental impacts, and they correspond to the melting of the iceberg. If the player picks the environmentally more harmful choice, more of the ice falls into the ocean. If the player chooses an environmentally friendly option, the ice continues to melt at the same rate. This interactive program is not a winnable game. The ice will always melt. As it melts, a splash sound is played. **<\/p>\n\n\n\n<p>I chose this design as my project because I wanted to highlight the way that industries pressure individuals to make good personal choices while producing products that only cause more damage. Individual choices will not stop climate change. To help preserve our planet, we need to rethink the entire system of the global enocomy.<\/p>\n\n\n\n<p>The program must use a local server to run, and two sound files should be included in the folder to make the splashing noises when the ice melts. There are instructions included on the opening page.<\/p>\n\n\n\n<p>I am really happy with how this project turned out. I only have a few choice that are presented to the player, but my goal was to make at least four sets of options, and that is what I have done. I screen recorded a majority of my process, and I have included a time-lapsed video at the bottom of this post.<\/p>\n\n\n\n<p>** for the WordPress upload, my splash sound file was not working so I used a substitute file with a similar sound. <\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/12\/15104-term-project-time-lapse-1.mp4\"><\/video><figcaption>Time lapse of my process<\/figcaption><\/figure><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>sketchDownload \/\/ ICE VAR var terraine = []; \/\/ array for ice terraine y coordinates var noiseParam = 0; \/\/ x value of noise func var noiseStep = .02; \/\/ how much x increases by var icesize = noiseStep*2500; \/\/ OBJECT VAR var washer; var handwasher; var bubble; var bubs = []; var waterbottle; var &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/12\/04\/final-project-iceberg\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Final Project: Iceberg&#8221;<\/span><\/a><\/p>\n","protected":false},"author":673,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[116,56],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/69357"}],"collection":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/users\/673"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=69357"}],"version-history":[{"count":3,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/69357\/revisions"}],"predecessor-version":[{"id":69398,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/69357\/revisions\/69398"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=69357"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=69357"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=69357"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}