{"id":69417,"date":"2021-12-05T00:36:56","date_gmt":"2021-12-05T05:36:56","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=69417"},"modified":"2021-12-05T00:36:56","modified_gmt":"2021-12-05T05:36:56","slug":"final-project-17","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/12\/05\/final-project-17\/","title":{"rendered":"Final Project"},"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-width=\"&ldquo;600&rdquo;\" data-height=\"&ldquo;500&rdquo;\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/12\/sketch-36.js\">sketch<\/a><iframe src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/plugins\/p5-embedder\/p5_iframe.html\" class=\"p5_exampleFrame\" width=\"&ldquo;600&rdquo;\" height=\"&ldquo;500&rdquo;\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">var birds = []\nvar trees = []\nvar deadTrees = []\nvar timberJacks = []\nvar angle = 70\nvar angle2 = 50\nvar x = 30\nvar y = 50\nfunction setup() {\n    createCanvas(600, 500)\n    frameRate(10)\n}\nfunction draw() {\n    \/\/draw backgrounds\n    push()\n    drawDesertAndSky()\n    drawNightWorld()\n    drawSun()\n    pop()\n    \/\/rotating lines for the sun\n    push()\n    translate(150,0)\n    for (y = 50; y &lt;= 300; y += 2){\n        rotate (radians(angle))\n        stroke (255, 215, 0)\n        line (30, y, x+2, y)\n    }\n    pop()\n    push()\n    for (x = 30; x &lt;= 400; x += 5){\n        rotate (radians(angle2))\n        stroke (255, 255, 100)\n        line (x-25, x-40, x-40, 0.8*40)\n    }\n    pop()\n    \/\/draw trees and deadtrees \n    push()\n    for (var i = 0; i &lt; trees.length; i++){\n        trees[i].displays()\n    }\n    pop()\n    push()\n    for (var i = 0; i &lt; deadTrees.length; i++){\n        deadTrees[i].showss()\n    }\n    pop()\n    \/\/draw timberjacks\n    push()\n    updateAndDisplayTimberJacks()\n    addNewTimberJackWithSomeRandomProbability()\n    pop()\n    \/\/draw birds    \n    push()\n    updateAndDisplayBirds(); \n    removeBirdsThatHaveSlippedOutOfView();\n    addNewBirdsWithSomeRandomProbability();\n    pop()\n    \/\/texts\n    push()\n    fill(0,100,0)\n    textSize(18);\n    strokeWeight(3)\n    stroke(0,100,0)\n    text(\"CURRENT WORLD\",100,70)\n    textSize(16);\n    text(\"WE DON'T WANT OUR WORLD DESTROYED!\",10,100)\n    strokeWeight(2)\n    text(\"Click to Plant Trees Here! :)\",40,150)\n    fill(0)\n    textSize(20)\n    strokeWeight(3)\n    stroke(0)\n    text(\"FALLEN WORLD\",430,50)\n    textSize(16);\n    strokeWeight(2)\n    text(\"Klik to pLanT dEAd TrEEs:(\",400,80)\n    pop()\n}\n\n\/\/functions that draw the background\nfunction drawDesertAndSky(){\n    noStroke()\n    fill(237, 201, 155)\/\/desert\n    rect(0,170,400,330)\n    fill(135,206,235)\/\/sky\n    rect(0,0,400,170)\n}\nfunction drawNightWorld(){\n    noStroke()\n    fill(48,25,52)\n    rect(400,170,200,330)\n    fill(216,191,216)\n    rect(400,0,200,170)\n}\nfunction drawSun(){\n    translate(150,0)\n    fill(255,200,0)\/\/sun\n    ellipse(0,0,100,100)\n    line(50,50,85,85)\n    line(75,20, 125, 30)\n    line(20,75, 25 ,125)\n}\n\n\/\/interactive mousePressed function to draw trees\nfunction mousePressed(){\n    if (mouseX &lt;= 400){\n        var tree_instance = makeTree(mouseX, constrain(mouseY,150,550), 0)\/\/plant live trees on the ground\n        trees.push(tree_instance)\n    }else{\n        var deadTree_instance = makeDeadTree(mouseX, constrain(mouseY,180,550))\n        deadTrees.push(deadTree_instance)\n    }\n}\n\n\/\/the tree & dead tree functions\nfunction makeTree(tx, ty, th){\n    var tree = {x: tx, y: ty, height: th, \n            displays: treeDraw}\n    return tree\n}\nfunction treeDraw(){ \n    fill(0,255,0)\n    triangle(this.x,this.y-this.height,this.x-7,this.y+15-this.height,this.x+7,this.y+15-this.height)\n    fill(50,30,0)\n    rect(this.x-2,this.y+15-this.height,4,10+this.height)\n    \/\/trees grow\n    if(this.height <= 10){\n        this.height+=0.1\n    }\n}\nfunction makeDeadTree(tx, ty){\n    var deadTree = {x: tx, y: ty,\n            showss: deadTreeDraw}\n    return deadTree\n}\nfunction deadTreeDraw(){\n    push()\n    fill(129)\n    triangle(this.x+10,this.y-4,this.x+10,this.y+8,this.x+25,this.y)\n    rect(this.x,this.y,10,4)\n    pop()\n}\n\n\/\/timberjacks\nfunction makeTimberjack(jx, jy){\n    var timberJack = {x: jx, y: jy, \n            display: timberJackDraw,\n            speedX: random(3,6),\n            speedY: random(-1,1),\n            move: timberJackMove}\n    return timberJack\n}\nfunction timberJackDraw(){\n    push()\n    strokeWeight(1)\n    ellipse(this.x,this.y,9,12)\n    \/\/body\n    line(this.x,this.y+6,this.x,this.y+20)\/\/body\n    line(this.x,this.y+15,this.x+5,this.y+15)\/\/left hand\n    line(this.x,this.y+15,this.x+5,this.y+12)\/\/right hand\n    line(this.x,this.y+20,this.x+5,this.y+27.5)\/\/right leg\n    line(this.x,this.y+20,this.x-5,this.y+27.5)\/\/left leg\n    \/\/eyes\n    ellipse(this.x-1.5,this.y-1,0.5,0.5)\n    ellipse(this.x+1.5,this.y-1,0.5,0.5)\n    arc(this.x, this.y+5, 6, 7.5, PI+1,-1)\n    \/\/hair\n    line(this.x,this.y-6,this.x,this.y-11)\n    line(this.x-1.5,this.y-5.5,this.x-5,this.y-9)\n    line(this.x+1.5,this.y-6.5,this.x+5,this.y-9)\n    pop() \n    \/\/electric saw\n    push()\n    noStroke()\n    fill(0)\n    rect(this.x+5,this.y+10,5,8)\n    rect(this.x+7,this.y+12,11,4)\n    triangle(this.x+18,this.y+12,this.x+18,this.y+16,this.x+23,this.y+12)\n    pop()\n}\nfunction timberJackMove() {\n    this.x += this.speedX;\n    this.y += this.speedY\n}\nfunction addNewTimberJackWithSomeRandomProbability() {\n    \/\/ With a probability, add a new timberjack to the end.\n    var newTimberJackLikelihood = 0.05; \n    if (random(0,1) &lt; newTimberJackLikelihood) {\n        timberJacks.push(makeTimberjack(0,random(200,470)));\n    }\n}\nfunction updateAndDisplayTimberJacks(){\n    \/\/ Update the timberjacks' positions, and display them.\n    for (var i = 0; i &lt; timberJacks.length; i++){\n        timberJacks[i].move();\n        timberJacks[i].display();\n    }\n}\nfunction removeTimberJacksThatHaveSlippedOutOfView(){\n    var timberJacksToKeep = [];\n    for (var i = 0; i &lt; timberJacks.length; i++){\n        if (timberJacks[i].x &gt; 0) {\n            timberJacksToKeep.push(timberJacks[i]);\n        }\n    }\n    timberJacks = timberJacksToKeep;\n}\n\n\/\/birds\nfunction removeBirdsThatHaveSlippedOutOfView(){\n    var birdsToKeep = [];\n    for (var i = 0; i &lt; birds.length; i++){\n        if (birds[i].x &gt; 0) {\n            birdsToKeep.push(birds[i]);\n        }\n    }\n    birds = birdsToKeep; \/\/ remember the surviving birds\n}\nfunction updateAndDisplayBirds(){\n    \/\/ Update the birds' positions, and display them.\n    for (var i = 0; i &lt; birds.length; i++){\n        birds[i].move();\n        birds[i].display();\n    }\n}\nfunction addNewBirdsWithSomeRandomProbability() {\n    \/\/ With a probability, add a new bird to the end.\n    var newBirdLikelihood = 0.02; \n    if (random(0,1) &lt; newBirdLikelihood) {\n        birds.push(makeBird(width,random(20,160),0));\n    }\n}\n\/\/ method to update position of birds every frame\nfunction birdMove() {\n    this.x -= this.speedX;\n    this.y += this.speedY\n}\n\/\/ draw the birds\nfunction birdDisplay() {\n    push()\n    fill(this.c)\n    triangle(this.x,this.y,this.x+6,this.y+1.5,this.x+6,this.y-1.5)\/\/beak\n    ellipse(this.x+9,this.y,7,7) \/\/head\n    ellipse(this.x+17,this.y+4,15,8)\/\/body\n    arc(this.x+18, this.y, 10, 10, -0.7, PI-0.7,CHORD)\/\/wings\n    ellipse(this.x+8,this.y-1,1,1)\/\/eyes\n    pop()\n}\n\/\/make new bird with different location, color, speedXY\nfunction makeBird(birthLocationX,birthLocationY,color) {\n    var bird = {x: birthLocationX,\n                y: birthLocationY,\n                c: color,\n                speedX: random(5,8),\n                speedY: random(-1.5,1.5),\n                move: birdMove,\n                display: birdDisplay}\n    return bird;\n}\n\n\n<\/code><\/pre><\/div>\n\n\n\n<p>Since the theme for the project is climate change, I want to write an interactive program that presents scenery that compares a current world and a fallen world to warn people about the consequence of climate change.<br>The inspiration comes from the trees I was drawing in project 11. I thought of trees immediately when the topic was said to be climate change. Then I had the idea that comparison would be the best way to send out a message of warning. Therefore, the timber jacks in my program were born to play the role of antagonist; the night world is created to demonstrate the potential consequence if we don&rsquo;t take climate change seriously.<br>For the interaction part, I want users to be able to plant trees themselves. In the current world, they can plant a tree by clicking on the canvas and the tree would grow gradually to a maximum height. But if the user tries to plant trees in the fallen world, the trees would turn out to be dead trees. This is to imply that once climate change gets to a point, there is no turning back (for a long long time).<br>Though I did a lot of decorations like the birds and the transformations and loops just for the rays of sunlight, I feel like I could make the scenery more real if I have more time. I might want to use sin wave to draw the desert; I might draw more detailed timber jacks; I might add clouds. But overall, I feel like the program is quite complete, as the message is delivered and I believe that I&rsquo;ve done all 6 technical merits.<\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>Since the theme for the project is climate change, I want to write an interactive program that presents scenery that compares a current world and a fallen world to warn people about the consequence of climate change.The inspiration comes from the trees I was drawing in project 11. I thought of trees immediately when the &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/12\/05\/final-project-17\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Final Project&#8221;<\/span><\/a><\/p>\n","protected":false},"author":667,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[116,55],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/69417"}],"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\/667"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=69417"}],"version-history":[{"count":3,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/69417\/revisions"}],"predecessor-version":[{"id":69452,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/69417\/revisions\/69452"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=69417"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=69417"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=69417"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}