Project 10: Sonic Story

sketch
//Christy Zo
//Section C

var cricketSound;
var roosterSound;
var cowSound;
var pigSound;
var sunHue;

function preload() {
    cricketSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/cricketSound.wav");
    roosterSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/roosterSound.wav");
    cowSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/cowSound.wav");
    pigSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/pigSound.wav")
 }

function soundSetup() {
    osc = new p5.TriOsc();
}
function setup() {
    createCanvas(600, 300);
    useSound();
    frameRate(30);
}



function barn(x) {
    stroke(255);
    strokeWeight(2);
    fill(50);
    rect(x, 100, 200, 150);
    fill(255);
    rect(x+10, 110, 180, 80);
    fill(50);
    rect(x+10, 200, 180, 40);
    line(x+10, 200, x+190, 240);
    line(x+10, 240, x+190, 200);
    triangle(x, 100, x+200, 100, x+100, 30);
    triangle(x+15, 100, x+185, 100, x+100, 40);
}

function rooster(x) {
    stroke(0);
    fill(255);
    line(x, 150, x-30, 190); 
    line(x, 150, x+30, 190);
    circle(x, 150, 50); 
    fill(220);
    circle(x, 180, 20);
    triangle(x, 140, x-10, 110, x+10, 110); 
    fill(150);
    triangle(x, 150, x-10, 160, x+10, 160);
    triangle(x, 170, x-10, 160, x+10, 160);
    fill(255);
    circle(x-10, 145, 5);
    circle(x+10, 145, 5);

}

function cow(x) {
    fill(255);
    stroke(0);
    rect(x, 125, 50, 50);
    fill(200);
    ellipse(x+25, 170, 52, 30); //nose
    fill(255);
    circle(x+12, 170, 10);
    circle(x+37, 170, 10);
    circle(x+15, 145, 5);
    circle(x+35, 145, 5);
    ellipse(x-10, 125, 25, 10); //ears
    ellipse(x+55, 125, 25, 10);
    line(x, 150, x-30, 190);
    line(x+50, 150, x+80, 190);

}

function pig(x) {
    line(x, 150, x-30, 190);
    line(x, 150, x+30, 190);
    circle(x, 150, 60);
    circle(x-10, 145, 5);
    circle(x+10, 145, 5);
    fill(150);
    ellipse(x, 160, 30, 15);
    fill(255);
    circle(x-5, 160, 5);
    circle(x+5, 160, 5);
    fill(100);
    triangle(x-20, 120, x-25, 130, x-15, 125);
    triangle(x+20, 120, x+25, 130, x+15, 125);

    

}

var light = 0;
var position = 255;
function draw() {
    
    background(light);
    fill(light);
    rect(0, 0, 600, 300);

    sunHue = map(position, 0, height, 255, 0);
    fill(sunHue, 150, 0);
    ellipse(200, position, 50, 50);
    if (position < -50) {
        position = 300;
        light = 0;
        frameCount = 0;

    }
    fill(220);
    noStroke();
    rect(0, 200, 600, 300);
    barn(0);
    barn(200);
    barn(400);



    rooster(100);
    cow(275);
    pig(500);

    light = light + 1;
    position = position - 1;
    if (frameCount == 30) {
        cricketSound.play();
    }
    if (frameCount == 80) {
        roosterSound.play();

    } else if (frameCount == 140) {
        cowSound.play();
    } else if (frameCount == 200) {
        pigSound.play();
    }

    if (roosterSound.isPlaying()) {
        fill(255,0,0);
        circle(100, 180, 20);
        triangle(100, 140, 90, 110, 110, 110);
        fill(255,255,0);
        triangle(100, 150, 100-10, 160, 100+10, 160);
        triangle(100, 170, 100-10, 160, 100+10, 160);
    } else if (cowSound.isPlaying()) {
        fill(165,42,42);
        ellipse(275+25, 170, 52, 30);
        fill(255);
        circle(275+12, 170, 10);
        circle(275+37, 170, 10);
    } else if (pigSound.isPlaying()) {
        fill(255, 192, 203);
        triangle(500-20, 120, 500-25, 130, 500-15, 125);
        triangle(500+20, 120, 500+25, 130, 500+15, 125);
        ellipse(500, 160, 30, 15);
        fill(255);
        circle(500-5, 160, 5);
        circle(500+5, 160, 5);

    }

}


I was reminded of the story Animal Farm, and wanted to create a simple yet cute! I wanted to make everything greyscale, but emphasize the colors when each of the animals sound play!

Leave a Reply