//Stefanie Suk
//15-104 D
//ssuk@andrew.cmu.edu
//Project-10-Sonic Sketch
var buttonA;var buttonB;var buttonC;var buttonD;functionpreload(){
buttonA =loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/snaredrum-1.wav");
buttonA.setVolume(1);
buttonB =loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/drumstick-1.wav");
buttonB.setVolume(1);
buttonC =loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/hitdrum.wav");
buttonC.setVolume(1);
buttonD =loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/lowdrum.wav");
buttonD.setVolume(1); //loading sound
}functionsetup(){
createCanvas (600,600);useSound();}functiondraw(){background(232,192,244);noStroke();fill(90);rect(85,115,400,400);fill("black");rect(100,100,400,400); //base of the beat maker
fill(100);
circle (158,150,50,50);fill(100);
circle (248,150,50,50);fill(100);
circle (338,150,50,50);fill(100);
circle (428,150,50,50); //upper circular button of beat maker
fill("white");rect(120,200,80,80);fill("yellow");rect(120,290,80,80);fill("yellow");rect(120,380,80,80);fill("red");rect(210,200,80,80);fill("white");rect(210,290,80,80);fill("white");rect(210,380,80,80);fill("blue");rect(300,200,80,80);fill("blue");rect(300,290,80,80);fill("blue");rect(300,380,80,80);fill(33,232,6);rect(390,200,80,80);fill(33,232,6);rect(390,290,80,80);fill("white");rect(390,380,80,80); //square buttons of the beat maker
}functionmousePressed(){if(mouseX <250& mouseY <250){
buttonA.play();}if(mouseX <250& mouseY >250){
buttonC.play();}if(mouseX >250& mouseY <250){
buttonB.play();}if(mouseX >250& mouseY >250){
buttonD.play(); //creating sound when click on button
}}
I wanted to create a beat making machine because I enjoy listening to music with interesting beat. I made the beat making machine create drum sounds when clicked.
// Kristine Kim
// Section D
// younsook@andrew.cmu.edu
// Project -10-Interactive Sonic Sketch
var vacuumnoise;var fridgenoise;var dogbarking;var outsidenoise;var keynoise;
//global variables for images
var vacuumpic;var dogpic;var keypic;functionpreload(){
//load pictures
var vacuumpicURL ="https://i.imgur.com/qbo0LSB.png[/img]"
vacuumpic =loadImage(vacuumpicURL);var dogpicURL ="https://i.imgur.com/j41YK4G.png[/img]"
dogpic =loadImage(dogpicURL);var keypicURL ="https://i.imgur.com/ozegqNz.png[/img]"
keypic =loadImage(keypicURL);
//load sounds
vacuumnoise =loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/vacuum.wav")
fridgenoise =loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/fridge.wav")
dogbarking =loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/dogbarking.wav")
outsidenoise =loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/birdsoutside.wav")
keynoise =loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/keys.wav")
// //vacuuming noise
// vacuumnoise = loadSound("vacuum.wav");
// //sound of fridge opening and closing
// fridgenoise =loadSound("fridge.wav");
// //sound of dog barking
// dogbarking = loadSound("dogbarking.wav");
// //sound of birds chirping outside
// outsidenoise = loadSound("birdsoutside.wav");
// //sound of key dropping on a table
// keynoise = loadSound("keys.wav");
}functionsetup(){createCanvas(500,400);useSound()}functionsoundSetup(){
//controlling the volume
vacuumnoise.setVolume(1);
fridgenoise.setVolume(1);
dogbarking.setVolume(1);
outsidenoise.setVolume(1);
keynoise.setVolume(1);}functiondraw(){background(255,247,135);
//dark brown outline around everything
stroke(102,77,27);strokeWeight(5);
//drawing the floor
fill(199,154,58);rect(-5,280,510,400);
//drawing the fridge
fill(245);rect(40,100,100,200); //fridge shadow
fill(176,174,169);rect(40,170,100,10); // handle
fill(0);rect(125,120,5,40);rect(125,190,5,80);
//drawing the windows
fill(184,241,252);rect(170,30,130,100);rect(350,30,130,100);line(235,30,235,130);line(170,80,300,80);line(415,30,415,130);line(350,80,480,80); //table legs
noStroke();fill(102,77,27);rect(210,240,12,70);rect(380,240,12,70);fill(71,54,20);rect(290,190,12,100);rect(450,190,12,100);
//drwing the table
fill(102,77,27);beginShape();vertex(280,190);vertex(480,190);vertex(280,190);vertex(200,240);vertex(400,240);vertex(480,190);endShape();
//drawing the vaccum image
image(vacuumpic,250,110,350,250);
//drawing the dog image
image(dogpic,5,200,300,200);
//drawing the keys image
image(keypic,260,195,40,40);}functionmousePressed(){
//If pressed on keys, play sound and if pressed somewher else, pause the sound
if(mouseX >260& mouseX <300&& mouseY >195&& mouseY <235){
keynoise.play();}else{
keynoise.pause();}
//If pressed on dog, play sound and if pressed somewher else, pause the sound
if(mouseX >80& mouseX <280&& mouseY >240&& mouseY <320){
dogbarking.play();}else{
dogbarking.pause();}
//If pressed on vacuum, play sound and if pressed somewher else, pause the sound
if(mouseX >300& mouseX <480&& mouseY >100&& mouseY <300){
vacuumnoise.play();}else{
vacuumnoise.pause();}
//If pressed on fridge, play sound and if pressed somewher else, pause the sound
if(mouseX >40& mouseX <140&& mouseY >100&& mouseY <300){
fridgenoise.play();}else{
fridgenoise.pause();}
//If pressed on right window, play sound and if pressed somewher else, pause the sound
if(mouseX >170& mouseX <300&& mouseY >30&& mouseY <130){
outsidenoise.play();}else{
outsidenoise.pause();}}
I wanted to create an environment and a setting for this project so I decided to create a kitchen/ living room. I was reminded of my childhood when I was working on this project because I used to play a lot of games where I was allowed to decorate my room or my house so I had a lot of fun with this one. The only problem that I had was that the sounds were not playing on WordPress but it works perfectly fine on a local server. I’m still having this problem, but I couldn’t figure it out. I have attached a zip file of my sounds so that it can be played on the local server.
//Zee Salman
//Project 10
// 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().)
functionpreload(){
stomach =loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/447911__breviceps__growling-stomach-stomach-rumbles-1.wav");
fart =loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/402628__inspectorj__whoopee-cushion-long-a-1.wav");
laugh =loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/259611__stevious42__baby-laugh-1.wav");
cry =loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/386923__gumballworld__baby-newborn-cry2-1.wav");
stomach.setVolume(5);}functionsetup(){createCanvas(500,500);}functiondraw(){ // you can replace any of this with your own code:
background(200); //baby head
noStroke();fill("brown");ellipse(width/2, height/4,100,120); //arms
rect(width/2.75, height/2.2,140,100); //baby top
fill("pink");ellipse(width/2, height/2,100,140);ellipse(width/2.5, height/2.25,50,60);ellipse(width/1.65, height/2.25,50,60); //chest
fill("brown");triangle(width/2.5,height/2.6,300,192, width/2,height/2); //baby tummy
fill("white");ellipse(width/2, height/1.9,70,90); //baby diapers
fill("gray")ellipse(width/2, height/1.63,100,90); //baby tummy
fill("pink");rect(width/2.5, height/1.95,100,40);fill("white");rect(width/2.32, height/1.98,69,30); //baby legs
fill("brown");ellipse(width/1.55,height/1.5,70,50);ellipse(width/2.65,height/1.5,70,50);fill("pink");ellipse(width/2.35,height/1.5,50,50);ellipse(width/1.7,height/1.5,50,50); //baby neck
fill("brown");rect(width/2.22, height/4,50,90); //hair
fill("black");ellipse(width/2, height/5.5,90,60); //eyes
fill("black");ellipse(width/2.2, height/3.8,15,15);ellipse(width/1.85, height/3.8,15,15); //pacifier
fill("white");ellipse(width/2, height/3.2,30,20);fill("pink");ellipse(width/2, height/3.2,10,15);}functionmousePressed(){ //click on the baby's bib/ stomach
if(mouseX < width/2+30& mouseX > width/2-30&& mouseY < height/2+40&& mouseY > height/2-40){
stomach.play();}else{
stomach.pause();} //click on the baby's neck/pacifier area
if(mouseX < width/2+10& mouseX > width/2-30&& mouseY < height/2+20&& mouseY > height/4){
laugh.play();}else{
laugh.pause();} //click on the baby's diaper
if(mouseX < width/2+10& mouseX > width/2-30&& mouseY < height/1.5&& mouseY > height/1.7){
fart.play();}else{
fart.pause();} //click on the bab'ys left leg
if(mouseX < width/1.55+10& mouseX > width/2.55-10&& mouseY < height/1.5+20&& mouseY > height/1.7){
cry.play();}else{
cry.pause();}}
I wanted to create a sketch that was cohesive but still had different sounds that would be interesting when put together. I was inspired when I was walking past a woman who had two kids, one was crying and one was laughing. Babies make a variety of sounds and these are just a few interesting ones.
For this project I started with my project 7 because it was one of my favorite projects that I have created. In that project the geometries change as the mouse is moved so I added a pitch that changes as the mouse is moved. I then added 4 differently sized circles that are centered on the canvas and when you click on each of them they produce a different sound. The smallest sound, the ding is heard when the smallest circle is clicked, then the dream sound for the second circle, mail sound for the third circle, and the loudest sound, the blare for the outermost circle. The sounds were taken from freesound.org.
//Taisei Manheim
//Section C
//tmanheim@andrew.cmu.edu
//Assignment-10
functionpreload(){ // call loadImage() and loadSound() for all media files here
ding =loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/ding.wav");
ding.setVolume(1.0);
dream =loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/dream.wav");
dream.setVolume(1.0);
mail =loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/mail.wav");
mail.setVolume(1.0);
blare =loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/blare.wav");
blare.setVolume(1.0);}functionsetup(){createCanvas(480,480);useSound();}functionsoundSetup(){ // setup for audio generation
// you can replace any of this with your own audio code:
osc =newp5.TriOsc();
osc.freq(500.0);
osc.amp(0.1);
osc.start();}functiondraw(){ //background color determined by mouse
background(mouseX, mouseY, mouseX - mouseY);noFill(); //ellipse
stroke(255);ellipse(width /2, height /2,600,600);ellipse(width /2, height /2,450,450);ellipse(width /2, height /2,300,300);ellipse(width /2, height /2,150,150);stroke(0);drawHypotrochoidCurve()drawRanunculoidCurve() //background pitch based on mouseX and mouseY values
osc.freq(mouseX + mouseY /1.5);}functionmousePressed(){ //if click within first circle play ding sound
var a =dist(mouseX, mouseY, width /2, height /2);if(a <75){
ding.play();} //if click within second circle play dream sound
var b =dist(mouseX, mouseY, width /2, height /2);if(b >75& b <150){
dream.play();} //if click within third circle play mail sound
var c =dist(mouseX, mouseY, width /2, height /2);if(c >150& c <225){
mail.play();} //if click within fourth circle play blare sound
var d =dist(mouseX, mouseY, width /2, height /2);if(d >225& c <300){
blare.play();}}functiondrawHypotrochoidCurve(){ //http://mathworld.wolfram.com/Hypotrochoid.html
//mouse only affects image while on canvas
var x =constrain(mouseX,0, width);var y =constrain(mouseY,0, height); //changes speed in which it changes so that as you move away from center image changes
var a =map(x,0, width,0, width /64);var b =map(y,0, height,0, height /64);var h = width /2;push();translate(width /2, height /2); // starts in the center of the canvas
noFill();beginShape();for(var i =0; i <360; i +=1){var x =(a - b)*cos(i)+ h *cos((a - b)* i);var y =(a - b)*sin(i)- h *sin((a - b)* i);vertex(x, y);}endShape();pop();}functiondrawRanunculoidCurve(){ //http://mathworld.wolfram.com/Ranunculoid.html
//mouse only affects image while on canvas
var x =constrain(mouseX,0, width);var y =constrain(mouseY,0, height); //changes speed in which it changes
var a =map(x,0, width,0, width /8);var b =map(y,0, height,0, height /8);push();translate(width /2, height /2); // starts in the center of the canvas
rotate(mouseX/ mouseY);noFill();beginShape();for(var i =0; i <360; i +=1){var x = a *(6*cos(i)-cos(6* i));var y = a *(6*sin(i)-sin(6* i));vertex(x, y);}endShape();pop();}
//Siwei Xie
//Section B
//sxie1@andrew.cmu.edu
//Project-10-sonic sketch
var img;var dog;functionpreload(){ //load "pets" image from imgur
img =loadImage("https://i.imgur.com/iqyeVWW.png"); //load sound tracks
// dog = loadSound("dog.wav");
// cat = loadSound("cat.wav");
// bird = loadSound("bird.wav");
// fish = loadSound("fish.wav");
dog =loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/dog.wav");
cat =loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/cat.wav");
bird =loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/bird-1.wav");
fish =loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/fish.wav");}functionsetup(){createCanvas(466,350);}functiondraw(){background(100); //scale the image according to canvas size
image(img,1,1,
img.width *0.4, img.height *0.4);}functionmousePressed(){ //play "dog" track when clicking on upper left area
if(mouseX <233& mouseY <175){
dog.play();} //play "cat" track when clicking on upper right area
if(mouseX >233& mouseY <175){
cat.play();} //play "bird" track when clicking on lower left area
if(mouseX <233& mouseY >175){
bird.play();} //play "fish" track when clicking on lower right area
if(mouseX >233& mouseY >175){
fish.play();}}
I used 4 sound tracks for this project and created a “pet zoo.” The tracks contain dog barks, cat meows, fish bubbling and bird singing. You can play different sound tracks by clicking on different section of the image. I had fun creating this project because it enables me to insert sounds into post and make it interesting.
Originally, I was going to do Goku’s Super Saiyan transformation from Dragon Ball Z, since that show involves a lot of yelling and loud sounds. However, I decided to do an image from the movie My Neighbor Totoro. The image I chose was the cover, with the character Satsuki standing at a bus stop in the rain next to Totoro. I was originally going to color their outlines, but decided to base the color scheme off the Studio Ghibli’s logo and use their blue color with white outlines. I was pretty accurate with recreating the cover, although mine was more simplistic since there are only two colors and the background is left out. The only other changes I made were to the sign, where instead of the actual sign from the cover I put a soot sprite, a little acorn sprout, and the mini white Totoro, all from the movie, and on the ground near the sign, where I added little sprouts. I used A LOT of the bezier() element to recreate the image.
My Sounds
The rain is a constant sound that isn’t variable in any way
If the user presses the center of the umbrella, the sound of rain hitting an umbrella appears.
If the user presses Totoro’s stomach, the sound of him growling/rumbling appears
If the user presses Totoro’s leaf, the sound of rain hitting a leaf appears
These are the areas where the user should press in order to trigger the sounds
The original image I used as a reference for my code
var umbPnt1X =123;//front middle umbrella point X
var umbPnt1Y =421;//front middle umbrella point Y
var umbPnt2X =167;//X point right of umbPnt1
var umbPnt2Y =422;//Y point right of umbPnt1
var umbPnt3X =190;//X point right of umbPnt2
var umbPnt3Y =429;//Y point right of umbPnt2
var umbPnt4X =169;//X point left of umbPnt3
var umbPnt4Y =437;//Y point left of umbPnt3
var umbPnt5X =66;//X point left of umbPnt4
var umbPnt5Y =435;//Y point left of umbPnt4
var umbPnt6X =36;//X point left of umbPnt5
var umbPnt6Y =431;//Y point left of umbPnt5
var umbPnt7X =65;//X point right of umbPnt6
var umbPnt7Y =425;//Y point right of umbPnt6
var rain;//will hold rain sound
var umbrellaRain;//will hold rain on umbrella sound
var growl;//will hold growl sound
functionpreload(){ //sorry that this goes over the 80 limit. I couldn't separate the links
//because there would be a big pink bar meaning there were issues
rain =loadSound('https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/rain-1.wav');//loads sound of rain
umbrellaRain =loadSound('https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/umbrellaRain.wav');//loads rain on umbrella sound
leafRain =loadSound('https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/leafRain.wav');//loads sound of rain on leaves
growl =loadSound('https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/growl.wav');//loads sound of growl
}functionsetup(){createCanvas(430,600);useSound();//calls sound
}functionsoundSetup(){ // setup for audio generation
rain.setVolume(0.5);//sets rain volume
umbrellaRain.setVolume(0.4);//sets umbrella rain volume
leafRain.setVolume(0.4);
growl.setVolume(0.3);//sets growl volume
rain.loop();//loops rain audio so it keeps replaying
}functiondraw(){background(100,174,236);//blue
//----------------------------------------------------------------------------
//__________________________DRAWING__________________________
//RAIN
//---rain lines
push();var r =5;var R =8;var n =10;strokeWeight(.35);line(r *5, r *20, r *5,r *30);line(r *15, r *25, r *15,r *35);line(r *20, r *35, r *20,r *45);line(r *25, r *55, r *25,r *65);line(r *30, r *10, r *30,r *20);line(r *45, r *25, r *45,r *35);line(r *45, r *46, r *45,r *58);line(r *50, r *15, r *50,r *25);line(r *55, r *5, r *55,r *15);line(r *60, r *10, r *60,r *20);line(r *60, r *20, r *60,r *30);line(r *65, r *28, r *65,r *41);line(R *5, R *20, R *5,R *30);line(R *15, R *15, R *15,R *23);line(R *20, R *35, R *20,R *45);line(R *30, R *10, R *30,R *20);line(R *45, R *25, R *45,R *35);line(R *50, R *15, R *50,R *25);line(R *55, R *5, R *55,R *15);line(R *60, R *10, R *60,R *20);line(R *60, R *20, R *60,R *30);line(R *65, R *45, R *65,R *55);line(n *1, n *40, n *1, n *50);line(n *3, n *37, n *3, n *42);line(n *3, n *50, n *3, n *60);line(n *2, n *22, n *2, n *30);line(n *7, r *5, n *7, r *15);line(n *7, n *10, n *7, n *20);line(n *9, n *50, n *9, n *55);line(n *10, n *30, n *10, n *37);line(n *18, n *15, n *18, n *22);line(n *17, n *.5, n *17, n *5);line(n *37, n *1, n *37, n *7);pop();strokeWeight(.5); //SIGN
stroke('white');ellipse(52,324,68,68);//sign
line(20,314,84,314);//top line
line(20,334,84,334);//bottom line
line(48,358.5,48,409.5);//left side of pole top
line(56,358.5,56,404);//right side of pole top
line(48,430,48,574);//left side of pole bottom
line(56,431.5,56,574);//right side of pole bottom
bezier(48,574,51,575,53,575,56,574);//bottom of pole
fill('white'); //---soot sprite
var sprtSize =8;//sprite size
var sprtCrdX =30;//sprite X coordinate
var sprtCrdY =324;//sprite Y coordinate
ellipse(sprtCrdX,sprtCrdY, sprtSize,sprtSize);//body
//~~~spikes
push();strokeWeight(.8);line(sprtCrdX -5.5,sprtCrdY, sprtCrdX +5.5,sprtCrdY);//horizontal
line(sprtCrdX -1,sprtCrdY -5.5, sprtCrdX +1,sprtCrdY +5.5);//1L
line(sprtCrdX +1,sprtCrdY -5.5, sprtCrdX -1,sprtCrdY +5.5);//1R
line(sprtCrdX -2,sprtCrdY -5, sprtCrdX +2,sprtCrdY +5);//2L
line(sprtCrdX +2,sprtCrdY -5, sprtCrdX -2,sprtCrdY +5);//2R
line(sprtCrdX -3,sprtCrdY -4.5, sprtCrdX +3,sprtCrdY +4.5);//3L
line(sprtCrdX +3,sprtCrdY -4.5, sprtCrdX -3,sprtCrdY +4.5);//3R
line(sprtCrdX -4,sprtCrdY -4, sprtCrdX +4,sprtCrdY +4);//4L
line(sprtCrdX +4,sprtCrdY -4, sprtCrdX -4,sprtCrdY +4);//4R
line(sprtCrdX -5,sprtCrdY -2, sprtCrdX +5,sprtCrdY +2);//5L
line(sprtCrdX +5,sprtCrdY -2, sprtCrdX -5,sprtCrdY +2);//5R
line(sprtCrdX -4.5,sprtCrdY -3, sprtCrdX +4.5,sprtCrdY +3);//6L
line(sprtCrdX +4.5,sprtCrdY -3, sprtCrdX -4.5,sprtCrdY +3);//6R
line(sprtCrdX -5.5,sprtCrdY -1, sprtCrdX +5.5,sprtCrdY +1);//7L
line(sprtCrdX +5.5,sprtCrdY -1, sprtCrdX -5.5,sprtCrdY +1);//7R
line(sprtCrdX,sprtCrdY -5.5, sprtCrdX,sprtCrdY +5.5);//vertical
pop(); //---eyes
//~~~whites
push();push();stroke(100,174,236);//blue
ellipse(sprtCrdX -2.1,sprtCrdY, sprtSize /2.4,sprtSize /2.4);ellipse(sprtCrdX +2.1,sprtCrdY, sprtSize /2.4,sprtSize /2.4);pop(); //~~~pupils
fill(100,174,236);//blue
ellipse(sprtCrdX -2.1,sprtCrdY, sprtSize /4,sprtSize /4);ellipse(sprtCrdX +2.1,sprtCrdY, sprtSize /4,sprtSize /4);pop(); //---white mini totoro
ellipse(74,324,10,12);//body
ellipse(74,326,11,10);//bottom
//~~~ears
bezier(69.5,322,70.5,313.5,71,313.5,72,320);//left ear
bezier(78.5,322,77,313.5,76.5,313.5,75.5,320);//right ear
//---eyes
push();stroke(100,174,236);//blue
//~~~whites
ellipse(72,322,3.5,3.5);//left
ellipse(76,322,3.5,3.5);//right
//~~~pupils
fill(100,174,236);//blue
ellipse(72,322,1.2,1.2);//left
ellipse(76,322,1.2,1.2);//right
pop(); //---plants
var stemX =52//stem X of sign plant
var stemY =320;//stem Y of sign plant
var leafW =7;//leaf width of sign plant
var leafH =2.5;//leaf height of sign plant
//~~~on sign
line(stemX,stemY +8, stemX,stemY);//stem
ellipse(stemX +4,stemY, leafW,leafH);//right leaf
ellipse(stemX -4,stemY, leafW,leafH);//left leaf
//~~~on ground
line(stemX -4,576, stemX -4,573);//stem (left of pole)
ellipse(stemX -6,stemY +252, leafW -3,leafH -.5);//right leaf
ellipse(stemX -2,stemY +252, leafW -3,leafH -.5);//left leaf
line(stemX +11,575, stemX +11,567);//stem (right of pole big)
ellipse(stemX +14.5,stemY +247, leafW -1,leafH);//right leaf
ellipse(stemX +7.5,stemY +247, leafW -1,leafH);//left leaf
line(stemX +14,576, stemX +14,573);//stem (right of pole small 1)
ellipse(stemX +16,stemY +252, leafW -3,leafH -.5);//right leaf
ellipse(stemX +12,stemY +252, leafW -3,leafH -.5);//left leaf
line(stemX +16.5,581, stemX +16.5,579);//stem (right of pole small 2)
ellipse(stemX +18.5,stemY +258, leafW -3,leafH -.5);//right leaf
ellipse(stemX +14.5,stemY +258, leafW -3,leafH -.5);//left leaf
line(stemX +24,577, stemX +24,574);//stem (right of pole small 3)
ellipse(stemX +26,stemY +254, leafW -3,leafH -.5);//right leaf
ellipse(stemX +22,stemY +254, leafW -3,leafH -.5);//left leaf
line(stemX +29,578, stemX +29,577.5);//stem (right of pole small 4)
ellipse(stemX +30.5,stemY +256.3, leafW -4,leafH -.5);//right leaf
ellipse(stemX +27.5,stemY +256.3, leafW -4,leafH -.5);//left leaf
line(stemX +37.5,580, stemX +37.5,579.5);//stem (right of pole small 5)
ellipse(stemX +38.7,stemY +258.5, leafW -5,leafH -1.5);//right leaf
ellipse(stemX +36.2,stemY +258.5, leafW -5,leafH -1.5);//left leaf
noFill(); //TOTORO
//---eyes
stroke(255);//WHITE
ellipse((width /2)+37,(height /2)+6,23,22);//left eyeball
ellipse((width /2)+120,(height /2)+6,23,22);//right eyeball
ellipse((width /2)+37,(height /2)+6,6,6);//left pupil
ellipse((width /2)+120,(height /2)+6,6,6);//right pupil
push();noStroke();ellipse((width /2)+39,(height /2)+6,1,2);//left eye shine
ellipse((width /2)+122,(height /2)+5.5,1,1);//right eye shine
pop(); //---nose
stroke(255);bezier(277,308,283,309,292,310,294,312);//left bottom line
bezier(311,308,303,309,299,310,294,312);//right bottom line
bezier(277,308,289,302,300,302,311,308);//top of triangle
bezier(277,308,289,298,300,298,311,308);//top arc
//~~~nostrils
push();fill(100,174,236);ellipse(286,309,4,4);//left
ellipse(301,309,4,4);//right
pop(); //---whiskers
//~~~right
line(332,321,395,318);//top
line(339,326,392,326);//middle
line(338,331,399,338);//bottom
//~~~left
line(252,321,186,319);//top
line(243,327,187,330);//middle
line(250,332,192,344);//bottom
//---ears
//~~~left
bezier(252,214,241,245,243,256,242,264);//left side top
bezier(252,214,258,231,266,242,267,257);//right side top
bezier(242,264,243,265,245,266,248,266);//left side bottom
bezier(267,257,266,259,265,261,262,264);//right side bottom
bezier(248,266,249,269,249,273,249,276);//stem left
bezier(262,264,261,266,262,270,264,271);//stem right
//~~~right
bezier(338,214,330,229,326,248,325,258);//left side top
bezier(338,214,341,227,348,254,345,264);//right side top
bezier(325,258,326,260,328,261,329,262);//left side bottom
bezier(345,264,344,265,343,265,342,265);//right side bottom
bezier(329,262,329,263,329,264,328,267);//stem left
bezier(342,265,342,268,340,275,342,278);//stem right
//---head
bezier(249,276,223,290,215,325,207,353);//left side
bezier(264,271,266,271,268,271,271,270);//left bit next to ear
bezier(342,278,368,292,368,325,377,344);//right side
//---Leaf
//~~~stem
bezier(295,265,300,261,298,245,296,240);//right side
bezier(296,240,297,238,298,238,299,238);//top
bezier(299,238,301,246,302,259,300,267);//left side
//~~~base
bezier(273,272,278,285,289,284,295,280);//left front lump
bezier(295,280,302,273,310,275,313,278);//middle front lump
bezier(313,278,319,281,326,280,328,274);//right front lump
bezier(328,274,328,270,328,264,326,262);//right of right lump
bezier(326,262,322,261,313,263,308,264);//right front lump top
bezier(308,264,306,264,303,264,301,264);//small bit right if stem
bezier(296,263,286,259,277,258,270,266);//back lump
bezier(265,271,264,262,270,267,273,272);//leftest lump
line(267,266,281,265.5);//line detail
//---body
//~~~stomach
strokeWeight(.5);bezier(361,372,327,332,257,332,227,372);//top curve
bezier(227,372,210,395,200,434,198,464);//left top
bezier(361,372,380,395,385,434,387,465);//right top
bezier(361,562,342,589,250,590,226,562);//bottom
bezier(387,465,391,515,376,543,361,562);//right bottom
bezier(198,464,194,501,206,541,226,562);//left bottom
//~~~markings (from right to left and top to bottom)
bezier(231,382,238,368,241,367,247,378);//top 1
bezier(231,382,236,377,241,374,247,378);//bottom 1
bezier(259,374,266,362,269,362,278,372);//top 2
bezier(259,374,265,370,270,370,278,372);//bottom 2
bezier(295,372,302,360,304,360,315,371);//top 3
bezier(295,372,300,368,309,368,315,371);//bottom 3
bezier(331,374,337,361,340,366,349,377);//top 4
bezier(331,374,336,370,343,372,349,377);//bottom 4
bezier(211,423,215,409,219,408,221,418);//top 5
bezier(211,423,214,419,216,416,221,418);//bottom 5
bezier(240,416,247,400,250,398,257,413);//top 6
bezier(240,416,245,410,252,409,257,413);//bottom 6
bezier(278,410,286,394,291,394,297,410);//top 7
bezier(278,410,285,404,290,405,297,410);//bottom 7
bezier(321,410,328,395,329,397,341,413);//top 8
bezier(321,410,328,405,334,408,341,413);//bottom 8
bezier(358,415,362,403,365,403,372,418);//top 9
bezier(358,415,362,410,366,410,372,418);//bottom 9
//~~~arms
bezier(207,353,193,373,188,401,185,417.5);//left top outer
bezier(184,428,179,452,179,493,192,503);//left bottom outer
bezier(377,344,406,390,407,440,410,455);//top right outer
bezier(410,455,410,469,406,498,394,509);//bottom right outer
bezier(206,396,194,425,190,473,192,503);//left inner
bezier(390,403,396,445,396,479,394,509);//right inner
//~~~legs
//L
bezier(192,503,192,532,206,566,226,576.5);//left outer
bezier(243,580,249,582,261,582,268,581);//left bottom
//R
bezier(359,580,352,581,338,582,326,580);//right bottom
bezier(394,509,394,537,390,561,375,576);//right outer
//---claws
//~~~on hands
bezier(186,495,183,505,185,506,189,500);//left of left
bezier(190,501,181,517,183,517,192,506);//right of left
bezier(402,496,409,508,408,509,400,500);//right of right
bezier(399,502,406,512,405,514,397,505);//middle of right
bezier(396,507,398,513,398,515,394,510);//bottom of right
//~~~on feet
//L
bezier(229,576.5,207,578,210,580,221,580);//leftest claw of left
bezier(220,581,227,576,234,576,237,579);//top of middle of left
bezier(220,581,226,580,232,579,237,579);//top of middle of left
bezier(243,580,239,578,237,579,235,581);//top of rightest of left
bezier(243,580,240,581,237,582,235,581);//bottom of rightest
//R
bezier(373,576,378,576,383,577,387,581);//top of rightest of right
bezier(373,576,371,580,382,579,387,581);//bottom of rightest of right
bezier(365,579,369,576,374,578,381,583);//top of middle of right
bezier(365,579,370,580,374,581,381,583);//bottom of middle of right
bezier(359,580,362,577,365,579,370,582.5);//top of leftest of right
bezier(359,580,362,581,365,582,370,582.5);//bottom of leftest of right
//----------------------------------------------------------------------------
//SATSUKI
//---Head
bezier(110.5,450,116,456,127,458,134,450);//bottom
bezier(134,450,134,445,136,440,137,439);//right cheek
line(109,447.5,109.5,448.5);//left little cheek
//~~~ears
bezier(107,447,101,441,105,436,108,442);//left
line(107,447,109,447.5);//left lobe
line(105,441,108,444);//left line
bezier(134.5,447,137,447,140,443,137,439);//right
bezier(135,445,137,443,137,441,136,440);//right line
//---neck
line(118,455.,118,457);//left side
line(125.5,455.5,125.5,458);//right side
//---Face
//~~~blush
ellipse(113,444,2,1);//left
ellipse(132,444,2,1);//right
//~~~mouth
bezier(121,452,122,450,124,450,125,452);//mouth
line(122.6,453,123.4,453);//bottom lip
//~~~nostrils
point(121,443);//left
point(123,443);//right
//~~~eyebrows
bezier(112,434,114,432,115,432,117,434);//left
bezier(127,434,129,432,130,432,132,434);//right
//---eyes
//~~~outline
//L
bezier(112,439,112,435,116,435,117,438);//left top
line(129,442,130.5,442);//left bottom
//R
bezier(127,438,129,435,131,435,132.5,439);//right top
line(114,442,115.5,442);//right bottom
//~~~pupils
ellipse(114.5,439,2,3);//left
ellipse(129.5,439,2,3);//right
//---Hair
//~~~inner
bezier(137,439,137,434,137,426,132,423);//right inner
bezier(108,442,108,438,107,434,109.5,432);//left inner
//~~~details
bezier(110.5,431.5,113,430,118,429,121,429);//bang bottom
bezier(121,429,123,428,124,426,125,424);//bang right
bezier(123.5,429,126,426,126,425,125,424);//big hair piece left
bezier(123.5,429,128,428,130,423,129,421);//big hair piece right
bezier(129,421,130.5,426,131,426,132,423);//small hair piece
//~~~outer
bezier(104,440,99,431,102,421,106,418);//outer left
bezier(138,440,144,438,143,421,136,417);//outer right
//~~~pony tails
//L
bezier(85,440,87,436,89,431,97,429);//left top of left
bezier(85,440,87,438,88,437,89,435);//left bit of left
bezier(87.5,438,85,440,86,445,90,450);//left bottom of left
bezier(90,450,97,446,100,442,100,441);//right bottom of left
bezier(100,441,101,437,100,433,99.5,434);//right top of left
//R
bezier(146,429,154,431,157,438,157,442);//right top of right
bezier(152,450,154,448,155,447,155,447);//right bottom of right
bezier(152,450,151,449,149,448,149,448);//left bottom of right bottom
bezier(142,442,142,442,143,443,145,445);//left bottom of right top
line(141.5,436,142,442);//left top of right
//~~~hair tie balls
//R
ellipse(144.5,428,4,4);//right front
ellipse(143.5,426,4,4);//right back
//L
ellipse(99,428,4,4);//left front
ellipse(100,424,4,4);//left back
ellipse(99,432,4,4);//left back bottom
//---Clothes
//---shirt
bezier(132.5,485,132,483,132,483,132,481);//right side bottom
bezier(132,481,134.5,477,133,473,133.5,466.5);//right side top
//~~~collar
//L
bezier(113.5,458,114,459,113,463,115.5,467);//collar left outer
bezier(117,456,117,457,119,460,122.5,461);//collar left inner
bezier(117,456,116,456,115,458,113.5,458);//collar left back
bezier(115.5,467,119,465,121,461,122.5,461);//collar left middle
//R
bezier(129,466,130,464,131,461,130,458);//collar right outer
bezier(126,456,127,457,124,460,122.5,461);//collar right inner
bezier(126,456,128,455,129,458,130,458);//collar right back
bezier(129,466,127,466,124,463,122.5,461);//collar right middle
//M
ellipse(122,465,2,2);//button
//~~~sleeves
//L
bezier(107,458,109,458,111,459,113.5,458);//left top of shoulder
bezier(107,458,102,461,103,469,100,474);//left of left sleeve
bezier(105,477,99,472,98,474,104,478);//opening of left
//R
bezier(130,458,133,459,135,458,136,459);//right top of shoulder
bezier(136,459,140,460,141,467,141,468);//right of right sleeve
bezier(133.5,477,136,476,137,475,140,472);//opening of right
line(133.5,470,135,467.5);//crease
//~~~skirt
bezier(95.5,513,98.7,513,102,492,111,488);//left side
bezier(95.5,513,96,519,105,515,114,521);//bottom right
bezier(114,521,127,523,140,520,147,515);//bottom left
bezier(147,515,141,509,142,494,133,489);//right side
bezier(133,489,133,487,133,486,133,485);//right band
bezier(116,485,120,486.2,127,486.4,133,485);//top
line(119,489.5,125,489.5);//bottom band line
//~~~skirt straps
//R
bezier(129,466,128.5,480,128.5,471,129,486);//left of right strap
bezier(130.5,485,131,479,132,469,131,458);//right of right strap
//L
line(112.5,484,113,472);//left of left strap bottom
bezier(112.5,465,113,462,113,460,113.5,458);//left of left strap top
line(115.5,474,115.5,467);//right of left strap
//~~~skirt buttons
ellipse(115,487,3,3);//left
ellipse(130,487,3,3);//right
//---umbrellas
//~~~handle
//pink
bezier(109,477.5,107,491,118,491,117,476);//outer loop
bezier(111,476.5,110,487,116,487,114.5,476);//inner loop
bezier(114.5,476,115.5,474,116,474,117,476);//top of loop
bezier(109,466,109,462,111,462,111,466);//top of handle
//black
bezier(142,456,142,436,166,438,162,456);//outer loop curve
bezier(141,469,142,463,142,459,142,456);//outer loop line
bezier(147,456,147,442,160,444,157,456);//inner loop curve
bezier(146,469,146,464,147,461,147,456);//inner loop line
bezier(157,456,157.5,461,161.5,461,162,456);//bottom of loop
bezier(141,469,143,469.5,144,469.5,146,469);//bottom line
bezier(141,469,139.5,470,140,470,140,472);//left side of rectangle
bezier(146,469,147,471,146,471,146,472.5);//right side of rectangle
line(140,472,143,472);//bottom of rectangle
//~~~umbrella body
//R
bezier(136,532,137,528,138,523,139,519);//bottom part near leg
bezier(142,503,145,498,143,494,143,492);//middle of right
bezier(143,490,150,485,150,485,146,481);//top of right
//L
bezier(137,492,137,485,136,479,138,479);//left long bit
line(141,473,141,472);//left short bit
//S
bezier(143,492,143.5,491,143.5,491,143,490);//right of strap
bezier(137,489,138.5,490.5,141,490.5,143,490);//top of strap
bezier(137,492,139.5,493,141,493,143,492);//bottom of strap
//D
line(145,482,147.5,485);//detail right diagonal
line(144,488,145,483);//detail vertical right
line(143,487,143.5,485);//detail vertical (small)
line(141.5,487,142,481);//detail vertical left
line(139,488,139.5,479);//detail vertical (long)
line(141.5,493,142,495);//detail bottom right
line(140,493,139.5,494);//detail bottom left
push(); //~~~stem
strokeWeight(.5);line(110,463,110,418);//left
line(110.5,463,110,418);//right
pop(); //~~~arcs
bezier(umbPnt1X,umbPnt1Y,137,414,159,415, umbPnt2X,umbPnt2Y);//arc 1--
//--(right of p1)
bezier(umbPnt2X,umbPnt2Y,180,421,186,425, umbPnt3X,umbPnt3Y);//arc 2
bezier(189,428,183,427,174,429, umbPnt4X,umbPnt4Y);//arc 3
bezier(153,433,157,432,163,432, umbPnt4X,umbPnt4Y);//arc 4
bezier(89,433,84,432,73,432, umbPnt5X,umbPnt5Y);//arc 5
bezier(umbPnt5X,umbPnt5Y,58,430,47,428,38.3,430);//arc 6
bezier(umbPnt6X,umbPnt6Y,44,425,55,421, umbPnt7X,umbPnt7Y);//arc 7
bezier(umbPnt7X,umbPnt7Y,83,416,114,416, umbPnt1X,umbPnt1Y);//arc 8--
//--(left of p1)
//~~~dividing lines
bezier(81,395.5,50,401,36,420, umbPnt6X,umbPnt6Y);//leftest outline
bezier(88,393,74,396,66,412, umbPnt7X,umbPnt7Y);//left line
bezier(118,391,124,400,123,416, umbPnt1X,umbPnt1Y);//middle line
bezier(145,392,163,397,166,413, umbPnt2X,umbPnt2Y);//rightline
bezier(154,396,180,403,187,419, umbPnt3X,umbPnt3Y);//rightest outline
bezier(118,391,108,393,98,393,88,393);//top left
bezier(118,391,128,393,139,392,145,392);//top right
bezier(161,419.3,167,425,168,432, umbPnt4X,umbPnt4Y);//underneath right
bezier(74,421.9,69,427,68,431, umbPnt5X,umbPnt5Y);//underneath left
//---Limbs
//~~~arms
//L
bezier(105,489,101,483,102,480,105,477);//left of left arm
bezier(105,489,108,488,108,487,109,486);//bottom of left arm
//R
bezier(134.5,477,135,480,136,482,136.5,484);//right arm
//~~~hands
strokeWeight(.7);bezier(105,477,104,474,104.5,471,104.5,469);//left hand left side
bezier(104.5,469,107,466,110,466,112,466.5);//left hand top
bezier(109,477.5,111,476,112,476,112,476);//left hand bottom
//~~~fingers
//L
bezier(108,469,114,468,111,469,112,466.5);//top finger left
bezier(108,471.5,113,470,112,472,112,469);//2nd left
bezier(109,474,113,473,112,473,112,471);//3rd left
bezier(112,476,112.5,475.5,112.5,475,112,474);//bottom left
bezier(112,468,114,470,114,471,112,473);//thumb left
//R
bezier(145,472.5,147,473,147,478,146,481);//right side
bezier(145,472.5,139,473.5,139,476,146,474.5);//top finger right
bezier(146,475,140,476,140,477,146,477);//2nd right
bezier(146,477,141,478.5,141,479.5,146,479);//3rd right
bezier(146,479,142,481,142,481,146,481);//bottom right
bezier(137,479,137,475,138,474,141,472.5);//thumb right outer
bezier(137,479,137,480.5,142,474,140,474);//thumb right inner
//~~~legs
//L
bezier(109,547,108,543,106,535,109.5,526);//calf of left leg
bezier(109.5,526,110,523,109.5,522,108.5,518.5);//left of left leg top
bezier(118,547,118,540,120,528,119,522);//right of left leg
bezier(111,526.5,111,527,111,527,113,528.5);//detail left leg
//R
bezier(135,548,136,540,137,533,135,527);//calf of right leg
bezier(135,527,135,525,134.5,523,135.5,520);//left of right leg top
bezier(127,548,126.5,540,124,526,124.5,522);//left of right leg
bezier(127,529,127.5,530,128,530,128,531);//detail right leg left
line(132,530,133,529);//detail right leg right
//~~~boots
//L
bezier(107,547,111,548,114,548,118,547);//top curve of left
bezier(108,545,103.5,544,105,564,107,569);//left of left side top
bezier(107,569,106,572,104,575,106,577);//left of left side bottom
bezier(106,577,110,584,119,580.5,121,580);//bottom curve of left
bezier(121,580,122,576,121,573,119,570);//right of right side bottom
bezier(119,570,120,559,123,546,118,545);//right of left side top
//R
bezier(126,547,127,549,133,549,137,547);//top curve of right
bezier(135,545.5,142.5,545,137,563,137,570);//right of right side top
bezier(137,570,138,574,139,577,138,580);//right of right side bottom
bezier(138,580,134,582,127,582,123,580);//bottom curve of right
bezier(123,580,122,577,124,573,125,569);//left of right side bottom
bezier(125,569,125,558,121,545,127,546);//right of right side top
}functionmousePressed(){//if mouse is pressed...
//if the mouse is pressed between these specific areas, then...
if(dist(mouseX,mouseY,294,440)<85){///growl
growl.play();//plays growl audio
}if(dist(mouseX,mouseY,115,406)<75){///umbrella rain
umbrellaRain.play();//plays rain on umbrella audio
}if(dist(mouseX,mouseY,297,269)<65){//leaf rain sound
leafRain.play();//plays rain on leaves audio
}}
//gretchen kupferschmid
//gkupfers@andrew.cmu.edu
//project 10
//section e
var banana;var lick;var mouth;var eyes;functionpreload(){ // call loadImage() and loadSound() for all media files here
banana =loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/banana.wav");
lick =loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/lick.wav");
mouth =loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/mouth.wav");
eyes =loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/eyes.wav");}functionsetup(){createCanvas(480,480);useSound(); //======== call the following to use sound =========
}functionsoundSetup(){ // setup for audio generation
banana.setVolume(0.5);
lick.setVolume(0.5);
mouth.setVolume(0.5);
eyes.setVolume(0.5);}functiondraw(){background(241,198,217); //mouth lips
noStroke();fill(255,0,0);beginShape();curveVertex(68,359);curveVertex(101,319);curveVertex(133,304);curveVertex(150,312);curveVertex(175,302);curveVertex(196,329);curveVertex(188,360);curveVertex(197,416);curveVertex(156,431);curveVertex(111,404);curveVertex(68,359);curveVertex(101,319);endShape(); //mouth black
fill(0);beginShape();curveVertex(87,357);curveVertex(100,350);curveVertex(112,337);curveVertex(130,328);curveVertex(146,327);curveVertex(170,320);curveVertex(181,330);curveVertex(178,363);curveVertex(142,363);curveVertex(87,357);curveVertex(100,350);endShape(); //mouth toungue
fill(240,110,270);noStroke();beginShape();curveVertex(84,357);curveVertex(127,358);curveVertex(176,365);curveVertex(177,408);curveVertex(133,398);curveVertex(84,357);curveVertex(127,358);endShape(); //mouth teeth
fill(255);beginShape();curveVertex(107,341);curveVertex(129,328);curveVertex(148,327);curveVertex(171,320);curveVertex(180,327);curveVertex(175,340);curveVertex(158,343);curveVertex(150,340);curveVertex(146,342);curveVertex(127,341);curveVertex(120,345);curveVertex(114,340);curveVertex(107,341);endShape(); //banana
fill(235,222,176);beginShape();curveVertex(325,39);curveVertex(325,45);curveVertex(326,10);curveVertex(336,9);curveVertex(347,39);curveVertex(363,77);curveVertex(352,90);curveVertex(332,89);curveVertex(325,39);endShape(); //banana peel
fill(240,201,66);beginShape();curveVertex(304,166);curveVertex(311,149);curveVertex(310,102);curveVertex(318,80);curveVertex(331,86);curveVertex(343,92);curveVertex(349,86);curveVertex(364,80);curveVertex(364,64);curveVertex(407,89);curveVertex(423,115);curveVertex(412,117);curveVertex(395,108);curveVertex(379,104);curveVertex(373,96);curveVertex(383,132);curveVertex(412,189);curveVertex(398,194);curveVertex(372,181);curveVertex(340,134);curveVertex(331,104);curveVertex(329,113);curveVertex(331,134);curveVertex(326,161);curveVertex(306,167);curveVertex(304,166);curveVertex(311,149);endShape(); //banana dots
fill(96,57,19);ellipse(359,155,6,6);ellipse(366,160,4,5);ellipse(363,165,3,5.5); //ice cream cone
fill(166,124,82);triangle(337,437,290,310,384,310); //ice cream cone shadow
fill(124,88,53);ellipse(337,320,80,20); //ice cream
fill(240,110,170);beginShape();curveVertex(275,296);curveVertex(283,279);curveVertex(299.270);curveVertex(304,259);curveVertex(317,255);curveVertex(321,240);curveVertex(330,236);curveVertex(336,220);curveVertex(349,210);curveVertex(347,226);curveVertex(357,234);curveVertex(362,245);curveVertex(364,247);curveVertex(378,256);curveVertex(362,268);curveVertex(394,292);curveVertex(397,311);curveVertex(352,319);curveVertex(351,314);curveVertex(293,316);curveVertex(277,304);curveVertex(275,296);curveVertex(283,279);endShape(); //eye line
noFill();stroke(0);strokeWeight(4);beginShape();curveVertex(59,129);curveVertex(97,102);curveVertex(150,99);curveVertex(184,124);curveVertex(182,128);curveVertex(152,145);curveVertex(100,147);curveVertex(60,132);curveVertex(59,129);curveVertex(97,102);curveVertex(150,99);endShape(); //eye interior
noStroke();fill(0,174,239);ellipse(126,124,50,50);fill(0);ellipse(133,119,14,14); //eyelashes
strokeWeight(4);stroke(0);line(65,123,52,108);line(75,114,64,95);line(94,104,87,86);line(108,98,105,82);line(129,95,130,77);line(150,99,155,81);line(163,107,178,88);line(178,118,192,102);}functionmousePressed(){if(mouseX >305& mouseX <423&& mouseY >7.2&& mouseY <195){
banana.play();}if(mouseX >275& mouseX <398&& mouseY >211&& mouseY <436){
lick.play();}if(mouseX >70& mouseX <196&& mouseY >302&& mouseY <432){
mouth.play();}if(mouseX >52& mouseX <192&& mouseY >76&& mouseY <150){
eyes.play();}}
I wanted to play with icons and the sounds that could possibly go with these when clicked on. I could see myself implementing this into my website later on so that sounds can accompany my illustrations.
For this project, I wanted to create a landscape that responded to the position of your mouse both visually and through sound. When you click your mouse, depending on the mouse’s position, different sounds will play. The four sounds I chose were chirping birds to represent the daytime, insects to represent the night, wind blowing through grass for the field/desert, and water flowing for the river.
//Julia Nishizaki
//Section B
//jnishiza@andrew.cmu.edu
//Project 10
var night; //nighttime sounds
var daytime; //daytime sounds
var field; //sound of fields
var river; //river sounds
functionpreload(){ // loads four sounds
field =loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/field.wav");
night =loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/night.wav");
daytime =loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/day.wav");
river =loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/river.wav");}functionsetup(){createCanvas(480,480);useSound();}functionsoundSetup(){ // setup for audio generation
field.setVolume(0.1); //sets Volume for all four sounds at a quarter the volume
night.setVolume(0.1);
daytime.setVolume(0.1);
river.setVolume(0.1);}functiondraw(){background(200);noStroke();colorMode(HSB,100); //switches color mode to HSB, easier to manipulate with mouse
var constMouseX =constrain(mouseX,0, width); //constrains X direction of mouse within canvas
var constMouseY =constrain(mouseY,0, height); //constrains Y direction of mouse within canvas
//variables for the different colors
var skyColor =color(55,55,map(constMouseX,0, width,25,100)); //sky changes color w/ mouse position between light and dark blue
var mountainColor =color(25,55,map(constMouseX,0, width,0,85)); //mountains change color w/ mouse between light and dark green
var desertColor =color(map(constMouseY,0, height,10,25),67,75); //field or desert changes color w/ mouse between brown and green
var riverColor =color(48,70,map(constMouseY, height,0,50,100)); //river changes color w/ mouse slightly from light to dark blue
//sky
createSky(skyColor); //background mountains
createMountains(mountainColor); //desert or field
createDesert(desertColor); //river
createRiver(riverColor);}functionmousePressed(){if(mouseX <(width /2)){
night.play(0,1,2); //plays nighttime sounds
}else{
night.pause();}if(mouseX >(width /2)){
daytime.play(0,1,2); //plays daytime sounds
}else{
daytime.pause();}if(mouseY <(height /2)){
field.play(0,1,2); //plays field sounds
}else{
field.pause();}if(mouseY >(height /2)){
river.play(0,1,2); //plays river sounds
}else{
river.pause();}}functioncreateSky(fillColor){ //function creates the sky
fill(fillColor);rect(0,0, width, height);}functioncreateMountains(fillColor){ //function creates background hills
var mountainY = height *2/3;fill(fillColor);ellipse(width /5, mountainY, width /2, height /2);ellipse(width *2/3, mountainY, width *3/4, height *4/5);}functioncreateDesert(fillColor){ //function creates desert/field
var desertY = height *5/8;fill(fillColor);rect(0, desertY, width, desertY);}functioncreateRiver(fillColor){ //function creates river
var riverY = height *7/8;fill(fillColor);var constRivMouseY =constrain(mouseY, height /2, height); //river only starts to appear when the mouse is below the halfway mark
rect(0,map(constRivMouseY, height, height /2, riverY, height), width, riverY);}
//Crystal Xue
//15104-section B
//luyaox@andrew.cmu.edu
//project-10
//size of the vinyl
var size1 =300;
//size of the label
var size2 =100;functionpreload(){
jazz1 =loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/475409__sandib__bass2.wav");
jazz2 =loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/49658__sub-d__more-jazz-guitar.wav");
jazz3 =loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/233699__gulyas25__acid-jazz-loop-music-bed.wav");
jazz4 =loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/187099__simondsouza__alto-sax-90bpm-cm-4-solo.wav");
jazz4.setVolumn(0.1);}functionsetup(){createCanvas(500,500);}functiondraw(){background(250);drawRecord();}functiondrawRecord(){fill(0);ellipse(width/2, width/2, size1, size1);for(var i =0; i <8; i++){noFill();stroke(105);strokeCap(SQUARE);strokeWeight(0.4);arc(width/2, width/2, i *20+140, i *20+140, PI,0.8* PI);}for(var i =0; i <8; i++){noFill();stroke(255);strokeCap(SQUARE);strokeWeight(1);arc(width/2, width/2, i *20+140, i *20+140,0.8* PI, PI);}for(var i =0; i <8; i++){noFill();stroke(105);strokeCap(SQUARE);strokeWeight(0.4);arc(width/2, width/2, i *20+140, i *20+140, PI,1.8* PI);}for(var i =0; i <8; i++){noFill();stroke(255);strokeCap(SQUARE);strokeWeight(1);arc(width/2, width/2, i *20+140, i *20+140,1.8* PI,2* PI);}fill(250,50);arc(width/2, width/2, i *20+140, i *20+140,0.8* PI, PI);fill(250,50);arc(width/2, width/2, i *20+140, i *20+140,1.8* PI,2* PI) //drawing red label
fill(255,0,0);noStroke();ellipse(width/2, width/2, size2, size2); //drawing controls
var yc =constrain(mouseY,350,470);fill(100);rect(410,350,10,120);fill(0);rect(400, yc,30,15);fill(100);rect(450,350,10,120);fill(0);rect(440, yc,30,15);fill(100);ellipse(430,100,60,60);fill(0);ellipse(430,100,40,40);fill(100);ellipse(450,160,45,45);fill(0);ellipse(450,160,30,30);}functionmousePressed(){ //setting mousepresed location
if(dist(mouseX,mouseY, width /2, height/2)<= size1 ){
jazz1.play();}else{
jazz1.pause();}if(dist(mouseX, mouseY,430,100)<=60){
jazz2.play();}else{
jazz2.pause();}if(dist(mouseX, mouseY,450,160)<=45){
jazz3.play();}else{
jazz3.pause();}}functionmouseMoved(){if(mouseX <=450& mouseX >=410&& mouseY <=470&& mouseY >=350){
jazz4.play();}else{
jazz4.pause();}}
It is inspired by jazz mixtapes. there are 3 different jazz tracks that can be started and paused by pressing the buttons and the record player. The fouth is controlled by the moving control which is more interesting to play with.
/*
Claire Lee
15-104 Section B
seoyounl@andrew.cmu.edu
Project-10
*/
// I'm using one of my grace days for this project!
var bearUrls =["https://i.imgur.com/BOQ7Bt9.jpg","https://i.imgur.com/uhBjJf4.jpg","https://i.imgur.com/UK6rJXn.jpg","https://i.imgur.com/UsOhg2L.jpg"]var bearBrown;var bearPolar;var bearBlack;var bearPanda;var bearBrownSound;var bearPolarSound;var bearBlackSound;var bearPandaSound;
//setting the global variables
functionpreload(){
bearBrown =loadImage(bearUrls[0]);
bearPolar =loadImage(bearUrls[1]);
bearBlack =loadImage(bearUrls[2]);
bearPanda =loadImage(bearUrls[3]); //loading the images
bearBrownSound =loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/bark.wav");
bearPolarSound =loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/meow.wav");
bearBlackSound =loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/hi.wav");
bearPandaSound =loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/moo.wav"); //loading the sounds
}functionsetup(){createCanvas(480,120);useSound();}functionsoundSetup(){ // setup for audio generation
bearBrownSound.setVolume(1);
bearPolarSound.setVolume(1);
bearBlackSound.setVolume(1);
bearPandaSound.setVolume(1);}functiondraw(){image(bearBrown,0,0, width/4, height);image(bearPolar, width/4,0, width/4, height);image(bearBlack, width/2,0, width/4, height);image(bearPanda,3*width/4,0, width/4, height); //divides canvas into quarters and sets different image for each
}functionmousePressed(){if(mouseX >0& mouseX <(width/4)){
bearBrownSound.play();}else{
bearBrownSound.pause();} // brown bear sound
if(mouseX >(width/4)& mouseX <(width/2)){
bearPolarSound.play();}else{
bearPolarSound.pause();} // polar bear sound
if(mouseX >(width/2)& mouseX <(3*width/4)){
bearBlackSound.play();}else{
bearBlackSound.pause();} // black bear sound
if(mouseX >(3*width/4)& mouseX < width){
bearPandaSound.play();}else{
bearPandaSound.pause();} //panda bear sound
}
I decided to do bears (with the addition of some unexpected sounds) because I wanted to make a group of cute characters with some unity. I had a lot of fun making the visuals for this project, and it was really interesting to learn how to manipulate sound files and work on a local server.
![[OLD FALL 2019] 15-104 • Introduction to Computing for Creative Practice](../../wp-content/uploads/2020/08/stop-banner.png)
