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