Project-10 Sound Story

//Robert Rice
//rdrice
//Section C


// sketch.js template for sound and DOM
//
// This is the 15104 Version 1 template for sound and Dom.
// This template prompts the user to click on the web page
// when it is first loaded.
// The function useSound() must be called in setup() if you
// use sound functions.
// The function soundSetup() is called when it is safe
// to call sound functions, so put sound initialization there.
// (But loadSound() should still be called in preload().)

var mama = {filename:'https://i.imgur.com/z44s88k.png', //https://images.dailykos.com/images/214263/story_image/Duck-37.png?1456291242
            x:0,
            y:0,
            playFunc: playOsc,
            stopFunc: stopOsc,
            drawFunc: drawImg}
var duckling = {filename:'https://i.imgur.com/X5iYcio.png', //https://purepng.com/public/uploads/large/91508076238ploll99zx4ifi35p6b1qrontiecfaivclrqbiz0gfg0rru6qtj7qmlw2qmvrthjbk3sj2wgiwa12pz4n00nufufllybyth2akpcx.png
            x:0,
            y:0,
            playFunc: playOsc,
            stopFunc: stopOsc,
            drawFunc: drawImg}
var cloud = {filename:'https://i.imgur.com/igVfind.png', //https://clipground.com/images/clipart-cloud-png-10.png
            x:-50,
            y:100,
            playFunc: playOsc,
            stopFunc: stopOsc,
            drawFunc: drawImg}
var lightning = {filename:'https://i.imgur.com/9RODxMu.png', //https://asr4u.files.wordpress.com/2013/06/lightning-bolt-hi1.png
            x:150,
            y:150,
            playFunc: playOsc,
            stopFunc: stopOsc,
            drawFunc: drawImg}
var tScale = 1; //used later for scaling stuff down. 1 == 100%


function preload() {
    // call loadImage() and loadSound() for all media files here

    mama.image = loadImage(mama.filename);
    duckling.image = loadImage(duckling.filename);
    cloud.image = loadImage(cloud.filename);
    lightning.image = loadImage(lightning.filename);
    //loadSound();
}


function setup() {
    // you can change the next 2 lines:
    createCanvas(300, 300);
    createDiv("p5.dom.js library is loaded.");
    frameRate(30);
    imageMode(CENTER);
    //======== call the following to use sound =========
    useSound();
}


function soundSetup() { // setup for audio generation
    // you can replace any of this with your own audio code:
    mama.osc = new p5.Oscillator();
    mama.trem = new p5.Oscillator();    //mama duck's voice
    mama.trem.freq(10);
    mama.osc.setType('sawtooth');
    mama.osc.freq(midiToFreq(60));
    mama.osc.amp(mama.trem);

    duckling.osc = new p5.Oscillator();
    duckling.trem = new p5.Oscillator();    //baby duck's voice
    duckling.trem.freq(30);
    duckling.osc.setType('sawtooth');
    duckling.osc.freq(midiToFreq(70));
    duckling.osc.amp(mama.trem);

    cloud.osc = new p5.Oscillator();
    cloud.trem = new p5.Oscillator();   //makes cloud go brrrrrrr
    cloud.trem.freq(10);
    cloud.osc.setType('sawtooth');
    cloud.osc.freq(midiToFreq(31));
    cloud.osc.amp(cloud.trem);

    lightning.osc = new p5.Oscillator();    //lightning sound
    lightning.trem = new p5.Oscillator();  //makes it go pew pew
    lightning.trem.freq(10000);
    lightning.osc.setType('square');
    lightning.osc.amp(lightning.trem);
    lightning.osc.freq(midiToFreq(90));
}


function draw() {
    // you can replace any of this with your own code:
    background(200);    
    
    if (frameCount >= 0 & frameCount <= 150) {     //act I the status quo
        mama.x = 50;
        mama.y = 250;
        mama.drawFunc(100, 100);

        duckling.x = 100;
        duckling.y = 275;
        duckling.drawFunc(40, 50);

        if (frameCount == 30) {mama.playFunc();
            mama.drawFunc(200, 200);}
        if (frameCount == 50) {mama.stopFunc();}

        if (frameCount == 60) {duckling.playFunc();
            duckling.drawFunc(80, 100);}
        if (frameCount == 70) {duckling.stopFunc();}

        if (frameCount == 90) {mama.playFunc();
            mama.drawFunc(200, 200);}
        if (frameCount == 150) {mama.stopFunc();}

        if (frameCount == 120) {duckling.playFunc();}
        if (frameCount > 120 & frameCount < 150) {duckling.drawFunc(200, 200);}
        if (frameCount == 150) {duckling.stopFunc();}
    }

    if (frameCount >= 150 & frameCount <= 300) {   //act II a cloud arrives
        mama.drawFunc(100, 100);
        duckling.drawFunc(40, 50);

        var cDX = 2 //the speed at which the cloud will move across the screen


        cloud.drawFunc(100, 50);

        cloud.x += cDX;
        if (cloud.x > 150) {cloud.x = 150;} //will move across the screen, before settling in the middle

        if (frameCount == 250) {cloud.playFunc();}
        if (frameCount > 250 & frameCount < 300) {cloud.drawFunc(300, 150);}
        if (frameCount == 300) {cloud.stopFunc();}
    }

    if (frameCount >= 300 & frameCount <= 450) {   //act III the cloud brings forth lightning
        mama.drawFunc(100, 100);
        duckling.drawFunc(40, 50);
        cloud.drawFunc(300, 150);

        if (frameCount == 325) {lightning.playFunc(); lightning.drawFunc(100, 100);}
        if (frameCount == 330) {lightning.stopFunc(); lightning.drawFunc(50, 50);}

        if (frameCount == 355) {lightning.playFunc(); lightning.drawFunc(100, 100);}
        if (frameCount == 360) {lightning.stopFunc(); lightning.drawFunc(50, 50);}

        if (frameCount == 385) {lightning.playFunc(); lightning.drawFunc(100, 100);}
        if (frameCount == 390) {lightning.stopFunc(); lightning.drawFunc(50, 50);}

        if (frameCount == 415) {lightning.playFunc(); lightning.drawFunc(100, 100);}
        if (frameCount == 420) {lightning.stopFunc(); lightning.drawFunc(50, 50);}
    }

    if (frameCount >= 450 & frameCount <= 600) {   //act IV mama duck defends her child
        mama.drawFunc(100, 100);
        duckling.drawFunc(40, 50);
        cloud.drawFunc(200, 100);

        if (frameCount == 510) {mama.playFunc();}
        if (frameCount > 510 & frameCount < 600){
            mama.drawFunc(300, 300);
            mama.x += random(-10, 10);
            mama.y += random(-10, 10);
        }
        if (frameCount == 600) {mama.stopFunc(); mama.x = 50; mama.y = 250;}
    }

    if (frameCount >= 600 & frameCount <= 750) {   //act V the attackers rejected
        if (frameCount == 600) {
            lightning.x = 250
        }

        mama.drawFunc(100, 100);
        duckling.drawFunc(40, 50);

        push();
        scale(tScale, tScale);
        cloud.drawFunc(200, 100);
        lightning.drawFunc(75, 75);
        pop();

        tScale = tScale * 0.95
    }

    if (frameCount >= 750 & frameCount <= 900) {   //act VI return to status quo
        mama.x = 50;
        mama.y = 250;
        mama.drawFunc(100, 100);

        duckling.x = 100;
        duckling.y = 275;
        duckling.drawFunc(40, 50);

        if (frameCount == 780) {mama.playFunc();
            mama.drawFunc(200, 200);}
        if (frameCount == 800) {mama.stopFunc();}

        if (frameCount == 810) {duckling.playFunc();
            duckling.drawFunc(80, 100);}
        if (frameCount == 820) {duckling.stopFunc();}

        if (frameCount == 840) {mama.playFunc();
            mama.drawFunc(200, 200);}
        if (frameCount == 900) {mama.stopFunc();}

        if (frameCount == 870) {duckling.playFunc();}
        if (frameCount > 870 & frameCount < 900) {duckling.drawFunc(200, 200);}
        if (frameCount == 900) {duckling.stopFunc();}
    }
}

function playOsc() {
    this.trem.start();
    this.osc.start();//plays the sound
}

function stopOsc() {
    this.osc.stop();
    this.trem.stop();//stops the sound
}

function drawImg(w, h) {    //draws the picture at the specified scale
    image(this.image, this.x, this.y, w, h);
}