sonic story
// Rishi Karthikeyan
//rkarthik@andrew.cmu.edu
//Section B
//HW 10 Sonic Story
let elf;
var elfX = 350; var elfY = 225;
let santa;
var santaX = 115; var santaY = 225;
let santaWorkshop;
let santaAndReindeer;
var santaAndReindeerX = 160; var santaAndReindeerY = 250;
let santaOnChimney;
let kid;
var kidX = 100; var kidY = 275;
let tree;
let elfVoice;
let sleighBells;
let santaVoice;
let kidVoice;
var count = 0;
var centerX = 250;
var centerY = 200;
var dx = 30;
var dy = 5;
function preload() {
//load images
elf = loadImage('https://i.imgur.com/pu8ed6l.png');
santa = loadImage('https://i.imgur.com/5rgNTe1.png');
santaWorkshop =loadImage('https://i.imgur.com/bmjFtUd.png');
santaAndReindeer = loadImage('https://i.imgur.com/t86lPuw.png');
santaOnChimney = loadImage('https://i.imgur.com/NoL1xBz.png');
kid = loadImage('https://i.imgur.com/F06Ekzc.png');
tree = loadImage('https://i.imgur.com/qOOQlZt.png');
//load sounds
elfVoice = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/ElfVoice.wav");
sleighBells = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/SleighBells.wav");
santaVoice = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/SantaVoice.wav");
kidVoice = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/KidVoice.wav");
}
function setup() {
createCanvas(500, 400);
//createDiv("p5.dom.js library is loaded.");
useSound();
imageMode(CENTER);
frameRate(1);
}
function soundSetup() {
elfVoice.setVolume(0.5);
sleighBells.setVolume(0.5);
santaVoice.setVolume(0.5);
kidVoice.setVolume(0.5);
}
function draw() {
background(200);
count++;
switch (count) {
case 1: elfVoice.play(); break;
case 6: sleighBells.play(); break;
case 11: santaVoice.play(); break;
case 16: kidVoice.play(); break;
}
if (count >= 0 & count < 5) {
workshop();
dy = 10;
elfY -= dy;
if ( elfY <= 215) {
elfY +=20;
}
}
if (count >= 5 & count < 10) {
reindeer();
dy = 20;
santaAndReindeerX += dx;
santaAndReindeerY -= dy;
}
if (count >= 10 & count < 15) {
chimney();
centerY += dy;
}
if (count >= 15 & count < 20) {
home();
kidY -= 5;
if ( kidY <= 270) {
kidY +=10;
}
}
if (count >=20) {
end();
}
}
function workshop() {
nightSky();
//snow
fill(255);
rect(0, 215, width, 200);
image(santaWorkshop, centerX+80, centerY-30, 300, 100);
image(elf, elfX, elfY, 130, 130);
image(santa, santaX, santaY, 206, 200);
}
function reindeer() {
nightSky();
//moon
noStroke();
fill(208);
circle(centerX, centerY-30, 200);
//mountains
fill(20, 28, 38);
beginShape();
vertex(0, height);
vertex(0, 270);
vertex(105, 225);
vertex(205, 300);
vertex(290, 250);
vertex(350, 280);
vertex(450, 205);
vertex(width, 225);
vertex(width, height);
endShape(CLOSE);
image(santaAndReindeer, santaAndReindeerX, santaAndReindeerY, 270, 225);
}
function chimney() {
nightSky();
//roof
image(santaOnChimney, centerX, centerY, 230, 230);
noStroke();
fill(195, 70, 55);
rect(0, 315, width, 85);
}
function home() {
nightSky();
//wall
noStroke();
fill(224, 193, 173);
rect(0, 0, width, 50);
rect(0, 0, 50, height);
rect(250, 0, 250, height);
rect(0, 150, width, 200);
//floor
fill(225, 221, 207);
rect(0, 300, width, 100);
//window
strokeWeight(5);
stroke(255);
noFill();
rect(50, 50, 100, 100);
rect(150, 50, 100, 100);
strokeWeight(2);
line(50, 100, 250, 100);
line(100, 50, 100, 150);
line(200, 50, 200, 150);
image(kid, kidX, kidY, 150, 125);
image(tree, 340, 220, 300, 300);
}
function end() {
nightSky();
noStroke();
fill(255);
textSize(50);
text('The End', 185, 250);
}
function nightSky() {
//night sky
background(6, 20, 34);
//stars
stroke(255);
for (var i = 0; i < 1000; i++) {
point(random(0,width), random(-0, height));
}
}
Four Sounds (1) elf singing (2) sleigh bells (3) Santa talking (4) kid celebrating
I wanted to make something Christmas related. This story shows Santa delivering presents. This project was a lot of fun to create and helped me better understand how to code with images and sound.