Category: SectionA

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

Project 10: Sonic Story

For my sonic story, I decided to depict a short story of a girl who is waiting for the bus but unfortunately, the bus does not stop, and thundering starts. I used images of drawings for the girl and clouds while I coded the other “characters” (the bus stop, light post, and bus). For the sounds, I used the sound of a bus and the sound of thunder beginning. This story is a very familiar experience in my life (although, fortunately, I never got rained on immediately after missing the bus).

sketch
// story: girl is waiting for the bus but the bus skips over her and it begins to thunder.

var person;
var personFrowning;
var busSound;
var thunder;
var rain;
var clouds;

function preload() {
    person = loadImage("https://i.imgur.com/hEZlRjK.png");
    personFrowning = loadImage("https://i.imgur.com/5vGwTK1.png");
    clouds = loadImage("https://i.imgur.com/xBxIA9K.png")
    busSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/bus.wav");
    thunder = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/thunder-3.wav");
}

function setup() {
    createCanvas(400, 350);
    useSound();
    frameRate(60);
}

function soundSetup() { 
    busSound.setVolume(.5);
    thunder.setVolume(.5);
}

var busPosition = 400;

function draw() {
    // bus sound
    busSound.playMode("untilDone");
    busSound.play();
    noStroke();
    // sky
    background(31, 35, 105);
    image(clouds, 0, 0, width, 100);
    // road
    fill(150);
    rect(0, 250, width, height);
    // sidewalk
    fill(200);
    rect(0, 240, width, 30);
    drawBusStop();
    drawStreetLamp();

    // person
    if(busPosition > 80) { // happy person, waiting for bus, facing the bus (to the right)
        push();
        translate(400, 0);
        scale(-1, 1);
        image(person, 240, 180, 80, 80);
        pop();
        textSize(10);
        fill(255);
        text("yay! the bus is coming!", 100, 300);
    }
    else { // sad person because bus did not stop, facing the bus (to the left)
        image(personFrowning, 80, 180, 80, 80);
        // add captions based on bus position
        if(busPosition < 70 & busPosition > -235) {
            textSize(10);
            fill(255);
            text("what the heck? did he not see me...", 100, 300);
        }
    }
    drawBus(busPosition);
    busPosition -= 1;

    // bus is gone
    if(busPosition == - 235) {
        busSound.stop();
        // thunder starts
        thunder.play();
        noLoop();
    }
}


// draw bus
function drawBus(x) {
    // bus body
    fill(145, 0, 15);
    rect(x, 150, 230, 110);
    // windows
    fill(201, 228, 250);
    rect(x, 160, 40, 40);
    rect(x + 100, 160, 50, 40);
    rect(x + 160, 160, 50, 40);
    // wheels
    fill(0);
    circle(x + 20, 265, 30, 30);
    circle(x + 60, 265, 30, 30);
    circle(x + 170, 265, 30, 30);
    circle(x + 210, 265, 30, 30);
}

// draw bus stop pole
function drawBusStop() {
    // pole
    fill(0);
    rect(70, 105, 5, 140);
    // sign
    fill(213, 33, 33);
    rect(60, 105, 25, 25);
}

// draw street lamp 
function drawStreetLamp() {
    // light reflection
    fill(255, 233, 158, 50);
    circle(355, 105, 50);
    // pole
    fill(0);
    rect(350, 105, 10, 140);
    // light
    fill(255, 233, 158);
    circle(355, 105, 25);

}

Project 10: Sonic Story

My sounds are a frog croaking, a sigh used for the pink frog, a splash, and crying for the green frog. The biggest challenge in getting this project to work was the local server, since I had to use the Chrome web server on Windows. It was a big barrier to even starting the project but I got lucky and figured it out.

frog time update

var greenFrog;
var pinkFrog;
var lily
var fish;
var flower;
var crying;
var sigh;
var splash;
var croak
var pinkFrogX = 200
var fishX = 400
var fishY = 400

///the story is about a lonely frog who experiences rejection but finds consolation in natural beauty

function preload() { ///loads in all images to be stored in variables
    greenFrog = loadImage('https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/frog-removebg-preview.png')
    pinkFrog = loadImage('https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/bright-pink-frog-back-view-small-toad-with-black-vector-22441576-removebg-preview.png')
    lily = loadImage('https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/lily_pad-removebg-preview.png')
    flower = loadImage('https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/flower-removebg-preview.png')
    fish = loadImage('https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/clipart-fish-red-2-removebg-preview.png')
    crying = loadSound('https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/219433__bash360__crying.wav')
    sigh = loadSound('https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/60670__k1m218__sigh3.wav')
    splash = loadSound('https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/416710__inspectorj__splash-small-a.wav')
    croak = loadSound('https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/frog.wav')
}


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


function soundSetup() { // setup for audio 
    crying.setVolume(0.5);
     sigh.setVolume(0.5);
     splash.setVolume(0.5);
     croak.setVolume(0.5);
 }


function draw() { ///draws characters
	fill(255, 255, 255)
	background(0, 0, 236)
	image(fish, fishX + 500, fishY + 500, 60, 60)
	image(lily, 200, 200, 50, 50)
	image(lily, 300, 300, 50, 50)
	image(lily, 400, 400, 75, 75)
	image(greenFrog, 300, 300, 50, 50)
	if (frameCount >= 10){ ///summons the PINKFROG
		image(pinkFrog, pinkFrogX, 200, 50, 50)
	} 
		fishX -= 25 ////brings in the FISCH
		fishY -= 25
		switch(frameCount){ ////list of events to happen at certain thymes
			case 5: 
			text('the frog was alone', 50, 50)
			break        
		case 10: croak.play();
                text('he sees another frog and sings them a song', 50, 50);
                break
        case 15:
         	    text("they didn't like the song", 50, 50)
                sigh.play()
                pinkFrogX += 300
                break
        case 20: 
                text("the frog was even more sad and loney", 50, 50)
                crying.play()
                break
        case 25: 
                text("he sees a fish", 50, 50)
                splash.play()
                fishX -= 500
                break
        case 30: 
                text("the fish had shown him a beautiful flower", 50, 50)
                break
        case 35:
                text("suddenly he didn't feel so sad", 50, 50)
                break  
                }
        if (frameCount >= 30){ ///draweth the flowere
        	image(flower, 400, 400, 50, 50)
        } 
        if (frameCount >= 40){
        	text("THE END", 240, 240, 480, 480)
        }
                }

LO 10

I did some research into the Canadian Electronic Ensemble’s newest release on February 15th, 1. The ensemble is based out of Canada (of course) where they compose and perform using computer and modular synthesis instruments to create unique sounds and produce long concerts and improvisations. They reassemble their instruments during the performance and also make use of the program Ableton to create new effects as well as rebuild their instruments to create new sounds during the performance. Mainly, their performances are based less in traditional computer code and more in the system Max, in the plugin Max for Live, which allows users to create their own effects in the DAW Ableton Live. Their performances are usually long and complex, without a central theme, and feature solo sections for each member of the ensemble as they join and modify their elaborate analog and digital synths. Also, they play without using a keyboard or traditional control of their instruments, and mostly rely and step-based sequencing and MIDI controlling built into their software to assemble songs.

Project 10-Sonic Story

project-10-sonicStory
/*
Lauren Kenny
lkenny@andrew.cmu.edu
Section A

This program creates a sonic story that shows a short food chain.

*/

var chew;

function preload() {
    beetleimg = loadImage("https://i.imgur.com/shXn6SX.png");
    quailimg = loadImage("https://i.imgur.com/Zd4T90e.png");
    coyoteimg = loadImage("https://i.imgur.com/W7IHE01.png");
    chew = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/chew.wav");
}

function setup() {
    createCanvas(300, 100);
    frameRate(10);
    useSound();
}

function soundSetup() { 
    chew.setVolume(0.5);
}

function draw() {
    background(217, 233, 250);
    drawBerries();
    drawBeetle();
    if (frameCount==69 || frameCount==125 || frameCount==190) {
        chew.play();
    }
}


function drawBerries() {
    var size=10;
    var xpos=20;
    for (var i=0; i<3; i++) {
        var ypos=70;
        fill(15, 30, 110);
        noStroke();
        push();
        if (i==1) {
            ypos=ypos-5;
        }
        circle(xpos, ypos, size);
        xpos+=5;
    }
}

var beetleX=300;
var beetleY=40;
function drawBeetle() {
    var beetleW = 51.1;
    var beetleH = 41.7;
    image(beetleimg, beetleX, beetleY, (beetleW), (beetleH));
    if (beetleX!=10) {
        beetleX-=5;
    }
    else if (beetleX==10) {
        chew.play();
        drawQuail();
    }
}

var quailX=300;
var quailY=40;
function drawQuail() {
    chew.stop();
    var quailH = 60;
    var quailW = 61.9;
    image(quailimg, quailX, quailY, (quailW), (quailH));
    if (quailX!=10) {
        quailX-=5;
    }
    else if (quailX==10) {
        drawCoyote();
    }
}

var coyoteX=300;
var coyoteY=30;
function drawCoyote() {
    var coyoteW = 153.2;
    var coyoteH = 90.2;
    image(coyoteimg, coyoteX, coyoteY, (coyoteW), (coyoteH));
    if (coyoteX!=5) {
        coyoteX-=5;
    }
    else if (coyoteX==5) {
        drawText();
    }
}

function drawText() {
    textSize(12);
    fill(15, 30, 110)
    text('the circle of life', 200, 20);
}

I was watching a show where a guy had a mouse in his apartment and to get rid of it, he brought in a snake. Then he realized he had a snake running loose, so he brought in a hawk. This inspired me to make this short animation showing a simple food chain. First there are some innocent berries which get eaten by a blister beetle which gets eaten by a quail which gets eaten by a coyote.

Looking Outward-10

https://reas.com/knbc/

For this LO, I chose to look at artist Casey Reas. Casey is the co-founder of Processing which is the grandfather to p5.js. I was really interested in seeing how the person who created Processing created art using a tool that they had imagined and built. The Sound Art piece I looked at is called KNBC. It was created in December 2015 using footage from news broadcasts from the year. This footage was manipulated in Processing to create a collage of pixels. What I love about this piece is how a video broadcast which was meant to tell a specific story was broken down by Casey into these collages and then combined with music to tell a whole new story. I also love that even though there is no clear clear picture or words, I still feel like I can understand the story that each scene is telling. Throughout the video of the piece playing, the transitions of music and color show you different parts of the story and you can tell when a scene has ended and another has begun.

shot of the piece during an installation
another shot of the piece during an installation

Project 10 – Sonic Story

sketch.slDownload
// Sarah Luongo
// Section A
// Project

/* This code aims to tell a short story of traveling home during the holidays, and the joy upon finally arriving home.*/

var train;
var car;
var house;
var xmastree;
var family;
var trainN;
var drive;
var walk;
var bell;
var cheers;

// Load images and sounds
function preload() {
    // Images
    train = loadImage('https://i.imgur.com/8nQo4PL.png');
    car = loadImage('https://i.imgur.com/J9C4YkK.png');
    house = loadImage('https://i.imgur.com/ck3pJGM.png');
    family = loadImage('https://i.imgur.com/GKtqVl2.png');
    xmastree = loadImage('https://i.imgur.com/BTleSuv.png');

    // Sounds
    trainN = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/train.wav");
    drive = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/drive.wav");
    walk = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/walk.wav");
    bell = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/bell.wav");
    cheers = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/cheers.wav");
}


function setup() {
    createCanvas(400, 300);
    frameRate(1);
    train.resize(100, 100);
    car.resize(100, 100);
    house.resize(200, 200);
    xmastree.resize(150, 200);
    family.resize(width, 100);
    useSound();
}


// Setup for audio generation
function soundSetup() {
    trainN.setVolume(0.2);
    drive.setVolume(1);
    walk.setVolume(1);
    bell.setVolume(0.5);
    cheers.setVolume(0.5);
}


function draw() {
    background(200);
    noStroke();
    // On the train:
    if (frameCount <= 10) {
        // Sky
        fill(20, 40, 80);
        rect(0, 0, width, height/1.3);
	//Mountains
        fill(200);
        triangle(-50, height/1.3, 200, height/1.3, 75, height/3);
        triangle(200, height/1.3, width, height/1.3, 300, height/2);
        //Snow on top of mountain
        fill(240)
        triangle(60, height/2.6, 90, height/2.6, 75, height/3);  
        triangle(280, height/1.8, 320, height/1.8, 300, height/2);
        // Snow
        rect(0, height/1.3, width, height/4); 
        // Train
        image(train, 0, height/2);
	//trainN.play();

    //Driving home:
    } else if (frameCount > 10 & frameCount <= 20) {
        // Sky
        fill(20, 40, 80);
        rect(0, 0, width, height/1.3);
        // Snow 
        fill(240);
        rect(0, height/1.5, width, height/3);
        // Car
        image(car, width/2, height/2.3);
	//drive.play();

    // Home:
    } else if (frameCount > 20 & frameCount <= 25) {
        // Sky
        fill(20, 40, 80);
        rect(0, 0, width, height/1.3);
        // Snow
        fill(240);
        rect(0, height/1.5, width, height/3);
        // House
        image(house, 200, 8);
        // Tree
        fill(56, 28, 0);
        rect(0, 60, 13, 150);
        push();
        rotate(radians(150));
        rect(-20, -100, 65, 2);
        pop();
        // Car
        image(car, 50, height/2.3);
	// Sounds:
	/*if (frameCount > 10 & frameCount <= 11) {
	    door.play();
	} else if (frameCount > 11 & frameCount <= 14) {
	    walk.play();
	} else if (frameCount > 14 & frameCount <= 15) {
	    bell.play();
	}*/

    // Inside home:
    } else if (frameCount > 25 & frameCount <= 30) {
        // Wall
        fill(220, 51, 80);
        rect(0, 0, width, height/1.5);
        // Floor
        fill(200);
        rect(0, height/1.5, width, height/3); 
        // Christmas tree
        image(xmastree, 250, 10);
        // Family
        image(family, 0, height/2.3);
	//cheers.play();

    // The end:
    } else {
        background(0);
        fill(255);
        textSize(20);
        text("The End", width/2.5, height/2);
    }
    //Sounds
    switch (frameCount) {
        case 1: trainN.play(); break;
        case 9: drive.play(); break;
        case 21: walk.play(); break;
	case 25: bell.play(); break;
	case 26: cheers.play(); break;
    }
}

For this project, I was inspired by Christmas and the “traveling home for the holidays” time of the year which is soon upon us. I decided to make the travel happen via a train and car, because that was how I got home my first time during freshman year. Then there’s the mini (or large) celebration when you finally return home! The five sounds I chose were, a train noise for the first scene, a car driving for the second, walking and a door bell ring for the third, and cheers for the last scene. The first two scenes last for about 10 seconds and the last two scenes last for about 5 seconds, making the entire story about 30 seconds long. I hope you enjoy!

Looking Outwards : 10

Weather Thingy by Adrien Kaeser is a project that uses a sound controller that takes weather and climate events and then modifies them into musical notes and the sounds they make.


This real time instrument is made up of two parts, a weather station on a tripod microphone and a custom built controller connected to the weather station. The controller has sensors that collect data from the climate it is in and the controller interprets the data to create different sounds. The machine can collect sophisticated weather data by means of a rain gauge, a wind vane and an anemometer. 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.


I found this project particularly interesting because of its presence in real time and its ability to act as a diary. It is also possible to use the device in the studio by pre-recording the climate data of a certain place at a certain time. This allows the musicians to capture moments that he/she have found inspiring to create new melodies. I can see the potential of using this to study climate change and begin to review the effects over time.

Project 10 Sonic Story

This project is about the life of a Balloon.

It inflates, slightly deflates while floating up, quickly deflates and shoots around the canvas, inflates again, then finally popping.

sketch
// tjchen 
// hand in 10 project 
// life of a balloon 


var vol = 0.75 // set global volume 

function preload() {
    // call loadImage() and loadSound() for all media files here
    deflate = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/shortdeflate.wav");
    inflate = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/inflate.wav");
    bpop = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/pop.wav");
    slowDeflate = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/longdeflate_2.wav");
}

function soundSetup() { // setup for audio generation
        deflate.setVolume(vol);
        inflate.setVolume(vol);
        bpop.setVolume(vol);
        slowDeflate.setVolume(vol);
}

// set up balloon movement 
function balloonStep(){
    this.dx = random(-20,20);
    this.dy = random(-20,20);

    //first inflate

    if (this.age > 0 & this.age <= 200){
        this.size += 1; 
    
    //slow deflate 

    } else if (this.age > 200 & this.age <= 400){
        this.y -= 1; 
        this.size -= 0.3

    // quick deflate and fly around 

    } else if (this.age > 400 & this.age <= 600){
        this.x += this.dx;
        this.y += this.dy;
        if (this.x > width) { // bounce off right wall
            this.x = width - (this.x - width);
            this.dx = -this.dx;
        } else if (this.x < 0) { // bounce off left wall
            this.x = -this.x;
            this.dx = -this.dx;
        }
        if (this.y > height) { // bounce off bottom
            this.y = height - (this.y - height);
            this.dy = -this.dy;
        } else if (this.y < 0) { // bounce off top
            this.y = -this.y;
            this.dy = -this.dy;
        }
        this.size -= 0.4;

    //inflate again 

    }else if (this.age > 600 & this.age <800){
        this.size += 2;
        if(this.size > width){

    // balloon pops

            rect(0,0,width,height);
        } 

    // resets 

    } else if (this.age>800) {
        this.age = 0;
        this.size = 20;
        this.x = width/2;
        this.y = height/2;
    }
    this.age ++; 
}

function balloonDraw(){
    noStroke();
    fill(255,0,0);
    circle(this.x,this.y,this.size);
}

function makeballoon(px,py,pdx,pdy){
    balloon = {x: px, y: py, dx: pdx, dy: pdy, size: 20, stepfunction: balloonStep, drawfunction: balloonDraw, age: 0}
    return balloon; 
}

function setup() {
    createCanvas(400, 400);
    useSound();
    var b = makeballoon(width/2, height/2, random(-10,10), random(-10,10));
}

function draw() {
    background(0);
    balloon.stepfunction();
    balloon.drawfunction();
    // pop! text graphic 
    if (balloon.size > width){
            push();
            textSize(150);
            textAlign(CENTER);
            fill(0);
            text('POP!',width/2,height/2+40);
            pop();
    }
    var bo = false;

    //check balloon age and toggle sound based on it's state 

    if (balloon.age >= 0 & balloon.age <= 1){
       bo = true 
       if (bo == true){
            inflate.play();
       }
    }
    if (balloon.age >= 200 & balloon.age <= 201){
       bo = true 
       if (bo == true){
            slowDeflate.play();
       }
    }
    if (balloon.age >= 400 & balloon.age <= 401){
       bo = true 
       if (bo == true){
            deflate.play();
       }
    }
    if (balloon.age >= 600 & balloon.age <= 601){
       bo = true 
       if (bo == true){
            inflate.play();
       }
    }
    if (balloon.age >= 750 & balloon.age <= 751){
       bo = true 
       if (bo == true){
            bpop.play();
       }
    }
}

Looking outwards 10 computer music

Pixelh8 is a well known musician and digital music researcher that really pioneered the digital music field early in the 2000’s developing a software calle dMusic tech for the nintendo gameboy and the Game Boy Advance as well as the Nintendo DS, which turned the gaming consoles in to real time synthesizers similar to the ones electronic musicians use now on live stages. What’s interesting about Chipwave is that it has evolved into a subgenre of electronic music with a group of passionate followers that delve deep into modding and making music out of early digital devices such as a Gameboy or NES. This type of music is characterized by their synthetic sounds we often associate with electronics. What’s important about their work is that it really gives us an opportunity to look into a piece of living computational history. A look into what it was like when computational music was just begining to become a thing.

Youtube user JustinThursday demo-ing Music Tech on the original GameBoy