Project 10: Sonic Story

My project is a simple animation of a bee flying through some daisies and a sunflower to collect nectar. For my process, I created several objects that I animated first. Afterward, I inserted sounds that at different places within the story where the action was happening.

Canvas is 900 pixels wide so you can see the right side on here 🙁

sketch
//Anthony Pan
//Section C

var index = 0;
var duration = 0;
var sunflower;
var daisy;
var daisy2;
var bee;
var cloud;

//sounds
var beeSound;
var windSound;
var popSound;
var yumSound;



//bee positions
var beex = [900, 880, 860, 840, 820, 800, 780, 760, 740, 720, 700, 
680, 660, 640, 620, 600, 580, 560, 540, 540, 540, 540, 540, 540, 540, 540, 500, 450, 400, 200, -100];

//noise for beey heights
var noiseParam = 0;
var noiseStep = 0.05;
var beey = [];

//cloud positions
var cloudX = [];

function preload() {
    beeSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/beeBuzz.wav");
    windSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/wind.wav");
    popSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/pop.wav");
    yumSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/yum.wav");

}


function soundSetup() {
    windSound.amp(0.4);
    beeSound.amp(0.8);
    popSound.amp(1.0);
    yumSound.amp(0.8);
}



function setup() {
    createCanvas(900, 400);
    frameRate(1);
    useSound();

    //random y positions of beey
    for(var i=0; i < 30; i++) {
        var n = noise(noiseParam);
        var value = map(n, 0, 1, 0, height);
        beey.push(value);
        noiseParam += noiseStep;
    }

    //positions for cloudX
    for(var j = 0; j < 30; j++) {
        var cloudvalue = 900 - (j * 20);
        cloudX.push(cloudvalue);

    }


    //make objects
    daisy = makeDaisy(width/2, 2* height/3, 100);
    sunflower = makeSunflower(width/4, height/2, 80);
    daisy2 = makeDaisy(2 * width/3, height/3, 100);
    bee = makeBee(beex[index], beey[index]);
    cloud = makeCloud();

    
}

function draw() {
    //draw sky
    background(149, 217, 255);
    cloud.draw(cloudX[index], 100);

    //play windSound at end
    if(frameCount >= 28 & frameCount <= 31) {
        windSound.play();

    } 
    
    sunflower.draw();
    daisy.draw();
    daisy2.draw();

    //daisy petal fall 
    if(index >= 20) {
        fill(255);
        ellipse(600, index * 15, 60, 160);
    }

    //daisy petal pop
    if(frameCount >= 23 & frameCount <= 24) {
        popSound.play();
    }

    //play yum sound when bee is above flower
    if(index >= 20 & index < 21) {
        yumSound.play();
    }

    //sunflower petal pop
    if(frameCount >= 24 & frameCount <= 25) {
        popSound.play();
    }

    //sunflower petal fall
    if(index >= 24) {
        fill("yellow");
        ellipse(width/4, 50+index*15, 20, 180);
        ellipse(1.25 * width/4, 50+index*15, 20, 180);

    }

    bee.draw(beex[index], beey[index]);

    //play bee sound at beginning
    if(frameCount >= 0 & frameCount <= 3) {
        beeSound.play();

    }

    
    index += 1;

    //stop sounds at 30 seconds
    if(index >= 32) {
        popSound.stop();
        windSound.stop();
        beeSound.stop();
        yumSound.stop();
        background(0);
        noLoop();
    }





}

//cloud constructor
function makeCloud(cx, cy) {
    var cloud = {x: cx, y: cy, draw: drawCloud}
    return cloud;

}

//draw cloud
function drawCloud() {
    fill(230);
    ellipse(cloudX[index], 100, 300, 100);
    ellipse(cloudX[index]-90, 110, 100, 80);
    ellipse(cloudX[index]-30, 120, 100, 80);
    ellipse(cloudX[index]+30, 120, 100, 80);
    ellipse(cloudX[index]+90, 110, 100, 80);

    ellipse(cloudX[index]-90, 90, 100, 80);
    ellipse(cloudX[index]-30, 80, 100, 80);
    ellipse(cloudX[index]+30, 80, 100, 80);
    ellipse(cloudX[index]+90, 90, 100, 80);

}

//constructor for daisy
function makeDaisy(fx, fy, fh) {
    var daisy = {x: fx, y: fy, height: fh, draw: drawDaisy}
    return daisy; //return daisy as object

}

//draw daisy
function drawDaisy() {
    fill(10, 200, 20);
    rect(this.x, this.y, 40, height);
    //petals
    for(var i = 0; i < 10; i++) {
        push();
        translate(this.x, this.y);
        noStroke();
        var rotationAngle = radians(36);
        rotate(i * rotationAngle);
        fill(255);
        ellipse(0, -60, 60, 160);
        pop();

    }

    fill("yellow");
    noStroke();
    circle(this.x, this.y, 80);

}

//constructor for sunflower
function makeSunflower(sx, sy, sh) {
    var sunflower = {x: sx, y: sy, height: sh, draw: drawSunflower}
    return sunflower;

}

function drawSunflower() {
    fill(10, 200, 20);
    rect(this.x, this.y, 40, height/2);
    for(var i = 0; i < 40; i++) {
        push();
        translate(this.x, this.y);
        var rotationAngle2 = radians(9);
        rotate(i * rotationAngle2);
        fill("yellow");
        ellipse(0, -80, 20, 180);
        pop();
    }
    fill(33, 12, 11);
    circle(this.x, this.y, 200);
}


//bee constructor
function makeBee(bx, by) {
    var bee = {x: bx, y: by, draw: drawBee}
    return bee;

}

function drawBee() {
    //wings
    stroke(0);
    fill(255);
    ellipse(beex[index]-5, beey[index]-30, 20, 40);
    ellipse(beex[index]+10, beey[index]-20, 20, 40);

    //body
    fill(0);
    ellipse(beex[index], beey[index], 60, 40);

    //stinger
    triangle(beex[index]+25, beey[index]+5, beex[index]+40, beey[index], beex[index]+25, beey[index]-5);

    //stripes
    noStroke();
    fill("yellow");
    rect(beex[index], beey[index]-20,5, 40);
    rect(beex[index]-10, beey[index]-20, 5, 40);
    rect(beex[index]+10, beey[index]-20, 5, 40);


}


Leave a Reply