Category: SectionB

Project 10 – Sonic Story

This story is about a magician who performs a couple of tricks in front of an audience. However, the ending does not go as planned, and the girl that he made disappear doesn’t come back.

sketch
var count = 0;
var stage;
var magician;
var smoke;
var bunny;
var girl;
var blanket;
var tear;
var walking;
var cheering;
var hop;
var clapping;
var gasping;
var poof;

var magicianX = 500;
var magicianY = 150;
var bunnyX = 110;
var bunnyY = 320;
var girlX = 500;
var girlY = 290;

function preload() {
    //Load images
    stage = loadImage("https://i.imgur.com/nboGOqA.jpg");
    magician = loadImage("https://i.imgur.com/eAj8gmY.png");
    smoke = loadImage("https://i.imgur.com/6QloW3v.png");
    bunny = loadImage("https://i.imgur.com/FVDd9HE.png");
    girl = loadImage("https://i.imgur.com/3umyhtS.png");
    blanket = loadImage("https://i.imgur.com/FIlojGn.png");
    tear = loadImage("https://i.imgur.com/ie45BVh.png");
    //Load sounds
    walking = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/walking.wav");
    cheering = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/cheering.wav");
    hop = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/hop.wav");
    clapping = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/clapping.wav")
    gasping = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/gasping.wav");
    poof = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/poof.wav");
}

function setup() {
    createCanvas(500, 400);
    useSound();
    frameRate(3);
}

function soundSetup() {
    cheering.setVolume(0.2);
    gasping.setVolume(0.2);
    walking.setVolume(0.3);
    poof.setVolume(0.5);
    hop.setVolume(0.2);
}

function draw() {
    background(200);
    //Stage
    image(stage, 0, 0, width, height);
    //Magician
    image(magician, magicianX, magicianY, width * 0.3, height * 0.5);
    //Magician enters as audience cheers
    if (count == 0) {
        cheering.play();
    }
    if (count < 8) {
        magicianX -= 40;
        walking.play();
    }
    //Bunny hops away
    if (count > 18 & count < 30) {
        image(bunny, bunnyX, bunnyY, width * 0.1, height * 0.1);
        bunnyX += 30;
        hop.play();
    }
    //Cloud of smoke before bunny appears
    if (count > 14 & count < 20) {
        image(smoke, 60, 270, width * 0.3, height * 0.3);
    }
    if (count == 15) {
        poof.play();
    }
    //Girl enters
    if (count < 65) {
        image(girl, girlX, girlY, width * 0.12, height * 0.2);
        if (count > 34 & count < 48) {
            girlX -= 10;
            walking.play();
        }
    }
    //Blanket makes girl disappear
    if (count > 58 & count < 66) {
        image(blanket, 350, 280, width * 0.2, height * 0.25);
    }
    if (count == 62) {
        poof.play();
    }
    if (count == 67) {
        clapping.play();
    }
    if (count > 75 & count < 83) {
        image(blanket, 350, 280, width * 0.2, height * 0.25);
    }
    if (count == 79) {
        poof.play();
    }
    if (count > 90 & count < 98) {
        image(blanket, 350, 280, width * 0.2, height * 0.25);
    }
    if (count == 94) {
        poof.play();
    }
    if (count > 100) {
        image(tear, 255, 225, width * 0.01, height * 0.03);
    }
    //Girl does not reappear and crowd gasps
    if (count == 99) {
        gasping.play();
    }
    count++;
}

The sound effects (cheering, clapping, walking, hopping, gasping, poofs) match each step that a character takes or a certain action that occurs.

Project-10-Sonic-Story

I was browsing on freesound.org and found the splash sound that I thought was pretty versatile in terms of story telling and after I picked out a few more sounds I cam up with the story of watching a man skydive into the ocean.

sketch>

// Xander Fann xmf Section B
// it is a nice day out as a plane is flying into the air. You feel the size and heft of the play as it flys by. A man sky dives from that plane into the ocean.
var count = 0;
var airplanex = 0;
var airplaney = 100;
var airplanebx = 500;

var noiseParam = 0;
var noiseStep = .03;
var y = 0;
var wy = 250;

function preload() {
    //images
    airplane = loadImage("https://i.imgur.com/bnGrcCO.png")
    airplanebelly = loadImage("https://i.imgur.com/g6yOr9u.png")
    pman = loadImage("https://i.imgur.com/IQzArq5.png")
    ocean = loadImage("https://i.imgur.com/PZiDoUi.png")

    //sounds
    planeengine = loadSound("http://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/airplane-flying.wav")
    door = loadSound("http://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/creaking-door-04.wav")
    falling = loadSound("http://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/falling.wav")
    splash = loadSound("http://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/_splash-jumnping-a.wav")
}
function setup() {
    createCanvas(400, 200);
    frameRate(20);
    useSound();
}
function soundSetup() {
    planeengine.setVolume(.4);
    door.setVolume(.4);
    splash.setVolume(.5);
    falling.setVolume(.5);
    planeengine.play();
}

function draw() {
    print(count)
    background(200,250,255); //sky
    count++;
    if (count >= 0){
        image(airplane,airplanex,airplaney,100,100);
        airplanex+=3;
        airplaney-=1;
        noStroke();
        for (opac = 50; opac>0; opac-=5){ // sun opacity ot create gradient
            for (dia = 100; dia < 200; dia+=10){ // expanding diameter
                fill(255,255,200,opac);
                ellipse(0,0,dia,dia);
            }
        }
    }
    if (airplanex >= width){
        background(200,250,255);
        image(airplanebelly,airplanebx,-270,500,500); // bottom of big plane
        airplanebx-=3;
        planeengine.play();
     }
     if(count=460){ // door opens
         door.play();
     }
     if(count=500){ // starts falling
         falling.play();
     }
     if(count=500){ // hits water
         splash.play();
     }
     if (count>=475&count<=650){ // man falls and water comes up
         planeengine.stop();
         var n = noise(noiseParam);
         var x = map(n,0,1,0,width/2);
         noiseParam+=noiseStep;
         image(pman,x,y,70,70); //parachute man
         y++;
         image(ocean,0,wy,400,200);
         wy-=1;
     }
     else if (count==650) { // ned
         background(0);
          falling.stop();
          splash.stop();
          noLoop();
     }
}

Looking Outwards 10: Computer Music

The staircase to the staircase from the ground floor to the basement of Hunt Library here at Carnegie Mellon University has an installation designed to be interactive between those who use the stairwell. The light installation creates a noise with different frequencies and tones based on the location of the person. Then, in the end, there is a chime to signify a goal met.

This project is taking an everyday task and filling it with fun and excitement. The student secured permission to place the installation and started working on how to track movement. He was able to use the OpenPose library from the CMU Perceptual Computing lab and the Unity 3D game engine to find positions. I admired how the developer had an idea and kept working at it and acknowledged that it is not complete. He batted with a lot of creative choices like whether he wanted it to be noticeably interactive or a hidden display.

The code and more information can be found here.

Stairs Of Hunt Library

Project 10 – Sonic Story

sketchDownload
/* 
 * Amy Lee 
 * amyl2
 * Section B 
 */ 

var count = 0; 
var grayvalue = 255; 

function preload() {
    // loading image files 
    sheep = loadImage("https://i.imgur.com/ASPgqzI.png"); 
    sheep2 = loadImage("https://i.imgur.com/E1rZIt0.png")
    rabbit = loadImage("https://i.imgur.com/R9besKF.png"); 
    turtle = loadImage("https://i.imgur.com/KzuH03l.png"); 
    turtlefam = loadImage("https://i.imgur.com/6Wo9cT4.png?1")
    musician = loadImage("https://i.imgur.com/NAApLxI.png"); 
    musicnotes = loadImage("https://i.imgur.com/Q1cKMk2.png");

    // loading sound files 
    gasp = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/gasp.wav"); 
    cheer = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/cheer.wav"); 
    guitar = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/guitar1.wav"); 
    countdown = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/countdown.wav"); 
}

function soundSetup() { 
    // Setup for audio generation
    gasp.setVolume(.4); 
    cheer.setVolume(.6); 
    guitar.setVolume(.3); 
    countdown.setVolume(.5); 
}


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

    // Set up text parameter
    textAlign(CENTER, CENTER); 

    // Creating character objects 
    rab = new Object(); 
    rab.image = rabbit; 
    rab.x = 60; 
    rab.y = 460; 
    rab.dy = 2; 
    rab.width = 200;
    rab.height = 150; 
    rab.draw = rabbitDraw; 

    turt = new Object(); 
    turt.image = turtle; 
    turt.x = 250; 
    turt.y = 450; 
    turt.dy = 1; 
    turt.width = 200;
    turt.height = 150; 
    turt.draw = turtleDraw; 

    turtfam = new Object(); 
    turtfam.image = turtlefam; 
    turtfam.x = 200; 
    turtfam.y = 700; 
    turtfam.dy = 2; 
    turtfam.width = 250;
    turtfam.height = 150; 
    turtfam.draw = turtlefamDraw; 

    muse = new Object(); 
    muse.image = musician; 
    muse.x = -100; 
    muse.y = 200; 
    muse.width = 330; 
    muse.height = 260; 
    muse.draw = musicianDraw; 

    // Normal sheep 
    she = new Object(); 
    she.image = sheep; 
    she.x = 360; 
    she.y = 150; 
    she.dx = 1; 
    she.width = 200; 
    she.height = 150; 
    she.draw = sheepDraw; 

    // Shocked sheep 
    she2 = new Object(); 
    she2.image = sheep2; 
    she2.x = 360; 
    she2.y = 150; 
    she2.width = 200; 
    she2.height = 150; 
    she2.draw = sheep2Draw; 

    notes = new Object(); 
    notes.image = musicnotes; 
    notes.x = 80; 
    notes.y = 170; 
    notes.width = 40; 
    notes.height = 30; 
    notes.draw = musicnotesDraw; 

}

function draw() {

    background(125,45,45);

    // Random speckles on race track 
    push(); 
    for (var i = 0; i < 100; i ++){
    fill(0); 
    ellipse(random(0,600),random(0,600),1.5,1.5); 
    }
    pop(); 

    // Starting Line and Dividers
    fill(255); 
    noStroke(); 
    rect(248,0,4,600); 
    rect(80,0,4,600); 
    rect(420,0,4,600); 
    rect(0,470,500,4); 

    // Checkered Finish Line 
    for(var y = 20; y <= 40; y += 20){ 
        for (var x = 0; x <= 500; x += 20){
            fill(grayvalue); 
            rect(x, y, 20, 20);
            grayvalue = 255 - grayvalue; 
        } 
        grayvalue = 255 - grayvalue; 
    }

    // Write "FINISH" near finish line
    textSize(50); 
    fill(0); 
    text("F  I  N  I  S  H", 250, 100); 
    fill(255); 
    text("1",100,500); 
    text("2",280,500);

    print(frameCount); 

    rab.draw(); 
    turt.draw(); 
    muse.draw(); 

    // Storyline 
    // Calling sounds at specific counts here: 
    if (count == 0){ 
        countdown.play(); 
    }

    if (count == 75){ 
        guitar.play(); 
    }

    if (count == 120){
        gasp.play(); 
    }

    if (count == 450){
        cheer.play(); 
    }

    if (count >= 0){
        she.draw(); 
        muse.draw(); 
    }

    // Make music notes move 
    if (count > 70 & count <= 660){
        notes.draw(); 
        notes.x += random(-2,2); 
        notes.y += random(-2,2); 
        if (notes.x <= 78 || notes.x >= 82){
            notes.x = 80; 
        }
        if (notes.y <= 168 || notes.y >= 172){
            notes.y = 170; 
        }        
    }

    // Moving images at specific counts 
    // Turtle and rabbit begin racing 
    if (count > 50 & count <= 60){
        turt.y -= turt.dy; 
        rab.y -= rab.dy; 
        she.draw(); 
        muse.draw(); 
    }

    // Musician starts playing, rabbit gets distracted and stops 
    // Turtle keeps going 
    if (count > 60 & count <= 80){
        rab.y -= rab.dy; 
        turt.y -= turt.dy; 
        she.draw(); 
    }

    // turtle keeps going 
    // rabbit still distracted
    if (count > 80 & count <= 110){
        turt.y -= turt.dy; 
        rab.y -= rab.dy; 
        if (rab.y = 300){
            textSize(13); 
            text("i love music",200,280); 
            rab.y = 300; 
        }
        she.draw(); 
    }

    // Sheep shows up, gasps at surprise 
    // Turtle wins 
    if (count > 110 & count<= 120){
        turt.y -= turt.dy;  
        she.draw(); 
    }

    if (count > 120){
        textSize(13); 
        text("*shocked*",465,170); 
        turt.y -= turt.dy        
        if (turt.y <= 10){
            turt.y = 10; 
            turtfam.draw();
            turtfam.y -= turtfam.dy; 
            if (turtfam.y <= 100){
                turtfam.y = 100; 
            }
        }
        she2.draw(); 
    }

    // Confetti celebration for when turtle wins 
    if (count >= 450){
        confetti(); 
    }

    count ++; 
}


function turtleDraw(){
    image(turtle, this.x,this.y, this.width, this.height); 
}

function rabbitDraw(){
    image(rabbit,this.x,this.y, this.width, this.height); 
} 

function sheepDraw(){
    image(sheep, this.x, this.y, this.width, this.height); 
}

function sheep2Draw(){
    image(sheep2, this.x, this.y, this.width, this.height); 
}

function musicianDraw(){
    image(musician, this.x, this.y, this.width, this.height); 
}

function musicnotesDraw(){
    image(musicnotes, this.x,this.y,this.width, this.height); 
}

function turtlefamDraw(){
    image(turtlefam, this.x,this.y,this.width, this.height); 
}

function confetti(){
    var cy = 0; 
    var cDy = 3; 
    for( i = 0; i <= 300; i++){
        fill(random(255),random(255),random(255)); 
        ellipse(random(width),cy, 4,4); 
    cy += cDy; 
    }
}

For my sonic story, I wanted to illustrate the class Tortoise and the Hare race. In this story, the rabbit is distracted by the music and stops racing, while the turtle takes it slow and continues to race. In the end, his win is celebrated by confetti and his family joining to congratulate him.

I also drew the characters separately in the “Sketchbook” app in order to get the transparent background for this project.

Project-10: Sonic Story

For this assignment I chose to create an environment with a somber ambience so I drew a series of images in illustrator to accompany the sounds. The woman is smoking out her window and you can hear her television in the background, her cat meowing, the pigeons cooing, her blowing the smoke out, and lastly the street traffic and sounds of a busy city.

graanak-10
//Graana Khan
// Project 10 Section B 

//My story is a woman smoking out her window with noises of her cat meowing, 
// pigeons cooing, the TV playing in the back, noise of her exhaling the smoke,
// and the traffic of the busy city she is in. I wanted a lot of ambiance. 

//image variables I made in illustrator
var backdrop;
var woman1;
var woman2;
var pigeons1;
var pigeon2;

//sound variables
var meow;
var coo;
var tele;
var traffic;
var smoke;

var counter = 0; 

function preload() {
    // calling images
    backdrop = loadImage("https://i.imgur.com/iYYNGb3.png");
    woman1 = loadImage("https://i.imgur.com/2Kt4BvK.png");
    woman2 = loadImage("https://i.imgur.com/Qj2xRJz.png");
    pigeons1 = loadImage("https://i.imgur.com/XIXBGYQ.png");
    pigeons2 = loadImage("https://i.imgur.com/XYaJDPO.png");

    //calling sound
    meow = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/110011__tuberatanka__cat-meow.wav");
    coo = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/319512__squashy555__pigeon.wav");
    tele = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/185605__dementan__japanese-news.wav");
    traffic = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/345948__knufds__city-ambiance-new-york.wav");
    smoke = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/491053__sleepskraper__smoke.wav");
}


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


function soundSetup() { 
	meow.setVolume(0.1);
	coo.setVolume(0.1);
	tele.setVolume(3);
	traffic.setVolume(0.25);
	smoke.setVolume(8);

}


function draw() {
    background(200);

    image(backdrop, 0, 0, 480, 600);

//playing the image and some sounds graphics on specific frame counts
    switch(counter){
    	case 0: W1(); P2(); break;
    	case 1: W1(); P1(); break;
    	case 2: W1(); P2(); break;
    	case 3: W2(); P1(); break;
    	case 4: W1(); P2(); break;
    	case 5: W1(); P1(); break;
    	case 6: W2(); P2(); break;
    	case 7: W1(); P1(); break;
    	case 8: W1(); P2(); break;
    	case 9: W2(); P1(); break;
    	case 10: W1(); P2(); break;
    	case 11: W1(); P1(); break;
    	case 12: W2(); P2(); break;
    	case 13: W1(); P1(); break;
    	case 14: W1(); P2(); break;
    	case 15: W2(); P1(); break;
    	case 16: W1(); P2(); break;
    	case 17: W1(); P1(); break;
    	case 18: W1(); P2(); break;
    	case 19: W2(); P1(); break;
    	case 20: W1(); P2(); break;
    	case 21: W1(); P1(); break;
    	case 22: W2(); P2(); break;
    	case 23: W1(); P1(); break;
    	case 24: W1(); P2(); break;
    	case 25: W2(); P1(); break;
    	case 26: W1(); P2(); break;
    	case 27: W1(); P1(); break;
    	case 28: W2(); P2(); break;
    	case 29: W1(); P1(); break;
    	case 30: W2(); P1(); break;
    }

    counter++; 

    //reset the counter after 15 frames 

    if(counter >= 30){
    	counter = 0;
	}

	if(counter <= 30){
		tele.play();
		traffic.play();
	}

}

function W1(){
	image(woman1, 0, 0, 480, 600);
}

function W2(){
	image(woman2, 0, 0, 480, 600);
	smoke.play();
	meow.play();
}

function P1(){
	image(pigeons1, 0, 0, 480, 600);
}

function P2(){
	image(pigeons2, 0, 0, 480, 600);
	coo.play();
}

LO-10-Computer Music

Laurie Spiegel, Unseen Worlds, 1991. 

Laura Spiegel with her analog synthesizer. Source.

Laurie Spiegel is one of the pioneers of electronic-music and even had one of her compositions sent into space on the Voyager spacecraft for aliens if they were to come in contact with it. Spiegel also created her own algorithmic compositions called Music Mouse. Her album, Unseen Worlds, uses computation electronic music to experiment and convey unfamiliar yet comfortingly ambient music. Even the album cover art seems to resemble this blend of computational generation and abstracted geometries that evoke the mystery and unfamiliarity of the music itself. 

Her program Music Mouse was created on a Macintosh 512k that generated tones based on the movement of the mouse. Spiegel’s album is inspiring in its pursuit to use electronic music and artificial sounds to create foreign ambiances that still sounds futuristic and distant even while being made 30 years ago. Spiegel created other-wordly compositions in the album with her software Music Mouse that allowed an accessible way to compose electronic music faster. Perhaps most importantly, Spiegel’s early explorations of synths and electronic music was inspiring for women and people who wanted to do music without the harsh borders of classic training. In an interview Spiegel says, “electronic instruments were a great democratizing force.” It becomes clear how her albums and work with electronic music expressed the transition of a more accessible music form that invites the unexpected and unusual.

Laura Spiegel’s album, Unseen Worlds, 1991.

Looking Outwards – 10 – Computer Music

The Stanford Laptop Orchestra was founded in 2008 by Ge Wang. Using Chuck, the laptop orchestra was born. Chuck is a programming language for music, where the programmer can code frequencies to create different sequences and repitition of sequences, generating computer music.

The orchestra itself is an ensemble of laptops, humans, controllers, and special hemispherical speaker arrays. I really admire how the speakers were created from nonstandard ways of utilizing an everyday object. The speakers are actually bowls from Ikea turned upside down. Six holes are drilled in them. A base plate is made, and car speakers and amplifiers are put in them. The finished speakers are placed near the orchestra. They project the sound coming from the laptops, emulating real instruments where music comes from the artifact itself. The controllers were originally created for gaming purposes. Wang decided to use them for prototyping instruments because of its ability to track the position of players’ hands.

Wang’s artistic sensibilities manifested in the Laptop Orchestra because his passion for computer music transformed conventional Orchestras with technology. The computer’s precision allows for the creation of new sounds and automation to perform music.

Project 10-2020 Election Highlights Sonic Story

My sound story includes some highlights from the 2020 Presidential Election. I included audio clips from debates, the presidential anthem, and TikTok songs with special guest the Fly that landed on Mike Pence’s head.

election
function preload() {
    // load sounds for sound story
    buzz = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/flybuzz.wav");
    talk = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/imspeaking.wav");
    president = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/presidential.wav");
    banjo = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/banjo.wav");
    loser = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/loser.wav");
}
//set values for brownian motion of fly
var Y = 0;
var X = 5;
var noiseParam= 0;
var noiseStep= 0.1;

function setup() {
    // you can change the next 2 lines:
    createCanvas(480, 480);
    //======== call the following to use sound =========
    useSound();
    imageMode(CENTER);
    frameRate(14);
}
function soundSetup() { // setup for audio generation
    //set volumes for sounds
    buzz.setVolume(0.1);
    talk.setVolume(0.5);
    president.setVolume(0.5);
    banjo.setVolume(1.0);
    loser.setVolume(0.4);

}
function Joe() {
    background(0,86,217);
    //draw joe biden 
    noStroke();
    //shirt
    fill(245);
    rect(145,414,200,100);
    //neck
    fill(225,176,161);
    beginShape();
    curveVertex(162,314);
    curveVertex(161,368);
    curveVertex(224,438);
    curveVertex(272,437);
    curveVertex(331,375);
    curveVertex(331,321);
    endShape(CLOSE);
    //face
    fill(250,218,205)
    beginShape();
    curveVertex(180,53);
    curveVertex(153,84);
    curveVertex(155,119);
    curveVertex(152,160);
    curveVertex(142,213);
    curveVertex(172,247);
    curveVertex(218,255);
    curveVertex(258,261);
    curveVertex(291,270);
    curveVertex(361,270);
    curveVertex(369,254);
    curveVertex(371,212);
    curveVertex(363,139);
    curveVertex(360,90);
    curveVertex(344,65);
    curveVertex(252,48);
    endShape(CLOSE);
    //left ear
    fill(225,176,161);
    beginShape();
    curveVertex(122,181);
    curveVertex(112,191);
    curveVertex(105,214);
    curveVertex(123,257);
    curveVertex(153,225);
    endShape(CLOSE);
    //right ear
    beginShape();
    curveVertex(372,206);
    curveVertex(393,230);
    curveVertex(402,239);
    curveVertex(395,267);
    curveVertex(358,302);
    curveVertex(369,250);
    endShape(CLOSE);
    //frame
    noFill();
    stroke(200)
    strokeWeight(3)
    line(204,173,303,179);
    arc(252,210,44,44,radians(200), 0)
    //left lens
    strokeWeight(4)
    fill(29,31,34,230)
    beginShape();
    curveVertex(174,172);
    curveVertex(159,190);
    curveVertex(157,221);
    curveVertex(181,242);
    curveVertex(218,233);
    curveVertex(245,198);
    curveVertex(231,175);
    curveVertex(202,171);
    endShape(CLOSE);
    //right lens
    beginShape();
    curveVertex(274,181);
    curveVertex(262,197);
    curveVertex(277,226);
    curveVertex(309,250);
    curveVertex(334,245);
    curveVertex(348,220);
    curveVertex(345,192);
    curveVertex(326,181);
    curveVertex(303,177);
    endShape(CLOSE);
    //hair
    noStroke();
    fill(255);
    beginShape();
    curveVertex(205,24);
    curveVertex(167,43);
    curveVertex(141,73);
    curveVertex(125,112);
    curveVertex(119,139);
    curveVertex(115,165);
    curveVertex(117,185);
    curveVertex(137,198);
    curveVertex(143,204);
    curveVertex(164,92);
    curveVertex(183,62);
    curveVertex(213,52);
    curveVertex(251,49);
    curveVertex(331,67);
    curveVertex(357,100);
    curveVertex(368,223);
    curveVertex(383,215);
    curveVertex(391,165);
    curveVertex(379,113);
    curveVertex(371,73);
    curveVertex(337,44);
    curveVertex(305,27);
    curveVertex(251,26);
    endShape(CLOSE);
    //mask
    fill(0);
    beginShape();
    curveVertex(129,185);
    curveVertex(148,211);
    curveVertex(167,233);
    curveVertex(190,243);
    curveVertex(223,245);
    curveVertex(240,244);
    curveVertex(277,255);
    curveVertex(324,263);
    curveVertex(362,257);
    curveVertex(385,222);
    curveVertex(391,228);
    curveVertex(373,255);
    curveVertex(365,287);
    curveVertex(361,327);
    curveVertex(334,353);
    curveVertex(312,375);
    curveVertex(284,400);
    curveVertex(241,413);
    curveVertex(200,389);
    curveVertex(167,342);
    curveVertex(145,310);
    curveVertex(122,285);
    curveVertex(119,257);
    curveVertex(135,226);
    curveVertex(125,193);
    endShape(CLOSE);
    //left shoulder
    fill(43,43,55);
    beginShape();
    curveVertex(164,347);
    curveVertex(152,412);
    curveVertex(161,478);
    curveVertex(0,478);
    curveVertex(0,423);
    curveVertex(108,395);
    endShape(CLOSE);
    //right shoulder
    beginShape();
    curveVertex(335,362);
    curveVertex(343,418);
    curveVertex(335,480);
    curveVertex(399,480);
    curveVertex(438,480);
    curveVertex(480,480);
    curveVertex(480,447);
    curveVertex(394,419);
    endShape(CLOSE);  
    //left collar
    fill(255);
    beginShape();
    curveVertex(159,345);
    curveVertex(234,437);
    curveVertex(187,479);
    curveVertex(157,479);
    curveVertex(145,407);
    endShape(CLOSE);
    //right collar
    beginShape();
    curveVertex(335,358);
    curveVertex(355,406);
    curveVertex(347,480);
    curveVertex(308,480);
    curveVertex(267,434);
    endShape(CLOSE);
    //tie knot
    fill(50,50,74);
    beginShape();
    curveVertex(233,430);
    curveVertex(219,445);
    curveVertex(223,480);
    curveVertex(263,480);
    curveVertex(289,454);
    curveVertex(266,424);
    endShape(CLOSE);
}

//draw mike pence
function Mike(){
    background(248,95,90);
    noStroke();
    //shirt
    beginShape();
    fill(241, 237, 234);
    curveVertex(218,346);
    curveVertex(187,374);
    curveVertex(171,395);
    curveVertex(179,479);
    curveVertex(278,479);
    curveVertex(295,391);
    curveVertex(261,351);
    endShape(CLOSE);
    //left shoulder
    fill(0);
    beginShape();
    vertex(172,268);
    vertex(127,282);
    vertex(87,298);
    vertex(44,323);
    vertex(0,331);
    vertex(0,479);
    vertex(193,479);
    vertex(172,380);
    vertex(160,300);
    endShape(CLOSE);
    //right shoulder
    beginShape();
    vertex(325,286);
    vertex(334,294);
    vertex(351,312);
    vertex(396,330);
    vertex(448,354);
    vertex(479,368);
    vertex(479,479);
    vertex(258,479);
    vertex(289,402);
    vertex(316,304);
    endShape(CLOSE);
    //left ear
    fill(236, 166, 133);
    beginShape();
    curveVertex(185,145);
    curveVertex(175,127);
    curveVertex(167,133);
    curveVertex(165,149);
    curveVertex(165,177);
    curveVertex(165,201);
    curveVertex(168,214);
    curveVertex(175,217);
    endShape(CLOSE);
    //right ear
    beginShape();
    curveVertex(363,203);
    curveVertex(378,194);
    curveVertex(388,198);
    curveVertex(387,214);
    curveVertex(371,231);
    curveVertex(359,252);
    curveVertex(349,267);
    curveVertex(339,272);
    curveVertex(331,263);
    endShape(CLOSE);
    //neck
    beginShape();
    curveVertex(181,251);
    curveVertex(172,288);
    curveVertex(183,309);
    curveVertex(195,323);
    curveVertex(223,353);
    curveVertex(242,358);
    curveVertex(279,342);
    curveVertex(309,317);
    curveVertex(317,290);
    endShape(CLOSE);
    //right collar
    fill(255)
    beginShape();
    curveVertex(329,279);
    curveVertex(282,335);
    curveVertex(260,347);
    curveVertex(243,355);
    curveVertex(261,376);
    curveVertex(273,407);
    curveVertex(281,427);
    curveVertex(313,362);
    curveVertex(323,315);
    endShape(CLOSE);
    //face
    fill(244, 180, 150)
    beginShape();
    curveVertex(232,81);
    curveVertex(213,114);
    curveVertex(198,145);
    curveVertex(185,166);
    curveVertex(177,199);
    curveVertex(175,237);
    curveVertex(181,279);
    curveVertex(193,307);
    curveVertex(211,328);
    curveVertex(238,340);
    curveVertex(273,335);
    curveVertex(299,321);
    curveVertex(322,291);
    curveVertex(341,257);
    curveVertex(360,214);
    curveVertex(361,187);
    curveVertex(362,143);
    curveVertex(357,101);
    curveVertex(335,116);
    curveVertex(289,103);
    curveVertex(255,87);
    endShape(CLOSE);
    //right hair
    fill(241, 237, 234);
    beginShape();
    curveVertex(363,74);
    curveVertex(380,95);
    curveVertex(387,130);
    curveVertex(375,171);
    curveVertex(357,217);
    curveVertex(356,122);
    curveVertex(356,104);
    endShape(CLOSE);
    //left hair
    fill(255);
    beginShape();
    curveVertex(254,36);
    curveVertex(219,54);
    curveVertex(199,84);
    curveVertex(190,112);
    curveVertex(184,136);
    curveVertex(180,183);
    curveVertex(209,132);
    curveVertex(233,87);
    curveVertex(277,100);
    curveVertex(323,114);
    curveVertex(341,116);
    curveVertex(358,100);
    curveVertex(363,79);
    curveVertex(352,60);
    curveVertex(327,40);
    curveVertex(295,30);
    endShape(CLOSE);
    //collar
    beginShape();
    curveVertex(177,255);
    curveVertex(165,273);
    curveVertex(162,307);
    curveVertex(170,357);
    curveVertex(178,406);
    curveVertex(181,418);
    curveVertex(209,376);
    curveVertex(231,354);
    curveVertex(195,320);
    curveVertex(177,289);
    endShape(CLOSE);    
    //tie bottom
    fill(184, 14, 18);
    beginShape();
    curveVertex(223,394);
    curveVertex(209,430);
    curveVertex(196,478);
    curveVertex(261,479);
    curveVertex(257,433);
    curveVertex(239,392);
    endShape(CLOSE);
    //tie knot
    fill(229, 25, 30);
    beginShape();
    curveVertex(225,354);
    curveVertex(201,379);
    curveVertex(221,398);
    curveVertex(246,402);
    curveVertex(264,380);
    curveVertex(256,360);
    endShape(CLOSE);
}

function Kamala() {
    background(0,180,255);
    //draw kamala
    //hair behind face
    fill(43,32,22);
    beginShape();
    curveVertex(378,86);
    curveVertex(418,127);
    curveVertex(447,218);
    curveVertex(452,272);
    curveVertex(429,304);
    curveVertex(429,326);
    curveVertex(419,343);
    curveVertex(395,345);
    curveVertex(398,365);
    curveVertex(433,364);
    curveVertex(429,388);
    curveVertex(399,398);
    curveVertex(424,434);
    curveVertex(386,454);
    curveVertex(396,430);
    curveVertex(371,407);
    curveVertex(345,384);
    curveVertex(341,350);
    endShape(CLOSE);
    beginShape();
    fill(164,122,97);
    curveVertex(199,280);
    curveVertex(164,333);
    curveVertex(224,479);
    curveVertex(343,479);
    curveVertex(363,330);
    endShape(CLOSE);
    //right shoulder
    beginShape();
    fill(49,46,50);
    curveVertex(357,411);
    curveVertex(354,444);
    curveVertex(328,480);
    curveVertex(480,480);
    curveVertex(480,346);
    curveVertex(361,327);
    curveVertex(363,376)
    endShape(CLOSE);
    //left shoulder
    fill(59,58,64);
    beginShape();
    curveVertex(193,308);
    curveVertex(199,393);
    curveVertex(231,480);
    curveVertex(0,480);
    curveVertex(0,367);
    curveVertex(91,339);
    endShape(CLOSE);
    //necklace
    push();
    translate(10,25)
    fill(255);
    circle(345,343,15)
    circle(218,415,15);
    circle(221,429,15);
    circle(226,438,15);
    circle(233,449,15);
    circle(349,368,15);
    circle(349,381,15);
    circle(347,396,15);
    circle(344,407,15);
    circle(340,415,15);
    circle(337,428,15);
    circle(329,440,15);
    circle(321,450,15);
    circle(316,460,15);
    circle(350,355,15);
    pop();
    //face
    noStroke();
    fill(194,150,121)
    beginShape();
    curveVertex(353,71);
    curveVertex(393,113);
    curveVertex(415,177);
    curveVertex(405,204);
    curveVertex(414,244);
    curveVertex(401,281);
    curveVertex(376,331);
    curveVertex(369,359);
    curveVertex(341,366);
    curveVertex(305,350);
    curveVertex(235,298);
    curveVertex(219,179);
    curveVertex(238,59);
    endShape(CLOSE);
    //hair
    fill(59,44,23);
    beginShape();
    curveVertex(313,49);
    curveVertex(285,40);
    curveVertex(215,56);
    curveVertex(155,113);
    curveVertex(118,203);
    curveVertex(106,277);
    curveVertex(107,297);
    curveVertex(124,319);
    curveVertex(95,334);
    curveVertex(147,337);
    curveVertex(163,359);
    curveVertex(191,382);
    curveVertex(169,389);
    curveVertex(145,367);
    curveVertex(157,387);
    curveVertex(196,399);
    curveVertex(194,427);
    curveVertex(153,433);
    curveVertex(126,419);
    curveVertex(156,449);
    curveVertex(193,449);
    curveVertex(233,427);
    curveVertex(248,392);
    curveVertex(267,370);
    curveVertex(254,337);
    curveVertex(233,328);
    curveVertex(247,312);
    curveVertex(251,247);
    curveVertex(254,217);
    curveVertex(297,203);
    curveVertex(336,153);
    curveVertex(365,121);
    curveVertex(387,91);
    curveVertex(366,72);
    curveVertex(339,56);
    endShape(CLOSE);
}
//draw the fly 
function Fly(x,y) {
        push();
        translate(200,100);
        stroke(154, 137, 120);
        strokeWeight(2);
        fill(0);
        circle(x, y, 12);   //draw fly body
        pop();    
    }
function Trump() {
    background(241,59,58);
    //trump
    //left side hair
    fill(245,234,176);
    beginShape();
    curveVertex(108,100);
    curveVertex(85,148);
    curveVertex(89,204);
    curveVertex(97,237);
    curveVertex(92,295);
    curveVertex(107,325);
    curveVertex(133,339);
    curveVertex(138,228);
    curveVertex(140,160);
    curveVertex(159,124);
    curveVertex(151,84);
    endShape(CLOSE);
    //right ear
    fill(245,152,93)
    beginShape();
    curveVertex(381,163);
    curveVertex(398,217);
    curveVertex(395,271);
    curveVertex(383,302);
    curveVertex(368,308);
    curveVertex(365,247);
    endShape(CLOSE);
    //left shoulder
    fill(14,16,47);
    beginShape();
    curveVertex(155,406);
    curveVertex(188,480);
    curveVertex(0,480);
    curveVertex(0,422);
    curveVertex(48,381);
    curveVertex(136,341);
    endShape(CLOSE);
    //right shoulder
    beginShape();
    curveVertex(346,375);
    curveVertex(382,376);
    curveVertex(417,387);
    curveVertex(463,390);
    curveVertex(480,397);
    curveVertex(480,480);
    curveVertex(324,480);
    curveVertex(336,408);
    endShape(CLOSE);
    //left collar
    fill(255);
    beginShape();
    curveVertex(140,366);
    curveVertex(213,427);
    curveVertex(235,437);
    curveVertex(231,479);
    curveVertex(187,479);
    curveVertex(153,405);
    endShape(CLOSE);
    //right collar
    beginShape();
    curveVertex(339,395);
    curveVertex(340,480);
    curveVertex(317,480);
    curveVertex(270,480);
    curveVertex(275,438);
    endShape(CLOSE);
    //tie knot
    fill(68,73,215)
    beginShape();
    curveVertex(285,420);
    curveVertex(241,420);
    curveVertex(227,450);
    curveVertex(233,480);
    curveVertex(277,480);
    curveVertex(309,480);
    curveVertex(303,442);
    endShape(CLOSE);
    //face
    noStroke();
    fill(246,162,102)
    beginShape();
    curveVertex(147,176);
    curveVertex(135,233);
    curveVertex(135,296);
    curveVertex(129,328);
    curveVertex(128,346);
    curveVertex(157,403);
    curveVertex(213,440);
    curveVertex(277,452);
    curveVertex(331,424);
    curveVertex(365,357);
    curveVertex(372,323);
    curveVertex(371,233);
    curveVertex(368,183);
    curveVertex(365,112);
    curveVertex(299,111);
    curveVertex(157,119);
    endShape(CLOSE);
    //right side hair
    fill(245,234,176)
    beginShape();
    curveVertex(355,95);
    curveVertex(336,121);
    curveVertex(346,146);
    curveVertex(350,179);
    curveVertex(371,249);
    curveVertex(391,152);
    curveVertex(395,105);
    curveVertex(374,83);
    endShape(CLOSE);
    //left ear
    fill(245,152,93)
    beginShape();
    curveVertex(140,231);
    curveVertex(103,226);
    curveVertex(91,233);
    curveVertex(94,260);
    curveVertex(105,284);
    curveVertex(119,323);
    curveVertex(137,332);
    curveVertex(147,318);
    curveVertex(141,271);
    endShape(CLOSE);
    //top hair
    fill(248,232,145)
    beginShape();
    curveVertex(293,31);
    curveVertex(213,42);
    curveVertex(147,58);
    curveVertex(93,95);
    curveVertex(113,109);
    curveVertex(145,107);
    curveVertex(165,132);
    curveVertex(207,145);
    curveVertex(265,136);
    curveVertex(319,131);
    curveVertex(359,119);
    curveVertex(385,115);
    curveVertex(396,89);
    curveVertex(351,51);
    endShape(CLOSE);
    //top of right side hair
    fill(245,234,176)
    beginShape();
    curveVertex(153,105);
    curveVertex(173,129);
    curveVertex(151,181);
    curveVertex(135,224);
    curveVertex(115,147);
    curveVertex(131,119);
    endShape(CLOSE);
}
//draw first title slide: '2020 ELECTION HIGHLIGHTS'
function Title() {
    background(255);
    textAlign(CENTER);
    textSize(50);
    textStyle(BOLD);
    fill(241,59,58)
    text('2020', width/2, height/2-70);
    fill(0,86,217);
    text('ELECTION', width/2, height/2);
    fill(241,59,58);
    text('HIGHLIGHTS', width/2, height/2+70);
}
//draw last slide: 'BYE DON'
function End() {
    background(255);
    textAlign(CENTER);
    textSize(50);
    textStyle(BOLD);
    fill(0,86,217);
    text('BYE', width/2, height/2-35);
    fill(241,59,58);
    text('DON', width/2, height/2+35);
}

function draw() {
    background(255);
    //first scene is the title slide, and playing banjo tiktok music
    if (frameCount >= 0 & frameCount < 80) { 
        Title();
        if (!banjo.isPlaying()) {
            banjo.play();
        } 
    }
    //second scene is the fly buzzing around mike pence's head
    if (frameCount >= 80 & frameCount < 130) { 
        banjo.stop();
        Mike();
        Fly(X,Y);
        if (!buzz.isPlaying()) {
            buzz.play();
        }
        buzz.play();
        X+=random(-5,5); 
        Y+=random(-5,5);
        noiseParam+= noiseStep;
    }
    //third scene is kamala harris telling mike pence that she is speaking during the VP debate
    if (frameCount >= 130 & frameCount < 170) { 
        buzz.stop();
        if (!talk.isPlaying()) {
            talk.play();
        }
        Kamala(); 
    }
    //fourth scene is trump while a clip of supalonely plays 
    if (frameCount >= 170 & frameCount < 240) { 
        talk.stop();
        Trump();
        if (!loser.isPlaying()) {
            loser.play();
        } 
    }
    //fifth scene is joe biden with hail to the chief playing
    if (frameCount >= 240 & frameCount < 400) { 
        loser.stop();
        Joe();
        if (!president.isPlaying()) {
            president.play();
        } 
    }
    //last scene is the end slide with the banjo tiktok music playing
    if (frameCount >= 400 & frameCount < 460) { 
        End();
        if (!banjo.isPlaying()) {
            banjo.play();
        } 
    }
    //after the last slide, loop back to the first and continue to cycle through the frames
    if (frameCount == 460) {
        frameCount = 0;
        background(255);
    }
}
banjo
flybuzz
imspeaking
loser
presidential

Looking Outwards 10: Computer Music

I am interested in Ryoji Ikeda’s live set of his project “test patterns,” which was originally developed in 2008. In this work, Ikeda leverages a real-time computer program written by Tomonaga Tokuyama which converts analog audio signals into digital black and white patterns which resemble a barcode. The music generated by the computer combined with the unique and contrasting visuals showcases the interplay between the analog and the digital as well as the audio and the visual.

Ryoji Ikeda performs Test Patterns as a live set in 2013.

The rapidity and synchronicity of the final work gives the code a performative effect, allowing the viewer to immerse themselves within a generative soundscape. I think, too, the visuals help to highlight the dissonance of the computer-generated music.

LO 10 – Computer Music

“Chapter 1: The Discovery”, Felix Luque Sanchez, 2009

“Chapter 1: The Discovery” is a responsive light-sound object created by Felix Luque Sanchez in 2009. This installation consists of a sculpture representing an unidentified object in the shape of a dodecahedron and a number of videos re-staging the moment of its discovery.

First Room: The Videos

With different perceptions conveyed in different rooms, this piece causes the audience to question the truthfulness of what is shown. In short, it outlines a journey from the initial visioning of a series of videos with synthetic images, and eventually ends up in a physical encounter with an interactive object that co-opts information flows, sound and light transmission. More specifically, this piece dramatizes a fiction on the discovery of the dodecahedron, as if it were a scene from a science-fiction movie, where the tension lies in the encounter of the character with an unknown, alien figure.

Second Room: The Object

Through the sculpture’s response to presence, the audience can detect a will to communicate as well as some sort of simplicity in generating apparently complex behaviors. This project renews an “age-old cultural groundbase, questioning the limits of our notions of artificial intelligence and cutting across our collective imaginary of science fiction.

For a more in-depth look into the project and its experience, check out this video below!