![[OLD FALL 2020] 15-104 • Introduction to Computing for Creative Practice](../../../../wp-content/uploads/2021/08/cropped-notcurrentsemester.jpg){kind=small}
![[OLD FALL 2020] 15-104 • Introduction to Computing for Creative Practice](../../../../wp-content/uploads/2021/09/stop-banner.png)
For this project, I reintroduce three characters from a cartoon TV show called We Bare Bears. With images I used online, I created a story of the three bears enjoying the company of each other. In the first scene, the Panda is alone and on his phone. Once Grizzly comes into the second scene, the music begins to play with birds chirping in the background. Then for the rest of the story, Ice (polar bear) also joins and has fun with the two other bears by taking selfies.
sketch – Copy
//Rachel Kim
//15-104(Section C)
//rachelki@andrew.cmu.edu
//Project 10
//NOTE
//when submitting to autolab use ideate links
//to test sounds on your own computer put in local server
//images
var grizzlyBearWave;
var grizzlyX1 = 600;
var grizzlyY1 = 200;
var polarBear;
var iceX1 = 600;
var iceY1 = 200;
var pandaBear;
var phonePanda;
var selfiePanda;
var tree;
var cloud;
var cloudX = 3.0;
var cloudX1 = 230;
var cloudY1 = 50;
var cloudX2 = 420;
var cloudY2 = 90;
var cloudX3 = 20;
var cloudY3 = 3;
var bird;
var birdX = 3.0;
var birdX1 = 200;
var birdY1 = 80;
//sounds
var morningTune;
//extra
var frameCount = 0;
var grizzlyWalking = true;
var iceGliding = true;
function preload() {
//images of characters
pandaBear = loadImage("https://i.imgur.com/QZ4Xc1z.png");
phonePanda = loadImage("https://i.imgur.com/6uzoWNj.png");
selfiePanda = loadImage("https://i.imgur.com/Nf2uQ1H.png");
grizzlyBearWave = loadImage("https://i.imgur.com/c7NYxSP.png");
posingGrizzly = loadImage("https://i.imgur.com/PEW3RSR.png");
iceBear = loadImage("https://i.imgur.com/tg3n57a.png");
glidingIce = loadImage("https://i.imgur.com/05dhxMV.png");
posingIce = loadImage("https://i.imgur.com/MCEiihm.png");
//images of extras
tree = loadImage("https://i.imgur.com/cRiGrz5.png");
cloud = loadImage("https://i.imgur.com/UjxNnu7.png");
bird = loadImage("https://i.imgur.com/me1Zdik.png");
//sounds in story for submission
morningTune = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/morningsong-1.wav");
//sounds in story for self testing --- localserver
//morningTune = loadSound("sounds/morningsong.wav");
}
function setup() {
createCanvas(600, 420);
useSound();
frameRate(10);
}
function soundSetup() {
morningTune.setVolume(0.5);
}
function draw() {
frameCount++;
switch (frameCount) {
case 61: morningTune.play(); break; //to start playing song when panda is no longer alone
}
//story frames
//partA
if (frameCount >= 0 & frameCount < 60) {
pandaOnPhone();
//movement of clouds
if (cloudX1 > width) {
cloudX1 = 0;
} else if (cloudX2 > width) {
cloudX2 = 0;
} else if (cloudX3 > width) {
cloudX3 = 0;
}
}
//partB
if (frameCount >= 60 & frameCount < 130) {
grizzlySaysHi();
//movement of clouds
if (cloudX1 > width) {
cloudX1 = 0;
} else if (cloudX2 > width) {
cloudX2 = 0;
} else if (cloudX3 > width) {
cloudX3 = 0;
}
//grizzly says hi
if (grizzlyWalking) {
grizzlyX1 -= 5;
} else if (grizzlyX1 <= width/2 + 50) {
grizzlyWalking = false;
}
}
//partC
if (frameCount >= 130 & frameCount < 180) {
selfieTimeA();
//movement of clouds
if (cloudX1 > width) {
cloudX1 = 0;
} else if (cloudX2 > width) {
cloudX2 = 0;
} else if (cloudX3 > width) {
cloudX3 = 0;
}
//movement of bird
if (birdX > width) {
birdX = 0;
}
}
//partD
if (frameCount >= 180 & frameCount < 240) {
iceBearStares();
//movement of clouds
if (cloudX1 > width) {
cloudX1 = 0;
} else if (cloudX2 > width) {
cloudX2 = 0;
} else if (cloudX3 > width) {
cloudX3 = 0;
}
//movement of bird
if (birdX > width) {
birdX = 0;
}
}
//partE
if (frameCount >= 240 & frameCount < 410) {
iceBearJoins();
//movement of clouds
if (cloudX1 > width) {
cloudX1 = 0;
} else if (cloudX2 > width) {
cloudX2 = 0;
} else if (cloudX3 > width) {
cloudX3 = 0;
}
//movement of bird
if (birdX > width) {
birdX = 0;
}
//ice bear joins by gliding
if (iceGliding) {
iceX1 -= 5;
} else if (iceX1 <= 200) {
iceGliding = false;
}
}
//partF
if (frameCount >= 410 & frameCount < 460) {
selfieTimeB();
//movement of clouds
if (cloudX1 > width) {
cloudX1 = 0;
} else if (cloudX2 > width) {
cloudX2 = 0;
} else if (cloudX3 > width) {
cloudX3 = 0;
}
//movement of bird
if (birdX > width) {
birdX = 0;
}
}
if (frameCount >= 460) {
background("black");
fill(255);
textSize(50);
textFont('Georgia');
text('The End', 300, 300);
}
}
//separate functions for each scene
//PART A
function pandaOnPhone() {
background(175, 206, 255);
sun();
grass();
clouds();
image(tree, 5, 5, 350, 350);
image(phonePanda, 150, 240, 150, 150);
}
//PART B
function grizzlySaysHi() {
background(175, 206, 255);
sun();
grass();
clouds();
image(tree, 5, 5, 350, 350);
image(pandaBear, 150, 200, 150, 230);
image(grizzlyBearWave, grizzlyX1, grizzlyY1, 150, 200);
}
//PART C
function selfieTimeA() {
background(175, 206, 255);
sun();
grass();
clouds();
birdie();
image(tree, 5, 5, 350, 350);
image(posingGrizzly, 120, 180, 200, 250);
image(selfiePanda, 250, 150, 200, 320);
}
//PART D
function iceBearStares() {
background(175, 206, 255);
sun();
grass();
clouds();
birdie();
image(tree, 5, 5, 350, 350);
image(posingGrizzly, 120, 180, 200, 250);
image(selfiePanda, 250, 150, 200, 320);
image(iceBear, 550, 200, 85, 130);
}
//PART E
function iceBearJoins() {
background(175, 206, 255);
sun();
grass();
clouds();
birdie();
image(tree, 5, 5, 350, 350);
image(glidingIce, iceX1, iceY1, 170, 150);
image(posingGrizzly, 120, 180, 200, 250);
image(selfiePanda, 250, 150, 200, 320);
}
//PART F
function selfieTimeB() {
background(175, 206, 255);
sun();
grass();
clouds();
birdie();
image(tree, 5, 5, 350, 350);
image(posingIce, 50, 200, 150, 200);
image(posingGrizzly, 120, 180, 200, 250);
image(selfiePanda, 250, 150, 200, 320);
}
//EXTRA --- "background"
function sun() { //yellow circle in partA
strokeWeight(1);
stroke(0);
fill(255, 242, 147);
circle(500, 70, 80);
}
function grass() { //green rectangle in partA
strokeWeight(1);
stroke(0);
fill(133, 182, 57);
rect(0, 250, 600, 170);
}
function clouds() { //clouds in partA
image(cloud, cloudX1, cloudY1, 150, 80);
image(cloud, cloudX2, cloudY2, 150, 80);
image(cloud, cloudX3, cloudY3, 150, 80);
cloudX1 += cloudX; //speed of clouds
cloudX2 += cloudX;
cloudX3 += cloudX;
}
function birdie() { //bird in partA
image(bird, birdX1, birdY1, 150, 150);
birdX1 += birdX; //speed of bird
}
