I made a simple story about a girl (me) who goes on a walk to the park. During her time there as she walks by, she sees tom and jerry start chasing each other all over the park and she starts laughing. The background d elements and all elements other than tom and jerry were done on illustrator and imported to imgur. My 4 characters are the cloud making the wind sound, the tom making the meow sound, the girl laughing, and the bird chirping.
sketch
var bgPhoto
var cloudX = 0;
var birdImage = [];
var birdX = 500;
var birditem = 0;
var birdwidth = 80
var srishtyImage;
var srishtyx =500;
var cloudImage;
var cloudx = 300
var tomandjerry = [];
var tomandjerryx = 70;
var tomandjerryitem = 0;
var tjdy = 1
var tjdx = 1
var count = 0;
function preload() {
bgPhoto = loadImage("https://i.imgur.com/75aDbMe.png");
birdImage[0] = loadImage("https://i.imgur.com/o1P0pBO.png"); birdImage[1] = loadImage("https://i.imgur.com/48woLcm.png"); srishtyImage = loadImage("https://i.imgur.com/b5N2LzO.png"); cloudImage = loadImage("https://i.imgur.com/xG8RjYF.png"); tomandjerry[0] =loadImage("https://i.imgur.com/8nNCYkE.png");
tomandjerry[1] =loadImage("https://i.imgur.com/cDSNU65.png");
tomandjerry[2] =loadImage("https://i.imgur.com/LcYpbag.png");
tomandjerry[3] =loadImage("https://i.imgur.com/wYhvMJo.png");
wind = loadSound("https://courses.ideate.cmu.edu/15-104/f2022/wp-content/uploads/2022/11/wind.wav");
meow = loadSound("https://courses.ideate.cmu.edu/15-104/f2022/wp-content/uploads/2022/11/meow.wav");
laugh = loadSound("https://courses.ideate.cmu.edu/15-104/f2022/wp-content/uploads/2022/11/laugh.wav");
chirp = loadSound("https://courses.ideate.cmu.edu/15-104/f2022/wp-content/uploads/2022/11/chirp.wav");
}
function soundSetup(){
wind.setVolume(.1);
meow.setVolume(2);
chirp.setVolume(.1);
laugh.setVolume(2);
}
function setup() {
createCanvas(400, 400);
imageMode(CENTER);
useSound();
}
function draw() {
count++; image(bgPhoto, width/2, height/2, width, height);
wind.play();
chirp.play();
drawCloud();
drawbird();
drawTandJ()
drawSrishty();
if (count == 450 || count == 750) {
meow.play();
}
if (count == 500 || count ==800) {
laugh.play();
}
}
function drawbird() {
image(birdImage[birditem], birdX, 104, birdwidth,30);
if (count % 2 === 0 ) { birditem = 1;
birdwidth = 100
birdX -= .5; }
if (count % 2 === 1 ) { birditem = 0;
birdwidth = 80;
birdX -= .5; }
}
function drawSrishty() {
var heightcount = .5
if (count >= 30) {
if (count % 2 === 0 ) { image(srishtyImage, srishtyx - heightcount, 325, 66.2218, 205.4745);
srishtyx -= .3;
}
if (count % 2 === 1 ) { image(srishtyImage, srishtyx, 325 + heightcount, 66.2218, 205.4745);
srishtyx -= .3;
}
}
}
function drawCloud() { image(cloudImage, cloudx, 69, 130.2123 , 46.6313 );
cloudx -= 0.09;}
function drawTandJ() {
if (count >= 0 & count <= 400 ) {
image(tomandjerry[tomandjerryitem], tomandjerryx, 300, 216.9349, 162.7012);
tomandjerryitem = 0
}
if (count >= 400 & count <= 500) {
image(tomandjerry[tomandjerryitem], (tomandjerryx + 100) + tjdx, 300, 216.9349, 162.7012);
tomandjerryitem = 1
tjdx += .5
}
if (count >= 500 & count <= 750) {
image(tomandjerry[tomandjerryitem], (tomandjerryx + 300) -tjdx, 400 - tjdy, 220, 120.7012);
tomandjerryitem = 2
tjdy += .5;
tjdx += .5
}
if (count >= 750 & count <= 2000 ) {
image(tomandjerry[tomandjerryitem], (tomandjerryx + 200)-tjdx, 400 - tjdy, 216.9349/2, 162.7012/2);
tomandjerryitem = 3
tjdy += .5;
tjdx += 2;
}
}