Category: Project-10-Sonic-Story

Project 10 Sonic Story

My process for this project was too make a nature story, I started with a buzzing bee that flies through the screen, a chirping bird that gets sad from not finding any friends, a sun that gives off an angelic sound, and a rising moon that brings out nighttime bugs.

beeDownload
birdsoundDownload
25.7.16Download
sunsoundDownload
sketch
var bee={x:0,y:100,h:20,w:40,dx:83,r:255,g:255,b:0};
var tree={x:75,y:150,w:25,h:250,lw:155,lh:75,r:210,g:105,b:30,gg:255,z:0};
var robin={x:-5,y:-5,dx:15,dy:28,c:255,z:0,r:212,g:124,b:47,
  rr:48,gg:46,bb:59,r3:105,g3:107,b3:102};
var sun={x:-50,y:200,w:100,dx:50,dy:-28,c:255,z:0}
var moon={x:450,y:200,w:100,dx:-50,dy:-28,c:0,r:203,g:234,b:246,
  c1:20,c2:20,c3:25,c4:40}
    //objects
function setup() {
    createCanvas(400, 400);
    useSound();
    frameRate(1);
}

function preload(){   //preloading the sounds
	buzz=loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/bee-3.wav");
  chirp=loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/birdsound-1.wav");
  ahh=loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/sunsound-1.wav");
  moonsounds=loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/nightsounds-1.wav");
}

function soundSetup(){    //setting up sounds
  buzz.setVolume(0.25);
  chirp.setVolume(0.75);
  ahh.setVolume(0.8);
  moonsounds.setVolume(0.8);
}

function draw() {
  background(0,155,255);
  if(frameCount>23){    //have the sun rise
    movingsun();
  }
  if(frameCount>23 & frameCount<30){    //story
    text('The sun comes up',250,250);
  }
  if(frameCount==28){   //sun stops
    sun.dx=0;
    sun.dy=0;
  }
  if(frameCount==30){   //sounds plays
    ahh.play();
  }
  if(frameCount>=30 & frameCount<=34){    //story
    text('And shines its light',250,250);
  }
  if(frameCount>34 & frameCount<=38){   //sun sets and story
    sun.dx=50;
    sun.dy=28;
    sun.x+=sun.dx;
    sun.y+=sun.dy;
    text('And then sets',250,250);
  }
  if(frameCount>=39){   //it becomes night time
    background(0);
    movingmoon();
  }
  if(frameCount>=39 & frameCount<43){   //story
    text('The moon rises',250,250);
  }
  if(frameCount>=43 & frameCount<50){   //moon stops and story
    moon.dx=0;
    moon.dy=0;
    moonsounds.play();    //sound plays
    text('And the creatures come out',250,250);
  }
  if(frameCount>50 & frameCount<55){    //moon sets, sound stops and story
    moon.dx=-50;
    moon.dy=28;
    moon.x+=moon.dx;
    moon.y+=moon.dy;
    moonsounds.stop();
    text('The moon then sets',250,250);
  }
  if(frameCount>=55){   //story ends
    text('Goodnight!',250,250);
  }
  bark();   //call tree
  flyingbee();    //call bee
  bird();   //call bird
  print(frameCount);
  if(frameCount>0 & frameCount<=3.1){   //play bee sound
    buzz.play();
  }
  if(frameCount<=8.1){    //story
    text('The bee flew by the tree',250,250);
  }
  if(frameCount>=8){    //brid lands on tree
    robin.dx=0;
    robin.dy=0;
  }
  if(frameCount>9 & frameCount<13){   //bird song
    chirp.play();
  }
  if(frameCount>9 & frameCount<18){   //story
    text('The bird calls for a friend',250,250);
  }
  if(frameCount>18 & frameCount<23){    //bird flies away and story
    robin.dx=15;
    robin.dy=-28;
    robin.x+=robin.dx;
    robin.y+=robin.dy;
    text('He gets sad and leaves',250,250);
  }
}

function flyingbee(){   //bee helper function
  fill(bee.r,bee.g,bee.b);
  ellipse(bee.x,bee.y,bee.w,bee.h);
  stroke(0);
  push();
  strokeWeight(5);
  line(bee.x-5,bee.y-7,bee.x-5,bee.y+7);
  line(bee.x+5,bee.y-7,bee.x+5,bee.y+7);
  pop();
  bee.x+=bee.dx;
}

function bark(){    //tree helper function
  fill(tree.r,tree.g,tree.b);
  rect(tree.x,tree.y,tree.w,tree.h);
  fill(tree.z,tree.gg,tree.z);
  ellipse(tree.x+tree.w/2,tree.y,tree.lw,tree.lh);
}
function bird(){    //bird helper function
  fill(robin.r,robin.g,robin.b);
  circle(robin.x,robin.y,50);
  fill(robin.rr,robin.gg,robin.bb);
  circle(robin.x+25,robin.y-13,25);
  fill(robin.r3,robin.g3,robin.b3);
  triangle(robin.x-35,robin.y-5,robin.x+5,
    robin.y-5,robin.x-25,robin.y+25);
  fill(robin.c,robin.c,robin.z);
  triangle(robin.x+25,robin.y-13,robin.x+30,
    robin.y-13,robin.x+25,robin.y-8);
  robin.x+=robin.dx;
  robin.y+=robin.dy;
}
function movingsun(){   //sun helper function
  fill(sun.c,sun.c,sun.z);
  circle(sun.x,sun.y,sun.w);
  sun.x+=sun.dx;
  sun.y+=sun.dy;
}
function movingmoon(){    //moon helper function
  push();
  fill(moon.r,moon.g,moon.b);    //moon
  circle(moon.x,moon.y,moon.w);
  fill(moon.c);
  circle(moon.x-5,moon.y-5,moon.c1);   //moon craters
  circle(moon.x-30,moon.y+7,moon.c2);
  circle(moon.x+25,moon.y+25,moon.c3);
  circle(moon.x-4,moon.y-20,moon.c4);
  moon.x+=moon.dx;
  moon.y+=moon.dy;
  pop();
}

Project 10 – Sound Story

sketchDownload
// Storyline: 4 fruits (an orange, a banana, a red apple, and a green apple)
    // are inside a fruitbowl together and the fruit keep disappearing!!
    // I'm still having trouble with setting up a local server
    // Right now these sounds are attached to the web server chrome method
    // But it doesn't seem to be working and I don't know why
var x; //x position of the fruits
var y; //y position of the fruits
var dx = 4 //starting speed the fruits fly away at for x
var dy = 4 //starting speed the fruits fly away at for y
var orangeScream;
var bananaScream;
var redAppleScream;
var greenAppleScream;

function preload() {
    orangeScream = loadSound ("http://127.0.0.1:8887/orangeScream.wav");
    bananaScream = loadSound ("http://127.0.0.1:8887/bananaScream.wav");
    redAppleScream = loadSound ("http://127.0.0.1:8887/redAppleScream.wav");
    greenAppleScream = loadSound ("http://127.0.0.1:8887/greenAppleScream.wav");
}


function setup() {
    createCanvas(500, 300);
    frameRate(1);
    useSound();
}


function soundSetup() { 
    orangeScream.setVolume(0.25);
    bananaScream.setVolume(0.25);
    redAppleScream.setVolume(0.25);
    greenAppleScream.setVolume(0.25);
}

function orange(x, y) {
    fill(255, 137, 0);
    noStroke();
    circle(x, y, 50);
}

function banana(x, y) {
    fill(255, 255, 0);
    noStroke();
    beginShape();
    curveVertex(x, y);
    curveVertex(x, y);
    curveVertex(x + 20, y + 45);
    curveVertex(x - 30, y + 80);
    curveVertex(x - 5, y + 45);
    curveVertex(x, y);
    curveVertex(x, y);
    endShape(CLOSE);
}

function apple(x, y) {
    noStroke();
    beginShape();
    curveVertex(x, y);
    curveVertex(x, y);
    curveVertex(x + 15, y - 10);
    curveVertex(x + 25, y);
    curveVertex(x + 20, y + 40);
    curveVertex(x, y + 30);
    curveVertex(x - 20, y + 40);
    curveVertex(x - 25, y);
    curveVertex(x - 15, y - 10);
    curveVertex(x, y);
    curveVertex(x, y);
    endShape(CLOSE);
}


function draw() {
    background(0, 0, 255);
    fill(205, 0, 255);
    noStroke();
    arc(250, 150, 300, 300, TWO_PI, PI, CHORD);
    //when a fruit disappears, it screams
    print(frameCount);
    if (frameCount <= 8) {
        orangeScream.play();
        orange(140 - dx, 140 - dy);
    } else if (frameCount <= 16) {
        bananaScream.play();
        banana(200 - dx, 90 - dy);
    } else if (frameCount <= 24) {
        redAppleScream.play();
        fill(255, 0, 0);
        apple(270 + dx, 120 - dy);
    } else {
        greenAppleScream.play();
        fill(0, 255, 0);
        apple(340 + dx, 120 - dy);
    }
    dx *= 2;
    dy *= 2;
}

Project 10: Sonic Story

sketch
/*
Bon Bhakdibhumi
bbhakdib
Section D
*/
var nightBarn;
var chicken;
var sun;
var moon;
var crowing;
var morningSound;
var wakingUp;
var switchSound;
var chickenSleeping;
var nightSound;
var snoring;
var angle = 100;
var frameCounter = 0;
var rotationCounter = 0;
function preload () {
    dayBarn = loadImage("https://i.imgur.com/aGadSXz.png");
    nightBarn = loadImage("https://i.imgur.com/6cfic4A.png");
    chicken = [loadImage("https://i.imgur.com/4ZuBHL3.png"), 
                loadImage("https://i.imgur.com/YVhA3Pg.png")];
    sun = loadImage("https://i.imgur.com/64xX4qN.png");
    moon = loadImage("https://i.imgur.com/O8y3IzI.png");
    crowing = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/435507__benjaminnelan__rooster-crow-2.wav");
    morningSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/530265__dominictreis__morning-transition-music.wav");
    wakingUp = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/401338__ckvoiceover__yawning.wav");
    switchSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/414438__inspectorj__light-pulley-switch-on-c.wav");
    chickenSleeping = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/233093__jarredgibb__chicken-buck-96khz.wav");
    nightSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/200167__ebonny__cicadas.wav");
    snoring = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/409015__marisca16__old-man-snoring.wav");
}

function setup() {
    createCanvas(400, 400);
    frameRate(15);
    useSound();
}

function soundSetup() {
        morningSound.setVolume(0.1);
        crowing.setVolume(0.5);
        wakingUp.setVolume(0.3);
        switchSound.setVolume(0.9);
        chickenSleeping.setVolume(0.5);
        nightSound.setVolume(0.9);
}

function draw() {
    imageMode(CENTER);
// draw daytime
    if (rotationCounter % 2 == 0) {
        background(145, 203, 229);
        push();
        translate(215, 225);
        rotate(radians(angle));
        image(sun, 80, 200, 400, 400);
        pop();
        image(dayBarn, 200, 200, 400, 400);
        image(chicken[0], 80, 240, 200, 200);
    } else {
// draw nighttime
        background(51, 60, 99);
        push();
        translate(215, 225);
        rotate(radians(angle));
        image(moon, 80, 200, 400, 400);
        pop();
        image(nightBarn, 200, 200, 400, 400);
        image(chicken[1], 80, 240, 200, 200);
    }
    if (angle == 275) {
// reset sun or moon rotation
        angle = 110;
        rotationCounter ++;
    }
    angle ++;
//morning sounds
    if (angle == 125 & rotationCounter % 2 == 0) {
        crowing.play();
    }
   if (angle == 145 & rotationCounter % 2 == 0) {
        morningSound.play();
    }
    if (angle == 170 & rotationCounter % 2 == 0) {
        wakingUp.play();
    }
//night sounds
    if (angle == 115 & rotationCounter % 2 == 1) {
        nightSound.play();
    }
    if (angle == 115 & rotationCounter % 2 == 1) {
        switchSound.play();
    }
    if (angle == 120 & rotationCounter % 2 == 1 || angle == 150 && rotationCounter % 2 == 1) {
        chickenSleeping.play();
    }
    if (angle == 122 & rotationCounter % 2 == 1) {
        snoring.play();
    }
}

For this project I decide to make a story that illustrates the day at a barn.

Project 10: BOOOOOO

sketch
//A ghost is floating around, waiting to catch a unknowing passerby by surprise! Wait a bit and BOO!!!! The ghost has caught you ;)
var ghost1;
var ghost2;
var ghost3;
var ghost4;
var ghost5;
var ghost6;
var ghost7;
var ghost8;
var ghost9;
var ghost10;
var ghost11;
var ghost12;
var laughnoise;
var windsound;

function preload() {
    ghost1 = loadImage('https://i.imgur.com/X4dZ0hI.jpg' );
    ghost2 = loadImage('https://i.imgur.com/oEPEO2h.jpg' );
    ghost3 = loadImage('https://i.imgur.com/YdezjuH.jpg' );
    ghost4 = loadImage('https://i.imgur.com/ql1EG2S.jpg' );
    ghost5 = loadImage('https://i.imgur.com/XwlxdCa.jpg' );
    ghost6 = loadImage('https://i.imgur.com/fBUZvTM.jpg' );
    ghost7 = loadImage('https://i.imgur.com/kdNl0ob.jpg');
    ghost8 = loadImage('https://i.imgur.com/ZIooGoA.jpg' );
    ghost9 = loadImage('https://i.imgur.com/c0UNjMv.jpg' );
    ghost10 = loadImage('https://i.imgur.com/IucRj0z.jpg' );
    ghost11 = loadImage('https://i.imgur.com/zmzgLi5.jpg' );
    ghost12 = loadImage('https://i.imgur.com/ZeqmZnM.jpg' );
    laughnoise = loadSound('https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/laughnoise-1.wav');
    windsound = loadSound('https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/spookywind-1.wav');

}

function setup(){
    createCanvas(600, 600);
    frameRate(2);
    useSound();
}

function soundSetup(){
    laughnoise.setVolume(1);
    windsound.setVolume(1);
}

function draw(){
    background(0);
     if(frameCount == 1){
      image(ghost1,0,0);
      windsound.play();
    }
    if(frameCount == 2){
      image(ghost2,0,0);
    }
    if(frameCount == 3){
      image(ghost3,0,0);
    }
    if(frameCount == 4){
      image(ghost4,0,0);
    }
    if(frameCount == 5){
      image(ghost5,0,0);
    }
    if(frameCount == 6){
      image(ghost6,0,0);
    }
    if(frameCount == 7){
      image(ghost7,0,0);
    }
    if(frameCount == 8){
      image(ghost8,0,0);
    }
    if(frameCount == 9){
      image(ghost9,0,0);
      windsound.stop();
      laughnoise.play();
    }
    if(frameCount == 10){
      image(ghost10,0,0);
    }
    if(frameCount == 11){
      image(ghos11,0,0);
    }
    if(frameCount >= 12){
      image(ghost12,0,0);
    }
}

Project 10: Sonic Story

sketch
//Jessie Chen
//D
//Project 10
//Sonic Story

//Description: A girl in her room, 
//whistling and playing guitar as the wind howls. 
//Rain follows after the wind, darkening the room and the sky. 


var windows = [];
var girl = [];
var animation = 0;
var wind;
var guitar;
var whistle;
var rain;

function preload() {
    //load window animation
    var windowFrames = [];
    windowFrames[0] = "https://i.imgur.com/znUBSxa.png";
    windowFrames[1] = "https://i.imgur.com/znUBSxa.png";
    windowFrames[2] = "https://i.imgur.com/6CCPRvu.png";
    windowFrames[3] = "https://i.imgur.com/6CCPRvu.png";
    windowFrames[4] = "https://i.imgur.com/WL8WfFv.png";
    windowFrames[5] = "https://i.imgur.com/WL8WfFv.png";
    windowFrames[6] = "https://i.imgur.com/WL8WfFv.png";
    windowFrames[7] = "https://i.imgur.com/6CCPRvu.png";
    windowFrames[8] = "https://i.imgur.com/6CCPRvu.png";
    windowFrames[9] = "https://i.imgur.com/znUBSxa.png";
    windowFrames[10] = "https://i.imgur.com/znUBSxa.png";

    for (var i = 0; i < windowFrames.length; i++) {
        windows[i] = loadImage(windowFrames[i]);
    }

    //load girl animation
    var girlFrames = [];
    girlFrames[0] = "https://i.imgur.com/cJf8oUc.png";
    girlFrames[1] = "https://i.imgur.com/StszbDY.png";
    girlFrames[2] = "https://i.imgur.com/1AHGiCS.png";
    girlFrames[3] = "https://i.imgur.com/BB829DI.png";
    girlFrames[4] = "https://i.imgur.com/6T6wsTS.png";
    girlFrames[5] = "https://i.imgur.com/KQz7nSy.png";
    girlFrames[6] = "https://i.imgur.com/BF26KsD.png";
    girlFrames[7] = "https://i.imgur.com/YGI1D50.png";
    girlFrames[8] = "https://i.imgur.com/GzWvcdv.png";
    girlFrames[9] = "https://i.imgur.com/LADpf8C.png";

    for (var i = 0; i < girlFrames.length; i++) {
        girl[i] = loadImage(girlFrames[i]);
    }

    //load sounds
    wind = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/wind.wav");
    rain = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/rain-2.wav");
    whistle = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/whistle.wav");
    guitar = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/guitar-1.wav");
}


function setup() {
    createCanvas(400, 400);
    imageMode(CENTER);
    frameRate(5);
    useSound();
}


function soundSetup() {
    wind.setVolume(0.25);
    rain.setVolume(1.5);
}


function draw() {
    //sets background to light peach
    background(212, 187, 168);
    //background becomes darker as rain starts
    if (animation >= 50) {
        background(148, 139, 132);
    }

    //dots in the background
    circles();

    //color of the sky
    sky();

    //wind and rain animation and sound
    windNrain();

    //girl whistling and guitar
    playingguitar();

    animation ++;

    //stop animation when sounds end
    if(frameCount === 145) {
        noLoop();
    }
 }

function windNrain() {
    image(windows[animation%windows.length], 275, 175, 320, 350);
    //plays wind at the beginning
    if (animation == 0) {
        wind.play();
    //after wind, comes the rain
    } else if (animation == 50) {
        rain.play();
    }
}

 function playingguitar() {
    frameRate(4);
    image(girl[animation%girl.length], 150, 250, 300, 290);
    //girl is whistling
    if (animation == 1) {
        whistle.play();
    //after whistling, she starts singing and playing guitar
    } else if (animation == 6) {
        guitar.play();
    }
 }

 function sky() {
    noStroke();
    fill(153, 165, 166);
    //sky darkens with rain
    if (animation >= 50) {
        fill(85, 90, 95);
    }
    //constrain inside the window
    rect(230, 55, 100, 170);
 }

 function circles() {
    for (var x = 0; x <= width; x += 20) {
        for (var y = 0; y<= height; y += 20) {
            noStroke();
            fill(242, 220, 203, 120);
            ellipse(x, y, 10, 10);
        }
    }
}

I wanted to make a girl strumming a guitar so I drew frames for the animation using Procreate. I also made a separate animation for the window, to add extra sounds to the project (the wind and the rain). All the sounds I used were found on freesound.org (including the guitar.) Also, as the rain starts, the sky and the room darken.

Screenshot before the rain
Screenshot during the rain

Project 10 – Sonic Story

My story is a little western horse racing film. In the first scene, the gun goes off. Then the horses start galloping as the crowd cheers.

crowd
neigh
gunshot
gallop
Sonic Story – Maggie
//Maggie Ma
//Section D
//Sonic Story

//STORYLINE: a little western horseracing film. 
//In the first scene, the start gun goes off.
//Then, the horses start galloping.
//Finally, the crowd cheers.

var horseImage = [];   // an array to store the images
var horse = []; //array to hold horse

//frame counter 
var frameCount = 0;

//crowd image
var crowd;

//gun image
var gun;

//race gun x position
var gunX = -200;

//horse background of first scene
var horsebg; 

//crowd scene zoom in and out
var zoomx = 0; 
var zoomy = 0;

//sounds
var neigh;
var shot;
var gallop;
var crowdcheer;

function preload(){

    neigh = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/neigh.wav");
    shot = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/gunshot-1.wav");
    gallop = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/gallop-1.wav");
    crowdcheer = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/crowd.wav");
    
    //horse running image files
    var filenames = [];
    filenames[11] = "https://i.imgur.com/Kpc8OBb.gif";
    filenames[10] = "https://i.imgur.com/G6TaUvT.gifg";
    filenames[9] = "https://i.imgur.com/lbhzzYr.gif";
    filenames[8] = "https://i.imgur.com/wuAUUaw.gif";
    filenames[7] = "https://i.imgur.com/083HFuW.gif";
    filenames[6] = "https://i.imgur.com/VpQvDCP.gif";
    filenames[5] = "https://i.imgur.com/4G68Ubf.gif";
    filenames[4] = "https://i.imgur.com/hE8DQXc.gif";
    filenames[3] = "https://i.imgur.com/6WcJ0gS.gif";
    filenames[2] = "https://i.imgur.com/T1Xwkkj.gif";
    filenames[1] = "https://i.imgur.com/2PDeXWh.gif";
    filenames[0] = "https://i.imgur.com/shnBbse.gif";

    crowd = loadImage('https://i.imgur.com/9tu2YoL.jpg');
    gun = loadImage('https://i.imgur.com/lmEa4Kh.png');
    horsebg = loadImage('https://i.imgur.com/Q9r6TGv.png');

 
    for (var i = 0; i < filenames.length; i++) {
        horseImage[i] = loadImage(filenames[i]);
    }
}

function stepCharacter() { //update function
    this.imageNumber+=1;

    //reset image cycle when reach the end of array
    if (this.imageNumber>11) {
        this.imageNumber =0; 
    }
}

function drawCharacter() {
    //making the dude walk
    image(horseImage[this.imageNumber], this.x, this.y);
}

function makeCharacter(wx, wy, wdx, wdy) { //character constructer
    w = {
        x: wx,
        y: wy, 
        dx: wdx,
        dy: wdy, 
        imageNumber: 0,
        stepFunction: stepCharacter,
        drawFunction: drawCharacter
        }
    return w;
}

function setup() {
    createCanvas(480, 350);
    useSound();
    imageMode(CENTER);
    for (var i=0; i<1; i++) { 
        var w = makeCharacter(240,170,0,0);
        horse.push(w); 
    }
    frameRate(10);
}

function soundSetup () {
    neigh.setVolume(0.8);
    shot.setVolume(0.5);
}
function draw() {
    background(255);

    frameCount++;
    if (frameCount >= 0& frameCount < 160) { //race gun goes off scene
        image(horsebg, 240, 196, width, height); //background
        image(gun, 200 + gunX, height-250, width, height); //gun image
        if (frameCount >= 0 & frameCount < 70){ 
            gunX += 7; //gun slides in
        } else if (frameCount >= 90 & frameCount <160) {
            gunX -=12; //gun slides out
        } 
    }
   
    else if (frameCount >=100 & frameCount <300) { //horse galloping scene
        for (var i=0; i<1; i++) { //three people walking
            var w = horse[i];
            push();
            w.stepFunction();
            w.drawFunction();
            pop();
        }

    } else if (frameCount >=300 & frameCount < 400) { //crowd cheering scene
        image(crowd, 240, 196, width + zoomx, height + zoomy);
        zoomx +=3; //zoom in x
        zoomy += 3; //zoom in y 

    } else if (frameCount >= 400 & frameCount <450) { //end scene
        background(0);
        fill(255);
        textFont('Courier New Italic')
        textSize(16);
        text('the great race.', width-200, height-75);
    
    }else if (frameCount >= 450) {
        background(0);
        noLoop();
    }

    //sound play
    if (frameCount == 88) {
        shot.play();
    } else if (frameCount == 130){
        gallop.play();
    } else if (frameCount == 200){
        neigh.play();
    } else if (frameCount == 270) {
        crowdcheer.play();
    } else if (frameCount > 400) {
        crowdcheer.stop();
    }
}

Project 10 – Sonic Story + Media Files

For my sonic story, I made an animation of a series of animals chasing each other. I first started with a gif of a dog running, then split it into several frames to animate. I then decided to make it get chased by a bee (also a gif), then have the dog chase a cat who chases a mouse. The full frame is too long to display here, but this is a screenshot of what it looks like when all four characters are in frame:

barkingDownload
buzzDownload
meow-2Download
squeakDownload
sonic story
// STORYLINE: A bee chasing a dog chasing a cat chasing a mouse.



var dogWalk = [];   // an array to store the images of a dog walking
var beeFly = []; // array to store images of bee flying
var catRun = []; // images of cat running
var mouse;
var mx = 920; // x position of mouse
var fence;
var barking;
var buzz;
var meow;
var squeak;




function preload(){

    // images of dog walking
    var dogs = [];
    dogs[0] = "https://i.imgur.com/Obg7kQd.gif";
    dogs[1] = "https://i.imgur.com/vUkgpet.gif";
    dogs[2] = "https://i.imgur.com/jvjCknz.gif";
    dogs[3] = "https://i.imgur.com/yFxMHG1.gif";
    dogs[4] = "https://i.imgur.com/oPxOfcq.gif";
    dogs[5] = "https://i.imgur.com/i0WRXiO.gif";
    dogs[6] = "https://i.imgur.com/338YDhl.gif";
    dogs[7] = "https://i.imgur.com/W62WgdJ.gif";
    dogs[8] = "https://i.imgur.com/2GhHX5W.gif";
    dogs[9] = "https://i.imgur.com/VgfCha4.gif";
    dogs[10] = "https://i.imgur.com/MbUowkT.gif";
    dogs[11] = "https://i.imgur.com/CnQCi0T.gif";
    dogs[12] = "https://i.imgur.com/rWgGUWm.gif";
    dogs[13] = "https://i.imgur.com/WPaT5V0.gif";
    dogs[14] = "https://i.imgur.com/y8qx8WE.gif";
    dogs[15] = "https://i.imgur.com/Vp1xVPc.gif";

    for (var i = 0; i < dogs.length; i++) {
        dogWalk[i] = loadImage(dogs[i]);
    }

    //images of bee flying
    var bees = [];
    bees[0] = "https://i.imgur.com/4850hmR.gif";
    bees[1] = "https://i.imgur.com/0FMGyos.gif";
    bees[2] = "https://i.imgur.com/7CozqZ5.gif";
    bees[3] = "https://i.imgur.com/J6e0HBK.gif";
    bees[4] = "https://i.imgur.com/uexlFJE.gif";
    bees[5] = "https://i.imgur.com/intd8Rx.gif";
    bees[6] = "https://i.imgur.com/l3ZVHzT.gif";
    bees[7] = "https://i.imgur.com/NNG3lnb.gif";
    bees[8] = "https://i.imgur.com/wYl8pHt.gif";
    bees[9] = "https://i.imgur.com/CM53Kch.gif";
    bees[10] = "https://i.imgur.com/Tt90vYh.gif";
    bees[11] = "https://i.imgur.com/MTQRrrG.gif";
    bees[12] = "https://i.imgur.com/8S7d588.gif";
    bees[13] = "https://i.imgur.com/tO9HTc5.gif";
    bees[14] = "https://i.imgur.com/KtbttF1.gif";
    

    for (var i = 0; i < bees.length; i++) {
        beeFly[i] = loadImage(bees[i]);
    }

    //images of the cat
    var cats = [];
    cats[0] = "https://i.imgur.com/ZWzbhxI.gif";
    cats[1] = "https://i.imgur.com/GaD7QU7.gif";
    cats[2] = "https://i.imgur.com/i6pEZq8.gif";
    cats[3] = "https://i.imgur.com/ljdWpB9.gif";
    cats[4] = "https://i.imgur.com/3dpfves.gif";
    cats[5] = "https://i.imgur.com/r0rgZRT.gif";
    cats[6] = "https://i.imgur.com/810gnOd.gif";
    cats[7] = "https://i.imgur.com/36qZ7mv.gif";
    cats[8] = "https://i.imgur.com/DPO7GIs.gif";
    cats[9] = "https://i.imgur.com/r9pxkAW.gif";
    cats[10] = "https://i.imgur.com/BNjV3y7.gif";
    cats[11] = "https://i.imgur.com/GOJmcoi.gif";

        for (var i = 0; i < cats.length; i++) {
        catRun[i] = loadImage(cats[i]);
    }
    
    mouse = loadImage("https://i.imgur.com/293UbtW.png");

    fence = loadImage ("https://i.imgur.com/N9jB1Hh.png");

    barking = loadSound ("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/barking.wav");

    buzz = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/buzz.wav");

    meow = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/meow-2.wav");

    squeak = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/squeak.wav");
}
    
function soundSetup(){
    //barking.setVolume(0.75);
    buzz.setVolume(15);
    meow.setVolume(0.4);
    //squeak.setVolume(1);
}

//updates walking dog for next frame
function stepDog(){
    this.imageNumber++;

    //cycles through the 16 images
    if (this.imageNumber>15){
        this.imageNumber=0;
    }
}

//updates flying bee for next frame
function stepBee(){
    this.imageNumber++;

    // cycles through 15 images
    if (this.imageNumber>14){
        this.imageNumber = 0;
    }  
}

//updates cat for next frame
function stepCat(){
    this.imageNumber++;

    // cycles through 12 images
    if (this.imageNumber>11){
        this.imageNumber = 0;
    }  
}


//draws walking dog
function drawDog(){ image(dogWalk[this.imageNumber], this.x, this.y, 200, 110); }

// draws flying bee
function drawBee() { 
    push();
    scale(-1, 1);
    image(beeFly[this.imageNumber], this.x, this.y, 50, 50)
    pop();
}

// draws cat
function drawCat() { 
    push();
    scale(-1, 1);
    image(catRun[this.imageNumber], this.x, this.y, 80, 80)
    pop();
}


//constructor that creates and returns an object representing a dog
function makeDog(cx, cy){
    c = {x: cx, y: cy,
        dx: 8, 
        imageNumber:0,
        stepFunction: stepDog,
        drawFunction: drawDog}
    return c;
}

//constructor that creates and returns an object for a bee
function makeBee(bx, by){
    b = {x: bx, y: by,
        dx: 7,
        imageNumber: 0,
        stepFunction: stepBee,
        drawFunction: drawBee}
    return b;
}

//constructor that creates and returns an object for a cat
function makeCat(ax, ay){
    a = {x: ax, y: ay,
        dx: 9,
        imageNumber: 0,
        stepFunction: stepCat,
        drawFunction: drawCat}
    return a;
}


//empty array for dog
var dog=[];

//empty array for bee
var bee = [];

//empty array for cat
var cat = [];


function setup(){
    createCanvas(800, 100);
    imageMode(CENTER);

    for (var i = 0; i < 1; i++) {
        // make a dog
        var c = makeDog(1100, i+60);
        // push the dog onto dog array
        dog.push(c);

        var b = makeBee(-1200, i+50);
        bee.push(b);

        var a = makeCat(-1000, i+70);
        cat.push(a);
    }
    useSound();
    frameRate(8);
}

function draw(){
    background(201, 74, 88);

    //barking sound
    if (frameCount == 65 || frameCount == 75) {
        barking.play(); 
    } 

    // buzzing sound
    if (frameCount == 80 || frameCount == 90){
        buzz.play();
    }

    // meow
    if (frameCount == 40 || frameCount == 50){
        meow.play();
    }

    //squeak
    if (frameCount == 20 || frameCount == 30){
        squeak.play();
    }
    

    if (0 < frameCount < 100){
        for (var i = 0; i < 1; i++) { // for the dog
            var c = dog[i];
            c.stepFunction();
            c.drawFunction();
            //moves dog to the left
            dog[i].x-=dog[i].dx;
        }
    }
    

    if (0 < frameCount < 100){
        for (var i = 0; i < 1; i++) { // for the bee
            var b = bee[i];
            b.stepFunction();
            b.drawFunction();
            //moves bee to the left
            bee[i].x+=bee[i].dx;
        }
    }

    if (0 < frameCount < 100){
        for (var i = 0; i < 1; i++) { // for the cat
            var a = cat[i];
            a.stepFunction();
            a.drawFunction();
            //moves cat to the left
            cat[i].x += cat[i].dx;
        }
    }

    image(mouse, mx, 75, 45, 30);
    image(fence, 700, 100, 200, 70);

    mx -= 10

}

function mousePressed (){
    frameCount = 0;
}

Project 10-2020 Election Highlights Sonic Story

My sound story includes some highlights from the 2020 Presidential Election. I included audio clips from debates, the presidential anthem, and TikTok songs with special guest the Fly that landed on Mike Pence’s head.

election
function preload() {
    // load sounds for sound story
    buzz = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/flybuzz.wav");
    talk = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/imspeaking.wav");
    president = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/presidential.wav");
    banjo = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/banjo.wav");
    loser = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/loser.wav");
}
//set values for brownian motion of fly
var Y = 0;
var X = 5;
var noiseParam= 0;
var noiseStep= 0.1;

function setup() {
    // you can change the next 2 lines:
    createCanvas(480, 480);
    //======== call the following to use sound =========
    useSound();
    imageMode(CENTER);
    frameRate(14);
}
function soundSetup() { // setup for audio generation
    //set volumes for sounds
    buzz.setVolume(0.1);
    talk.setVolume(0.5);
    president.setVolume(0.5);
    banjo.setVolume(1.0);
    loser.setVolume(0.4);

}
function Joe() {
    background(0,86,217);
    //draw joe biden 
    noStroke();
    //shirt
    fill(245);
    rect(145,414,200,100);
    //neck
    fill(225,176,161);
    beginShape();
    curveVertex(162,314);
    curveVertex(161,368);
    curveVertex(224,438);
    curveVertex(272,437);
    curveVertex(331,375);
    curveVertex(331,321);
    endShape(CLOSE);
    //face
    fill(250,218,205)
    beginShape();
    curveVertex(180,53);
    curveVertex(153,84);
    curveVertex(155,119);
    curveVertex(152,160);
    curveVertex(142,213);
    curveVertex(172,247);
    curveVertex(218,255);
    curveVertex(258,261);
    curveVertex(291,270);
    curveVertex(361,270);
    curveVertex(369,254);
    curveVertex(371,212);
    curveVertex(363,139);
    curveVertex(360,90);
    curveVertex(344,65);
    curveVertex(252,48);
    endShape(CLOSE);
    //left ear
    fill(225,176,161);
    beginShape();
    curveVertex(122,181);
    curveVertex(112,191);
    curveVertex(105,214);
    curveVertex(123,257);
    curveVertex(153,225);
    endShape(CLOSE);
    //right ear
    beginShape();
    curveVertex(372,206);
    curveVertex(393,230);
    curveVertex(402,239);
    curveVertex(395,267);
    curveVertex(358,302);
    curveVertex(369,250);
    endShape(CLOSE);
    //frame
    noFill();
    stroke(200)
    strokeWeight(3)
    line(204,173,303,179);
    arc(252,210,44,44,radians(200), 0)
    //left lens
    strokeWeight(4)
    fill(29,31,34,230)
    beginShape();
    curveVertex(174,172);
    curveVertex(159,190);
    curveVertex(157,221);
    curveVertex(181,242);
    curveVertex(218,233);
    curveVertex(245,198);
    curveVertex(231,175);
    curveVertex(202,171);
    endShape(CLOSE);
    //right lens
    beginShape();
    curveVertex(274,181);
    curveVertex(262,197);
    curveVertex(277,226);
    curveVertex(309,250);
    curveVertex(334,245);
    curveVertex(348,220);
    curveVertex(345,192);
    curveVertex(326,181);
    curveVertex(303,177);
    endShape(CLOSE);
    //hair
    noStroke();
    fill(255);
    beginShape();
    curveVertex(205,24);
    curveVertex(167,43);
    curveVertex(141,73);
    curveVertex(125,112);
    curveVertex(119,139);
    curveVertex(115,165);
    curveVertex(117,185);
    curveVertex(137,198);
    curveVertex(143,204);
    curveVertex(164,92);
    curveVertex(183,62);
    curveVertex(213,52);
    curveVertex(251,49);
    curveVertex(331,67);
    curveVertex(357,100);
    curveVertex(368,223);
    curveVertex(383,215);
    curveVertex(391,165);
    curveVertex(379,113);
    curveVertex(371,73);
    curveVertex(337,44);
    curveVertex(305,27);
    curveVertex(251,26);
    endShape(CLOSE);
    //mask
    fill(0);
    beginShape();
    curveVertex(129,185);
    curveVertex(148,211);
    curveVertex(167,233);
    curveVertex(190,243);
    curveVertex(223,245);
    curveVertex(240,244);
    curveVertex(277,255);
    curveVertex(324,263);
    curveVertex(362,257);
    curveVertex(385,222);
    curveVertex(391,228);
    curveVertex(373,255);
    curveVertex(365,287);
    curveVertex(361,327);
    curveVertex(334,353);
    curveVertex(312,375);
    curveVertex(284,400);
    curveVertex(241,413);
    curveVertex(200,389);
    curveVertex(167,342);
    curveVertex(145,310);
    curveVertex(122,285);
    curveVertex(119,257);
    curveVertex(135,226);
    curveVertex(125,193);
    endShape(CLOSE);
    //left shoulder
    fill(43,43,55);
    beginShape();
    curveVertex(164,347);
    curveVertex(152,412);
    curveVertex(161,478);
    curveVertex(0,478);
    curveVertex(0,423);
    curveVertex(108,395);
    endShape(CLOSE);
    //right shoulder
    beginShape();
    curveVertex(335,362);
    curveVertex(343,418);
    curveVertex(335,480);
    curveVertex(399,480);
    curveVertex(438,480);
    curveVertex(480,480);
    curveVertex(480,447);
    curveVertex(394,419);
    endShape(CLOSE);  
    //left collar
    fill(255);
    beginShape();
    curveVertex(159,345);
    curveVertex(234,437);
    curveVertex(187,479);
    curveVertex(157,479);
    curveVertex(145,407);
    endShape(CLOSE);
    //right collar
    beginShape();
    curveVertex(335,358);
    curveVertex(355,406);
    curveVertex(347,480);
    curveVertex(308,480);
    curveVertex(267,434);
    endShape(CLOSE);
    //tie knot
    fill(50,50,74);
    beginShape();
    curveVertex(233,430);
    curveVertex(219,445);
    curveVertex(223,480);
    curveVertex(263,480);
    curveVertex(289,454);
    curveVertex(266,424);
    endShape(CLOSE);
}

//draw mike pence
function Mike(){
    background(248,95,90);
    noStroke();
    //shirt
    beginShape();
    fill(241, 237, 234);
    curveVertex(218,346);
    curveVertex(187,374);
    curveVertex(171,395);
    curveVertex(179,479);
    curveVertex(278,479);
    curveVertex(295,391);
    curveVertex(261,351);
    endShape(CLOSE);
    //left shoulder
    fill(0);
    beginShape();
    vertex(172,268);
    vertex(127,282);
    vertex(87,298);
    vertex(44,323);
    vertex(0,331);
    vertex(0,479);
    vertex(193,479);
    vertex(172,380);
    vertex(160,300);
    endShape(CLOSE);
    //right shoulder
    beginShape();
    vertex(325,286);
    vertex(334,294);
    vertex(351,312);
    vertex(396,330);
    vertex(448,354);
    vertex(479,368);
    vertex(479,479);
    vertex(258,479);
    vertex(289,402);
    vertex(316,304);
    endShape(CLOSE);
    //left ear
    fill(236, 166, 133);
    beginShape();
    curveVertex(185,145);
    curveVertex(175,127);
    curveVertex(167,133);
    curveVertex(165,149);
    curveVertex(165,177);
    curveVertex(165,201);
    curveVertex(168,214);
    curveVertex(175,217);
    endShape(CLOSE);
    //right ear
    beginShape();
    curveVertex(363,203);
    curveVertex(378,194);
    curveVertex(388,198);
    curveVertex(387,214);
    curveVertex(371,231);
    curveVertex(359,252);
    curveVertex(349,267);
    curveVertex(339,272);
    curveVertex(331,263);
    endShape(CLOSE);
    //neck
    beginShape();
    curveVertex(181,251);
    curveVertex(172,288);
    curveVertex(183,309);
    curveVertex(195,323);
    curveVertex(223,353);
    curveVertex(242,358);
    curveVertex(279,342);
    curveVertex(309,317);
    curveVertex(317,290);
    endShape(CLOSE);
    //right collar
    fill(255)
    beginShape();
    curveVertex(329,279);
    curveVertex(282,335);
    curveVertex(260,347);
    curveVertex(243,355);
    curveVertex(261,376);
    curveVertex(273,407);
    curveVertex(281,427);
    curveVertex(313,362);
    curveVertex(323,315);
    endShape(CLOSE);
    //face
    fill(244, 180, 150)
    beginShape();
    curveVertex(232,81);
    curveVertex(213,114);
    curveVertex(198,145);
    curveVertex(185,166);
    curveVertex(177,199);
    curveVertex(175,237);
    curveVertex(181,279);
    curveVertex(193,307);
    curveVertex(211,328);
    curveVertex(238,340);
    curveVertex(273,335);
    curveVertex(299,321);
    curveVertex(322,291);
    curveVertex(341,257);
    curveVertex(360,214);
    curveVertex(361,187);
    curveVertex(362,143);
    curveVertex(357,101);
    curveVertex(335,116);
    curveVertex(289,103);
    curveVertex(255,87);
    endShape(CLOSE);
    //right hair
    fill(241, 237, 234);
    beginShape();
    curveVertex(363,74);
    curveVertex(380,95);
    curveVertex(387,130);
    curveVertex(375,171);
    curveVertex(357,217);
    curveVertex(356,122);
    curveVertex(356,104);
    endShape(CLOSE);
    //left hair
    fill(255);
    beginShape();
    curveVertex(254,36);
    curveVertex(219,54);
    curveVertex(199,84);
    curveVertex(190,112);
    curveVertex(184,136);
    curveVertex(180,183);
    curveVertex(209,132);
    curveVertex(233,87);
    curveVertex(277,100);
    curveVertex(323,114);
    curveVertex(341,116);
    curveVertex(358,100);
    curveVertex(363,79);
    curveVertex(352,60);
    curveVertex(327,40);
    curveVertex(295,30);
    endShape(CLOSE);
    //collar
    beginShape();
    curveVertex(177,255);
    curveVertex(165,273);
    curveVertex(162,307);
    curveVertex(170,357);
    curveVertex(178,406);
    curveVertex(181,418);
    curveVertex(209,376);
    curveVertex(231,354);
    curveVertex(195,320);
    curveVertex(177,289);
    endShape(CLOSE);    
    //tie bottom
    fill(184, 14, 18);
    beginShape();
    curveVertex(223,394);
    curveVertex(209,430);
    curveVertex(196,478);
    curveVertex(261,479);
    curveVertex(257,433);
    curveVertex(239,392);
    endShape(CLOSE);
    //tie knot
    fill(229, 25, 30);
    beginShape();
    curveVertex(225,354);
    curveVertex(201,379);
    curveVertex(221,398);
    curveVertex(246,402);
    curveVertex(264,380);
    curveVertex(256,360);
    endShape(CLOSE);
}

function Kamala() {
    background(0,180,255);
    //draw kamala
    //hair behind face
    fill(43,32,22);
    beginShape();
    curveVertex(378,86);
    curveVertex(418,127);
    curveVertex(447,218);
    curveVertex(452,272);
    curveVertex(429,304);
    curveVertex(429,326);
    curveVertex(419,343);
    curveVertex(395,345);
    curveVertex(398,365);
    curveVertex(433,364);
    curveVertex(429,388);
    curveVertex(399,398);
    curveVertex(424,434);
    curveVertex(386,454);
    curveVertex(396,430);
    curveVertex(371,407);
    curveVertex(345,384);
    curveVertex(341,350);
    endShape(CLOSE);
    beginShape();
    fill(164,122,97);
    curveVertex(199,280);
    curveVertex(164,333);
    curveVertex(224,479);
    curveVertex(343,479);
    curveVertex(363,330);
    endShape(CLOSE);
    //right shoulder
    beginShape();
    fill(49,46,50);
    curveVertex(357,411);
    curveVertex(354,444);
    curveVertex(328,480);
    curveVertex(480,480);
    curveVertex(480,346);
    curveVertex(361,327);
    curveVertex(363,376)
    endShape(CLOSE);
    //left shoulder
    fill(59,58,64);
    beginShape();
    curveVertex(193,308);
    curveVertex(199,393);
    curveVertex(231,480);
    curveVertex(0,480);
    curveVertex(0,367);
    curveVertex(91,339);
    endShape(CLOSE);
    //necklace
    push();
    translate(10,25)
    fill(255);
    circle(345,343,15)
    circle(218,415,15);
    circle(221,429,15);
    circle(226,438,15);
    circle(233,449,15);
    circle(349,368,15);
    circle(349,381,15);
    circle(347,396,15);
    circle(344,407,15);
    circle(340,415,15);
    circle(337,428,15);
    circle(329,440,15);
    circle(321,450,15);
    circle(316,460,15);
    circle(350,355,15);
    pop();
    //face
    noStroke();
    fill(194,150,121)
    beginShape();
    curveVertex(353,71);
    curveVertex(393,113);
    curveVertex(415,177);
    curveVertex(405,204);
    curveVertex(414,244);
    curveVertex(401,281);
    curveVertex(376,331);
    curveVertex(369,359);
    curveVertex(341,366);
    curveVertex(305,350);
    curveVertex(235,298);
    curveVertex(219,179);
    curveVertex(238,59);
    endShape(CLOSE);
    //hair
    fill(59,44,23);
    beginShape();
    curveVertex(313,49);
    curveVertex(285,40);
    curveVertex(215,56);
    curveVertex(155,113);
    curveVertex(118,203);
    curveVertex(106,277);
    curveVertex(107,297);
    curveVertex(124,319);
    curveVertex(95,334);
    curveVertex(147,337);
    curveVertex(163,359);
    curveVertex(191,382);
    curveVertex(169,389);
    curveVertex(145,367);
    curveVertex(157,387);
    curveVertex(196,399);
    curveVertex(194,427);
    curveVertex(153,433);
    curveVertex(126,419);
    curveVertex(156,449);
    curveVertex(193,449);
    curveVertex(233,427);
    curveVertex(248,392);
    curveVertex(267,370);
    curveVertex(254,337);
    curveVertex(233,328);
    curveVertex(247,312);
    curveVertex(251,247);
    curveVertex(254,217);
    curveVertex(297,203);
    curveVertex(336,153);
    curveVertex(365,121);
    curveVertex(387,91);
    curveVertex(366,72);
    curveVertex(339,56);
    endShape(CLOSE);
}
//draw the fly 
function Fly(x,y) {
        push();
        translate(200,100);
        stroke(154, 137, 120);
        strokeWeight(2);
        fill(0);
        circle(x, y, 12);   //draw fly body
        pop();    
    }
function Trump() {
    background(241,59,58);
    //trump
    //left side hair
    fill(245,234,176);
    beginShape();
    curveVertex(108,100);
    curveVertex(85,148);
    curveVertex(89,204);
    curveVertex(97,237);
    curveVertex(92,295);
    curveVertex(107,325);
    curveVertex(133,339);
    curveVertex(138,228);
    curveVertex(140,160);
    curveVertex(159,124);
    curveVertex(151,84);
    endShape(CLOSE);
    //right ear
    fill(245,152,93)
    beginShape();
    curveVertex(381,163);
    curveVertex(398,217);
    curveVertex(395,271);
    curveVertex(383,302);
    curveVertex(368,308);
    curveVertex(365,247);
    endShape(CLOSE);
    //left shoulder
    fill(14,16,47);
    beginShape();
    curveVertex(155,406);
    curveVertex(188,480);
    curveVertex(0,480);
    curveVertex(0,422);
    curveVertex(48,381);
    curveVertex(136,341);
    endShape(CLOSE);
    //right shoulder
    beginShape();
    curveVertex(346,375);
    curveVertex(382,376);
    curveVertex(417,387);
    curveVertex(463,390);
    curveVertex(480,397);
    curveVertex(480,480);
    curveVertex(324,480);
    curveVertex(336,408);
    endShape(CLOSE);
    //left collar
    fill(255);
    beginShape();
    curveVertex(140,366);
    curveVertex(213,427);
    curveVertex(235,437);
    curveVertex(231,479);
    curveVertex(187,479);
    curveVertex(153,405);
    endShape(CLOSE);
    //right collar
    beginShape();
    curveVertex(339,395);
    curveVertex(340,480);
    curveVertex(317,480);
    curveVertex(270,480);
    curveVertex(275,438);
    endShape(CLOSE);
    //tie knot
    fill(68,73,215)
    beginShape();
    curveVertex(285,420);
    curveVertex(241,420);
    curveVertex(227,450);
    curveVertex(233,480);
    curveVertex(277,480);
    curveVertex(309,480);
    curveVertex(303,442);
    endShape(CLOSE);
    //face
    noStroke();
    fill(246,162,102)
    beginShape();
    curveVertex(147,176);
    curveVertex(135,233);
    curveVertex(135,296);
    curveVertex(129,328);
    curveVertex(128,346);
    curveVertex(157,403);
    curveVertex(213,440);
    curveVertex(277,452);
    curveVertex(331,424);
    curveVertex(365,357);
    curveVertex(372,323);
    curveVertex(371,233);
    curveVertex(368,183);
    curveVertex(365,112);
    curveVertex(299,111);
    curveVertex(157,119);
    endShape(CLOSE);
    //right side hair
    fill(245,234,176)
    beginShape();
    curveVertex(355,95);
    curveVertex(336,121);
    curveVertex(346,146);
    curveVertex(350,179);
    curveVertex(371,249);
    curveVertex(391,152);
    curveVertex(395,105);
    curveVertex(374,83);
    endShape(CLOSE);
    //left ear
    fill(245,152,93)
    beginShape();
    curveVertex(140,231);
    curveVertex(103,226);
    curveVertex(91,233);
    curveVertex(94,260);
    curveVertex(105,284);
    curveVertex(119,323);
    curveVertex(137,332);
    curveVertex(147,318);
    curveVertex(141,271);
    endShape(CLOSE);
    //top hair
    fill(248,232,145)
    beginShape();
    curveVertex(293,31);
    curveVertex(213,42);
    curveVertex(147,58);
    curveVertex(93,95);
    curveVertex(113,109);
    curveVertex(145,107);
    curveVertex(165,132);
    curveVertex(207,145);
    curveVertex(265,136);
    curveVertex(319,131);
    curveVertex(359,119);
    curveVertex(385,115);
    curveVertex(396,89);
    curveVertex(351,51);
    endShape(CLOSE);
    //top of right side hair
    fill(245,234,176)
    beginShape();
    curveVertex(153,105);
    curveVertex(173,129);
    curveVertex(151,181);
    curveVertex(135,224);
    curveVertex(115,147);
    curveVertex(131,119);
    endShape(CLOSE);
}
//draw first title slide: '2020 ELECTION HIGHLIGHTS'
function Title() {
    background(255);
    textAlign(CENTER);
    textSize(50);
    textStyle(BOLD);
    fill(241,59,58)
    text('2020', width/2, height/2-70);
    fill(0,86,217);
    text('ELECTION', width/2, height/2);
    fill(241,59,58);
    text('HIGHLIGHTS', width/2, height/2+70);
}
//draw last slide: 'BYE DON'
function End() {
    background(255);
    textAlign(CENTER);
    textSize(50);
    textStyle(BOLD);
    fill(0,86,217);
    text('BYE', width/2, height/2-35);
    fill(241,59,58);
    text('DON', width/2, height/2+35);
}

function draw() {
    background(255);
    //first scene is the title slide, and playing banjo tiktok music
    if (frameCount >= 0 & frameCount < 80) { 
        Title();
        if (!banjo.isPlaying()) {
            banjo.play();
        } 
    }
    //second scene is the fly buzzing around mike pence's head
    if (frameCount >= 80 & frameCount < 130) { 
        banjo.stop();
        Mike();
        Fly(X,Y);
        if (!buzz.isPlaying()) {
            buzz.play();
        }
        buzz.play();
        X+=random(-5,5); 
        Y+=random(-5,5);
        noiseParam+= noiseStep;
    }
    //third scene is kamala harris telling mike pence that she is speaking during the VP debate
    if (frameCount >= 130 & frameCount < 170) { 
        buzz.stop();
        if (!talk.isPlaying()) {
            talk.play();
        }
        Kamala(); 
    }
    //fourth scene is trump while a clip of supalonely plays 
    if (frameCount >= 170 & frameCount < 240) { 
        talk.stop();
        Trump();
        if (!loser.isPlaying()) {
            loser.play();
        } 
    }
    //fifth scene is joe biden with hail to the chief playing
    if (frameCount >= 240 & frameCount < 400) { 
        loser.stop();
        Joe();
        if (!president.isPlaying()) {
            president.play();
        } 
    }
    //last scene is the end slide with the banjo tiktok music playing
    if (frameCount >= 400 & frameCount < 460) { 
        End();
        if (!banjo.isPlaying()) {
            banjo.play();
        } 
    }
    //after the last slide, loop back to the first and continue to cycle through the frames
    if (frameCount == 460) {
        frameCount = 0;
        background(255);
    }
}
banjo
flybuzz
imspeaking
loser
presidential

Project 10: Sonic Sketch

For my project, I wanted to create a composition based on an illustration idea I had, so I created an illustration first in Illustrator and then exported the layers as images. In my project, I was able to practice using images and sound together and ended up using 7 images and 5 sounds total (meow, car, bicycle, wind, chirping). I wanted to make part of the sketch interactive, so I made the sun follow the user’s mouse. My story is as follows:

It is fall and the sun is setting. A cat sits on the windowsill and meows, watching the traffic outside. A car passes by, then a bicycle. The wind blows and leaves rustle. Birds chirp in the distance.

Illustrator drawing
sketch-cb
//Storyline: A cat sits on the windowsill and meows, watching
//traffic outside. A car passes by, then a bicycle. It is late
//fall and the sun is setting. Birds chirp in the distance.

//images
var cat;
var wind;
var leaf;
var bike;
var car;
var bird;
var mountains;

//sounds
var meow;
var engine;
var spinning;
var windblows;
var chirping;

//moving distances
var dx = 0;
var dy = 0;

function preload() {
    //loads images
    cat = loadImage("https://i.imgur.com/4Jqrrll.png");
    wind = loadImage("https://i.imgur.com/jYEWld7.png");
    leaf = loadImage("https://i.imgur.com/1rd8ozl.png");
    bike = loadImage("https://i.imgur.com/u3DeUeL.png");
    car = loadImage("https://i.imgur.com/4F1DaeZ.png");
    bird = loadImage("https://i.imgur.com/aEcelIZ.png");
    mountains = loadImage("https://i.imgur.com/kdIC817.png");

    //loads sounds
    meow = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/meow.wav");
    engine = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/engine.wav");
    spinning = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/spinning.wav");
    windblows = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/windblows.wav");
    chirping = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/chirping.wav");
}

function setup() {
    createCanvas(400, 400);
    frameRate(1);
    useSound();
    cat.loadPixels();
    wind.loadPixels();
    leaf.loadPixels();
    bike.loadPixels();
    car.loadPixels();
    bird.loadPixels();
    mountains.loadPixels();
}

function soundSetup() { 
    //setup for audio generation
    meow.setVolume(1);
    engine.setVolume(0.2);
    spinning.setVolume(0.5);
    windblows.setVolume(0.5);
    chirping.setVolume(0.75);
}

function draw() {
    background(204, 121, 84);

    //plays sounds at correct times
    switch (frameCount) {
        case 4: meow.play(); break;
        case 7: engine.play(); break;
        case 12: spinning.play(); break;
        case 18: windblows.play(); break;
        case 23: chirping.play(); break;
    }
    
    //sky
    noStroke();
    fill(151, 166, 221);
    ellipse(200, 180, 287);
    
    //sun and mountains
    fill(242, 113, 73);
    ellipse(mouseX, mouseY, 60);
    image(mountains, 57, 194);

    //car drives by
    if (frameCount >= 6 & frameCount < 13) {
        image(car, 240-dx, 235);
        dx+=25;
    }
    //bicycle passes by
    if (frameCount >= 11 & frameCount < 20) {
        image(bike, 15+dx, 240);
        dx+=30;
    }
    //wind blows leaves
    if (frameCount >= 17 & frameCount < 22) {
        image(leaf, 80, 80+dy);
        image(leaf, 280, 200+dy);
        dy+=40;
    }
    //birds fly in distance
    if (frameCount >= 23 & frameCount < 27) {
        image(bird, 216, 187);
        image(bird, 230, 175);
        image(bird, 232, 150);
        image(bird, 150, 155);
    }

    //window and cat
    image(wind, 0, 0);
    image(cat, 80, 230);
}

Project-10-Sonic Story

sketch
//Chris Han
//project 10
//section C

// var song;
var groundhog;
var groundhog1;
var groundhog2;
var groundhog3;
var grass;
var cloud;
var dy = 2; 
var y = 270;
var dy1 = 1;
var y1 = 250;
var y2 = 250;
var dy2 = 1;
var y3 = 300;
var dy3 = 2;
var dx = 0; //speed of clouds

function preload(){
	//images
     groundhog = loadImage("https://i.imgur.com/ghMIFqq.png");
     groundhog1 = loadImage("https://i.imgur.com/ghMIFqq.png");
     groundhog2 = loadImage("https://i.imgur.com/ghMIFqq.png");
     groundhog3 = loadImage("https://i.imgur.com/ghMIFqq.png");
     grass = loadImage("https://i.imgur.com/OQ7giMC.png");
     cloud = loadImage("https://i.imgur.com/ZtLcxL9.png");

     //sound
     song = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/clockticksound.wav");
// // }
}

function setup() {
    createCanvas(400,400);
    // useSound();
}

// function soundSetup(){
// 	song.setVolume(0.8);
// }

function draw() {
	noStroke();
	fill(135, 206, 250);
    rect(0,0,400,400);
	fill(210,105,30);
	rect(0,300,400,100);
	groundhog.resize(200,0); //the biggest one
	//movement for the front big groundhog
	if( dy >= 0 & y >= 360){ //the movement for groundhog
		r = random(1, 100);
		if(int(r) == 15){
			dy = -2
		} else {
			dy = 0
		}
	}
	if(dy <= 0 & y <= 270){
		dy = 2
	}
	y += dy;

	//movement for groundhog1 (the middle one)

    if( dy1 >= 0 & y1 >= 300){ //the movement for groundhog1
		r = random(1, 100);
		if(int(r) == 15){
			dy1 = -1
		} else {
			dy1 = 0
		}
	}
	if(dy1 <= 0 & y1 <= 250){
		dy1 = 1
	}
	y1 += dy1;

	//movement for groundhog2 (the back one)
	 if( dy2 >= 0 & y2 >= 300){ //the movement for groundhog1
		r = random(1, 100);
     if(int(r) == 15){
			dy2 = -1
		} else {
			dy2 = 0
		}
	}
	if(dy2 <= 0 & y2 <= 250){
		dy2 = 1
	}
	y2 += dy2;

	//movement for groundhhog3 (the very front one)
     if( dy3 >= 0 & y3 >= 400){ //the movement for groundhog1
		r = random(1, 100);
     if(int(r) == 15){
			dy3 = -1
		} else {
			dy3 = 0
		}
	}
	if(dy3 <= 0 & y3 <= 350){
		dy3 = 1
	}
	y3 += dy3;


    groundhog.resize(200,0); //the biggest one
    image(groundhog2, 160, y2); //furthest back one 
	rect(180,308,90,70);// the rectangle in between back grass and back whacka
	image(grass, 0, 230, 230,100); //furthest back grass

	image(groundhog, 0, y);
	groundhog1.resize(100,0);
    image(groundhog1, 250, y1);//middle groundhog
    rect(260,320,90,50);
    image(grass, 220, 250, 200,100);
	image(grass, -10, 300, 460, 110);
	groundhog2.resize(100,0);
	groundhog3.resize(120,0);
	image(groundhog3, 260, y3); //very front kinda small
	cloud.resize(100,0);

	//clouds moving
	image(cloud, -250 + dx, 40);
	image(cloud, -100 +dx, 100);
	image(cloud, 180 + dx, 40);
	image(cloud, 20 + dx, 30);
	image(cloud, 100 + dx, 100);
	image(cloud, 300 + dx, 100);
	dx += 0.2;

}

My project for this week is a story of different moles popping up and down in a field.