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);
}