![[OLD SEMESTER] 15-104 • Introduction to Computing for Creative Practice](https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2023/09/stop-banner.png)
//Yanina Shavialenka
//Section B
var walkImage = []; // an array to store the images
var flying = []; //bird flying array images
var characters = [];
var birds = [];
var bg; //background image
var lightning; //lighting picture
var thunder; //thunder sound
var amb; //ambient sound
var chirp; //bird sound
function preload(){
// These URLs are for the individual walk cycle images
var filenames = [];
filenames[0] = "https://i.imgur.com/14ifmej.png";
filenames[1] = "https://i.imgur.com/r9GhjWn.png";
filenames[2] = "https://i.imgur.com/A0L2KVp.png";
filenames[3] = "https://i.imgur.com/JFE5CBm.png";
filenames[4] = "https://i.imgur.com/14ifmej.png";
filenames[5] = "https://i.imgur.com/r9GhjWn.png";
filenames[6] = "https://i.imgur.com/A0L2KVp.png";
filenames[7] = "https://i.imgur.com/JFE5CBm.png";
filenames[8] = "https://i.imgur.com/14ifmej.png";
filenames[9] = "https://i.imgur.com/r9GhjWn.png";
filenames[10] = "https://i.imgur.com/A0L2KVp.png";
filenames[11] = "https://i.imgur.com/JFE5CBm.png";
// These URLs are for the individual bird cycle images
var file = [];
file[0] = "https://i.imgur.com/82McfxQ.png";
file[1] = "https://i.imgur.com/OMNJ7z2.png";
file[2] = "https://i.imgur.com/ZP2mduv.png";
file[3] = "https://i.imgur.com/2ly1P4T.png";
file[4] = "https://i.imgur.com/5VNmIMy.png";
file[5] = "https://i.imgur.com/KjJmaEd.png";
file[6] = "https://i.imgur.com/036LD8g.png";
file[7] = "https://i.imgur.com/OPD7VfW.png";
file[8] = "https://i.imgur.com/Rt8p00H.png";
// These for loops change the images to create a walking and flying effect
for (var i = 0; i < filenames.length; i++) {
walkImage[i] = loadImage(filenames[i]);
}
for (var i = 0; i < file.length; i++) {
flying[i] = loadImage(file[i]);
}
//loads the images and sounds
bg = loadImage("https://i.imgur.com/nqIhKWP.png");
lightning = loadImage("https://i.imgur.com/6kvwrHw.gif");
lightning.resize(150,0);
thunder = loadSound("http://localhost:8000/thunder.wav");
amb = loadSound("http://localhost:8000/amb.wav");
chirp = loadSound("http://localhost:8000/bird.wav");
}
// Constructor for each walking character
function makeCharacter(cx, cy, cdx, cdy) {
var c = { x: cx, y: cy, dx: cdx, dy: cdy,
imageNum: 0,
stepFunction: stepCharacter,
drawFunction: drawCharacter
}
return c;
}
// Constructor for each blying bird
function makeBird(cx, cy, cdx, cdy) {
var c = { x: cx, y: cy, dx: cdx, dy: cdy,
imageNum: 0,
stepFun: stepBird,
drawFun: drawBird
}
return c;
}
function stepCharacter() {
this.imageNum++;
if(this.imageNum >= walkImage.length) {
this.imageNum = 0;
}
this.x += this.dx;
}
function stepBird() {
this.imageNum++;
if(this.imageNum >= flying.length) {
this.imageNum = 0;
}
this.x += this.dx;
}
//This function draws the corresponding image
function drawCharacter() {
image(walkImage[this.imageNum],this.x,this.y);
}
function drawBird() {
image(flying[this.imageNum],this.x,this.y);
}
//This function creates the canvas and makes the character
function setup() {
createCanvas(612,408);
frameRate(15);
for (var i = 0; i < walkImage.length; i++) {
walkImage[i].resize(150,0);
}
for (var i = 0; i < flying.length; i++) {
flying[i].resize(50,0);
}
characters.push(makeCharacter(0,125,1,0));
birds.push(makeBird(0,50,3,0));
useSound(0);
}
function soundSetup() {
thunder.setVolume(0.5);
amb.setVolume(0.2);
chirp.setVolume(0.1);
}
function draw() {
background(bg);
if(frameCount >= 100) {
image(lightning,425,-10);
image(lightning,-20,-10);
thunder.play();
tint(100);
characters[0].stepFunction();
characters[0].drawFunction();
birds[0].stepFun();
birds[0].drawFun();
characters[0].dx = 4;
birds[0].dx = 6;
}
else {
characters[0].stepFunction();
characters[0].drawFunction();
birds[0].stepFun();
birds[0].drawFun();
amb.play();
chirp.play();
}
}For me, this assignment was really challenging considering the fact that we did not spend a lot of time on the sound topic so I was really struggling and tried to come up with something interesting and easy at the same time. In my code I made a girl walk and a bird fly: I used a sound effect to represent the chirping of a bird and sounds of an outside world. Then, the lightning strikes and the thunder sound comes off with dark background.
I could not upload the file properly here because the thunder sound is more than WordPress accepts and thus the file was not able to get loaded onto here.