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;
function preload() {
//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");
}
function setup() {
createCanvas(500, 400);
useSound()
}
function soundSetup(){
//controlling the volume
vacuumnoise.setVolume(1);
fridgenoise.setVolume(1);
dogbarking.setVolume(1);
outsidenoise.setVolume(1);
keynoise.setVolume(1);
}
function draw() {
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);
}
function mousePressed(){
//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().)
function preload() {
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);
}
function setup() {
createCanvas(500, 500);
}
function draw() {
// 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);
}
function mousePressed() {
//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
function preload() {
// 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);
}
function setup() {
createCanvas(480, 480);
useSound();
}
function soundSetup() { // setup for audio generation
// you can replace any of this with your own audio code:
osc = new p5.TriOsc();
osc.freq(500.0);
osc.amp(0.1);
osc.start();
}
function draw() {
//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);
}
function mousePressed() {
//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();
}
}
function drawHypotrochoidCurve() {
//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();
}
function drawRanunculoidCurve() {
//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;
function preload() {
//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");
}
function setup() {
createCanvas(466, 350);
}
function draw(){
background(100);
//scale the image according to canvas size
image(img, 1, 1,
img.width * 0.4, img.height * 0.4);
}
function mousePressed(){
//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
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
function preload() {
// 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");
}
function setup() {
createCanvas(480, 480);
useSound();
}
function soundSetup() { // 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);
}
function draw() {
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);
}
function mousePressed() {
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();
}
}
function createSky(fillColor) { //function creates the sky
fill(fillColor);
rect(0, 0, width, height);
}
function createMountains(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);
}
function createDesert(fillColor) { //function creates desert/field
var desertY = height * 5 / 8;
fill(fillColor);
rect(0, desertY, width, desertY);
}
function createRiver(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;
function preload(){
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);
}
function setup() {
createCanvas(500, 500);
}
function draw() {
background(250);
drawRecord();
}
function drawRecord(){
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);
}
function mousePressed() {
//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();
}
}
function mouseMoved(){
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
function preload() {
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
}
function setup() {
createCanvas(480, 120);
useSound();
}
function soundSetup() { // setup for audio generation
bearBrownSound.setVolume(1);
bearPolarSound.setVolume(1);
bearBlackSound.setVolume(1);
bearPandaSound.setVolume(1);
}
function draw() {
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
}
function mousePressed() {
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](https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2020/08/stop-banner.png)
