Here is my final project! It’s an interactive animation of a waterpark. Click anywhere to send someone down a random slide — or, if you prefer, click the top of a slide to send someone down that specific one!<\/p>\n

sketch<\/a>\n\n\n\n

<\/p><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/sam rauch, srauch, section B\n\/\/final project\n\/\/this code creates an animation of a waterpark. It's populated with people objects that have a\n\/\/skin tone and swimsuit color randomly picked from an array, so they are different every time\n\/\/you reload the page. In the foreground, people go by in a lazy river in tubes. In the background,\n\/\/people wait in line for waterslide towers.\n\/\/click anywhere to send someone down a random slide, or, click at the top of a slide to send\n\/\/a person down that specific slide!\n\n\/\/clouds x, y, and scale\nvar cloudsx = [];\nvar cloudsy = [];\nvar cloudsSc = [];\n\n\/\/skin tones and swimsuit colors\nvar skincolors;\nvar swimcolors;\n\n\/\/will hold people waiting for waterslide 1\nvar topSlide = [];\nvar slideToppers =[];\nvar groundWaiters1 = [];\nvar stairWaiters1 = [];\n\n\/\/will hold people waiting for waterslide 2\nvar groundWaiters2 = [];\nvar stairWaiters2 = [];\nvar topguy;\n\n\/\/bushes and trees\nvar bushSizes = [];\nvar bushColors = [];\nvar treeSizes = [];\nvar treeColors = [];\n\n\/\/people in lazy river\nvar tubers = [];\n\n\/\/color of wood in waterslide towers\nvar woodcolor;\n\n\/\/variables for people going down slides\nvar slider;\nvar slidetoggler;\nvar randomizer1;\n\n\/\/store mouseX and mouseY when clicked\nvar xWhenClick;\nvar yWhenClick;\n\nfunction setup() {\n createCanvas(600, 400);\n background(220);\n\n woodcolor = color(105, 89, 56);\n\n \/\/fill cloud array with clouds at random scales and positions\n for (var i=0; i<8; i++){\n cloudsx[i]= random(-10, width-10);\n cloudsy[i] = random(-10, 200);\n cloudsSc[i] = random(1,3);\n }\n\n \/\/skin tones and swimsuit color values\n skincolors = [color(235, 207, 176), color(204, 168, 126), color(107, 77, 43),\n color(148, 98, 41), color(117, 84, 47), color(217, 195, 154),\n color(235, 213, 192), color(69, 48, 29), color(247, 220, 195)];\n swimcolors = [color(194, 78, 130), color(224, 49, 22), color(224, 144, 22),\n color(102, 23, 11), color(102, 23, 11), color(102, 93, 11),\n color(207, 195, 87), color(159, 207, 87), color(49, 145, 42),\n color(42, 145, 89), color(92, 191, 186), color(92, 140, 191),\n color(24, 73, 125), color(105, 89, 156), color(154, 89, 156),\n color(55, 84, 179)]\n\n \/\/filling the array that handles the people in the lazy river\n var tubespacer = 50;\n for (var i=0; i<10; i++){\n tubers[i] = makeTuber(tubespacer, random(340, 350));\n tubespacer += random(30, 100);\n }\n\n \/\/creating the size and color of the bushes and trees\n for (var i=0; i<width+30; i++){\n bushColors[i] = color(100, random(150, 170), 100);\n bushSizes[i] = random(30, 60);\n treeColors[i] = color(100, random(150, 170), 100);\n treeSizes[i] = random(100, 150);\n }\n\n \/\/filling the array of people waiting on top of waterslide1\n var slideLocation = 410;\n for (var i=0; i<3; i++){\n topSlide[i] = makeDude(365+(i*15), 125, false);\n slideToppers[i] = makeDude(slideLocation, 125, false);\n slideLocation +=40;\n }\n\n \/\/filling the array of people waiting for waterslide1 on the ground\n var groundWaiters1Loc = 280;\n for (var i=0; i<9; i++){\n groundWaiters1[i] = makeDude(groundWaiters1Loc, 280, false);\n groundWaiters1Loc += 20;\n }\n\n \/\/filling the array of people waiting on the waterslide1 stairs\n var stairWaiters1Loc = 460;\n var stairHeight1 = 280;\n for (var i=1; i<13; i++){\n stairWaiters1[i] = makeDude(stairWaiters1Loc, stairHeight1, false);\n stairWaiters1Loc += 17;\n if (i<4 || i>=3) {stairHeight1-= 20;}\n if (i%4 == 0) {stairWaiters1Loc = 460;}\n if (i>4 & i<=8) {stairHeight1 = 205;}\n }\n\n \/\/filling array of people waiting on ground for waterslide 2\n var groundWaiters2Loc = 240;\n for (var i=0; i<6; i++){\n groundWaiters2[i] = makeDude(groundWaiters2Loc, 270, false);\n groundWaiters2Loc -= 20;\n }\n\n \/\/filling array of people waiting on stairs for waterslide 2\n var stairWaiters2Loc = 120;\n var stairHeight2 = 265;\n var sidestep = 14;\n var counter2 = 0;\n for (var i=0; i<20; i++){\n stairWaiters2[i] = makeDude(stairWaiters2Loc, stairHeight2, false);\n counter2 += 1;\n if (counter2%4==0){\n sidestep = sidestep*-1;\n }else{\n stairWaiters2Loc -= sidestep;\n }\n stairHeight2 -= 11;\n }\n topguy = makeDude(85, 50, false);\n\n \/\/when this is true (set to true when mouse is clicked), an if statement in draw\n \/\/runs that sends someone down a slide\n slidetoggler = false;\n\n}\n\nfunction draw() {\n background(162, 219, 222);\n backgroundstuff(); \/\/draw clouds, trees, waterslides\n slidego(); \/\/send someone down slide when the mouse is clicked\n foregroundstuff(); \/\/draw lazy river and bushes\n}\n\n\/\/trigger someone to go down slide in draw function\nfunction mousePressed(){\n xWhenClick = mouseX;\n yWhenClick = mouseY;\n slidetoggler = true;\n slider = makeDude(0, 0, true);\n randomizer1 = random(0,4);\n}\n\n\/\/translate and rotate to the top of a specific slide\nfunction slidemover(xpos,ypos,rot){\n push();\n translate(xpos,ypos);\n rotate(radians(rot));\n slider.y += 4;\n slider.draw();\n pop();\n}\n\n\/\/send someone down specific slide if clicked, random otherwise\nfunction slidego(){\nif (slidetoggler==true){\n \/\/if click at the top of a specific slide, send someone down that slide\n if (xWhenClick >= 70 & xWhenClick <= 130 && yWhenClick >= 40 && yWhenClick <= 100){\n slidemover(88,50,-25);\n } else if (xWhenClick >= 400 & xWhenClick <= 435 && yWhenClick >= 110 && yWhenClick <= 170){\n slidemover(432,140,30);\n } else if (xWhenClick >= 440 & xWhenClick <= 475 && yWhenClick >= 110 && yWhenClick <= 170){\n slidemover(472,140,30);\n } else if (xWhenClick >= 480 & xWhenClick <= 515 && yWhenClick >= 110 && yWhenClick <= 170){\n slidemover(512,140,30);\n } else { \/\/otherwise, send down a random slide\n push();\n if(randomizer1<=3){ \/\/for three slides on right tower\n if (randomizer1 < 1){\n translate(432,140);\n } else if (randomizer1 >= 1 & randomizer1 < 2){\n translate(472,140);\n } else {\n translate(512, 140);\n }\n rotate(radians(30)); \n } else { \/\/for tall slide on left tower\n translate(88,50);\n rotate(radians(-25));\n }\n slider.y+= 4;\n slider.draw();\n pop();\n }\n }\n}\n\n\/\/creates a person object\nfunction makeDude(xpos, ypos, armpos){\n var dude = {x:xpos, y:ypos, armsup:armpos,\n swimsuit:swimcolors[floor(random(0,15))],\n swimtype:random(0,2),\n skin:skincolors[floor(random(0,9))],\n draw:drawDude};\n return dude;\n}\n\nfunction drawDude(){\n noStroke();\n fill(this.skin);\n ellipse(this.x, this.y, 10, 10); \/\/head\n rect(this.x-5, this.y+7, 10, 16); \/\/torso\n stroke(this.skin);\n strokeWeight(4.5);\n line(this.x, this.y, this.x, this.y+10); \/\/neck\n\n strokeWeight(3.5); \/\/toggles if arms are up or down based on this.armsup var declared in constructor\n if (this.armsup == true){\n line(this.x-4, this.y+7, this.x-11, this.y-2); \/\/right arm\n line(this.x+4, this.y+7, this.x+11, this.y-2); \/\/left arm\n } else {\n line(this.x-4, this.y+7, this.x-10, this.y+16); \/\/right arm\n line(this.x+4, this.y+7, this.x+10, this.y+16); \/\/left arm\n }\n\n strokeWeight(4);\n line(this.x-3, this.y+22, this.x-3, this.y+35); \/\/right leg\n line(this.x+3, this.y+22, this.x+3, this.y+35); \/\/left leg\n\n noStroke();\n if (this.swimtype<1){ \/\/swim trunks\n fill(this.swimsuit);\n rect(this.x-6, this.y+18, 12, 5);\n rect(this.x-6, this.y+23, 5, 5);\n rect(this.x+1, this.y+23, 5, 5);\n } else { \/\/bikini\n fill(this.swimsuit);\n rect(this.x-5, this.y+10, 10, 13);\n ellipse(this.x-2, this.y+10.5, 5, 5);\n ellipse(this.x+2, this.y+10.5, 5, 5);\n stroke(this.swimsuit);\n noStroke();\n fill(this.skin);\n triangle(this.x-1, this.y+24, this.x-5, this.y+24, this.x-5, this.y+18);\n triangle(this.x+1, this.y+24, this.x+5, this.y+24, this.x+5, this.y+18);\n rect(this.x-5, this.y+13, 10, 4);\n }\n}\n\n\/\/creates a person in a tube object\nfunction makeTuber(xpos, ypos){\n var tuber = {x:xpos, y:ypos,\n swimsuit:swimcolors[floor(random(0,15))],\n swimtype:random(0,2),\n skin:skincolors[floor(random(0,9))],\n draw:drawTuber};\n return tuber;\n}\n\nfunction drawTuber(){\n push();\n\n \/\/inner tube\n stroke(this.skin);\n strokeWeight(4);\n line(this.x-1, this.y+12, this.x-11, this.y+22);\n noStroke();\n fill(62, 158, 62);\n rect(this.x-14, this.y+18, 28, 16);\n ellipse(this.x-14, this.y+26, 16);\n ellipse(this.x+14, this.y+26, 16);\n stroke(30, 94, 30);\n strokeWeight(4);\n line(this.x-10, this.y+23, this.x+10, this.y+23);\n\n \/\/head, neck, torso, and back arm\n push();\n translate(this.x+6, this.y+4);\n rotate(radians(10));\n noStroke();\n fill(this.skin);\n ellipse(0, 0, 10, 10); \/\/head\n rect(-5, 7, 10, 16); \/\/torso\n stroke(this.skin);\n strokeWeight(4.5);\n line(0, 0, 0, 10); \/\/neck\n\n noStroke();\n if (this.swimtype<1){ \/\/swim trunks\n fill(this.swimsuit);\n rect(-6, 18, 12, 5);\n rect(-6, 23, 5, 5);\n rect(1, 23, 5, 5);\n } else { \/\/bikini\n fill(this.swimsuit);\n rect(-5, 10, 10, 13);\n ellipse(-2, 10.5, 5, 5);\n ellipse(+2, +10.5, 5, 5);\n stroke(this.swimsuit);\n noStroke();\n fill(this.skin);\n triangle(-1, 24, -5, 24, -5, 18);\n triangle(1, 24, 5, 24, 5, 18);\n rect(-5, 13, 10, 4);\n }\n pop();\n strokeWeight(4.5);\n stroke(this.skin);\n line(this.x+4, this.y+25, this.x+4, this.y+25);\n line(this.x, this.y+25, this.x-6, this.y+21);\n\n \/\/a few more details\n noStroke();\n fill(62, 158, 62);\n rect(this.x-10, this.y+25, 20, 9);\n strokeWeight(4.5);\n stroke(this.skin);\n line(this.x+10, this.y+14, this.x+16, this.y+25); \/\/front arm\n line(this.x-6, this.y+21, this.x-10, this.y+31); \/\/right leg\n line(this.x+2, this.y+25, this.x, this.y+34); \/\/left leg\n\n \/\/water texture\n noStroke();\n fill(81, 181, 201, 100);\n rect(this.x-22, this.y+30, 44, 6);\n\n pop();\n\n}\n\n\/\/draws the waterslide on the left\nfunction waterslide1(x,y){\n \/\/stairs\n fill(woodcolor);\n beginShape();\n vertex(x+100, y+80);\n vertex(x+100, y+90);\n vertex(x+170, y+20);\n vertex(x+170, y+10);\n endShape();\n rect(x+100, y+80, 70, 8);\n beginShape();\n vertex(x+100, y+160);\n vertex(x+113, y+160);\n vertex(x+170, y+95);\n vertex(x+170, y+80);\n endShape();\n\n \/\/pillars\n fill(95, 79, 46);\n rect(x+5, y+5, 5, 155);\n rect(x+100, y+5, 5, 155);\n rect(x+170, y+5, 5, 155);\n\n \/\/shade poles\n rect(x+3, y-50, 3, 50);\n rect(x+180-6, y-50, 3, 50);\n rect(x+50, y-55, 3, 55);\n rect(x+130-6, y-55, 3, 55);\n\n \/\/shades\n fill(35, 82, 168);\n rect(x+3, y-55, 47, 6);\n triangle(x+3, y-55, x+50, y-55, x+27, y-70);\n rect(x+50, y-60, 77, 5);\n triangle(x+50, y-60, x+127, y-60, x+88.5, y-85);\n rect(x+127, y-55, 50, 5);\n triangle(x+127, y-55, x+176, y-55, x+152, y-70);\n\n \/\/railings\n fill(95, 79, 46);\n var xpos = x;\n for (var i = 0; i < 12; i++){\n rect(xpos, y-15, 2, 15);\n xpos += 5;\n }\n for (var j = 0; j<2; j++){\n xpos += 22\n for (var i = 0; i < 4; i++){\n rect(xpos, y-15, 2, 15);\n xpos += 5;\n }\n }\n xpos += 19\n for (var i = 0; i < 4; i++){\n rect(xpos, y-15, 2, 15);\n xpos += 5;\n }\n\n \/\/deck\n fill(woodcolor);\n rect(x, y, 180, 10);\n rect(x, y-15, 180, 3);\n\n \/\/draw slides\n var color1 = color(166, 61, 124);\n slide1(x+60, y, color1);\n var color2 = color(186, 176, 67);\n slide1(x+100, y, color2);\n var color3 = color(57, 94, 163);\n slide1(x+140, y, color3);\n\n}\n\n\/\/draws slides for waterslide1 function\nfunction slide1(x,y,color){ \n var slidewide = 22;\n fill(color);\n beginShape();\n vertex(x, y);\n vertex(x+slidewide, y);\n vertex(x-80, y+180);\n vertex(x-80-slidewide, y+180);\n endShape();\n\n var margin = 4;\n fill(150, 255, 255, 50);\n beginShape();\n vertex(x+margin, y);\n vertex(x+slidewide-margin, y);\n vertex(x-80-margin, y+180);\n vertex(x-80-slidewide+margin, y+180);\n endShape();\n}\n\n\/\/draws waterslide on left\nfunction waterslide2(x,y){\n\n \/\/pillars and stairs\n var loc = 310; \/\/increment 46\n for (var i = 0; i< 5; i++){\n fill(woodcolor);\n if (i%2==0 || i==0) {\n beginShape();\n vertex(x-30, loc-51);\n vertex(x-30, loc-41);\n vertex(x+30, loc);\n vertex(x+30, loc-10);\n endShape();\n } else {\n beginShape();\n vertex(x-30, loc);\n vertex(x-30, loc-10);\n vertex(x+30, loc-51);\n vertex(x+30, loc-41);\n endShape();\n } \n loc -= 44;\n }\n fill(95, 79, 46);\n rect(x-30, y, 6, 230); \/\/bottom y = 310\n rect(x+24, y, 6, 230);\n\n rect(x-30, y-40, 3, 40);\n rect(x+27, y-40, 3, 40);\n fill(189, 65, 43);\n rect(x-30, y-45, 60, 6);\n triangle(x-30, y-45, x+30, y-45, x, y-60);\n\n fill(woodcolor);\n rect(x-30, y, 60, 10);\n rect(x-30, y-15, 15, 2.5);\n rect(x+15, y-15, 15, 2.5);\n var location = x-30;\n for (var i = 0; i<8; i++){\n rect(location, y-15, 2, 15);\n if (i != 3){location += 5;}\n else {location += 28;}\n }\n\n fill(252, 165, 3);\n beginShape();\n vertex(x-15, y);\n vertex(x+15, y);\n vertex(x+140, y+260);\n vertex(x+110, y+260);\n endShape();\n\n fill(150, 255, 255, 50);\n beginShape();\n vertex(x-10, y);\n vertex(x+10, y);\n vertex(x+130, y+250);\n vertex(x+115, y+260);\n endShape();\n}\n\n\/\/draws cloud\nfunction cloud(x,y, amt){\n noStroke();\n fill(218, 237, 236);\n push();\n translate(x,y);\n scale(amt);\n ellipse(0,0,40);\n ellipse(-20, 5, 30);\n ellipse(20, 5, 30);\n pop();\n}\n\n\/\/draws background\nfunction backgroundstuff(){\n \/\/clouds\n for (var i=0; i<8; i++){\n cloud(cloudsx[i], cloudsy[i], cloudsSc[i]);\n }\n\n \/\/trees\n noStroke();\n for (var i=0; i<width+30; i+= 80){\n fill(treeColors[i]);\n ellipse(i, 270, treeSizes[i]);\n }\n\n \/\/fence\n strokeWeight(2);\n stroke(120);\n line(0, 280, width, 280);\n strokeWeight(.75);\n for (var i=-12; i<width+12; i+=4){\n line(i, 300, i+16, 280);\n line(i, 300, i-16, 280);\n }\n\n \/\/concrete\n noStroke();\n fill(199, 196, 163); \/\/concrete color\n rect(0, 300, width, 100);\n fill(168, 162, 28);\n\n \/\/pool at base of slides\n fill(81, 181, 201);\n rect(80, 325, 420, 100);\n ellipse(80, 350, 50);\n ellipse(500, 350, 50);\n\n \/\/people in waterslide1 line\n for (var i=0; i<topSlide.length; i++){\n topSlide[i].draw();\n slideToppers[i].draw();\n }\n for (var i=0; i<groundWaiters1.length; i++){\n groundWaiters1[i].draw();\n }\n for (var i=1; i<stairWaiters1.length; i++){\n stairWaiters1[i].draw();\n }\n\n \/\/people in waterslide2 line\n for (var i=0; i<stairWaiters2.length; i++){\n stairWaiters2[i].draw();\n }\n for (var i=0; i<groundWaiters2.length; i++){\n groundWaiters2[i].draw();\n }\n topguy.draw();\n\n \/\/draw waterslides\n waterslide1(350, 160);\n waterslide2(100, 80);\n}\n\n\/\/draws bushes, draws and updates lazy river\nfunction foregroundstuff(){\n \/\/bushes\n for (var i=0; i<width+30; i+= 30){\n fill(bushColors[i]);\n ellipse(i, 350, bushSizes[i]); \n }\n\n \/\/lazy river\n fill(179, 176, 143);\n rect(0, 350, width, 50);\n fill(81, 181, 201);\n rect(0, 355, width, 40);\n\n \/\/lazy river inhabitants\n for (var i = 0; i < tubers.length; i++){\n if (tubers[i].x <= -30){\n var mover = tubers.shift();\n mover.x = width + 28;\n tubers.push(mover);\n }\n tubers[i].draw();\n tubers[i].x -= 0.5;\n }\n}<\/code><\/pre><\/div><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>Here is my final project! It’s an interactive animation of a waterpark. Click anywhere to send someone down a random slide — or, if you prefer, click the top of a slide to send someone down that specific one! sketch \/\/sam rauch, srauch, section B \/\/final project \/\/this code creates an animation of a waterpark. … <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/12\/07\/srauch-final-project\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> “Srauch – Final Project”<\/span><\/a><\/p>\n","protected":false},"author":754,"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\/f2022\/wp-json\/wp\/v2\/posts\/76204"}],"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\/754"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=76204"}],"version-history":[{"count":1,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/76204\/revisions"}],"predecessor-version":[{"id":76205,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/76204\/revisions\/76205"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=76204"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=76204"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=76204"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}