SpongeBob SquarePants
sketch
//Xinyi Du
//15104 Section B
//xinyidu@andrew.cmu.edu
//Project-11
//SpongBob walking gif source:
//https://www.deviantart.com/supermariospongebob/art/SB-Walkin-into-Monday-858782150
//SB Walkin' into Monday
//by supermariospongebob
//arrays for background flowers
var filenamesF = [];
var bgflowers = [];
var backgroundF = [];
//arrays for the character
var filenames = [];
var walkImage = [];
var character = [];
var buildings = [];
var leaves = [];
var flags = [];
function preload() {
//load SpongeBob walk cycle images
filenames[0] = "https://i.imgur.com/ulD5SOy.png";
filenames[1] = "https://i.imgur.com/0cFmmhf.png";
filenames[2] = "https://i.imgur.com/wmSWQHb.png";
filenames[3] = "https://i.imgur.com/iYYLnPL.png";
filenames[4] = "https://i.imgur.com/kFzcZXr.png";
filenames[5] = "https://i.imgur.com/Ej0nUgn.png";
filenames[6] = "https://i.imgur.com/wfR57hy.png";
filenames[7] = "https://i.imgur.com/4TadbPD.png";
filenames[8] = "https://i.imgur.com/BjVfWWi.png";
filenames[9] = "https://i.imgur.com/vLUiotP.png";
filenames[10] = "https://i.imgur.com/oA49LHr.png";
filenames[11] = "https://i.imgur.com/A9TMzpP.png";
filenames[12] = "https://i.imgur.com/NAPIs2c.png";
for (var i = 0; i < filenames.length; i++) {
walkImage[i] = loadImage(filenames[i]);
}
//load background flower images
filenamesF[0] = "https://i.imgur.com/ZNmnfMU.png";
filenamesF[1] = "https://i.imgur.com/o1z2jrZ.png";
filenamesF[2] = "https://i.imgur.com/U4OwJMt.png";
filenamesF[3] = "https://i.imgur.com/iACszh9.png";
filenamesF[4] = "https://i.imgur.com/4eTqZLb.png";
for (var i = 0; i < filenamesF.length; i++) {
bgflowers[i] = loadImage(filenamesF[i]);
}
leaves.push(loadImage("https://i.imgur.com/8NFDDnM.png"));
leaves.push(loadImage("https://i.imgur.com/CberjzQ.png"));
flags.push(loadImage("https://i.imgur.com/2kTH6D6.png"));
}
//make SpongeBob
function makeSpongeBob(sx, sy) {
var s = {x: sx, y: sy,
imageNum: 0,
drawFunction: drawSpongeBob
}
return s;
}
function drawSpongeBob() {
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;
}
image(walkImage[this.imageNum], this.x, this.y, 130, 140); //draw the image
}
function setup() {
createCanvas(480, 400);
frameRate(9);
//store SpongBob andCoral images to the array character
character.push(makeSpongeBob(180, 220));
character.push(makeCoral(0));
//store background flower images to the array makeBackground
backgroundF.push(makeBackground(20, 50, 0));
backgroundF.push(makeBackground(180, 30, 1));
backgroundF.push(makeBackground(460, 30, 2));
backgroundF.push(makeBackground(120, 180, 3));
backgroundF.push(makeBackground(300, 180, 4));
backgroundF.push(makeBackground(550, 100, 0));
backgroundF.push(makeBackground(650, 30, 3));
//store 4 types of buildings to the array buildings
buildings.push(makeBuilding1(0));
buildings.push(makeBuilding1(360));
buildings.push(makeBuilding2(130));
buildings.push(makeBuilding3(270));
buildings.push(makeBuilding4(560));
}
function draw() {
background(87,157,231);
//draw background flowers
for (i = 0; i < backgroundF.length; i++) {
backgroundF[i].update();
backgroundF[i].display();
}
//draw the grounds and horizon lines
fill(235,233,218);
noStroke();
rect(0, height*2/3, width, height/3);
fill(80);
rect(0, height*3/4, width, height/4);
stroke(0);
strokeWeight(0.7);
line(0, height*3/4, width, height*3/4);
line(0, height*2/3, width, height*2/3)
//draw the buildings
for (i = 0; i < 5; i ++) {
buildings[i].update();
buildings[i].drawFunction();
}
character[0].drawFunction(); //draw SpongBob
character[1].drawFunction(); //draw corals
}
//make background flowers
function makeBackground(bgx, bgy, idx) {
var bg = {x: bgx, y: bgy, index: idx, speed: -3,
size: random(100, 180), //random starting size
dsize: random(-6,6), //random decrease or increase size every update
update: bgFlowerUpdate,
display: bgFlowerDisplay
}
return bg;
}
function bgFlowerUpdate() {
this.x += this.speed; //move to the left with speed -3
this.size += this.dsize; //increase or decrease size by dsize
if (this.x < -width/2) { //if out of the canvas
this.x = width; //start from the right side again
this.size = random(80, 100); //start with random size
this.size += this.dsize;
}
if (this.size >= 200 || this.size <= 30) { //if size reaches the limit 30 or 200
this.dsize = -this.dsize; //inverse the size change direction
}
}
function bgFlowerDisplay() {
image(bgflowers[this.index], this.x, this.y, this.size, this.size);
}
//Squidward Tentacles' house
function makeBuilding1(bx) { //startX is the starting X of the building
var bg = {startX: bx, speed: -6,
r: random(40, 150), g: random(70, 200), b: random(200, 255), //random color in cool tone
update: updateBuilding1,
drawFunction: drawBuilding1
}
return bg;
}
function drawBuilding1() {
//structure
var x1 = 100; var y1 = 140;
var x2 = 150;
var x3 = 165; var y2 = 285;
var x4 = 85;
fill(this.r+20, this.g+20, this.b+20);
rect(this.startX+80, 180, 90, 45);
fill(this.r, this.g, this.b);
quad(this.startX+x1, y1, this.startX+x2, y1, this.startX+x3, y2, this.startX+x4, y2);
fill(this.r-20, this.g-20, this.b-20);
rect(this.startX+103, 169, 44, 11);
quad(this.startX+120, 180, this.startX+130, 180, this.startX+138, 235, this.startX+112, 235);
//windows
fill(171,174,191);
ellipse(this.startX+109, 190, 19, 20);
ellipse(this.startX+141, 190, 19, 20);
if (frameCount % 5 == 0) { //blink every 5 frames
fill(21,144,177);
} else {
fill(255, 250, 112);
}
ellipse(this.startX+109, 190, 0.6*19, 0.6*20);
ellipse(this.startX+141, 190, 0.6*19, 0.6*20);
//door
fill(132, 114, 85);
arc(this.startX+125, 255, 26, 26, PI, PI*2, OPEN);
noStroke();
rect(this.startX+125-13, 255, 26, 30);
stroke(0);
line(this.startX+125-13, 255, this.startX+125-13, 255+30);
line(this.startX+125+13, 255, this.startX+125+13, 255+30);
line(this.startX+125-13, 255+30, this.startX+125+13, 255+30);
}
function updateBuilding1() {
this.startX += this.speed;
if (this.startX < -width/3) { //if out of the canvas
this.startX = width; //start from the right side again
}
}
//SpongeBob's house
function makeBuilding2(bx) {
var bg = {startX: bx, speed: -6,
r: random(240,255), g: random(140,210), b: random(10,45), //random orange/yellow
update: updateBuilding2,
drawFunction: drawBuilding2
}
return bg;
}
function drawBuilding2() {
fill(46, 144, 11);
image(leaves[0], this.startX+16, 76, 200, 230); //draw leaves
//pineapple structure
fill(this.r, this.g, this.b);
arc(this.startX+125, 245.5, 100, 130, PI*3/4, PI*9/4, CHORD);
//windows
fill(171,174,191);
ellipse(this.startX+109, 210, 19, 20);
ellipse(this.startX+155, 265, 19, 20);
if (frameCount % 8 == 0) { //blinks every 8 frames
fill(255, 250, 112);
} else {
fill(21,144,177);
}
ellipse(this.startX+109, 210, 0.6*19, 0.6*20);
ellipse(this.startX+155, 265, 0.6*19, 0.6*20);
//door
fill(171,174,191);
strokeWeight(0.5);
arc(this.startX+125, 260, 26, 26, PI, PI*2, OPEN);
noStroke();
rect(this.startX+125-13, 260, 26, 25);
stroke(0);
strokeWeight(0.5);
line(this.startX+125-13, 260, this.startX+125-13, 260+25);
line(this.startX+125+13, 260, this.startX+125+13, 260+25);
line(this.startX+125-13, 260+25, this.startX+125+13, 260+25);
fill(76,89,121);
arc(this.startX+125, 260, 18, 18, PI, PI*2, OPEN);
noStroke();
rect(this.startX+125-9, 260, 18, 25);
stroke(0);
strokeWeight(0.5);
line(this.startX+125-9, 260, this.startX+125-9, 260+25);
line(this.startX+125+9, 260, this.startX+125+9, 260+25);
line(this.startX+125-9, 260+25, this.startX+125+9, 260+25);
}
function updateBuilding2() {
this.startX += this.speed;
if (this.startX < -width/3) {
this.startX = width;
}
}
//Patrick Star's house
function makeBuilding3(bx) {
var bg = {startX: bx, speed: -6,
r: random(150,255), g: 80, b: 80, //random shades of red
update: updateBuilding3,
drawFunction: drawBuilding3
}
return bg;
}
function drawBuilding3() {
//decoration
strokeWeight(0.3)
fill(248,228,156);
rect(this.startX+125-1.5, 248, 3, 30);
rect(this.startX+125-8, 245, 16, 3);
//structure
strokeWeight(0.6);
fill(this.r, this.g, this.b);
arc(this.startX+125, 285, 60, 60, PI, PI*2, CHORD);
}
function updateBuilding3() {
this.startX += this.speed;
if (this.startX < -width/2) {
this.startX = width;
}
}
//Krusty Krab Restaurant
function makeBuilding4(bx) {
var bg = {startX: bx, speed: -6,
update: updateBuilding4,
drawFunction: drawBuilding4
}
return bg;
}
function drawBuilding4() {
fill(115,95,42);
rect(this.startX, 222, 105, 63);
//glass windows and door
fill(109,165,244);
rect(this.startX, 252, 105, 33);
//wooden structures
fill(115,95,42);
rect(this.startX, 215, 12, 70);
rect(this.startX+105, 215, 12, 70);
fill(94,74,29);
line(this.startX-5+63, 252, this.startX-5+63, 285)
rect(this.startX-5, 273, 40, 12);
rect(this.startX+80, 273, 41, 12);
rect(this.startX-5+40, 252, 40, 5);
rect(this.startX-5+40, 252, 10, 33);
rect(this.startX+71, 252, 11, 33);
//load flags
image(flags[0], this.startX+11.5, 232, 94, 20);
}
function updateBuilding4() {
this.startX += this.speed;
if (this.startX < -width/3) {
this.startX = width;
}
}
//corals
function makeCoral(cx) {
var s = {startX: cx, speed: -10,
drawFunction: drawCoral
}
return s;
}
function drawCoral() {
image(leaves[1], this.startX+100, 320, 60, 120); //smaller coral
image(leaves[1], this.startX+200, 280, 100, 200); //bigger coral
this.startX += this.speed;
if (this.startX < -width) {
this.startX = width*1.2;
}
}