Category: SectionE

Yoshi Torralva-Project-10-Sonic-Sketch

sketch

//Yoshi Torralva
//yrt@andrew.cmu.edu
//Section E
//Project-10-Sonic-Sketch
var gOpen;
var eOpen;
var dOpen;
var aOpen;

function preload() {
    // call loadImage() and loadSound() for all media files here
    gOpen = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/gstring.wav");
    eOpen = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/estring.wav");
    dOpen = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/dstring.wav");
    aOpen = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/astring.wav");
}
function setup() {
    createCanvas(480, 480);
    useSound();
}
function soundSetup() {
    //adjusting the volume
    //lowering a and e as they are higher notes
    gOpen.setVolume(1);
    eOpen.setVolume(0.1);
    dOpen.setVolume(1);
    aOpen.setVolume(0.2);

}


function draw() {
    // you can replace any of this with your own code:
    background(245, 229, 215);
    noStroke();
    //violin body
    fill(150, 74, 12);
    ellipse(width/2, 400, 400, 400);
    fill(245, 229, 215);
    ellipse(50, 525, 120, 200);
    fill(245, 229, 215);
    ellipse(430, 525, 120, 200);
    //violin finger board
    fill(0);
    rectMode(CENTER);
    rect(240, 0, 100, 800);
    //strings
    fill(61, 51, 42);
    rectMode(CORNER);
    rect(210, 0, 4, 480);
    rect(230, 0, 4, 480);
    rect(250, 0, 4, 480);
    rect(270, 0, 4, 480);
    //violin bow
    //visual indicator to show over the strings 
    rectMode(CENTER);
    fill(51, 28, 9);
    rect(mouseX, mouseY, 480, 20);
    //creating constraints for start and stop of each string
    //slight overlap between some to have better transitions
    //using start and stop commands to the strings
    if(mouseX > 200 & mouseX < 225) {
        gOpen.play();
        }else{ gOpen.stop();
    }
    if(mouseX > 220 & mouseX < 240) {
        dOpen.play();
        }else{ dOpen.stop();
    }
    if(mouseX > 240 & mouseX < 265) {
        aOpen.play();
        }else{ aOpen.stop();
    }
    if(mouseX > 265 & mouseX < 280) {
        eOpen.play();
        }else{ eOpen.stop();
    }

}

With this project using sound, I wanted to create an instrument. So, I decided to choose a violin. In this project, I represent the violin in a simple manner and have it close up. I initiate the sound of open G, D, A, and E strings by the mouseX position. When the mouseX position is not in bounds of the parameters, the sound stops. Slight overlaps in the parameters are used to create better sounding transitions between open strings.

Gretchen Kupferschmid-Looking Outward-10

A new piece of sound art was installed at the San Fransisco Art Institute which mimics and/or satirizes the sinking & tilting Millennium Tower in SF. Created by Cristobal Martinez and Kade L. Twist (known together as Postcommodity), the piece uses computational algorithms to represent the movement of the tower. These sounds are supposed to create a soothing audio and beats which transforms this sinking and tilting into a therapeutic sound. The goal of the project was to encourage relaxation through the power of SF’s scenic beauty. I appreciate how the project aims to take a dire situation and flip it to call for relief from stress in a city. It is not often that art installed in museums is meant to aim to calm people or help soothe anxieties, so I appreciate this approach to art, especially through all you can do with something that can be so calming as sound. Though it doesn’t debut until the 15th, I am excited to see how the sounds themselves might sound and the effect it has on its viewers/listeners.

https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=3&cad=rja&uact=8&ved=2ahUKEwiSvfvXyMrlAhUxvlkKHfrtCJoQFjACegQIABAB&url=https%3A%2F%2Fsfai.edu%2Fexhibitions-public-events%2Fdetail%2Fpostcommodity-the-point-of-final-collapse&usg=AOvVaw05NthM2gw_u99Ngo4gDnE_

Margot Gersing – Project 10

sketch

//Margot Gersing - Project 10 - mgersing@andrew.cmu.edu - Section E


var oneX = 50; //for mouse press
var oneY = 50;
var act1 = false; //peach shape 'activation'

var twoX = 200; //for mouse press
var twoY = 350;
var act2 = false; //rusty orange shape 'activation'

var threeX = 400; //for mouse press
var threeY = 100;
var act3 = false; //pink shape 'activation'

var fourX = 500; //for mouse press
var fourY = 500;
var act4 = false; //gray shape 'activation'

var nPoints = 100;

var blop;
var plop;
var vpop;
var ting;

function preload(){
    blop = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/Blop.wav");
    plop = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/plop.wav");
    vpop = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/pop.wav");
    ting = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/Ting.wav");
}

function setup() {
    createCanvas(600,600);
    frameRate(10);

}

function draw(){
    background(29, 19, 46);
    noStroke();
    one();
    four();
    two();
    three();

    //filler shapes (static)
    fill(192, 80, 49);
    ellipse(50, 600, 400, 150);
    fill(219, 160, 65);
    ellipse(600, 125, 100, 150);
    fill(114, 48, 35);
    ellipse(150, 150, 25, 25);
    ellipse(175, 175, 20, 20);
    ellipse(135, 180, 25, 25);
    ellipse(185, 135, 25, 25);
    ellipse(155, 115, 20, 20);
    ellipse(500, 500, 20, 20);
    ellipse(490, 535, 25, 25);
    ellipse(600, 275, 25, 25);
    ellipse(575, 250, 25, 25);
    ellipse(560, 285, 20, 20);
    ellipse(60, 480, 25, 25);   

}

function one(){
    //peach shape
    var w1 = 200;
    var h1 = 200;

    //click to activate otherwise static
    if(act1){
        w1 = mouseX * .75;
        h1 = mouseY * .75;
    } else{
        w1 = 200;
        h1 = 200;
    }

    fill(117, 182, 129);
    ellipse(50, 50, w1, h1);
}

function two(){
    //epitrochoid
    var x;
    var y; 
    var a = 80.0;
    var b = a / 2.0;
    var h2 = constrain(100 / 8.0, 0, b);
    var ph2 = 100 / 50.0;

    //click to activate otherwise static
    if(act2){
        h2 = constrain(mouseX / 8.0, 0, b);;
        ph2 = mouseX / 50.0;
    } else{
        h2 = constrain(100 / 8.0, 0, b);
        h1 = 100 / 50.0;
    }
    fill(235, 231, 201);
    beginShape(); //drawing shape
    for (var i = 0; i < nPoints; i++) {
        var t = map(i, 0, nPoints, 0, TWO_PI);
        
        x = (a + b) * cos(t) - h2 * cos(ph2 + t * (a + b) / b);
        y = (a + b) * sin(t) - h2 * sin(ph2 + t * (a + b) / b);
        vertex(x + 200, y + 350);
    }
    endShape(CLOSE);
}

function three(){
    //cranioid
    var x;
    var y;
    var r;
    var a = 40.0;
    var b = 10.0;
    var c = 100.0;
    var p = constrain((width/2), 0.0, 1.0);
    var q = constrain((height/2), 0.0, 1.0);

    //click to activate otherwise static
    if(act3){
        var p = constrain((mouseX / width), 0.0, 1.0);
        var q = constrain((mouseY / height), 0.0, 1.0);
    } else{
        var p = constrain((width/2), 0.0, 1.0);
        var q = constrain((height/2), 0.0, 1.0);
    } 
    fill(235, 231, 201);
    beginShape(); //drawing shape 
    for (var i = 0; i < nPoints; i++) {
        var t = map(i, 0, nPoints, 0, TWO_PI);
        r =
            a * sin(t) +
            b * sqrt(1.0 - p * sq(cos(t))) +
            c * sqrt(1.0 - q * sq(cos(t)));
        
        x = r * cos(t);
        y = r * sin(t);
        vertex(x + 400, y + 100);
    }
    endShape(CLOSE);
}

function four(){
    //gray shape
    var w4 = 200;
    var h4 = 300;

    //click to activate otherwise static
    if(act4){
        w4 = mouseX;
        h4 = mouseY;
    } else{
        w4 = 200;
        h4 = 300;
    }

    fill(41, 89, 50);
    ellipse(475, 475, w4, h4);
}


function mousePressed(){

    //if clicked within in defined distance then activation state is... 
       //changed from true to false so the mouseX and mouseY will now take over
    var d = dist(oneX, oneY, mouseX, mouseY);
    if(d < 200){
        act1 = !act1;
        blop.play(0, 1, 2);
    }

    var d2 = dist(twoX, twoY, mouseX, mouseY);
    if(d2 < 100){
        act2 = !act2;
        vpop.play(0, 1, 2);
    }

    var d3 = dist(threeX, threeY, mouseX, mouseY);
    if(d3 < 100){
        act3 = !act3;
        plop.play(0, 1, 2);
    }

    var d4 = dist(fourX, fourY, mouseX, mouseY);
    if(d4 < 100){
        act4 = !act4;
        ting.play(0, 1, 2);
    }

}

For this project I decided to add sound to my previous project from week seven. The way I set up that project worked really well with how I was already planning on utilizing sound. I think this turned out pretty cute, the original project was meant to be playful and I think the sounds just added to it. Lastly, I changed up the colors just for fun.

William Su – Looking Outwards – 10

Aiva is an Artificial Intelligence capable of composing emotional soundtracks for a variety of media like films, video games, and commercials.

According to the team that worked on AIVA, it was trained to compose music composition by reading through a large collection of music partitions from Mozart, Beethoven, Bach, etc. It created a mathematical model of what music is and uses it to make its own unique pieces.

As someone who has worked on and with AI, the making of an AI musical composer doesn’t really come as a surprise to me. In fact, stuff like this has been around for ages like with vocaloids or other computer generated music technologies. What really interests me is how AI is accepted by society. Recently, AIVA became the first virtual artist to have its creations registered with an author’s rights society (SACEM). According to the team, this will not replace musicians or “steal” any jobs. However, this comes into question, when will an AI become so good at what it is trained to do that it could replace humans? And how will we respond to it? In this particular case, it looks like AIVA is marketed more as a tool but it is clear that it can save time, work, and money, maybe better than a trained musician.

William Su – Project 10 – Sonic Sketch

For this project I saw the opportunity to make a simple game. In this case, a very cruddy p5 version of CS:GO. Enjoy!

sketch

//William Su
//wsu1@andrew.cmu.edu
//Section E
//Project 10 

var bgurl = "https://i.imgur.com/CYEy7BV.jpg"; //background.
var muzzleFlash = "https://i.imgur.com/68jJZkV.png"; //muzzle flash from the tip of gun.
var mfTrue = false; //currently false if no click;
var T1Alive = true; //Whether enemies are currently alive or not.
var T2Alive = true;
var T3Alive = true;
var Tenemy = "https://i.imgur.com/Nh8X1RG.png"; //Enemy image
var bg; // Background img
var mf; // MuzzleFlash
var T1HitCount = 0; //Number of times each enemy has been hit.
var T2HitCount = 0;
var T3HitCount = 0;

function preload() {
    bg = loadImage(bgurl);
    mf = loadImage(muzzleFlash);
    T1 = loadImage(Tenemy);
    T2 = loadImage(Tenemy);
    T3 = loadImage(Tenemy);

    // Local File
    // AKshot = loadSound("assets/AK.mp3");
    // Death = loadSound("assets/Death.mp3");
    // Death2 = loadSound("assets/Death2.mp3");
    // Hit = loadSound("assets/Hit.mp3");
    AKshot = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/AK.mp3");
    Death = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/Death.mp3");
    Death2 = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/Death2.mp3");
    Hit = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/Hit.mp3");
}


function setup() {
    createCanvas(720, 400);
    bg.resize(720,400);
    frameRate(60);
    noCursor();
}


function draw() {
    if (mfTrue == true) { //If mouse pressed, activate muzzle flash.
        mfTrue = false; //Reset muzzle flash as false.
        image(bg, 0, 0);
        image(mf, 230, 30); //Draw muzzle flash and background.
    } else {
        image(bg, 0, 0);
    }

    //Draw the three enemies.
    if (T1Alive == true) {
        push();
        image(T1,180,180);
        T1.resize(35,70);
        pop();
    } 

    if (T2Alive == true) {
        push();
        image(T2,500,180);
        T2.resize(25,50);
        pop();
    } 

    if (T3Alive == true) {
        push();
        image(T3,370,192);
        T3.resize(13,26);
        pop();
    } 

    if (T1Alive == false & T2Alive == false && T3Alive == false) { //Reset if all enemies are dead.
        T1Alive = true;
        T2Alive = true;
        T3Alive = true;
    }

    crosshairs(); //Draw Crosshair
}

function crosshairs() { //Crosshair 
    stroke("white");
    strokeWeight(2);
    line(mouseX,mouseY,mouseX+20,mouseY);
    line(mouseX,mouseY,mouseX-20,mouseY);
    line(mouseX,mouseY,mouseX,mouseY+20);
    line(mouseX,mouseY,mouseX,mouseY-20);
}

function mousePressed() {
    //Play gunshot every click.
    AKshot.play();
    mfTrue = true;
    
    //Enemy 1 Hitbox
    if(mouseX > 180 & mouseX < 205 && mouseY > 180 && mouseY < 250 && T1Alive == true) {

        if (T1HitCount <= 4) { //Need 5 hits to kill.
            Hit.amp(2.5);
            Hit.play();
            T1HitCount += 1;
        } else { //Play death
            Death.amp(3);
            Death.play();
            Hit.amp(2);
            Hit.play();
            T1Alive = false;
            T1HitCount = 0;
        }
    }

    //Enemy 2 Hitbox
    if(mouseX > 500 & mouseX < 525 && mouseY > 180 && mouseY < 230 && T2Alive == true) {
        if (T2HitCount <= 4) { //Need 5 hits to kill.
            Hit.amp(2.5);
            Hit.play();
            T2HitCount += 1;
        } else { //Play death
            Death2.amp(3);
            Death2.play();
            Hit.amp(2);
            Hit.play();
            T2Alive = false;
            T2HitCount = 0;
        }
    }

    //Enemy 3 Hitbox
    if(mouseX > 370 & mouseX < 383 && mouseY > 192 && mouseY < 218 && T3Alive == true) {
        if (T3HitCount <= 4) { //Need 5 hits to kill.
            Hit.amp(2.5);
            Hit.play();
            T3HitCount += 1;
        } else { //Play death
            Death.amp(3);
            Death.play();
            Hit.amp(2);
            Hit.play();
            T3Alive = false;
            T3HitCount = 0;
        }
    }
}

Charmaine Qiu – Looking Outwards – 10

Taryn Southern is a singer active on YouTube who creates her own contents. I find her most recent album particularly interesting as it was entirely composed and produced with artificial intelligence. In an interview with Taryn, she informed us that she used an AI platform called Amper Music to create the instrumentation of her songs. In her creating process, Taryn would decide factors such as the BPM, rhythm, and key, and the AI would generate possibilities for her. From there, she could select the pieces that she enjoyed, and arrange them along with the lyrics that she wrote herself. She states that the advantage of working with an AI is that it gives her a lot of control over what she desires, as opposed to a human partner who may not understand her intents. However, I personally find her songs generic and lack the emotions that move the audience. There are many things that artificial intelligence can achieve, but I believe that music that truly conveys human sentiments should fully origin from the minds of people.

“Break Free” – a song where the instrumentation was composed with AI

Margot Gersing – Looking Outwards- 10

Weather Thingy example

This week I looked at a project called Weather Thingy by Adrien Kaeser. This project that uses a sound controller that takes weather and climate events to modify the musical instrument and the sound it makes.  

controller connected to the keyboard to play the music

Part of why I liked this project so much it is works in real time. It has sensors that collect data from the climate it is in and the controller interprets the data to create different sounds. The machine has a weather data collection station which includes a rain gauge, a wind vane and a anemometer. It also has a brightness sensor. The user then uses the interface to choose what sensor he is working with and uses a potentiometer to modify the data and create different sounds.

interface collecting data from the wind vane

I think this project is so interesting because of its presence in real time and its ability to act as a diary. This device can also store data from a specific time and then you can use that pre-recorded data later on. This way it is almost like a window to a certain time and what was going on then. I can see the potential of using this to see how climate change has affected the same spot over time. I can almost imagine a soundscape being made in one spot and then in the same spot 20 years later and see how different it is.

Charmaine Qiu – Project 10 – Sonic Sketch


sketch

In this project, I was able to incorporate new knowledge of importing sound and oscillations into my former assignment. I had fun looking for edm music sources online and creating an interactive project that people could play with.

// Charmaine Qiu
// charmaiq@andrew.cmu.edu
// section E
//Project - 10 - Sonic Sketch


var angle = 0
var b = 0
var bgmusic;
var heySound;
var beat;

function preload() {
    //preload the audios and loop the background music
    beat = loadSound('https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/beat.wav');
    heySound = loadSound('https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/hey.wav');
    bgmusic = loadSound('https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/bgmusic.wav');
    bgmusic.loop();
}

function setup() {
    createCanvas(400, 400);
    //createDiv("p5.dom.js library is loaded.");
    //======== call the following to use sound =========
    useSound();
}

function soundSetup() { // setup for audio generation
    //set the volume for audio and play background music
    bgmusic.setVolume(1);
    bgmusic.play();
    heySound.setVolume(1);
    beat.setVolume(2);
    //setup for oscillation
    osc = new p5.TriOsc();
    osc.freq(500);
    osc.amp(1);
    osc.start();
}

function draw() {
    //set the frequency of oscillation according to placement of mouseX
    osc.freq(mouseX);
    osc.amp();
    //when the mouse is pressed, "hey" plays
    if (mouseIsPressed){
        heySound.play();
    }

   //graphics created from precious project
    fill(b);
    //randomizing the color in greyscale
    b = random (0, 255);
    strokeWeight(0);
    rectMode(CENTER);
    push();
    //square that follows the mouse
    translate(mouseX, mouseY);
    background(0);
    rotate(radians(angle));
    rect(0, 0, 50, 50);
    pop();
    //angle rotates
    angle += 5;

    //rectangle outlines in the center
    noFill();
    stroke(255);
    strokeWeight(5);
    push();
    translate(width / 2, height / 2);
    rect(0, 0, mouseX, mouseY);
    pop();

    stroke(b);
    strokeWeight(1);
    rect(width * 0.5, height * 0.5, mouseY, mouseX);

   //dancing lines in the center
    stroke(255);
    strokeWeight(1);
    line(width / 2 - 40, height / 2, width / 2 - 40, mouseY + 50);
    line(width / 2 - 30, height / 2, width / 2 - 30, mouseY);
    line(width / 2 - 20, height / 2, width / 2 - 20, mouseY - 20);
    line(width / 2 - 10, height / 2, width / 2 - 10, mouseY + 40);
    line(width / 2, height / 2, width / 2, mouseY);
    line(width / 2 + 10, height / 2, width / 2 + 10, mouseY + 60);
    line(width / 2 + 20, height / 2, width / 2 + 20, mouseY + 10);
    line(width / 2 + 30, height / 2, width / 2 + 30, mouseY);
    line(width / 2 + 40, height / 2, width / 2 + 40, mouseY - 30);

   //When the mouse move to the left side of the canvas
    if (mouseX <= width / 2){
        //squares that rotates around the mouse
        push();
        translate(mouseX - 50, mouseY - 50);
        rotate(radians(angle));
        rectMode(CORNER);
        rect(20, 20, 20, 20);
        pop();
        angle = angle + 0.5;

        push();
        translate(mouseX + 50, mouseY + 50);
        rotate(radians(angle));
        rect(0, 0, 10, 10);
        pop();
        angle = angle - 0.5

        //text appears
        textSize(15);
        text('WooHooo!!!', 20, 90);
        textSize(30);
        text('哦耶!', 280, 180);


      } else { //When the mouse move to the right side of the canvas
        fill(0);
        strokeWeight();
        push();
        translate(mouseX, mouseY);
        rotate(radians(angle));
        rectMode(CENTER);
        rect(0, 0, 30, 30);
        pop();
        angle = angle + 5

        //text appears
        textSize(20);
        fill(255);
        text('야호!', 280, 50);
        textSize(25);
        text('ヤッホ〜ー', 70, 350);
       }
}
//when the key "b" is pressed, a beat sound is played
function keyPressed(){
    if(key == "b"){
        beat.play();
    }
}

Caroline Song – Project 10 – Sonic Sketch

sketch

//Caroline Song
//chsong@andrew.cmu.edu
//Section E
//Project 10 - Sonic Sketch

var crashCymbal;
var rideCymbal;
var bassDrum;
var highTom;
var midTom;

function preload() {
    // call loadImage() and loadSound() for all media files here
    crashCymbal = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/cymbals_1.wav");
    rideCymbal = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/ridecymbal.wav");
    bassDrum = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/bassdrum.wav");
    highTom = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/hightomdrum.wav");
    midTom = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/midtomdrum.wav");
}


function setup() {
    createCanvas(550, 420);
}


function draw() {
    background("pink");

    //drawing right cymbal stand
    push();
    strokeWeight(3)
    line(420, 75, 495, height/2);
    line(495, height/2, 450, 350);
    line(450, 350, 485, 380);
    line(450, 350, 450, 380);
    line(450, 350, 415, 380);
    pop();

    //drawing right cymbal
    push();
    fill(255, 218, 130);
    noStroke();
    translate(420, 75);
    rotate(10/3);
    ellipse(0, 0, 150, 30);
    pop();

    //drawing left cymbal stand
    push();
    strokeWeight(3);
    line(120, 75, 45, height/2);
    line(45, height/2, 90, 350);
    line(90, 350, 55, 380);
    line(90, 350, 90, 380);
    line(90, 350, 125, 380);

    //drawing left cymbal
    push();
    fill(255, 218, 130);
    noStroke();
    translate(120, 75);
    rotate(-10/3);
    ellipse(0, 0, 150, 30);
    pop();

    //drawing middle (bass) drum
    push();
    fill(191, 6, 0);
    noStroke();
    ellipse(width/2 - 15, 280, 200, 200);
    fill(240);
    ellipse(width/2 - 15, 280, 170, 170);
    fill(0);
    rect(width/2 + 65, 280, 25, 10);
    rect(width/2 - 15, 280 + 80, 10, 25);
    rect(width/2 - 120, 280, 25, 10);
    pop();


    //drawing top left drum
    push();
    fill(191, 6, 0);
    noStroke();
    translate(168, 160);
    rotate(10/3);
    rect(-45, -45, 89, 60);
    pop();

    push();
    fill(191, 6, 0);
    noStroke();
    translate(171, 145);
    rotate(10/3);
    ellipse(0, 0, 90, 30);
    pop();

    push();
    fill(240);
    noStroke();
    translate(160, 200);
    rotate(10/3);
    ellipse(0, 0, 90, 30);
    pop();

    //drawing top right drum
    push();
    fill(191, 6, 0);
    noStroke();
    translate(350, 160);
    rotate(-10/3);
    rect(-45, -45, 89, 60);
    pop();

    push();
    fill(191, 6, 0);
    noStroke();
    translate(348, 145);
    rotate(-10/3);
    ellipse(0, 0, 90, 30);
    pop();

    push();
    fill(240);
    noStroke();
    translate(358, 200);
    rotate(-10/3);
    ellipse(0, 0, 90, 30);
    pop();

}

function mousePressed() {
    //crash cymbal sound when clicking on right cymbal
    if(mouseX > 345 & mouseX < 495 && mouseY > 55 && mouseY < 95){
       crashCymbal.play();
   }

   //ride cymbal sound when clicking on left cymbal
   if(mouseX > 40 & mouseX < 190 && mouseY > 55 && mouseY < 95){
       rideCymbal.play();
   }

   //bass drum sound when clicking on middle drum
   if(mouseX > 160 & mouseX < 350 && mouseY > 180 && mouseY < 370){
       bassDrum.play();
   }

   //high tom sound when clicking on right small drum
   if(mouseX > 310 & mouseX < 400 && mouseY > 130 && mouseY < 210){
       highTom.play();
   }

   //mid tom sound when clicking on left small drum
   if(mouseX > 50 & mouseX < 200 && mouseY > 130 && mouseY < 210){
        midTom.play();
   }
}

I had a lot of fun creating this sonic sketch. For this project, I wanted to create a simplified drum set using 5 sounds. When clicking on the different drums and cymbals, the different sounds, in accordance to what the drum or cymbal is, will play.

The bass drum sound will activate when clicking on the middle/ biggest drum

The high tom sound will activate when clicking on the high tom drum (the right small drum)

The low tom sound will activate when clicking on the low tom drum (the left small drum)

The crash cymbal sound will activate when clicking on the right cymbal

The ride cymbal sound will activate when clicking on the left cymbal

Jina Lee – Project 10

sketch

// Jina Lee
// jinal2@andrew.cmu.edu
// Section E
// Project 10
var x = 0;
var cloudmove = 1;
var boathorn;
var seagulls;
var wave;
var help;

function preload() {
    help = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/help.wav");
    boathorn = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/boathorn.wav");
    seagulls = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/seagulls.wav");
    waves = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/waves.wav");
}


function setup() {
    createCanvas(480, 480);
    background(173, 216, 230);
}

function draw() {

    cloudDraw();
    //person
    noStroke();
    fill(226, 63, 41);
    ellipse(300, 200, 15, 40);
    fill(229, 194, 152);
    ellipse(300, 170, 20, 20);
    //flag
    fill(255);
    triangle(200, 100, 200, 130, 250, 115);
    stroke(0);
    strokeWeight(5);
    line(200, 100, 200, 300);
    //boat
    noStroke();
    fill(101, 67, 33);
    arc(250, 200, 350, 400, 0, PI, TWO_PI);
    fill(150);
    rect(150, 170, 30, 30);
    arc(165, 160, 50, 50, 0, PI, TWO_PI);
    //waterwaves
    fill(0, 143, 198);
    rect(0, 320, width, 160);
    for (var i = 0; i < 700; i += 30) {
        push();
        translate(-200 * 1, 0);
        fill(0, 143, 198);
        triangle(i, 320, i + 20, 290, i + 40, 320);
        pop();
    }
}

function cloudDraw() {
    noStroke();
    //sky color
    fill(173, 216, 230);
    rect(0, 0, width, height/2);
    //cloud color
    fill(230);
    //cloud move
    x = x + cloudmove;
    if(x >= width + 10){
        x = 0;
    }
    //cloud parts and drawing multiple clouds in sky section
    for (i = 0; i <= 10; i++) {
        push();
        translate(-200 * i, 0);
        ellipse(x + 10, height / 4, 50, 50);
        ellipse(x + 50, height / 4 + 5, 50, 50);
        ellipse(x + 90, height / 4, 50, 40);
        ellipse(x + 30, height / 4 - 20, 40, 40);
        ellipse(x + 70, height / 4 - 20, 40, 35);
        pop();
    }
}


function mousePressed(){
    // when you press the grey horn
    // then a boat horn will start playing
    var b = dist(mouseX, mouseY, 150, 170);
    if (b < 50) {
        boathorn.play();
    }
    // when you press the person
    // the person shouts for help
    var d = dist(mouseX, mouseY, 300, 170);
    if (d < 20) {
        help.play();
    }
    // when you press the ocean
    // the waves start playing
    if (mouseX > 0 & mouseX < width && mouseY > 320 && mouseY < height) {
        waves.play();
    }
    // when you press the sky
    // seagulls will start chirpping
    if (mouseX > 0 & mouseX < width && mouseY > 0 && mouseY < 320) {
        seagulls.play();
    }
}

For this week, I wanted to create a person lost at sea. When you press the sky, you will hear seagulls everywhere. When you click on the person’s head, you can hear him saying “help, help.” When you press the water, you will hear the ocean waves. When you press the grey horn, you will hear a boat horn go off.