{"id":76091,"date":"2022-11-20T23:02:06","date_gmt":"2022-11-21T04:02:06","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/?p=76091"},"modified":"2022-11-20T23:02:06","modified_gmt":"2022-11-21T04:02:06","slug":"project-11-4","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/11\/20\/project-11-4\/","title":{"rendered":"Project 11"},"content":{"rendered":"<!DOCTYPE html PUBLIC \"-\/\/W3C\/\/DTD HTML 4.0 Transitional\/\/EN\" \"http:\/\/www.w3.org\/TR\/REC-html40\/loose.dtd\">\n<html><body><p>The most challenging part of this project is figuring out how to construct the different objects. Objects have to appear and disappear on the screen at a constant rate. For my animation, I drew a bunch of bunnies racing and there&rsquo;s grass, trees, and the sun in the background. <\/p><div><a class=\"p5_sketch_link\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/11\/sketch-82.js\" data-width=\"475\" data-height='300\"'>sketch<\/a><iframe src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/plugins\/p5-embedder\/p5_iframe.html\" class=\"p5_exampleFrame\" width=\"475\" height='300\"'><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/Jenny Wang\n\/\/Section B\n\/\/jiayiw3@andrew.cmu.edu\n\/\/Project 11\n\n\/\/image\nvar img;\n\n\/\/frame \nvar frameCount = 0;\n\n\/\/array\nvar treeShow = [];\nvar grassShow = [];\nvar bunnyShow = [];\n\n\/\/object\nvar tree;\nvar grass;\nvar bunny;\n\n\n\n\/\/preload sun image\nfunction preload(){\n    img = loadImage(\"https:\/\/i.imgur.com\/AZGb5wn.png\")\n}\n\nfunction setup() {\n    createCanvas(475, 300);\n\n    \/\/setup tree\n    for(var t = 0; t &lt; 80; t++) {\n        tree = makeTree(t*10, 170);\n        treeShow.push(tree);\n    }\n\n    \/\/setup grass\n    for(var g = 0; g&lt;30; g++) {\n        grass = makeGrass(g*20, 200);\n        grassShow.push(grass);\n    }\n\n    \/\/setup car\n    for(var h = 0; h &lt; 5; h++) {\n        bunny = makeBunny(0, round(random(240, 260)), random(2,3));\n        bunnyShow.push(bunny);\n    }\n\n}\n\n\nfunction draw() {\n    background(\"lightblue\");\n\n    \/\/draw the sun\n    image(img,140,-100);\n\n    \/\/draw tree\n    updateTree();\n    removeTree();\n    addTree();\n\n    \/\/draw fence\n    fill(\"black\")\n    rect(0,196,width,6);\n\n    \/\/draw grass\n    updateGrass();\n    removeGrass();\n    addGrass();\n\n    \/\/draw bunny\n    updateBunny();\n    removeBunny();\n    addBunny();\n}\n\n\n\n\/\/CONSTRUCT BUNNY\/\/\nfunction makeBunny(bx, by, forward) {\n    var bunny = {x: bx, y:by,\n        speed:forward,\n        r: random(100,255),\n        g: random(100,255),\n        b: random(100,255),\n        move: bunnyMove,\n        draw: drawBunny \n    }\n    return bunny;\n}\n\nfunction drawBunny() {\n    fill(this.r, this.g, this.b);\n    ellipse(this.x,this.y,20,20);\n    ellipse(this.x-5,this.y-10,10,20);\n    ellipse(this.x+5,this.y-10,10,20);\n    ellipse(this.x-10,this.y+15,40,20);\n    ellipse(this.x-30,this.y+15,10,10);\n\n    fill(0);\n    ellipse(this.x+5, this.y, 4, 4);\n    ellipse(this.x-5, this.y, 4, 4);\n\n}\n\nfunction updateBunny() {\n    for(var i = 0; i &lt; bunnyShow.length; i++) {\n        bunnyShow[i].move();\n        bunnyShow[i].draw();\n    }\n}\n\nfunction bunnyMove() {\n    this.x += this.speed;\n}\n\nfunction removeBunny() {\n    var bunnyKeep = [];\n    for (var i = 0; i &lt; bunnyShow.length; i++){\n        if (bunnyShow[i].x &lt; width) {\n            bunnyKeep.push(bunnyShow[i]);\n        }\n    }\n    bunnyShow = bunnyKeep; \/\/ remember the showing cars\n\n}\n\nfunction addBunny() {\n    frameCount +=1;\n    if (frameCount % 100== 0){\n        bunnyShow.push(makeBunny(0, round(random(240, 260)), random(2,4)));\n    }\n\n}\n\n\n\n\/\/CONSTRUCT GRASS\/\/\nfunction makeGrass(gx, gy) {\n    var grass = {x:gx, y:gy, \n        width:random(40, 70), \n        height:random(100, 300), \n        r:random(70,200), g:random(115,200), b: random(20, 100),\n        speed: -0.5,\n        move: grassMove,\n        draw: drawGrass\n    }\n    return grass;\n}\n\nfunction drawGrass() {\n    noStroke();\n    fill(this.r, this.g, this.b);\n    rect(this.x, this.y, this.width, this.height);\n}\n\nfunction updateGrass() {\n    for(var g = 0; g &lt; grassShow.length; g++) {\n        grassShow[g].move();\n        grassShow[g].draw();\n    }\n}\n\nfunction grassMove() {\n    this.x += this.speed;\n}\n\nfunction removeGrass() {\n    var grassKeep = [];\n    for (var g = 0; g &lt; grassShow.length; g++){\n        if (grassShow[g].x + width &gt; 0) {\n            grassKeep.push(grassShow[g]);\n        }\n    }\n    grassShow = grassKeep; \n}\n\nfunction addGrass() {\n    frameCount +=1;\n    if (frameCount % 25 == 0){\n        grassShow.push(makeGrass(width,200));\n    }\n\n}\n\n\n\n\/\/CONSTRUCT TREE\/\/\nfunction updateTree() {\n    for(var t =0; t &lt; treeShow.length; t++){\n        treeShow[t].move();\n        treeShow[t].draw();\n    }\n\n}\n\nfunction removeTree(){\n    var treeKeep = [];\n    for (var t = 0; t &lt; treeShow.length; t++){\n        if (treeShow[t].x +80 &gt; 0) {\n            treeKeep.push(treeShow[t]);\n        }\n    }\n    treeShow = treeKeep; \n}\n\nfunction addTree() {\n    frameCount +=1;\n    if (frameCount % 25 == 0){\n        treeShow.push(makeTree(width+80,170));\n    }\n}\n\nfunction makeTree(tx, ty) {\n    var tree = {x:tx, y:ty, \n        width:random(80, 150),  \n        r:0, g:random(90,200), b: random(10, 20),\n        speed: -1,\n        move: treeMove,\n        draw: drawtree\n    }\n    return tree;\n\n}\n\nfunction drawtree() {\n    fill(this.r, this.g, this.b);\n    ellipse(this.x, this.y, this.width);\n}\n\n\nfunction treeMove() {\n    this.x += this.speed;\n}<\/code><\/pre><\/div><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>The most challenging part of this project is figuring out how to construct the different objects. Objects have to appear and disappear on the screen at a constant rate. For my animation, I drew a bunch of bunnies racing and there&rsquo;s grass, trees, and the sun in the background. sketch \/\/Jenny Wang \/\/Section B \/\/jiayiw3@andrew.cmu.edu &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/11\/20\/project-11-4\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project 11&#8221;<\/span><\/a><\/p>\n","protected":false},"author":769,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[115,56],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/76091"}],"collection":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/users\/769"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=76091"}],"version-history":[{"count":1,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/76091\/revisions"}],"predecessor-version":[{"id":76093,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/76091\/revisions\/76093"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=76091"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=76091"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=76091"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}