Nick’s Prank (Story inspired by Zootopia Teaser Trailer)<\/strong><\/p>\n\n\n\n

Judy the bunny and the goat are walking on the street. Nick the fox sees them and decides to play a prank on Judy. When Judy passes Nick, Nick puts out his foot and trips Judy. In a panic, Judy pushes the goat walking in front of her, so the goat falls down as well. After seeing them both fall, Nick hums with joy.<\/p>\n\n\n\n

sketch<\/a><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/Xinyi Du \n\/\/15104 Section B\n\/\/xinyidu@andrew.cmu.edu\n\/\/Project-10\n\n\/\/Nick's Prank (Story inspired by Zootopia Teaser Trailer)\n\n\/\/Judy the bunny and the goat are walking on the street. \n\/\/Nick the fox sees them and decides to play a prank on Judy.\n\/\/When Judy passes Nick, Nick puts out his foot and trips Judy.\n\/\/In panic, judy pushes the goat walking in front of her, so the goat falls down as well.\n\/\/After seeing them both fall, Nick hums with joy.\n\n\/* \nImages of characters from Zootopia Teaser Trailer:\nhttps:\/\/www.youtube.com\/watch?v=g9lmhBYB11U\n\nStreet image source: \nhttps:\/\/www.etsy.com\/au\/listing\/581765202\/the-buildings-of-main-street-walt-disney?\nref=related-2&epik=dj0yJnU9UWhoMkVRQnRMc1hFbk40dXRWQ21FVUdSVG9iYVFZT3QmcD0wJm49RWRs\nYUhPc25aWUxvdTY5ZEtod3liQSZ0PUFBQUFBR053QWdv\n*\/\n\n\nvar filenames = [];\nvar walkImage = []; \/\/walk cycle images of judy\n\nvar filenames2 = [];\nvar fallImage = []; \/\/fall images of judy\n\nvar filenames3 = [];\nvar walkImage2 = []; \/\/walk cycle images of the goat\n\nvar filenames4 = [];\nvar fallImage2 = []; \/\/fall images of the goat\n\nvar character = [];\nvar street;\nvar clouds;\nvar nick;\n\nvar walk; \/\/walking footsteps sound variable\nvar ouch; \/\/ouch sound judy makes when fall\nvar bodyfall; \/\/body falling sound of the goat\nvar nickhumming; \/\/happy humming of nick\n\nfunction preload(){\n \/\/load sounds\n walk = loadSound(\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/11\/footsteps.mp3\");\n ouch = loadSound(\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/11\/ouch.mp3\");\n bodyfall = loadSound(\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/11\/bodyfall.wav\");\n nickhumming = loadSound(\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/11\/happy-huming.mp3\");\n \n \/\/load images\n \/\/walk cycle images of judy\n filenames[0] = \"https:\/\/i.imgur.com\/wLVmUpf.png\";\n filenames[1] = \"https:\/\/i.imgur.com\/TffffQ8.png\";\n filenames[2] = \"https:\/\/i.imgur.com\/5Lirbd1.png\";\n filenames[3] = \"https:\/\/i.imgur.com\/N2BUn7y.png\";\n filenames[4] = \"https:\/\/i.imgur.com\/pc6Lp46.png\";\n filenames[5] = \"https:\/\/i.imgur.com\/lhOcePN.png\";\n filenames[6] = \"https:\/\/i.imgur.com\/djXrWqQ.png\";\n filenames[7] = \"https:\/\/i.imgur.com\/8nXGJZe.png\";\n filenames[8] = \"https:\/\/i.imgur.com\/D8o0eOa.png\";\n filenames[9] = \"https:\/\/i.imgur.com\/qzJQm37.png\";\n for (var i = 0; i < filenames.length; i++) {\n walkImage[i] = loadImage(filenames[i]);\n }\n \/\/fall images of judy\n filenames2[0] = \"https:\/\/i.imgur.com\/c1vUye5.png\";\n filenames2[1] = \"https:\/\/i.imgur.com\/mbibpsr.png\";\n filenames2[2] = \"https:\/\/i.imgur.com\/ZSeL7on.png\";\n filenames2[3] = \"https:\/\/i.imgur.com\/UNqmLD7.png\";\n for (var i = 0; i < filenames2.length; i++) {\n fallImage[i] = loadImage(filenames2[i]);\n }\n \/\/walk cycle images of the goat\n filenames3[0] = \"https:\/\/i.imgur.com\/RRf37Kf.png\";\n filenames3[1] = \"https:\/\/i.imgur.com\/ue4D3ig.png\";\n filenames3[2] = \"https:\/\/i.imgur.com\/MxIlCqf.png\";\n filenames3[3] = \"https:\/\/i.imgur.com\/UDHWsZ8.png\";\n filenames3[4] = \"https:\/\/i.imgur.com\/a3nmvz3.png\";\n filenames3[5] = \"https:\/\/i.imgur.com\/i75T56A.png\";\n filenames3[6] = \"https:\/\/i.imgur.com\/cN4M52I.png\";\n filenames3[7] = \"https:\/\/i.imgur.com\/A1iDTIi.png\";\n for (var i = 0; i < filenames3.length; i++) {\n walkImage2[i] = loadImage(filenames3[i]);\n }\n \/\/fall images of the goat\n filenames4[0] = \"https:\/\/i.imgur.com\/plfUZHK.png\";\n filenames4[1] = \"https:\/\/i.imgur.com\/g7C3kXU.png\";\n filenames4[2] = \"https:\/\/i.imgur.com\/14PuZpL.png\";\n filenames4[3] = \"https:\/\/i.imgur.com\/Pcl7xcg.png\";\n filenames4[4] = \"https:\/\/i.imgur.com\/KC56zzH.png\";\n for (var i = 0; i < filenames4.length; i++) {\n fallImage2[i] = loadImage(filenames4[i]);\n }\n\n street = loadImage(\"https:\/\/i.imgur.com\/G0SJIDN.jpg\");\n clouds = loadImage(\"https:\/\/i.imgur.com\/LbxT2nS.png\");\n nick = loadImage(\"https:\/\/i.imgur.com\/hEIvnaB.png\");\n}\n\n\/\/constructor for walking judy\nfunction makeJudy(jx, jy, jdx) {\n var j = {x: jx, y: jy, dx: jdx,\n imageNum: 0,\n stepFunction: stepJudy,\n drawFunction: drawJudy\n }\n return j;\n}\nfunction stepJudy() {\n this.x += this.dx; \/\/increase x by dx\n this.imageNum ++; \/\/increase imageNum\n \/\/if reaches the length (end) of the array (go over 10 images), start from 0 again\n if (this.imageNum == walkImage.length) { \n this.imageNum = 0;\n }\n}\nfunction drawJudy() {\n image(walkImage[this.imageNum], this.x, this.y, 63, 80); \/\/draw the image\n}\n\n\n\/\/constructor for falling judy\nfunction makeFallDown(fx, fy) {\n var f = {x: fx, y: fy, imageNum: 0,\n stepFunction: stepFallDown,\n drawFunction: drawFallDown\n }\n return f;\n}\nfunction stepFallDown() {\n \/\/increases imageNum only when it has not exceed the length of the array fallImage\n if(this.imageNum < fallImage.length-1) {\n this.imageNum ++;\n } \n}\nfunction drawFallDown() {\n image(fallImage[this.imageNum], this.x, this.y, 170, 100);\n}\n\n\n\/\/constructor for walking goat\nfunction makeNewChar(cx, cy, cdx) {\n var c = {x: cx, y: cy, dx: cdx,\n imageNum: 0,\n stepFunction: stepChar,\n drawFunction: drawChar\n }\n return c;\n}\nfunction stepChar() {\n this.x += this.dx; \n this.imageNum ++; \n if (this.imageNum == walkImage2.length) { \n this.imageNum = 0;\n }\n}\nfunction drawChar() {\n image(walkImage2[this.imageNum], this.x, this.y, 120, 180); \n}\n\n\n\/\/constructor for falling goat\nfunction makeFallDown2(fx, fy) {\n var f = {x: fx, y: fy, imageNum: 0,\n stepFunction: stepFallDown2,\n drawFunction: drawFallDown2\n }\n return f;\n}\nfunction stepFallDown2() {\n if(this.imageNum < fallImage2.length-1) {\n this.imageNum ++; \n } \n}\nfunction drawFallDown2() {\n image(fallImage2[this.imageNum], this.x, this.y, 300, 200);\n}\n\n\/\/set up sounds\nfunction soundSetup() {\n walk.setVolume(0.4);\n ouch.setVolume(0.8);\n bodyfall.setVolume(1.2);\n nickhumming.setVolume(0.1);\n}\n\/\/define a function to add the sounds\nfunction addSounds() {\n if(frameCount % 15 == 1) {\n walk.play(); \/\/walking footstep sounds very 15 frameCounts\n }\n if(frameCount == 99) {\n ouch.play(); \/\/judy makes \"ouch\" sound when being tripped\n }\n if(frameCount > 100){\n walk.stop(); \/\/stop walking footstep sounds when falling down\n }\n if(frameCount == 100) {\n bodyfall.play(); \/\/body falling sound of the goat after judy falls\n }\n if(frameCount == 108) {\n nickhumming.play(); \/\/nick humming after they both falls\n noLoop(); \/\/end the loop\n }\n}\n\n\n\nfunction setup() {\n createCanvas(700, 500);\n frameRate(5);\n useSound();\n \/\/store the characters info to the characters array\n var judyX = width\/4;\n character.push(makeJudy(judyX, height-94, 0));\n character.push(makeFallDown(judyX, height-112, 0));\n var newCharX = width\/3;\n character.push(makeNewChar(newCharX, height-184, 0)); \/\/walking goat before judy falls\n var newChar2X = width\/3;\n character.push(makeNewChar(newChar2X, height-184, 10)); \/\/goat after judy falls, continue walking\n character.push(makeFallDown2(290, height-199, 10));\n}\n\nfunction draw() {\n background(25);\n \/\/call the addSounds function to add sounds\n addSounds();\n \/\/constrain the Xs of the images of street and clouds so that they stop rolling when Judy falls\n \/\/street and clouds rolling with different speed according to frameCount\n var streetX = constrain(0-frameCount*10, -1000, 0); \n var cloudsX = constrain(0-frameCount*5, -500, 0);\n image(street, streetX, -70, 2000, 600);\n image(clouds, cloudsX, -100, 2000, 600);\n\n \/\/update the steps and draw the characters\n \/\/constrain the X of nick so that it does not move when the street scene stops\n var nickX = constrain(1175-frameCount*10, 175, 1000);\n var judyX = width\/4;\n var newCharX = width\/11;\n \/\/if judy (width\/4) has not meet nick(nickX)\n if (nickX > width\/4) {\n \/\/draw the image of nick\n image(nick, nickX, height-111, 80, 100);\n character[2].stepFunction(); \n character[2].drawFunction(); \/\/walking goat\n character[0].stepFunction();\n character[0].drawFunction(); \/\/walking judy\n } \n \/\/if judy (width\/4) passes by nick(nickX)\n if (judyX == nickX) {\n character[1].stepFunction();\n character[1].drawFunction(); \/\/judy falls down\n \/\/the goat continue walking\n if (character[3].x < 250) { \n character[3].stepFunction();\n character[3].drawFunction(); \/\/walking goat\n }\n } \n \/\/if judy pushes the goat\n if (character[3].x >= 250) {\n character[4].stepFunction();\n character[4].drawFunction(); \/\/goat falls down\n }\n}\n\n\n\n\n<\/code><\/pre><\/div><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>Nick’s Prank (Story inspired by Zootopia Teaser Trailer) Judy the bunny and the goat are walking on the street. Nick the fox sees them and decides to play a prank on Judy. When Judy passes Nick, Nick puts out his foot and trips Judy. In a panic, Judy pushes the goat walking in front of her, … <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/11\/13\/project-10-sonic-story-2\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> “Project 10: Sonic Story”<\/span><\/a><\/p>\n","protected":false},"author":716,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[113,56],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/75616"}],"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\/716"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=75616"}],"version-history":[{"count":6,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/75616\/revisions"}],"predecessor-version":[{"id":75673,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/75616\/revisions\/75673"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=75616"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=75616"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=75616"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}