![[OLD SEMESTER] 15-104 • Introduction to Computing for Creative Practice](../../../../wp-content/uploads/2023/09/stop-banner.png)
For this project, I created a scenery of life under ocean. The four elements in my drawing are a starfish, which makes a sound every 25 frames; a fish, which spits bubbles and make the bubble spitting sound every 15 frames; an octopus, which swimming in up-left direction and makes tentacle sound every 10 frames when it shrinks before the push to swim forward; and the beach on the soft moving ocean floor accompanied by the mysterious sound starting from the beginning of this animation. During the process, I struggled with matching the sound effects with the animation changes, but I made it working eventually.
sketchDownload
/*Name:Camellia(Siyun) Wang;
Section: C;
Email Address: siyunw@andrew.cmu.edu;
Assignment-10;*/
//This is a normal day of underocean life
//Violet little fish is spitting bubbles,
//octopus is swimming left upwards,
//and the starfish is just lying on the soft
//moving beach on the ocean floor
var x = 300;
var dir = 1;
var speed = 5;
var boing;
var xfish;
var yfish;
var dxfish;
var xoct;
var yoct;
var dyoct;
//setup the underwater beach
var marketvalue = [];
var noiseParam = 0;
var noiseStep=0.005;
var count;
//2 arrays to form the starfish
var x = [50, 61, 83, 69, 71, 50, 29, 31, 17, 39];
var y = [18, 37, 43, 60, 82, 73, 82, 60, 43, 37];
//sounds
var ocean;
//variables to change the background
var R = 102;
var G = 178;
var B = 255;
function preload(){
ocean = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/ocean.wav");
star = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/star.wav");
bubble = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/bubble.wav");
oct = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/oct.wav");
}
function setup() {
frameRate(3);
createCanvas(600, 400);
useSound();
count = 1;
//fish setup
xfish = 200;
yfish = 250;
dxfish = 15;
//oct setup
xoct = 0;
yoct = 0;
dyoct = 3;
//beach setup
for(var i = 0; i < 50*width; i++){
var n = noise(noiseParam);
var value = map(n,0,1,height / 1.5,height);
marketvalue.push(value);
noiseParam+=noiseStep;
}
}
function soundSetup(){
ocean.setVolume(0.1);
star.setVolume(0.3);
bubble.setVolume(0.5);
oct.setVolume(1);
}
function draw() {
ocean.play();
background(R,G,B);
//change background color
//from light blue to dim blue
//to show the change of time
//from day to night
R -= 3;
G -= 5;
B -= 2;
//draw the beach
draw_beach();
//draw fish
draw_fish();
xfish += dxfish;
if (xfish > width-25 || xfish < 25) {
dxfish = -dxfish;
}
//draw octopus
draw_oct();
yoct -= dyoct;
//draw starfish
draw_starfish();
count += 1;
//end of the short animation
if(count == 90){
background(0);
fill(255);
textSize(32);
text('The End', 250, 200);
noLoop();
ocean.stop();
star.stop();
bubble.stop();
oct.stop();
}
}
function draw_beach(){
marketvalue.shift();
var n = noise(noiseParam);
var value = map(n,0,1,height / 1.5,height);
marketvalue.push(value);
noiseParam+=noiseStep;
stroke(255,215,0);
fill(255,215,0);
beginShape();
for(var i = 0; i < 50*width; i++){
vertex(i*5,height);
vertex( i*5 ,marketvalue[i]);
vertex( i*5+5 ,marketvalue[i+1]);
vertex(i*5+5,height);
};
endShape();
noStroke();
}
function draw_fish() {
fill(127,0,255);
ellipse(xfish, yfish, 35, 20);
if (dxfish < 0) {
triangle(xfish+15, yfish, xfish+25, yfish-5, xfish+25, yfish+5);
} else {
triangle(xfish-15, yfish, xfish-25, yfish-5, xfish-25, yfish+5);
}
//bubles every 15 frames
//small first one
if(count % 15 == 0){
bubble.play();
if(dxfish > 0){
fill(224,255,255);
ellipse(xfish + 25, yfish - 5, 5, 5);
}
if(dxfish < 0){
fill(224,255,255);
ellipse(xfish - 25, yfish - 5, 5, 5);
}
}
//middle second one
if(count % 15 == 1){
bubble.play();
if(dxfish > 0){
fill(224,255,255);
ellipse(xfish + 25, yfish - 5, 5, 5);
ellipse(xfish + 35, yfish - 15, 10, 10);
}
if(dxfish < 0){
fill(224,255,255);
ellipse(xfish - 25, yfish - 5, 5, 5);
ellipse(xfish - 35, yfish - 15, 10, 10);
}
}
//large last one
if(count % 15 == 2){
bubble.play();
if(dxfish > 0){
fill(224,255,255);
ellipse(xfish + 25, yfish - 5, 5, 5);
ellipse(xfish + 35, yfish - 15, 10, 10);
ellipse(xfish + 45, yfish - 25, 15, 15);
}
if(dxfish < 0){
fill(224,255,255);
ellipse(xfish - 25, yfish - 5, 5, 5);
ellipse(xfish - 35, yfish - 15, 10, 10);
ellipse(xfish - 45, yfish - 25, 15, 15);
}
}
}
function draw_oct(){
if(count % 10 == 1){
//make sound when shrink to push
oct.play();
push();
translate(400,150);
rotate(-PI / 3);
fill(216,191,216);
strokeWeight(5);
stroke(216,191,216);
line(xoct-10,yoct+10,xoct-20,yoct+30);
line(xoct-20,yoct+30,xoct-10,yoct+50);
line(xoct+10,yoct+10,xoct+20,yoct+30);
line(xoct+20,yoct+30,xoct+10,yoct+50);
line(xoct,yoct+15,xoct,yoct+50);
ellipse(xoct,yoct,45,35);
noStroke();
pop();
}
else{
push();
translate(400,150);
rotate(-PI / 3);
fill(238,130,238);
stroke(238,130,238);
strokeWeight(5);
ellipse(xoct,yoct,30,50);
line(xoct-10,yoct+10,xoct-30,yoct+50);
line(xoct,yoct+15,xoct,yoct+55);
line(xoct+10,yoct+10,xoct+30,yoct+50);
noStroke();
pop();
}
}
function draw_starfish(){
push();
translate(450,300);
var nPoints = x.length;
fill(244,164,96);
if(count % 25 == 1){
fill(255,140,0);
star.play();
}
if(count % 25 == 2){
fill(255,140,0);
}
if(count % 25 == 3){
fill(255,140,0);
}
if(count % 25 == 4){
fill(255,140,0);
}
if(count % 25 == 5){
fill(255,140,0);
}
beginShape();
for (var i = 0; i < nPoints; i++) {
vertex( x[i] + random(-3,3), y[i] + random(-3,3) );
}
endShape(CLOSE);
pop();
}