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, so the goat falls down as well. After seeing them both fall, Nick hums with joy.
sketch
//Xinyi Du
//15104 Section B
//xinyidu@andrew.cmu.edu
//Project-10
//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 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.
/*
Images of characters from Zootopia Teaser Trailer:
https://www.youtube.com/watch?v=g9lmhBYB11U
Street image source:
https://www.etsy.com/au/listing/581765202/the-buildings-of-main-street-walt-disney?
ref=related-2&epik=dj0yJnU9UWhoMkVRQnRMc1hFbk40dXRWQ21FVUdSVG9iYVFZT3QmcD0wJm49RWRs
YUhPc25aWUxvdTY5ZEtod3liQSZ0PUFBQUFBR053QWdv
*/
var filenames = [];
var walkImage = []; //walk cycle images of judy
var filenames2 = [];
var fallImage = []; //fall images of judy
var filenames3 = [];
var walkImage2 = []; //walk cycle images of the goat
var filenames4 = [];
var fallImage2 = []; //fall images of the goat
var character = [];
var street;
var clouds;
var nick;
var walk; //walking footsteps sound variable
var ouch; //ouch sound judy makes when fall
var bodyfall; //body falling sound of the goat
var nickhumming; //happy humming of nick
function preload(){
//load sounds
walk = loadSound("https://courses.ideate.cmu.edu/15-104/f2022/wp-content/uploads/2022/11/footsteps.mp3");
ouch = loadSound("https://courses.ideate.cmu.edu/15-104/f2022/wp-content/uploads/2022/11/ouch.mp3");
bodyfall = loadSound("https://courses.ideate.cmu.edu/15-104/f2022/wp-content/uploads/2022/11/bodyfall.wav");
nickhumming = loadSound("https://courses.ideate.cmu.edu/15-104/f2022/wp-content/uploads/2022/11/happy-huming.mp3");
//load images
//walk cycle images of judy
filenames[0] = "https://i.imgur.com/wLVmUpf.png";
filenames[1] = "https://i.imgur.com/TffffQ8.png";
filenames[2] = "https://i.imgur.com/5Lirbd1.png";
filenames[3] = "https://i.imgur.com/N2BUn7y.png";
filenames[4] = "https://i.imgur.com/pc6Lp46.png";
filenames[5] = "https://i.imgur.com/lhOcePN.png";
filenames[6] = "https://i.imgur.com/djXrWqQ.png";
filenames[7] = "https://i.imgur.com/8nXGJZe.png";
filenames[8] = "https://i.imgur.com/D8o0eOa.png";
filenames[9] = "https://i.imgur.com/qzJQm37.png";
for (var i = 0; i < filenames.length; i++) {
walkImage[i] = loadImage(filenames[i]);
}
//fall images of judy
filenames2[0] = "https://i.imgur.com/c1vUye5.png";
filenames2[1] = "https://i.imgur.com/mbibpsr.png";
filenames2[2] = "https://i.imgur.com/ZSeL7on.png";
filenames2[3] = "https://i.imgur.com/UNqmLD7.png";
for (var i = 0; i < filenames2.length; i++) {
fallImage[i] = loadImage(filenames2[i]);
}
//walk cycle images of the goat
filenames3[0] = "https://i.imgur.com/RRf37Kf.png";
filenames3[1] = "https://i.imgur.com/ue4D3ig.png";
filenames3[2] = "https://i.imgur.com/MxIlCqf.png";
filenames3[3] = "https://i.imgur.com/UDHWsZ8.png";
filenames3[4] = "https://i.imgur.com/a3nmvz3.png";
filenames3[5] = "https://i.imgur.com/i75T56A.png";
filenames3[6] = "https://i.imgur.com/cN4M52I.png";
filenames3[7] = "https://i.imgur.com/A1iDTIi.png";
for (var i = 0; i < filenames3.length; i++) {
walkImage2[i] = loadImage(filenames3[i]);
}
//fall images of the goat
filenames4[0] = "https://i.imgur.com/plfUZHK.png";
filenames4[1] = "https://i.imgur.com/g7C3kXU.png";
filenames4[2] = "https://i.imgur.com/14PuZpL.png";
filenames4[3] = "https://i.imgur.com/Pcl7xcg.png";
filenames4[4] = "https://i.imgur.com/KC56zzH.png";
for (var i = 0; i < filenames4.length; i++) {
fallImage2[i] = loadImage(filenames4[i]);
}
street = loadImage("https://i.imgur.com/G0SJIDN.jpg");
clouds = loadImage("https://i.imgur.com/LbxT2nS.png");
nick = loadImage("https://i.imgur.com/hEIvnaB.png");
}
//constructor for walking judy
function makeJudy(jx, jy, jdx) {
var j = {x: jx, y: jy, dx: jdx,
imageNum: 0,
stepFunction: stepJudy,
drawFunction: drawJudy
}
return j;
}
function stepJudy() {
this.x += this.dx; //increase x by dx
this.imageNum ++; //increase imageNum
//if reaches the length (end) of the array (go over 10 images), start from 0 again
if (this.imageNum == walkImage.length) {
this.imageNum = 0;
}
}
function drawJudy() {
image(walkImage[this.imageNum], this.x, this.y, 63, 80); //draw the image
}
//constructor for falling judy
function makeFallDown(fx, fy) {
var f = {x: fx, y: fy, imageNum: 0,
stepFunction: stepFallDown,
drawFunction: drawFallDown
}
return f;
}
function stepFallDown() {
//increases imageNum only when it has not exceed the length of the array fallImage
if(this.imageNum < fallImage.length-1) {
this.imageNum ++;
}
}
function drawFallDown() {
image(fallImage[this.imageNum], this.x, this.y, 170, 100);
}
//constructor for walking goat
function makeNewChar(cx, cy, cdx) {
var c = {x: cx, y: cy, dx: cdx,
imageNum: 0,
stepFunction: stepChar,
drawFunction: drawChar
}
return c;
}
function stepChar() {
this.x += this.dx;
this.imageNum ++;
if (this.imageNum == walkImage2.length) {
this.imageNum = 0;
}
}
function drawChar() {
image(walkImage2[this.imageNum], this.x, this.y, 120, 180);
}
//constructor for falling goat
function makeFallDown2(fx, fy) {
var f = {x: fx, y: fy, imageNum: 0,
stepFunction: stepFallDown2,
drawFunction: drawFallDown2
}
return f;
}
function stepFallDown2() {
if(this.imageNum < fallImage2.length-1) {
this.imageNum ++;
}
}
function drawFallDown2() {
image(fallImage2[this.imageNum], this.x, this.y, 300, 200);
}
//set up sounds
function soundSetup() {
walk.setVolume(0.4);
ouch.setVolume(0.8);
bodyfall.setVolume(1.2);
nickhumming.setVolume(0.1);
}
//define a function to add the sounds
function addSounds() {
if(frameCount % 15 == 1) {
walk.play(); //walking footstep sounds very 15 frameCounts
}
if(frameCount == 99) {
ouch.play(); //judy makes "ouch" sound when being tripped
}
if(frameCount > 100){
walk.stop(); //stop walking footstep sounds when falling down
}
if(frameCount == 100) {
bodyfall.play(); //body falling sound of the goat after judy falls
}
if(frameCount == 108) {
nickhumming.play(); //nick humming after they both falls
noLoop(); //end the loop
}
}
function setup() {
createCanvas(700, 500);
frameRate(5);
useSound();
//store the characters info to the characters array
var judyX = width/4;
character.push(makeJudy(judyX, height-94, 0));
character.push(makeFallDown(judyX, height-112, 0));
var newCharX = width/3;
character.push(makeNewChar(newCharX, height-184, 0)); //walking goat before judy falls
var newChar2X = width/3;
character.push(makeNewChar(newChar2X, height-184, 10)); //goat after judy falls, continue walking
character.push(makeFallDown2(290, height-199, 10));
}
function draw() {
background(25);
//call the addSounds function to add sounds
addSounds();
//constrain the Xs of the images of street and clouds so that they stop rolling when Judy falls
//street and clouds rolling with different speed according to frameCount
var streetX = constrain(0-frameCount*10, -1000, 0);
var cloudsX = constrain(0-frameCount*5, -500, 0);
image(street, streetX, -70, 2000, 600);
image(clouds, cloudsX, -100, 2000, 600);
//update the steps and draw the characters
//constrain the X of nick so that it does not move when the street scene stops
var nickX = constrain(1175-frameCount*10, 175, 1000);
var judyX = width/4;
var newCharX = width/11;
//if judy (width/4) has not meet nick(nickX)
if (nickX > width/4) {
//draw the image of nick
image(nick, nickX, height-111, 80, 100);
character[2].stepFunction();
character[2].drawFunction(); //walking goat
character[0].stepFunction();
character[0].drawFunction(); //walking judy
}
//if judy (width/4) passes by nick(nickX)
if (judyX == nickX) {
character[1].stepFunction();
character[1].drawFunction(); //judy falls down
//the goat continue walking
if (character[3].x < 250) {
character[3].stepFunction();
character[3].drawFunction(); //walking goat
}
}
//if judy pushes the goat
if (character[3].x >= 250) {
character[4].stepFunction();
character[4].drawFunction(); //goat falls down
}
}