10: Sonic Story

The sonic story is a person sleeping throughout the day. He never wakes up, despite the sounds of the day and night. During the daytime, birds chirp and others are awake, and during the nighttime, the person is snoring and crickets are chirping.

sketchDownload="">
var sun;
var moon;
var crow;
var awake;
var nightSounds;
var snores;
var frameCounter = 0;
var sunset = 0;
var x = -200;
function preload () {
    moon = loadImage("https://i.imgur.com/jmfcmVw.png");
    sun = loadImage("https://i.imgur.com/on477my.png");
    morning = loadImage("https://i.imgur.com/xGVPDr2.png");
    night = loadImage("https://i.imgur.com/3XAUSES.png");

    crow = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/435507__benjaminnelan__rooster-crow-2.wav")
    awake = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/401338__ckvoiceover__yawning.wav");
    chirp = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/birdsound-1.wav");
    nightSounds = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/200167__ebonny__cicadas.wav");
    snores = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/409015__marisca16__old-man-snoring.wav");

}

function setup() {
    createCanvas(600, 400);
    frameRate(15);
    useSound();
}

function soundSetup() {
        crow.setVolume(0.3);
        awake.setVolume(0.4);
        chirp.setVolume(0.5);
        nightSounds.setVolume(0.9);
        snores.setVolume(0.5);
}


function draw() {
    imageMode(CENTER);

    if (sunset % 2 == 0) { //sunrise
        background(190, 230, 244);
        push();
        translate(115 + x, -50);
        image(sun, 200, 200, 600, 400);
        pop();
        image(morning, 300, 200, 600, 400);
    } else {

        background(46, 38, 86); //nighttime
        push();
        translate(115 + x, -50);
        image(moon, 200, 200, 600, 400);
        pop();
        image(night, 300, 200, 600, 400);
    }

    if (x == 300) {
        x = -200;
        sunset ++;
    }

    x += 5;


//morning
    if (x == -100 & sunset % 2 == 0) {
        crow.play();
    }
    if (x == -100 & sunset % 2 == 0) {
        chirp.play();
    }
    if (x == -100 & sunset % 2 == 0) {
        awake.play();
    }
//night
    if (x == -100 & sunset % 2 == 1) {
        nightSounds.play();
    }
    if (x == -100 & sunset % 2 == 1) {
        snores.play();
    }
}

I used 6 sounds. I used crowing, birds chirping, and someone yawning for the daytime sounds, and used snoring and crickets for the nighttime sounds. The biggest challenge was finding a way to align the sounds with the daytime and nighttime, and ended up using the x width and a counter to track if it is daytime or nighttime.

Project 10- Sonic Story

I wanted to create a story that was fun and easy to understand. I took a typical camping scary story and turned it into a visual piece of code. I left the story open ended where the viewer can guess what happens next.

sketchDownload
/*There is man at a camp fire telling ghost stories. The flashlight is the
trope of holding a flashlight under one's chin. A ghost then appears but cannot
move past the fire. The wind then blows out the fire and the screen goes dark.
The next part is up to the viewer's imagination.*/

function setup() {
    createCanvas(480, 480);
    createDiv("p5.dom.js library is loaded.");
    frameRate(1);
    useSound();
}

//loads all audio files before running the code
function preload(){
    ghostSound=loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/Ghost.wav");
    fireCrackling=loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/Fire.wav");
    flashlightClick=loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/Flashlight.wav");
    windWoosh=loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/Wind.wav");
}

//sets the volume for all the sounds
function soundSetup(){
    ghostSound.setVolume(1);
    fireCrackling.setVolume(1);
    flashlightClick.setVolume(1);
    windWoosh.setVolume(1);
}

function draw() {
    background(26, 27, 71);
    fill(0, 255, 0);
    //creates the grass
    rect(0, 200, 480, height-200);


    translate(100, 100);
    push();
    //if frameCount is even it will display one fire, if odd it will display
    //the other
    //the secondary ifs make the fire stop when the wind blows past
    if(frameCount % 2 == 0){
        translate(115, 110);
        scale(.8);
        fill(255, 0, 0);
    //One version of the fire
        if(frameCount < 32){ //stops the fire when the wind blows by
            beginShape();
            curveVertex(84, 70);
            curveVertex(84, 70);
            curveVertex(95, 19);
            curveVertex(87, 5);
            curveVertex(75, 25);
            curveVertex(60, -30);
            curveVertex(40, 25);
            curveVertex(32, -10);
            curveVertex(21, 17);
        curveVertex(32, 70);
        curveVertex(84, 70);
        curveVertex(84, 70);
        endShape();
    //pop();
        }
    }
    else{
        if(frameCount < 32){ //stops fire when the wind blows by
    //Second version of the fire
            push();
            translate(115, 110);
            scale(.8);
            fill(255, 0, 0);
            beginShape();
            curveVertex(84, 70);
            curveVertex(84, 70);
            curveVertex(32, 70);
            curveVertex(21, 17);
            curveVertex(32, 0);
            curveVertex(40, 25);
            curveVertex(50, -25);
            curveVertex(75, 25);
            curveVertex(80, 5);
            curveVertex(90, -5);
            curveVertex(84, 70);
            curveVertex(84, 70);
            endShape();
        }
    }
    pop();

    //downward sloping log under the fire
    fill(165, 42, 42);
    push();
    translate(125, 150);
    rotate(radians(25));
    rect(0, 0, 80, 20);
    pop();
    //upward sloping log under the fire
    push();
    translate(125, 150);
    rotate(radians(-25));
    rect(-20, 30, 80, 20);
    pop();

    //if statement makes the face light up with the flashlight
    if(frameCount>12){
        fill(253, 217, 181);
    }
    else{
        fill(0);
    }
    //head
    circle(0, 5, 50);
    //body
    line(0, 30, 0, 100);
    //legs
    line(0, 100, -15, 150);
    line(0, 100, 15, 150);
    //arms
    line(-15, 60, 15, 60);
    line(15, 60, 0, 70);

    //flashlight
    fill(255);
    rect(-2.5, 60, 5, 20);
    quad(-2.5, 60, 2.5, 60, 7.5, 50, -7.5, 50)


    //flashlight beam that lights up face
    if(frameCount > 12){
        push();
        noStroke();
        fill(255, 255, 0, 60);
        quad(-7.5, 50, 7.5, 50, 25, 0, -25, 0);
        pop();
    }
    //moves the ghost from right to left
    push();
    if(frameCount > 17 & frameCount < 27){
        translate(frameCount*-5, 0);
        ghost();
    }
    pop();

    //wind
    //if moves the wind from right to left
    if(frameCount > 27){
        push();
        translate(200+frameCount*-10, 0);
        stroke(255);
        line(250, 50, 300, 50);
        line(275, 70, 325, 70);
        line(290, 30, 340, 30);
        pop();
    }
    //stops the animation and creates a black screen
    if(frameCount > 32){
        background(0);
        noLoop();
    }
    //when the flashlight turns on, the sound is made
    if(frameCount == 13){
        flashlightClick.play();
    }
    //fire sounds starts at 5 and ends prior to the flashlight
    else if(frameCount == 5){
        fireCrackling.play();
            if(frameCount == 10){
                fireCrackling.stop();
            }
    }
    //ghost sound starts when it is created
    else if(frameCount == 18){
        ghostSound.play();
    }
    //wind sound plays when the wind appears on screen
    else if(frameCount == 28){
        windWoosh.play();
    }
}
//function to create the ghost
function ghost(){
    push();
    beginShape();
    noStroke();
    arc(300, 50, 40, 100, PI, 0);
    triangle(300, 50, 305, 65, 310, 50);
    triangle(310, 50, 315, 65, 320, 50);
    triangle(290, 50, 295, 65, 300, 50);
    triangle(280, 50, 285, 65, 290, 50);
    fill(0);
    ellipse(295, 20, 5, 10);
    ellipse(305, 20, 5, 10);
    pop();
}

LO-10: Computational Music

Author: Christine McLeavey Payne (An assortment of people created the actual product)
Date: April 25, 2019
Project: MuseNet

MuseNet is a neural network that can develop music of its own. It can create short compositions in the style of different artists/composers with instruments of choice. This is a very creative idea because it allows people to compose music in the style of someone like Beethoven, but with guitar instead. I admire the creativity in the project, but also this combination of so many different styles and types of music. Much of what is produced by MuseNet is compositions that would never be possible or done without the computational work done by the team. The algorithms were created by a neural network, essentially a type of code that learns based off of inputs. In doing so, the computer learned patterns from music rather than individual analysis having to be done by people for every type of music/song. The artistic sensibilities are shown by the creative aspect of MuseNet. Clearly, the team cared about music and wanted to create a unique twist so they used their computer science knowledge to do this.

Link to Blog: https://openai.com/blog/musenet/

Link to Example: https://soundcloud.com/openai_audio/pop-nocturne

Project 10: Sonic Story

For this project, I reintroduce three characters from a cartoon TV show called We Bare Bears. With images I used online, I created a story of the three bears enjoying the company of each other. In the first scene, the Panda is alone and on his phone. Once Grizzly comes into the second scene, the music begins to play with birds chirping in the background. Then for the rest of the story, Ice (polar bear) also joins and has fun with the two other bears by taking selfies.

sketch – Copy
//Rachel Kim
//15-104(Section C)
//rachelki@andrew.cmu.edu
//Project 10


//NOTE
//when submitting to autolab use ideate links
//to test sounds on your own computer put in local server

//images
var grizzlyBearWave;
    var grizzlyX1 = 600;
    var grizzlyY1 = 200;

var polarBear;
    var iceX1 = 600;
    var iceY1 = 200;

var pandaBear;
var phonePanda;
var selfiePanda;

var tree;
var cloud;
    var cloudX = 3.0;
    var cloudX1 = 230;
    var cloudY1 = 50;
    var cloudX2 = 420;
    var cloudY2 = 90;
    var cloudX3 = 20;
    var cloudY3 = 3;

var bird;
    var birdX = 3.0;
    var birdX1 = 200;
    var birdY1 = 80;

//sounds
var morningTune;

//extra
var frameCount = 0;
var grizzlyWalking = true;
var iceGliding = true;



function preload() {
    //images of characters
    pandaBear = loadImage("https://i.imgur.com/QZ4Xc1z.png"); 
    phonePanda = loadImage("https://i.imgur.com/6uzoWNj.png");
    selfiePanda = loadImage("https://i.imgur.com/Nf2uQ1H.png");
    
    grizzlyBearWave = loadImage("https://i.imgur.com/c7NYxSP.png"); 
    posingGrizzly = loadImage("https://i.imgur.com/PEW3RSR.png");

    iceBear = loadImage("https://i.imgur.com/tg3n57a.png"); 
    glidingIce = loadImage("https://i.imgur.com/05dhxMV.png");
    posingIce = loadImage("https://i.imgur.com/MCEiihm.png");


    //images of extras
    tree = loadImage("https://i.imgur.com/cRiGrz5.png");
    cloud = loadImage("https://i.imgur.com/UjxNnu7.png");
    bird = loadImage("https://i.imgur.com/me1Zdik.png");

    //sounds in story for submission
    morningTune = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/morningsong-1.wav");
    
    //sounds in story for self testing --- localserver
    //morningTune = loadSound("sounds/morningsong.wav");
}


function setup() {
    createCanvas(600, 420);
    useSound();
    frameRate(10);
}


function soundSetup() { 
    morningTune.setVolume(0.5);

}


function draw() {
    
    frameCount++;

    switch (frameCount) {
        case 61: morningTune.play(); break; //to start playing song when panda is no longer alone
    }

    //story frames
    //partA
    if (frameCount >= 0 & frameCount < 60) {
        pandaOnPhone();

        //movement of clouds
        if (cloudX1 > width) {
            cloudX1 = 0; 
        } else if (cloudX2 > width) {
            cloudX2 = 0; 
        } else if (cloudX3 > width) {
            cloudX3 = 0;
        }

    }

    //partB
    if (frameCount >= 60 & frameCount < 130) {
        grizzlySaysHi();

        //movement of clouds
        if (cloudX1 > width) {
            cloudX1 = 0; 
        } else if (cloudX2 > width) {
            cloudX2 = 0; 
        } else if (cloudX3 > width) {
            cloudX3 = 0;
        }

        //grizzly says hi
        if (grizzlyWalking) {
            grizzlyX1 -= 5;
        } else if (grizzlyX1 <= width/2 + 50) {
            grizzlyWalking = false; 
        }

    }


    //partC
    if (frameCount >= 130 & frameCount < 180) {
        selfieTimeA();
        
        //movement of clouds
        if (cloudX1 > width) {
            cloudX1 = 0; 
        } else if (cloudX2 > width) {
            cloudX2 = 0; 
        } else if (cloudX3 > width) {
            cloudX3 = 0;
        }

        //movement of bird
        if (birdX > width) {
            birdX = 0;
        }
    }


    //partD
    if (frameCount >= 180 & frameCount < 240) {
        iceBearStares();

        //movement of clouds
        if (cloudX1 > width) {
            cloudX1 = 0; 
        } else if (cloudX2 > width) {
            cloudX2 = 0; 
        } else if (cloudX3 > width) {
            cloudX3 = 0;
        }

        //movement of bird
        if (birdX > width) {
            birdX = 0;
        }

    }

    //partE
    if (frameCount >= 240 & frameCount < 410) {
        iceBearJoins();

        //movement of clouds 
        if (cloudX1 > width) {
            cloudX1 = 0; 
        } else if (cloudX2 > width) {
            cloudX2 = 0; 
        } else if (cloudX3 > width) {
            cloudX3 = 0;
        }

        //movement of bird
        if (birdX > width) {
            birdX = 0;
        }

        //ice bear joins by gliding
        if (iceGliding) {
            iceX1 -= 5;
        } else if (iceX1 <= 200) {
            iceGliding = false;
        }

    }

    //partF
    if (frameCount >= 410 & frameCount < 460) {
        selfieTimeB();

        //movement of clouds
        if (cloudX1 > width) {
            cloudX1 = 0; 
        } else if (cloudX2 > width) {
            cloudX2 = 0; 
        } else if (cloudX3 > width) {
            cloudX3 = 0;
        }

        //movement of bird
        if (birdX > width) {
            birdX = 0;
        }
              
    }

    if (frameCount >= 460) {
        background("black");
        fill(255);
        textSize(50);
        textFont('Georgia');
        text('The End', 300, 300);
    } 

}


//separate functions for each scene
//PART A
function pandaOnPhone() {
    background(175, 206, 255); 
    sun();  
    grass(); 
    
    clouds();

    image(tree, 5, 5, 350, 350);

    image(phonePanda, 150, 240, 150, 150); 
}

//PART B
function grizzlySaysHi() {
    background(175, 206, 255); 
    sun();  
    grass();

    clouds();

    image(tree, 5, 5, 350, 350);

    image(pandaBear, 150, 200, 150, 230);
    image(grizzlyBearWave, grizzlyX1, grizzlyY1, 150, 200); 
}

//PART C
function selfieTimeA() {
    background(175, 206, 255); 
    sun();  
    grass();

    clouds();
    birdie();

    image(tree, 5, 5, 350, 350);

    image(posingGrizzly, 120, 180, 200, 250);
    image(selfiePanda, 250, 150, 200, 320);
}

//PART D
function iceBearStares() {
    background(175, 206, 255); 
    sun();  
    grass();

    clouds();
    birdie();

    image(tree, 5, 5, 350, 350);

    image(posingGrizzly, 120, 180, 200, 250);
    image(selfiePanda, 250, 150, 200, 320);
    image(iceBear, 550, 200, 85, 130);

}

//PART E
function iceBearJoins() {
    background(175, 206, 255); 
    sun();  
    grass();

    clouds();
    birdie();

    image(tree, 5, 5, 350, 350);

    image(glidingIce, iceX1, iceY1, 170, 150);
    image(posingGrizzly, 120, 180, 200, 250);
    image(selfiePanda, 250, 150, 200, 320);     
}

//PART F
function selfieTimeB() {
    background(175, 206, 255); 
    sun();  
    grass();

    clouds();
    birdie();

    image(tree, 5, 5, 350, 350);

    image(posingIce, 50, 200, 150, 200); 
    image(posingGrizzly, 120, 180, 200, 250);
    image(selfiePanda, 250, 150, 200, 320);    
}



//EXTRA --- "background"
function sun() { //yellow circle in partA
    strokeWeight(1);
    stroke(0);
    fill(255, 242, 147);
    circle(500, 70, 80);
}

function grass() { //green rectangle in partA
    strokeWeight(1);
    stroke(0);
    fill(133, 182, 57);
    rect(0, 250, 600, 170);
}

function clouds() { //clouds in partA
    image(cloud, cloudX1, cloudY1, 150, 80);
    image(cloud, cloudX2, cloudY2, 150, 80);
    image(cloud, cloudX3, cloudY3, 150, 80);
    cloudX1 += cloudX; //speed of clouds
    cloudX2 += cloudX;
    cloudX3 += cloudX;
}

function birdie() { //bird in partA
    image(bird, birdX1, birdY1, 150, 150);
    birdX1 += birdX; //speed of bird
}




Project-10-Sonic-Story

sketch
// Jasmin Kim
//Section D
      
var mouseSound;       
var mouseeX=250;
var mouseeY=100;
var x;
var y;


function preload() { //preloading sounds
//loading sounds
mouseSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/rat.wav");
}

function setup() {
    createCanvas(500, 550);
    frameRate(1);
    useSound();
}


function soundSetup() { //setup for audio generation
    mouseSound.setVolume(0.3);
}

function draw(){
    console.log(frameRate);
    background(230);
    drawCheese();
    mouseSound.play();
    //plateSlide.play();
    if(frameCount >=2 & frameCount <=4){
        translate(0,-80);
        drawMouse(x,y);
    }
    if(frameCount > 4 & frameCount <=6){
        translate(0,0);
        drawMouse(x,y);
        translate(100,-50);
        drawMouse(x,y);
    }
    if(frameCount > 6 & frameCount <=8){
        translate(0,60);
        drawMouse(x,y);
        translate(100,-30);
        drawMouse(x,y);
        translate(-200,-60);
        drawMouse(x,y);
    }
    if(frameCount > 8 & frameCount <=10){
        translate(0,120);
        drawMouse(x,y);
        translate(100,0);
        drawMouse(x,y);
        translate(-200,-50);
        drawMouse(x,y);
    }
    if(frameCount > 10 & frameCount <=12){
        push();
        circle(302,342,62);
        pop();
        translate(0,130);
        drawMouse(x,y);
        rotate(PI/10);
        translate(100,60);
        drawMouse(x,y);
        rotate(-PI/10);
        translate(-200,-30);
        drawMouse(x,y);
    }
    if(frameCount >12 & frameCount <=14){
        push();
        circle(276,357,110);
        pop();
        translate(0,180);
        drawMouse(x,y);
        rotate(PI/10);
        translate(100,120);
        drawMouse(x,y);
        rotate(-PI/10);
        translate(-200,0);
        drawMouse(x,y);
    }
    if(frameCount >14 & frameCount <=16){
        push();
        circle(276,357,110);
        circle(193,367,79);
        pop();
        translate(0,190);
        rotate(PI/10);
        drawMouse(x,y);
        translate(100,130);
        drawMouse(x,y);
        rotate(-PI/10);
        translate(-200,60);
        drawMouse(x,y);
    }
    if(frameCount >16 & frameCount <=18){
        push();
        circle(276,357,110);
        circle(193,367,79);
        pop();
        translate(0,250);
        rotate(PI/10);
        drawMouse(x,y);
        translate(0,180);
        drawMouse(x,y);
        rotate(-PI/10);
        translate(-200,80);
        drawMouse(x,y);
    }
    if (frameCount>18 & frameCount <20){
        fill(255);
        circle(249,379,181);
    } else if(frameCount >= 20){
        fill(255);
        circle(249,379,181);
        mouseSound.disconnect();
        textSize(30);
        fill(0);
        text("Your cheese is gone.", width/2-100,200);
        noLoop();
    }

}

function drawCheese(x,y){
    fill(255);
    noStroke();
    circle(249,387,234);    //white plate
    push();
    noFill();
    strokeWeight(1);
    stroke(49,51,73);
    circle(249,387,220);        //navy plate
    pop();
    fill(253,222,85);
    noStroke();
    triangle(323,334,241,471,167,363);      //cheese
    fill(255);
    circle(200,357,20);
    circle(270,346,11);
    circle(236,391,11);
    circle(189,395,12);
    circle(222,436,20);
    circle(247,459,11);
    circle(277,413,20);
    circle(315,349,11);
}


function drawMouse(){
    fill(127,84,41);        //brown
    stroke(0);
    strokeWeight(1);
    ellipse(mouseeX,mouseeY,98,103);            //body
    arc(mouseeX, mouseeY+45, 52, 52, 0, PI);       //face
    push();
    //eyes
    fill(0);                                    
    ellipse(mouseeX-10,mouseeY+52,7,8); //left
    ellipse(mouseeX+10,mouseeY+52,7,8); //right
    ellipse(mouseeX,mouseeY+66,5,5);
    fill(255);
    ellipse(mouseeX-10,mouseeY+51,3.7,4.7);
    ellipse(mouseeX+10,mouseeY+51,3.7,4.7);
    noFill();
    stroke(0);
    line(mouseeX-30,mouseeY+61,mouseeX-7,mouseeY+65);  //left
    line(mouseeX-30,mouseeY+69,mouseeX-7,mouseeY+67);
    line(mouseeX-23,mouseeY+78,mouseeX-5,mouseeY+69);
    line(mouseeX+30,mouseeY+61,mouseeX+8,mouseeY+65);  //right
    line(mouseeX+7,mouseeY+67,mouseeX+30,mouseeY+69);
    line(mouseeX+6,mouseeY+69,mouseeX+24,mouseeY+78);
    pop();
    stroke(127,84,41);
    strokeWeight(4);
    line(mouseeX,mouseeY-50,mouseeX-23,mouseeY-69);     //tail
    noStroke();

    push();
    fill(0);
    arc(mouseeX+24, mouseeY+30, 37, 39, -PI,TWO_PI);  //right ear black
    arc(mouseeX-24, mouseeY+30, 37, 39,PI, TWO_PI);  //left ear black
    pop();
    ellipse(mouseeX+25, mouseeY+31, 37, 39);  //right ear brown
    ellipse(mouseeX-25, mouseeY+31, 37, 39);  //left ear brown
   
    push();
    fill(247,168,170);      //pink
    ellipse(mouseeX+25,mouseeY+30,31,31);
    ellipse(mouseeX-25,mouseeY+30,31,31);
    pop();
    ellipse(mouseeX+22,mouseeY+34,31,28);       //left ear cover
    ellipse(mouseeX-22,mouseeY+34,32,28);       //right ear cover
}

For this project, I tried to show a short animation of mice eating all of my cheese. As frameCount increases, mouse appears and the mouse sound increases. I also tried to show how the cheese gradually disappears throughout the frame.

LO-10: Computer Music

The project I chose is The Welcome Chorus by Yuri Suzuki. This project is an interactive installation in the county of Kent commissioned by the Turner Contemporary consisting of 12 horns that continuously sing AI generated lyrics. What I admire most about this project, like for most of Suzuki’s other works, is its ability to blend sound and technology to produce music in unconventional ways that are easily accessible to anyone and everyone. The lyrics, reflecting the people’s experiences living in Kent and Kent as a whole, were gathered from workshops and gatherings and put into a data bank in which the AI algorithms learned from to produce the lyrics that will be sung. Another AI system was integrated in order to produce folk song melodies so that the installation can produce songs with both lyrics and melodies. Suzuki’s artistic sensibilities are manifested in the final form since, like his other works, he turns this complex project into an interactive sculpture that any visitor can contribute to (using an ongoing machine learning “conductor”) and learn from without the extra burden of trying to understand complex ideas.

Yuri Suzuki’s The Welcome Chorus (2020)

LookingOutwards-10

There isn’t specific computational music for this launchpad but I choose this is one because it is a new method(at least for me) to create music using technology. People can compose/edit a music using launchpad that had each own’s volume and pitch. Depending on how the user sets up the mode, it can be used as a bass or the main pitch. Even though this video is not creating original music, people can edit/make a chorus corresponding to the music. I think it is also fascinating how music can be linked to those notes and be edited/created right away by the composer.

Project 10: Sonic Story

sketchDownload
//Nicholas Wong
//Section A
//nwong1@andrew.cmu.edu
//Assignment 10

var angle = 0; //Angle for clock
var catEyes = 0; //Cat eye size
var mousePos = 0; //Mouse position
var mousedx = 5; //Mouse speed

function preload() 
{
    //For use in web upload
   catSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/cat.wav");
   mouseSound =loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/mouse1.wav"); 
   clockSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/clock.wav");
   thunderSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/thunder-2.wav"); 

    //For use in localhost
    /*
    catSound = loadSound("cat.wav");
    clockSound = loadSound("clock.wav");
    mouseSound = loadSound("mouse1.wav");
    thunderSound = loadSound("thunder.wav");
    */
}

function soundSetup() 
{ // setup for audio generation
    catSound.setVolume(0.5);
    mouseSound.setVolume(0.4);
    clockSound.setVolume(0.7);
    thunderSound.setVolume(1);
}

function setup() {
    // you can change the next 2 lines:
    createCanvas(480, 480);
    createDiv("p5.dom.js library is loaded.");
    useSound();
    frameRate(1);
    angleMode(DEGREES);
}




function draw() 
{
    background(140,90,50);

    //Backdrop (window, room)
    drawBackdrop();

    //Frame dependant events
    if(frameCount % 7 == 0)
    {
        clockSound.play();
    }

    if(frameCount % 12 == 0)
    {
        drawLightning() //Draw lightning for 1 frame
        catEyes = 6; //Cat eyes are wide open
        mousedx *= -1; //Mouse reverses direction
        thunderSound.play(); //Thunder sound
        catSound.play(); //Meow
    }


    //Window
    windowLines(95,200);
    windowLines(95,260);

    //Objects
    drawDrawer(330,height/2+100);
    drawPainting(400,270);
    drawClock(width/2 + 20,height/2);

    //Cat
    drawCat(340,310);

    //Mouse
    drawMouse(mousePos,430);



}

function drawCat(x,y)
{
    //Cat artwork
    push();
    noStroke();
    ellipseMode(CENTER);
    fill(40);
    ellipse(x+13,y+17,50,30);
    ellipse(x-2,y+25,17,15);
    ellipse(x+30,y+25,15,15);
    fill(40);
    ellipse(x,y,35,30);
    triangle(x-15,y-8,x-5,y-10,x-10,y-23)
    translate(18,0);
    triangle(x-15,y-8,x-5,y-10,x-10,y-23)
    fill(255)

    //Cat eyes
    ellipse(x-10,y,7,catEyes);
    ellipse(x-26,y,7,catEyes);
    pop();

    //Cats eyes decrease in size every frame
    catEyes -= 1;
    

    //Cat eyes minimum size is 1;
    if(catEyes <= 0)
    {
        catEyes = 1;
    }

}

function drawMouse(x,y)
{
    //Mouse artwork
    push();
    noStroke();
    ellipse(x,y,20,10);
    ellipse(x+8,y-3,4);
    triangle(x+5,y-4,x+15,y,x+5,y+4);
    stroke(255);
    strokeWeight(2);
    line(x,y+2,x-20,y+2);
    stroke(0);
    strokeWeight(2);
    point(x+15,y);
    strokeWeight(1.5);
    point(x+9,y-1);
    pop();

    //Play squeak when mouse reaches x=0;
    if(mousePos == 0)
    {
        mouseSound.play();
    }

    //Make mouse stop moving left after x=-15
    if(mousePos <= -15)
    {
        mousePos = -15
    }
    //Add dx to mouse position
    mousePos += mousedx;

}

function drawLightning()
{
    //Lightning artwork
    push();
    translate(random(25,-25),0);
    stroke(0,100,255);
    strokeWeight(3);
    line(90,142,107,160);
    line(107,160,90,190);
    line(90,190,105,220);
    line(105,220,95,250);
    line(95,250,107,280);
    line(90,317,107,280);
    stroke(255);
    strokeWeight(1);
    line(90,141,107,160);
    line(107,160,90,190);
    line(90,190,105,220);
    line(105,220,95,250);
    line(95,250,107,280);
    line(90,317,107,280);
    pop();
}

function drawPainting(x,y)
{   
    //Painting artwork
    push();
    noStroke();
    rectMode(CENTER);
    fill(120,60,0)
    rect(x,y,120,75);
    fill(220);
    rect(x,y,110,65);
    fill(0,170,190);
    circle(x,y,30)
    fill(180,0,150);
    circle(x+30,y+10,20)
    pop();
}

function drawBackdrop()
{
    push();
    noStroke();
    //Floor
    fill(120,70,10);
    rect(0,400,width,80);

    //Ceiling
    fill(120,60,0)
    rect(0,0,width,80);

    //Window
    rect(15,125,160,210);
    fill(170,100,0);
    rect(20,130,150,200);

    //Sky
    fill(52, 49, 69);
    rect(30,140,130,180)
    pop();
}

function windowLines(x,y)
{
    //Window frame stuff
    push();
    noStroke();
    fill(170,100,0);
    rectMode(CENTER);
    rect(x,y,150,7);
    fill(100,50,0);
    rect(x,y+3,130,2)
    pop();
}

function drawDrawer(x,y)
{
    push();
    noStroke();
    fill(170,100,0);
    rect(x,y,143,70);

    //Shadow
    fill(115,65,0)
    rect(x,y+70,143,70)

    //Back
    fill(190,120,0);
    rect(x+7,y+12,130,20);
    rect(x+7,y+40,130,20);

    //Drawers
    fill(220,150,0);
    circle(x+35,y+22,10);
    circle(x+105,y+22,10);
    circle(x+35,y+50,10);
    circle(x+105,y+50,10);
    pop();
}


function drawClock(x,y)
{
    push();
    noStroke();

    //Shadow
    fill(115,65,0);
    rect(x-25,y+150,52,100)

    //Light
    fill(220,150,0);
    circle(x+3,y+70,50);
    rect(x-22,y+70,50,100)
    circle(x+3,y+55,35)

    //Base
    fill(200,120,0);
    circle(x,y+70,50);
    rect(x-25,y+70,50,100)
    circle(x,y+55,35)


    //Shades
    fill(170,100,0);
    circle(x,y+55,25);
    circle(x,y+70,40);
    rect(x-15,y+100,30,65);
    ellipse(x,y+100,30,15);

    //Clock face
    fill(255);
    circle(x,y+70,34);
    fill(0);
    circle(x,y+70,2);

    //Clock Static Hand
    stroke(100);
    strokeWeight(1);
    line(x,y+70,x,y+60)
    
    //Clock Second Hand

    angle+= 6 //Add 6 degrees every frame (second)
    stroke(0);
    strokeWeight(0.5);
    let ax = x+cos(angle) * 14; //Polar x coordinates
    let ay = y+sin(angle) * 14; //Polar y coordinates
    line(x,y+70, ax, ay+70); //Draw clock hand

    //Detail
    stroke(235,180,0);
    strokeWeight(2);

    //Pendulum chime things
    line(x,y+94,x,y+120+abs(10*sin(angle)));
    line(x+4,y+94,x+4,y+100+abs(20*sin(angle)));

    pop();
}

A mouse tries to sneak past a sleeping cat, but the lightning keeps waking the cat up.

Looking Outwards 10: Computer music

Computer-generated music is not revolutionary, or well known in any way. Music is generally known as an artform, something people make to express themselves – something unique to human nature.

However, computer-generated music, more specifically procedural music, is widely utilized in today’s world; mostly to improve adaptive/dynamic soundtracks in video games. In many games released in the past 2 years, procedural music technology has been a staple for the Triple-A gaming industry. No one ever notices the procedural music because it does its work so seamlessly and subtly. Nowadays, every time a peaceful, ambient, background soundtrack switches to an intense, high-tempo, adrenaline-inducing beat in a game, you never really notice it. The software automatically generates extra notes, extra percussion beats, and even background vocals to make the transition between one soundtrack to another so smooth that almost no one notices.

The technology and intelligence required for a computer to interpolate one piece of music into another on-the-go, depending on the events taking place on-screen is actually quite impressive. Machine learning is used to train the AI by making it analyze many different soundtracks. This results in an AI that can compose a very limited amount of music, but just enough to make the transition between one soundtrack and another sound non-existent.

https://en.wikipedia.org/wiki/Adaptive_music

LO-10

For this week’s looking outwards, I took a look at KNBC by Casey Reas. It uses news broadcast footage and translates them into a collage of pixels, which is then projected onto a wall. I found it a really interesting and meta look at the way we consume information so quickly and abundantly in our day-to-day lives. The work was done in Processing, for which Casey Reas is the co-founder of.

Interestingly, there is still a clear narrative that is being presented in the work, which I found really interesting; even when information has been distorted beyond what is cognitively recognisable, we can still see the beginning and end transitioning into another story altogether.

Overall, I really enjoyed the visual aesthetics of the piece, and how sound plays a large role in both its presentation but also how we come to interpret and understand information as a core piece of the artwork’s intent.