Category: Project-10-Sonic-Sketch

Minjae Jeong-project10-sonic sketch

sketch

//Minjae Jeong
//Section B
//minjaej@andrew.cmu.edu
//Project-10-SonicSketch

var myTopL;
var myTopR;
var myBotL;
var myBotR;

function preload() {
    myTopL = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/808bass.wav");
    myTopR = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/bass-1.wav");
    myBotL = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/snare-1.wav");
    myBotR = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/hihat.wav");
}

function setup() {
    createCanvas(400, 400);
    //======== call the following to use sound =========
    useSound();
}

function soundSetup() { // setup for audio generation
    myTopL.setVolume(0.5); //808 bass
    myTopR.setVolume(0.3); //bass
    myBotL.setVolume(0.3); //snare
    myBotR.setVolume(0.3); //hihat
}

function draw() {
    background(0);
//draw each squares
    push();
    translate(40, 40);
    fill('yellow');
    rect(0, 0, 150, 150);
    pop();

    push();
    translate(210, 40);
    fill('red');
    rect(0, 0, 150, 150);
    pop();

    push();
    translate(40, 210);
    fill('blue');
    rect(0, 0, 150, 150);
    pop();

    push();
    translate(210, 210);
    fill('green');
    rect(0, 0, 150, 150);
    pop();
}

//when a square is pressed, play the sound
function mousePressed() {
    if (mouseX > 40 & mouseX < 190 && mouseY > 40 && mouseY < 190) {
        myTopL.play();//808bass
    }
    if (mouseX > 210 & mouseX < 360 && mouseY > 40 && mouseY < 190) {
        myTopR.play();//bass
    }
    if (mouseX > 40 & mouseX < 190 && mouseY > 210 && mouseY < 360) {
        myBotL.play();//snare
    }
    if (mouseX > 210 & mouseX < 360 && mouseY > 210 && mouseY < 360) {
        myBotR.play();//hihat
    }
}

For this project, I wanted to create a very simple version of “launchpad.” The four sounds are some of the most common sounds used in beat-making.

Each button plays different sounds:

Yellow – 808 Bass

Red- Bass

Blue – Snare

Green – Hi-hat

Danny Cho – SonicSketch Project 10


sketch

I made an interactive sound grid where the position of your mouse determines which of the soundtracks are being played the loudest. The ellipses also change colors and scales accordingly. There is unbalance due to innate volume difference in the sound files. The sound files are all 120bpm to match the beat, but due to the volume imbalance, it’s hard to be aware of individual sounds.

//Danny Cho
//changjuc@andrew.cmu.edu
//Section A
//Project 10

var px = [];
var py = [];
var div = 10;
var noiseOn = false;
var myLeftTop;
var myRightTop;
var myLeftBot;
var myRightBot;

function preload() {
    myLeftTop = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/LeftTop-1.wav");
    myRightTop = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/RightTop.wav");
    myLeftBot = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/LeftBot.wav");
    myRightBot = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/RightBot.wav");
    // call loadImage() and loadSound() for all media files here
}


function soundSetup() { // setup for audio generation
    // setting initial volume
    myLeftTop.setVolume(0.1); 
    myLeftBot.setVolume(0.1); 
    myRightTop.setVolume(0.1); 
    myRightBot.setVolume(0.1); 
}


function setup() {
    createCanvas(400, 400); //create canvas
    for (var i = 0; i < div; i++) {
        px.push(i * (height / div)); //create array for creating grid
        py.push(i * (height / div));
    }
    useSound();
}

function mousePressed() { //play when mouse is pressed
    myLeftTop.play(); 
    myLeftBot.play(); 
    myRightTop.play(); 
    myRightBot.play();
}

function draw() {
    background(0);
    stroke(255);
    strokeWeight(0.5);
    //creates the grid
    for (var i = 0; i < px.length; i++) {
        line(px[i], 0, px[i], height);
        line(0, py[i], width, py[i]);
        }
    //draws circles on the grid
    for (var i = 0; i < px.length - 1; i++) {
        for(var j = 0; j < px.length - 1; j++) {
            fill(100, 255/(i), 255/j);
            //circles resond to the mouse position
            if (dist(mouseX, mouseY, px[i+1], py[j+1]) < 20) {
                ellipse(px[i+1], py[j+1], 50, 50);
            }
            else {
                strokeWeight(0);
                ellipse(px[i+1], py[j+1],
                        1300/dist(mouseX, mouseY, px[i+1], py[j+1]),
                        1300/dist(mouseX, mouseY, px[i+1], py[j+1]));
            }
            
        }
        
    }
    //the volume of each soundtrack depends on the distance of the mouse to the corners
    myLeftTop.setVolume((dist(mouseX, mouseY, 0, 0))^2/2500); 
    myLeftBot.setVolume((dist(mouseX, mouseY, 0, height))^2/2500); 
    myRightTop.setVolume((dist(mouseX, mouseY, width, 0))^2/2500); 
    myRightBot.setVolume((dist(mouseX, mouseY, width, height))^2/2500);
    

}

Rachel Shin – Project 10 – Pokemon

reshin-10-pokemon

/* Rachel Shin
reshin@andrew.cmu.edu
15-104 Section B
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().)

var imageLinks = [
    "https://i.imgur.com/VyMU3A0.png", //charmander
    "https://i.imgur.com/qji2HbI.png", //pikachu
    "https://i.imgur.com/dHUobNP.png", //squirtle
    "https://i.imgur.com/bugsaaS.png", //bulbasaur
]

//image variables

var charmander;
var pikachu;
var squirtle;
var bulbasaur;

//sound variables;
var fire;
var thunder;
var water;
var grass;

function preload() {
    //loading images
    charmander = loadImage("https://i.imgur.com/VyMU3A0.png");
    pikachu = loadImage("https://i.imgur.com/qji2HbI.png");
    squirtle = loadImage("https://i.imgur.com/dHUobNP.png");
    bulbasaur = loadImage("https://i.imgur.com/bugsaaS.png");

    //loading sounds
    fire = loadSound("fire-2.wav");
    thunder = loadSound("thunder.wav");
    water = loadSound("water-4.wav");
    grass = loadSound("grass.wav");

    // call loadImage() and loadSound() for all media files here
}


function setup() {
    // you can change the next 2 lines:
    createCanvas(480, 480);
    usesound();
}


function soundSetup() { // setup for audio generation
    fire.setVolume(3);
    thunder.setVolume(1);
    water.setVolume(1.5);
    grass.setVolume(1.2);
}


function draw() {
    background(196, 186, 118);;

    // images of the four elements
    image(charmander, 0, 0, width/2, height/2);
    image(pikachu, width/2, 0, width/2, height/2);
    image(squirtle, 0, height/2, width/2, height/2);
    image(bulbasaur, width/2, height/2, width/2, height/2);
}
  
function mousePressed() {

    if (mouseX >= 0 & mouseX < width/2 && mouseY >= 0 && mouseY < height/2) {
        fire.play();
    } 
    else { 
        fire.pause();
    }

    if (mouseX >= 0 & mouseX < width/2 && mouseY >= height/2 && mouseY < height) {
        water.play();
    } 
    else {
        water.pause();
    }

    if (mouseX >= width/2 & mouseX < width && mouseY >= 0 && mouseY < height/2) {
        thunder.play();
    } 
    else {
        thunder.pause(); 
    }

    if (mouseX >= width/2 & mouseX < width && mouseY >= height/2 && mouseY < height) {
        grass.play();
    } 
    else {
        grass.pause();
    }
}

After thinking of ways to incorporate 4 different sounds, I immediately thought of the 4 elements, and I decided to connect it to one of my childhood favorites- Pokemon. I decided to use the first four Pokemon that I loved and used their types and connected it to different sounds. I was inspired by the legendary Pokemon mural from the first season of Pokemon. It was fun to configure sound and visuals together especially when it came to designing my own version of the mural with 4 basic Pokemon that I loved as a kid.

Jacky Tian’s Project 10

sketch

// Project 10
//Yinjie Tian
//yinjiet@andrew.cmu.edu
//Section D

var unit = 50
var angle = 0

function preload() {
    s1 = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/jtsound1.wav");
    s2 = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/jtsound2.wav");
    s3 = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/jtsound3.wav");
    
}


function setup() {
    // you can change the next 2 lines:
    createCanvas(640, 480);
    createDiv("p5.dom.js library is loaded.");
    //======== call the following to use sound =========
    useSound();
}


function soundSetup() { // setup for audio generation
    // you can replace any of this with your own audio code:
    myOsc = new p5.TriOsc();
    myOsc.freq(880.0);
    myOsc.setType('sine');
    myOsc.amp(0.1);
    myOsc.start();
}



    // you can replace any of this with your own code:
function draw() {
    background(0);
    fill(mouseX, mouseY, 150);
    rect(0, 0, width, 160);
    fill(150, mouseY, mouseX);
    rect(0, 160, width, 160);
    fill(mouseY, 150, mouseX);
    rect(0, 320, width, 160);
    var len = 480 - mouseX
    var sta = 640 - mouseY 
    var freq = mouseX * 10

    strokeWeight(4)
    stroke(170, mouseX * 0.1, 50);
    line(unit, sta * 0.1, unit, len);

    strokeWeight(4)
    stroke(170, mouseX * 0.2, 50);
    line(unit * 2, sta * 0.2, unit * 2, len);

    strokeWeight(4)
    stroke(170, mouseX * 0.3, 50);
    line(unit * 3, sta * 0.3, unit * 3, len);

    strokeWeight(4)
    stroke(170, mouseX * 0.4, 50);
    line(unit * 4, sta * 0.4, unit * 4, len);

    strokeWeight(4)
    stroke(170, mouseX * 0.5, 50);
    line(unit * 5, sta * 0.5, unit * 5, len);

    strokeWeight(4)
    stroke(170, mouseX * 0.6, 50);
    line(unit * 6, sta * 0.6, unit * 6, len);

    strokeWeight(4)
    stroke(170, mouseX * 0.7, 50);
    line(unit * 7, sta * 0.7, unit * 7, len);

    strokeWeight(4)
    stroke(170, mouseX * 0.8, 50);
    line(unit * 8, sta * 0.8, unit * 8, len);

    strokeWeight(4)
    stroke(170, mouseX * 0.9, 50);
    line(unit * 9, sta * 0.9, unit * 9, len);

    strokeWeight(4)
    stroke(170, mouseX, 50);
    line(unit * 10, sta, unit * 10, len);

    strokeWeight(4)
    stroke(170, mouseX * 1.1, 50);
    line(unit * 11, sta * 1.1, unit * 11, len);

    strokeWeight(4)
    stroke(170, mouseX * 1.2, 50);
    line(unit * 12, sta * 1.2, unit * 12, len);

    strokeWeight(4)
    stroke(170, mouseX * 1.3, 50);
    line(unit * 13, sta * 1.3, unit * 13, len);

    strokeWeight(2)
    stroke(70, mouseX * 0.1, mouseY* 0.1);
    line(unit + 25, sta * 0.1, unit, len);

    strokeWeight(2)
    stroke(70, mouseX * 0.2, mouseY* 0.15);
    line(unit * 2 + 25, sta * 0.2, unit * 2, len);

    strokeWeight(2)
    stroke(70, mouseX * 0.3, mouseY* 0.2);
    line(unit * 3 + 25, sta * 0.3, unit * 3, len);

    strokeWeight(2)
    stroke(70, mouseX * 0.4, mouseY* 0.25);
    line(unit * 4 + 25, sta * 0.4, unit * 4, len);

    strokeWeight(2)
    stroke(70, mouseX * 0.5, mouseY* 0.3);
    line(unit * 5 + 25, sta * 0.5, unit * 5, len);

    strokeWeight(2)
    stroke(70, mouseX * 0.6, mouseY* 0.35);
    line(unit * 6 + 25, sta * 0.6, unit * 6, len);

    strokeWeight(2)
    stroke(70, mouseX * 0.7, mouseY* 0.4);
    line(unit * 7 + 25, sta * 0.7, unit * 7, len);

    strokeWeight(2)
    stroke(70, mouseX * 0.8, mouseY* 0.45);
    line(unit * 8 + 25, sta * 0.8, unit * 8, len);

    strokeWeight(2)
    stroke(70, mouseX * 0.9, mouseY* 0.5);
    line(unit * 9 + 25, sta * 0.9, unit * 9, len);

    strokeWeight(2)
    stroke(70, mouseX, mouseY* 0.55);
    line(unit * 10 + 25, sta, unit * 10, len);

    strokeWeight(2)
    stroke(70, mouseX * 1.1, mouseY* 0.6);
    line(unit * 11 + 25, sta * 1.1, unit * 11, len);

    strokeWeight(2)
    stroke(70, mouseX * 1.2, mouseY* 0.65);
    line(unit * 12 + 25, sta * 1.2, unit * 12, len);

    strokeWeight(2)
    stroke(70, mouseX * 1.3, mouseY* 0.7);
    line(unit * 13 + 25, sta * 1.3, unit * 13, len);

    fill(120, 80, mouseX * 0.5); // control rect color explicitly
    stroke(0);
    push();
    translate(mouseX, mouseY);
    rotate(radians(angle));
    rectMode(CENTER); // center rect around 0,0
    rect(0, 0, 50, 50);
    pop();
    angle = angle + mouseX * 0.05;

    var freq = mouseX * 10
    var amp = len
    myOsc.freq(freq);
    
}

function mousePressed() {

    if (mouseY > 0 & mouseY < 160){
        s1.play();
    } else {
        s1.pause();
    }

    if (mouseY > 160 & mouseY < 320){
        s2.play();
    } else {
        s2.pause();
    }

    if (mouseY > 320 & mouseY < 480){
        s3.play();
    } else {
        s3.pause();
    }


}

For this project, I used my project 3 as the base image. I created 3 mouse press zones in different colors and when someone presses mouse on these three zones, three different sounds will play. The sound will pause if someone presses the mouse on a different zone.

SooA Kim: Project-10-Sonic-Sketch


sookim_w10

I made my own audio segments, where if you press “play all” you can hear the music in one piece. Each character is assigned with different musical instruments.

/* SooA Kim
Section C
sookim@andrew.cmu.edu
Week 10 Project - Sonic Sketch
*/

var inst1; 
var inst2;
var inst3;
var bell;
var img;

function preload() {
    // call loadImage() and loadSound() for all media files here
    var myImageURL = "https://i.imgur.com/kxau9oQ.jpg"
    img = loadImage(myImageURL);

    inst1 = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/Kalimba.wav");
    inst2 = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/MA.wav");
    inst3 = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/Piano.wav");
    bell = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/bell1.wav");
    inst1.setVolume(1);
    inst2.setVolume(1);
    inst3.setVolume(1);

}


function setup() {
    // you can change the next 2 lines:
    createCanvas(400, 300);

    //======== call the following to use sound =========
    useSound();

}
 

function soundSetup() { // setup for audio generation
    // you can replace any of this with your own audio code:

}


function draw() {
    background(156, 202, 255);
    image(img, 0, 0);

 //play all instruments
    fill(255);
    textSize(32);
    textAlign(CENTER, CENTER);
    textFont("Apple Chancery")
    text("Play All", width/2, 250);
}
    //plays each instrument when mouse is pressed 
function mousePressed() {
    if (mouseX > 0 & mouseX < 100 && mouseY > 0 && mouseY < 200) {
        inst1.play();
    } else {
        inst1.pause();
    }

    if (mouseX > 100 & mouseX < 200 && mouseY > 0 && mouseY < 200) {
        inst2.play();
    } else {
        inst2.pause();
    }

    if (mouseX > 200 & mouseX < 300 && mouseY > 0 && mouseY < 200) {
        inst3.play();
    } else {
        inst3.pause();
    }

    if (mouseX > 300 & mouseX < 400 && mouseY > 0 && mouseY < 200) {
        bell.play();
    } else {
        bell.pause();
    }

    if (mouseX > 0 & mouseX < 400 && mouseY > 200 && mouseY < 300) {
        playAll(); 
    }
    
}

function playAll(){
    inst1.play();
    inst2.play();
    inst3.play();
    bell.play();
}
/*
function pauseAll(){
    inst1.pause();
    inst2.pause();
    inst3.pause();
    bell.pause();
}
*/

Cathy Dong-Project-10-Interactive Sonic Sketch

sketch

/*  Cathy Dong
    yinhuid
    section D
    project-10-Interactive Sonic Sketch 
*/

var myOsc; //piano sound
var mySnd; //wave sound
var keyNum1 = 7; //lower key num
var keyNum2 = 5; //upper key num
var keyY = 0; //key y start from 0
var size = 20; //ball size


function preload() {
    // load wave sound
    mySnd = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/sea.wav");
    mySnd.setVolumn(0.1);
}


function setup() {
    createCanvas(480, 360);
    //call to use sound
    useSound();
}

// piano sound
function soundSetup() { // setup for audio generation
    myOsc = new p5.Oscillator();
    // piano sound setting
    myOsc.amp(5);
    myOsc.freq(0);
    myOsc.start();
}


function draw() {
    background(0);
    //draw piano
    pianoDraw();
    //draw yellow dot
    pressDraw();
    // play piano when pressed on
    if (mouseIsPressed) {
        mySnd.play();
        // upper keys
        if (mouseY < height / 3 * 2) {
            var keyWidth = width / keyNum1 / 2;
            var keyGap = width / keyNum1 / 4 * 3;
            // upper 1
            if (mouseX > keyGap & mouseX < keyGap + keyWidth) {
                myOsc.freq(277.18);
            }
            //upper 2
            else if (mouseX > keyGap * 2 + keyWidth / 2 & mouseX < keyGap * 2 + keyWidth * 1.5) {
                myOsc.freq(311.13);
            }
            //upper 3
            else if (mouseX > keyGap * 3 + keyWidth * 3 & mouseX < keyGap * 3 + keyWidth * 4) {
                myOsc.freq(369.99);
            }
            //upper 4
            else if (mouseX > keyGap * 4 + keyWidth * 3.5 & mouseX < keyGap * 4 + keyWidth * 4.5) {
                myOsc.freq(415.3);
            }
            //upper 5
            else if (mouseX > keyGap * 4 + keyWidth * 5.5 & mouseX < keyGap * 4 + keyWidth * 6.5) {
                myOsc.freq(466.16);
            }
        }
        // lower keys
        else if (mouseY > height / 3 * 2) {
            var keyWidth = width / keyNum1;
            // lower 1
            if (mouseX > 0 & mouseX < keyWidth) {
                myOsc.freq(261.63);
            }
            // lower 2
            else if (mouseX > keyWidth & mouseX < keyWidth * 2) {
                myOsc.freq(293.66);
            }
            //lower 3
            else if (mouseX > keyWidth * 2 & mouseX < keyWidth * 3) {
                myOsc.freq(329.63);
            }
            //lower 4
            else if (mouseX > keyWidth * 3 & mouseX < keyWidth * 4) {
                myOsc.freq(349.23);
            }
            //lower 5
            else if (mouseX > keyWidth * 4 & mouseX < keyWidth * 5) {
                myOsc.freq(392.00);
            }
            //lower 6
            else if (mouseX > keyWidth * 5 & mouseX < keyWidth * 6) {
                myOsc.freq(440.00);
            }
            //lower 7
            else if (mouseX > keyWidth * 6 & mouseX < width) {
                myOsc.freq(493.88);
            }
        }
    }

}

//draw mouse location as a yellow dot
function pressDraw() {
    noStroke();
    fill('yellow');
    ellipse(mouseX, mouseY, size, size);
}

//draw piano keyboards
function pianoDraw(){
    //lower keys
    stroke(0);
    strokeWeight(1);
    fill(255);
    for (var i = 0; i < keyNum1; i++) {
        var keyWidth = width / keyNum1;
        var keyX = i * keyWidth;
        var keyHeight = height;
        rect(keyX, keyY, keyWidth, keyHeight);
    }

    //upper keys
    fill(0);
    for (var j = 0; j < keyNum2; j++) {
        var keyWidth = width / keyNum1 / 2;
        var keyGap = width / keyNum1 / 4 * 3;
        var keyX = keyGap * (j + 1) + keyWidth * j / 2;
        var keyHeight = height / 3 * 2;
        //left two
        if (j < 2) {
            rect(keyX, keyY, keyWidth, keyHeight);
        }
        //right three
        else {
            var newX = keyX + keyWidth * 2;
            rect(newX, keyY, keyWidth, keyHeight);
        }
        
    }
}

This project creates keyboard with different pitches as a piano. A beach setting sound with waves and laughter is added as background.

 

Sewon Park – Project 10

sketch

//Sewon Park
//sewonp@andrew.cmu.edu
//Section B
//Project 10

var sound1;
var sound2;
var sound3;
var sound4;

function preload() {
    sound1 = loadSound('https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/378641__13fpanska-kolar-jan__fire-stick-shake-2.wav');
    sound2 = loadSound('https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/476202__djmistressm__rain-drips.mp3');
    sound3 = loadSound('https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/85602__jankoehl__walk-forest02.wav');
    sound4 = loadSound('https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/459977__florianreichelt__soft-wind.mp3'); //saving sounds
}

//I have no clue why the sounds are not loading 


function setup() {
    createCanvas(400, 400);
    background(220);
    useSound(); 
}

function soundSetup() {
    sound1.setVolume(1); 
    sound2.setVolume(1);
    sound3.setVolume(1);
    sound4.setVolume(1);
}

function draw() {
fill(0,0,0);
rect(0,0,200,200); //black square

fill(255,0,0);
noStroke();
ellipse(100,150,50,50);
noStroke();
triangle(78,140,100,100,122,140)
fill(255,255,0);
ellipse(100,160,30,30); //fire


fill(0,255,0);
rect(0,200,200,200);
fill(220,180,130); //green square
  
rect(100,350,10,40);
fill(0,100,0);
triangle(90,360,105,300,120,360) //tree

fill(0,0,255);
rect(200,0,200,200); //Blue Square
  
for (var x=210; x<600; x=x+20) {
   for(var y=10; y<190; y= y+20) {
   stroke(135,206,235);
   fill(135,206,235);
   rect(x,y,1,10); //rain on background
        }

fill(255);
rect(200,200,200,200); //White Square
  
fill(130,200,230);
rect(270,350,70,5);
arc(280, 325, 60, 60, HALF_PI, PI); //wind symbol
}
}


function mousePressed() {
    // When mouse is pressed, appropriate sounds play

    if (mouseX < 200 & mouseY < 200) {
        sound1.play();
    } else {
        sound1.pause();
    } //Makes sound 1 for black square

    if (mouseX > 200 & mouseY < 200) {
        sound2.play();
    } else {
        sound2.pause();
    } //Makes sound 2 for blue square)

    if (mouseX < 200 & mouseY > 200) {
        sound3.play();
    } else {
        sound3.pause();
    } //Makes sound 3 for green square)

    if (mouseX > 200 & mouseY > 200) {
        sound4.play();
    } else {
        sound4.pause();
    } //Makes sound 4 for white square

}

For this project I used “The Last Airbender” as the theme. I drew the four elements and had sounds that correlated to the element playing when the mouse is clicked.

(Grace Day Used)

Katrina Hu – Project 10 – Sonic Sketch

sketch_project10

/*Katrina Hu
15104-C
kfh@andrew.cmu.edu
Project10_SonicSketch*/

var eyeSize1 = 10;
var mouthWidth1 = 30;
var eyeSize2 = 10;
var mouthWidth2 = 30;
var eyeSize3 = 10;
var mouthWidth3 = 30;
var eyeSize4 = 10;
var mouthWidth4 = 30;

var evilLaugh;
var womanLaugh;
var maniacalLaugh;
var childLaugh;

function preload() {
    evilLaugh = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/evillaugh.wav");
    evilLaugh.setVolume(0.5);

    womanLaugh = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/womanlaugh.wav");
    womanLaugh.setVolume(0.5);

    maniacalLaugh = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/maniacallaugh.wav");
    maniacalLaugh.setVolume(0.5);

    childLaugh = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/childlaugh.wav");
    childLaugh.setVolume(0.5);
}


function setup() {
    createCanvas(480, 120);
}


function soundSetup() { 

}


function draw() {
    noStroke();
    //blue background
    fill(204, 224, 255);
    rect(0, 0, 120, 120);
    fill(74, 143, 255);
    ellipse(60, 60, 100, 100);
    fill(0);
    ellipse(40, 40, eyeSize1);
    ellipse(80, 40, eyeSize1);
    fill(255, 255, 255);
    ellipse(40, 38, eyeSize1 / 3);
    ellipse(80, 38, eyeSize1 / 3);
    fill(189, 100, 87);
    arc(60, 60, mouthWidth1, 30, 0, PI, CHORD);
    //yellow background
    fill(255, 252, 204);
    rect(120, 0, 120, 120);
    fill(255, 246, 82);
    ellipse(180, 60, 100, 100);
    fill(0);
    ellipse(160, 40, eyeSize2);
    ellipse(200, 40, eyeSize2);
    fill(255, 255, 255);
    ellipse(160, 38, eyeSize2 / 3);
    ellipse(200, 38, eyeSize2 / 3);
    fill(189, 100, 87);
    arc(180, 60, mouthWidth2, 30, 0, PI, CHORD);
    //pink background
    fill(255, 204, 204);
    rect(240, 0, 120, 120);
    fill(255, 90, 82);
    ellipse(300, 60, 100, 100);
    fill(0);
    ellipse(280, 40, eyeSize3);
    ellipse(320, 40, eyeSize3);
    fill(255, 255, 255);
    ellipse(280, 38, eyeSize3 / 3);
    ellipse(320, 38, eyeSize3 / 3);
    fill(189, 100, 87);
    arc(300, 60, mouthWidth3, 30, 0, PI, CHORD);
    //green background
    fill(222, 255, 214);
    rect(360, 0, 120, 120);
    fill(138, 255, 138);
    ellipse(420, 60, 100, 100);
    fill(0);
    ellipse(400, 40, eyeSize4);
    ellipse(440, 40, eyeSize4);
    fill(255, 255, 255);
    ellipse(400, 38, eyeSize4 / 3);
    ellipse(440, 38, eyeSize4 / 3);
    fill(189, 100, 87);
    arc(420, 60, mouthWidth4, 30, 0, PI, CHORD);
}

function mousePressed() {
    //play sound if pressed in blue box
    if(mouseX <= 120) {
        eyeSize1 = random(8, 15);
        mouthWidth1 = random(40, 55);
        evilLaugh.play();
    }
    //play sound if pressed in yellow box
    if(mouseX > 120 & mouseX <= 240) {
        eyeSize2 = random(8, 15);
        mouthWidth2 = random(40, 55);
        womanLaugh.play();
    }
    //play sound if pressed in pink box
    if(mouseX > 240 & mouseX <= 360) {
        eyeSize3 = random(8, 15);
        mouthWidth3 = random(40, 55);
        maniacalLaugh.play();
    }
    //play sound if pressed in green box
    if(mouseX > 360 & mouseX <= 480) {
        eyeSize4 = random(8, 15);
        mouthWidth4 = random(40, 55);
        childLaugh.play();
    }

}

The sounds play when you click on the various 4 faces. Each face has a different laugh, and the facial features change as you click on them as well.

Alec Albright – Project 10 – Sonic Sketch

I am using one of my grace days on this assignment

sketch

// Alec Albright
// aalbrigh@andrew.cmu.edu
// Section B
// Project 10

var margin = 150;
var radius = 30;
var r = 0;
var g = 0;
var b = 0;
var rotation = 0;
var sine; // sine oscillator
var sineAmp; // sine amplitude
var sineFreq; // sine frequency
var sawtooth; // sawtooth oscillator
var sawtoothAmp; // sawtooth amplitude
var sawtoothFreq; // sawtooth frequency
var square; // square oscillator
var squareAmp; // square amplitude
var squareFreq; // square frequency

function setup(){
    createCanvas(640, 480);
    angleMode(DEGREES);
    useSound();
}

function soundSetup() { // setup for audio generation
    // making sine
    sine = new p5.Oscillator();
    sine.setType("sine");
    sine.start();

    // making sawtooth
    sawtooth = new p5.Oscillator();
    sawtooth.setType("sawtooth");
    sawtooth.start();

    // making square wave
    square = new p5.Oscillator();
    square.setType("square");
    square.freq(440);
    square.start();
}

function draw(){
    background("white");
    fill(r, g, b);

    // mapping angle of rotation to mouseY
    // as mouse moves up and down, shapes rotate
    rotation = map(mouseY, 0, height, 0, 360);

    // drawing hexagons with specified margin and rotation
    // center
    push();
    translate(width / 2, height / 2);
    rotate(rotation);
    hexagon(0, 0, radius);
    pop();
    // circle around center hexagon
    for(let i = 0; i < nvertex; i +=1){
        // finding exactly where the hexagon at hand is located
        // sin tells us where the y coordinate is
        var centerY = sin(angle) * margin;
        // cos tells us where the x coordinate is
        var centerX = cos(angle) * margin;
        // now draw the vertex at hand
        // setting up rotation for each individual hexagon
        push();
        translate(width / 2 + centerX, height / 2 + centerY);
        rotate(rotation);
        hexagon(centerX, centerY, radius);
        pop();
        // add the next portion of the angle
        angle = angle + (360 / 6)
    }
    
    // scaling mouseX to use the whole screen for size
    // as mouse moves right, shapes get bigger
    radius = map(mouseX, 0, width, 20, 70);
    
    // as mouse moves right, more red, more sine/less sawtooth
    r = map(mouseX, 0, width, 0, 255);
    // amplitude form 0 to 1
    sineAmp = map(mouseX, 0, width, 0, 1);
    sine.amp(sineAmp);
    // amplitude from .8 to 0 (bigger amplitude on left side)
    sawtoothAmp = map(mouseX, 0, width, .2, 1);
    sawtooth.amp(1 - sawtoothAmp);

    // as mouse moves down, more blue 
    b = map(mouseY, 0, height, 0, 255);
    // as mouse moves left, more green
    g = 255 - map(mouseX, 0, width, 0, 255);

    // frequency changes depending on whether we're in top half or bottom half
    if (mouseY <= height / 2) {
        // sine goes from 440 to 1760 Hz (2 octaves) if we're in the top half
        sineFreq = constrain(map(mouseY, 0, height / 2, 440, 1760), 440, 1760);
        sine.freq(sineFreq);

        // sawtooth frequency stabilizes at minumum value
        sawtooth.freq(110);
    } else {
        // sawtooth goes from 110 to 440 Hz (2 octaves) if we're in the bottom half
        sawtoothFreq = constrain(map(mouseY, height / 2, height, 110, 440), 110, 440);
        sawtooth.freq(sawtoothFreq);
     
        // sine frequency stabilizes at maximum value
        sine.freq(1760);
    }

    // if mouse is pressed, square wave can be changed
    if (mouseIsPressed) {
        // frequency mapped to the average of mouseX and mouseY, can go from 110 to 440 Hz 
        squareFreq = constrain(map((mouseX + mouseY) / 2, 0, 640, 110, 440), 110, 440);
        square.freq(squareFreq);

        // amplitude mapped to the distance from the center of x axis
        squareAmp = constrain(map(mouseX - (width / 2), -320, 320, 0, .8), 0, .8);
        square.amp(squareAmp);
    }

    // margin depends on mouseX, keeping same distance throughout
    margin = map(mouseX, 0, width, 50, 150);
}

// 6 vertices, as a hexagon has
var nvertex = 6;
// angle we're working at (when we get to TWO_PI, we're done)
var angle = 0;

function hexagon(x, y, radius){
    // draw a hexagon at (x, y) using beginShape()
    beginShape();
    // find each vertex's specific location
    for(let i = 0; i < nvertex; i += 1){
        // finding exactly where the vertex at hand is located
        // sin tells us where the y coordinate is
        var vertexY = y + sin(angle) * radius;
        // cos tells us where the x coordinate is
        var vertexX = x + cos(angle) * radius;
        // now draw the vertex at hand
        vertex(vertexX, vertexY)
        // add the next portion of the angle
        angle += (360 / 6)
    }
    // connect beginning and end points
    endShape(CLOSE)
}

For this assignment, I added sonic features to my Project 3 – Dynamic Drawing. I added a sine wave oscillator, a sawtooth wave oscillator, and a square wave oscillator. The mappings for the amplitude and frequency of these oscillators are as follows:

  1. As the mouse moves from left to right, the sine wave amplitude increases and the sawtooth wave amplitude decreases.
  2. As the mouse moves from top to bottom on the top half of the screen, the sine wave frequency gets higher (scaling up to two octaves).
  3. As the mouse moves from top to bottom on the bottom half of the screen, the sawtooth wave frequency gets higher (scaling up to two octaves).
  4. As the average of mouseX and mouseY increases, so does the frequency of the square wave.
  5. The closer to the middle of the x-axis the mouse is, the louder the square wave becomes.

Note: the square wave can only be adjusted if the mouse is pressed!!

This process was very interesting in testing harmonic balances in my dynamic drawing, as manifested by these mappings. I certainly see a lot more dimensionality in my drawing now because of the added sound layers!

Joanne Chui – Project 10 – Sonic Sketch

sketch

/*
Joanne Chui
Section C 
Project 10
*/

let osc;

function preload() {
    // call loadImage() and loadSound() for all media files here
    mySnd = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/xylophone.wav");
    mySnd.setVolume(0.5);
}


function setup() {
    createCanvas(400, 300);
    background(255, 226, 145);
    osc = new p5.TriOsc();
    osc.start();
}


function draw() {
    //glasses
    fill(255, 240, 200);
    stroke("white");
    strokeWeight(2);
    rect(25, 100, 50, 100);
    rect(125, 100, 50, 100);
    rect(225, 100, 50, 100);
    rect(325, 100, 50, 100);
    //drink
    fill(192, 225, 237);
    noStroke();
    rect(27, 120, 46, 78);
    rect(127, 140, 46, 58);
    rect(227, 160, 46, 38);
    rect(327, 180, 46, 18);


}

function mousePressed(){
  //glass clink
  if(mouseX > 25 & mouseX < 75 && mouseY > 100 && mouseY < 200){
    mySnd.play();
  }
  if(mouseX > 125 & mouseX < 175 && mouseY > 100 && mouseY < 200){
    mySnd.play();
  }
  if(mouseX > 225 & mouseX < 275 && mouseY > 100 && mouseY < 200){
    mySnd.play();
  }
  if(mouseX > 325 & mouseX < 375 && mouseY > 100 && mouseY < 200){
    mySnd.play();
  }
  //pitch dependent on height of water
  let f = map(mouseX, 0, 375, 100, 800);
  osc.freq(f);
  
}

I was interested in how a combination of sounds could produce an interesting effect. I combined the sound of the glass clinking with the sound effect of the pitches created when blowing on glasses. I like how simple the project is.