jasmine4@andrew.cmu.edu – [OLD FALL 2019] 15-104 • Introduction to Computing for Creative Practice

Jasmine Lee – Final Project

//Jasmine Lee
//jasmine4@andrew.cmu.edu
//Section C
//Final Project

var nodes = []; //array to hold node objects
var node1c = 1; //node sound counters
var node2c = 1;
var node3c = 1;
var node4c = 1;
var node5c = 1;
var node6c = 1;
var node7c = 1;
var node8c = 1;
var node9c = 1;
var node10c = 1;
var waves; //sound variables
var windchimes;
var rain;
var campfire;
var chant;
var crickets;
var birdwhistle;
var cafe;
var church;
var stream;
var c1; //gradient colors
var c2;
var x1; //gradient controls
var inter;
var c;
var xarray = []; //arrays to hold bubble positions
var yarray = [];
var ydir = [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1];
var r = 0; //bubble colors
var g = 0;
var b = 0;
var bubbY; //controls bubblesNC movement
var bubbY2;
var h; //time
var m;
var s;

function preload() {
    waves = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/12/waves.mp3")
    windchimes = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/12/windchimes.wav")
    rain = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/12/rain.wav")
    campfire = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/12/campfire.wav")
    chant = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/12/chant.mp3")
    crickets = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/12/crickets.wav")
    birdwhistle = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/12/birdwhistle.wav")
    cafe = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/12/cafe.m4a")
    church = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/12/church.wav")
    stream = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/12/stream.wav")
}

function setup() {
    createCanvas(600, 450);
    background(255);

    //creates node objects and gives them parameters
    nodes = [{x: 70, y: 70, d: 40}, //top row of nodes
             {x: 230, y: 120, d: 90},
             {x: 390, y: 75, d: 50},
             {x: 520, y: 130, d: 40},
             {x: 125, y: 235, d: 50}, //middle row of nodes
             {x: 400, y: 230, d: 80},
             {x: 550, y: 270, d: 30}, //bottom row of nodes
             {x: 80, y: 380, d: 80}, 
             {x: 250, y: 330, d: 40},
             {x: 450, y: 370, d: 50},
             ]

    //shows the nodes initially when page is refreshed
    for (var i = 0; i < nodes.length; i ++) {
        fill(200);
        noStroke();
        ellipse(nodes[i].x, nodes[i].y, nodes[i].d)
        }
}

function draw() {
    //gradient background
    c1 = color(255, 255, 255);
    c2 = color(220 + (mouseX * 0.04), 240, 255);
    setGradient(c1, c2);

    //functions that control whether the nodes are colored/white
    n1a();
    n2a();
    n3a();
    n4a();
    n5a();
    n6a();
    n7a();
    n8a();
    n9a();
    n10a();

    //bubbles that follow the mouse
    cursorP();

    //bubbles controlled by clock
    bubblesNC();

    //text
    motivationalText();
}

function mousePressed() {
    //functions that control whether the nodes play/pause sounds
    n1s();
    n2s();
    n3s();
    n4s();
    n5s();
    n6s();
    n7s();
    n8s();
    n9s();
    n10s();
}

function mouseDragged() {
    //adds mouse old coordinates into bubble arrays to create new bubbles
    xarray.push(mouseX)
    yarray.push(mouseY)
}

function setGradient(c1, c2) {
    //creates interactive background gradient
    noFill();
    for (var y = 0; y < height; y++) {
        var inter = map(mouseY, 0, height, 0, 1);
        var c = lerpColor(c1, c2, inter);
        stroke(c);
        line(0, y, width, y);
    }
}

//node 1 appearance
function n1a() { 
    noStroke();
    if (node1c % 2 == 0) {
        fill(255);
    } else {
        fill(245, 204, 240); //periwinkle
    }
    ellipse(70, 70, 40, 40);
}

//node 1 sound
function n1s() { 
    if (mouseX > 50 & mouseX < 90 && mouseY > 50 & mouseY < 90) {
        node1c = node1c + 1;
        if (node1c % 2 == 0) {
            waves.loop();
        } else {
            waves.pause();
        }
    } 
}

//node 2 appearance
function n2a() { 
    if (node2c % 2 == 0) {
        fill(255);
    } else {
        fill(233, 255, 255); //robin's egg blue
    }
    ellipse(230, 120, 90, 90);
}

//node 2 sound
function n2s() { 
    if (mouseX > 185 & mouseX < 275 && mouseY > 75 & mouseY < 165) {
        node2c = node2c + 1;
        if (node2c % 2 == 0) {
            windchimes.loop();
        } else {
            windchimes.pause();
        }
    }
}

//node 3 appearance
function n3a() {
    if (node3c % 2 == 0) {
        fill(255);
    } else {
        fill(217, 240, 255); //light blue
    }
    ellipse(390, 75, 50, 50);
}

//node 3 sound
function n3s() {
    if (mouseX > 365 & mouseX < 415 && mouseY > 50 && mouseY < 100) {
        node3c = node3c + 1;
        if (node3c % 2 == 0) {
            rain.loop();
        } else {
            rain.pause();
        }
    }
}

//node 4 appearance
function n4a() {
    if (node4c % 2 == 0) {
        fill(255);
    } else {
        fill(246, 224, 252); //light pink-purple
    }
    ellipse(520, 130, 40, 40);
}

//node 4 sound
function n4s() {
    if (mouseX > 500 & mouseX < 540 && mouseY > 110 & mouseY < 150) {
        node4c = node4c + 1;
        if (node4c % 2 == 0) {
            campfire.loop();
        } else {
            campfire.pause();
        }
    }
}

//node 5 appearance
function n5a() {
    if (node5c % 2 == 0) {
        fill(255);
    } else {
        fill(217, 195, 242); //light purple
    }
    ellipse(125, 235, 50, 50);
}

//node 5 sound
function n5s() {
    if (mouseX > 100 & mouseX < 175 && mouseY > 210 & mouseY < 260) {
        node5c = node5c + 1;
        if (node5c % 2 == 0) {
            chant.loop();
        } else {
            chant.pause();
        }
    }
}

//node 6 appearance
function n6a() {
    if (node6c % 2 == 0) {
        fill(255);
    } else {
        fill(241, 223, 242); //pale pink
    }
    ellipse(400, 230, 80, 80);
}

//node 6 sound
function n6s() {
    if (mouseX > 360 & mouseX < 440 && mouseY > 190 & mouseY < 270) {
        node6c = node6c + 1;
        if (node6c % 2 == 0) {
            crickets.loop();
        } else {
            crickets.pause();
        }
    }
}

//node 7 appearance
function n7a() {
    if (node7c % 2 == 0) {
        fill(255);
    } else {
        fill(189, 220, 255); //baby blue
    }
    ellipse(550, 270, 30, 30);
}

//node 7 sound
function n7s() {
    if (mouseX > 535 & mouseX < 565 && mouseY > 255 & mouseY < 285) {
        node7c = node7c + 1;
        if (node7c % 2 == 0) {
            birdwhistle.loop();
        } else {
            birdwhistle.pause();
        }
    }
}

//node 8 appearance
function n8a() {
    if (node8c % 2 == 0) {
        fill(255);
    } else {
        fill(238, 210, 242); //mauve
    }
    ellipse(80, 380, 80, 80);
}

//node 8 sound
function n8s() {
    if (mouseX > 40 & mouseX < 120 && mouseY > 340 & mouseY < 420) {
        node8c = node8c + 1;
        if (node8c % 2 == 0) {
            cafe.loop();
        } else {
            cafe.pause();
        }
    }
}

//node 9 appearance
function n9a() {
    if (node9c % 2 == 0) {
        fill(255);
    } else {
        fill(235, 154, 240); //light blue-purple
    }
    ellipse(250, 330, 40, 40);
}

//node 9 sound
function n9s() {
    if (mouseX > 230 & mouseX < 270 && mouseY > 310 & mouseY < 350) {
        node9c = node9c + 1;
        if (node9c % 2 == 0) {
            church.loop();
        } else {
            church.pause();
        }
    }
}

//node 10 appearance
function n10a() {
    if (node10c % 2 == 0) {
        fill(255);
    } else {
        fill(206, 228, 237); //pale blue
    }
    ellipse(450, 370, 50, 50);
}

//node 10 sound
function n10s() {
    if (mouseX > 425 & mouseX < 475 && mouseY > 345 & mouseY < 395) {
        node10c = node10c + 1;
        if (node10c % 2 == 0) {
            stream.loop();
        } else {
            stream.pause();
        }
    }
}

//controls cursor generated bubbles and their movement
function cursorP() {
    for (var i = 0; i < xarray.length; i ++) {
        //gives floating bubbles flashing colors
        r = random(220, 255);
        g = random(220, 255);
        b = random(220, 255);
        fill(r, g, b);

        //creates bubbles when mouse is dragged
        ellipse(xarray[i], yarray[i], i, i)

        //makes bubbles bounce off bottom of canvas
        if (yarray[i] > (450 - (i / 2))) {
            ydir[i] = -(ydir[i]);
            yarray[i] = (450 - (i / 2)) - 1;
        } else {
            yarray[i] = yarray[i] + ydir[i]; 
        }

        //makes bubbles bounce off top of canvas
        if (yarray[i] < (i / 2)) {
            ydir[i] = -(ydir[i]);
            yarray[i] = (i / 2) - 1;
         } else {
            yarray[i] = yarray[i] + ydir[i];
        }

        //makes bubbles bounce off nodes
        for (var j = 0; j < nodes.length; j ++) {
            if ((dist(xarray[i], yarray[i], nodes[j].x, nodes[j].y)) < (((nodes[j].d) / 2) + (i / 2))) {
                ydir[i] = -(ydir[i]);
                if (ydir[i] > 0) {
                    //lets bubbles bounce off bottom of nodes
                    yarray[i] = yarray[i] + (i / 2) + 1; 
                } else {
                    //lets bubbles bounce off top of nodes
                    yarray[i] = yarray[i] - (i / 2) - 1; 
                }
            }
        }
    }

    //deletes bubbles if there are more than 25
    if (xarray.length > 25) {
        xarray.shift();
        yarray.shift();
    }
}

function bubblesNC() {
    h = hour();
    m = minute ();
    s = second ();

    //moves 7.5 pixels down for every second that passes
    bubbY = s * 7.5;
    bubbY2 = 450 - (s * 7.5);

    noStroke();
    //white bubbles
    fill(255, 255, 255, 100);
    ellipse(70, bubbY, 200, 200);
    ellipse(200, bubbY + 20, 80, 80);
    ellipse(450, bubbY - 40, 320, 320);
    ellipse(300, bubbY2, 80, 80);
    ellipse(30, bubbY2, 130, 130);
    ellipse(520, bubbY + 5, 100, 100);
    ellipse(370, bubbY2 - 15, 220, 220);
}

function motivationalText() {
    //adds text to center of the screen
    textAlign(CENTER, CENTER);
    textSize(30);
    textStyle(BOLDITALIC);
    fill(255, 255, 255);
    text('hello', 300, 195);
    fill(255, 255, 255);
    text('hello', 300, 225);
    fill(255, 255, 255, 200);
    text('hello', 300, 255);

}

For my final project, I intended to create a dreamlike atmosphere. The sounds that the nodes play are a mystery, with the user having to click them to discover what they are. The project acts as a sort of music sampler to allow the user to play whatever tracks they’d like to hear at the same time. Once the music is on, the node disappears into the white background, with the user having to interact with the color changing background to find the node again. When the mouse is dragged, many bubbles are created that bounce around the canvas and off the music nodes to create visual interest for the user. When all the sounds are being played and the mouse is used to make the background white, an interesting “screensaver” is created with the negative space.

Jasmine Lee – Project 12 – Proposal

For my final project, I’d like to do an interactive audiovisual animation. The cursor would be followed by flowing graphic lines that change color based on what nodes have been activated and what sounds are playing. The intention is to create an animation that users can interact with to relax. The nodes are created by clicking anywhere on the canvas. I envision the node to be “invisible” (maybe a white circle on a white background) with the same flowing colorful lines circling around it, to create a more stylistic approach. When there are multiple nodes activated, the nodes become connected, with the lines starting to weave around all of them instead of just one node. The music that is playing would be various soothing sounds, ranging from white noise, to rain, to fire crackling.

The canvas with multiple nodes activated and sound playing.

Jasmine Lee – Looking Outwards – 12

The first precedent I found for my final project is Goodbye, Helios, an art piece by James R. Eads. The artwork is a digital piece drawn by Eads on a graphic tablet. It depicts the story of the relationship between two characters, Night, and Helios. Goodbye, Helios was one of the projects animated in a collaboration between Eads and Chris McDaniel (an animator known as “The Glitch”). I really enjoy the visuals used in the animations, from the bright, varied colors, to the smooth flowing movement of the lines. This is something that I would like to try and incorporate into my final project.

Eads’ *Goodbye, Helios* artwork, depicting Helios burning out.

The second project I found as a precedent for my final project is Flame Painter, which is a painting software created by Escape Motions. It makes use of particle systems in order to allow the user to create incredibly dynamic and fluid brush strokes. The software is available to purchase for the use of different artistic professions, but for the purpose of this Looking Outwards, I interacted with the free demo. I enjoyed the way that the brush follows the mouse cursor, and the way that it almost rotates around the chosen spot. Even though the mouse is stagnant, the brush remains rotating and moving around the cursor. This creates an interesting interaction for the user to try to manipulate.

A screenshot of an short interaction on FlamePainter.

Jasmine Lee – Looking Outwards – 11

Caroline Record is an artist and software developer with a strong background in the fields of fine arts, user-centered design, and programming. Her project, Light Clock, was installed at the Carnegie Museum of Art. Every five minutes, the camera within the clock captures a 360-degree view of the museum plaza. It does this 24/7. These images are then sent inside to an exhibit in the museum lobby, allowing visitors to spin to control their point of view of the photographs.

Record’s exhibit allows visitors to experience the perspective of another time, from another point of view. It can be interesting to see how the view outside is compounded by experiencing the same view inside.

Caroline Record has had fellowships in the past with Carnegie Mellon University, the Brewhouse Association, and Yale University Norfolk. She has had exhibitions at the Carnegie Science Center, Space Gallery, Miller Gallery, and the Brewhouse Association. She now works as part of the innovation team at the Carnegie Museum of Art. I admire her work because her pieces seem to be about turning mundane things into something that inspires curiosity and wonder. In other projects, Section of Mystery, and She, Record makes use of simply a door and text messages. I appreciate the art of her creating worlds within the world we live in.

Jasmine Lee – Project 11 – Landscape

genlandscape

//Jasmine Lee
//jasmine4@andrew.cmu.edu
//Section C 
//Project 11 (Generative Landscape)

var waterSpeed = 0.0002;
var waterDetailL1 = 0.0005; //controls amplitude of left side of waterfall
var waterDetailL2 = 0.0001;
var waterDetailL3 = 0.00025;
var waterDetailL4 = 0.00075;
var waterDetailR1 = 0.0001; //controls amplitude of right side of waterfall
var waterDetailR2 = 0.00025;
var waterDetailR3 = 0.0005;
var waterDetailR4 = 0.00075;
var waterDetailH1 = 0.0005; //controls amplitude of horizontal waves
var waterDetailH2 = 0.00095;
var waterDetailH3 = 0.00075;
var fish = [];
var newFishLikelihood = 2.9;

function setup() {
    createCanvas(480, 480);
    frameRate(20);

    //makes fish and places them in random x and y positions
    for (var i = 0; i < 8; i ++) {
        fish.push(makeFish(floor(random(240, 480)), floor(random(300, 360))));     
    }
    //displays the fish properly
    for (var i = 0; i < fish.length; i ++) {
        updateAndDisplayFish();
    }
}

function draw() {
    background(138, 212, 227); //teal
    noFill();
    stroke(255, 255, 255, 100); //transparent white

    //LEFT SIDE OF WATERFALL---------------------------------------------
    //1st line of waterfall
    for (var y = 0; y < 240; y++) {
        //t determines how far away the line is from x = 0 at y
        //millis() * waterSpeed slows down how fast the line is traveling)
        var t = ((y * waterDetailL1) + millis() * waterSpeed);
        var x = map(noise(t), 0, 1, 0, 220);
        line(x, y, (t - width), y);
    }

    //2nd line of waterfall
    for (var y = 0; y < 240; y++) {
        var t = ((y * waterDetailL2) + millis() * waterSpeed);
        var x = map(noise(t), 0, 1, 10, 235);
        line(x, y, (t - width), y);
    }

    //3rd line of waterfall
    for (var y = 0; y < 240; y++) {
        var t = ((y * waterDetailL3) + millis() * waterSpeed);
        var x = map(noise(t), 0, 1, 20, 250);
        line(x, y, (t - width), y);
    }

    //4th line of waterfall
    for (var y = 0; y < 240; y++) {
        var t = ((y * waterDetailL4) + millis() * waterSpeed);
        var x = map(noise(t), 0, 1, 50, 220);
        line(x, y, (t - width), y);
    }

    //RIGHT SIDE OF WATERFALL---------------------------------------------
    //1st line of waterfall

    for (var a = 0; a < 240; a ++) {
        //c gives us how far away the line is from x = 0 at y
        //millis() * waterSpeed slows down how fast the line is traveling)
        var c = ((a * waterDetailR1) + millis() * waterSpeed);
        var b = map(noise(c), 0, 1, 240, 480);
        line(b, a, ((width + 60) - c), a);
    }

    //2nd line of waterfall
    for (var a = 0; a < 240; a ++) {
        var c = ((a * waterDetailR2) + millis() * waterSpeed);
        var b = map(noise(c), 0, 1, 220, 480);
        line(b, a, ((width + 60) - c), a);
    }

    //3rd line of waterfall
    for (var a = 0; a < 240; a ++) {
        var c = ((a * waterDetailR3) + millis() * waterSpeed);
        var b = map(noise(c), 0, 1, 200, 480);
        line(b, a, ((width + 60) - c), a);
    }
  

    //4th line of waterfall
    for (var a = 0; a < 240; a ++) {
        var c = ((a * waterDetailR4) + millis() * waterSpeed);
        var b = map(noise(c), 0, 1, 300, 480);
        line(b, a, ((width + 60) - c), a);
    }


    //HORIZONTAL WAVES--------------------------------------------
    noFill();
    stroke(41, 152, 217, 100);

    //1st wave
    for (var x = 0; x < width; x ++) {
        //c gives us how far away the line is from x = 0 at y
        //millis() * waterSpeed slows down how fast the line is traveling)
        var t = ((x * waterDetailH1) + millis() * waterSpeed);
        var y = map(noise(t), 0, 1, 210, 240);
        line(x, y, x, height);
    }


    //2nd wave
    for (var x = 0; x < width; x ++) {
        var t = ((x * waterDetailH2) + millis() * waterSpeed);
        var y = map(noise(t), 0, 1, 220, 250);
        line(x, y, x, height);
    }

    //3rd wave
    for (var x = 0; x < width; x ++) {
        var t = ((x * waterDetailH3) + millis() * waterSpeed);
        var y = map(noise(t), 0, 1, 240, 300);
        line(x, y, x, height);
    }

    //functions used to display and control the fish
    updateAndDisplayFish();
    removeFish();

}

function updateAndDisplayFish() {
    //update the fish position and display
    for (var i = 0; i < fish.length; i ++) {
        fish[i].move();
        fish[i].displayF();
    }
}

function removeFish() {
    //Copy all fish we want to keep into a new array
    var fishToKeep = [];
    for (var i = 0; i < fish.length; i++) {
        if (fish[i].x + fish[i].fishWidth > 0) {
            fishToKeep.push(fish[i]);
        }
    }
    fish = fishToKeep; //stores the surviving fish
}

function fishMove() {
    //controls fish movement
    this.x += this.speed;

    //makes fish start back at right end of canvas once they reach the left
    if (this.x < 0) {
        this.x = width;
    } 
}

function fishDisplay() {
    //fish body
    fill(237, 175, 69, 100); //fish body
    noStroke();
    ellipse(this.x, this.y, this.fishWidth, this.fishHeight);
    //fish tail
    triangle(this.x + (this.fishWidth / 2) , this.y, this.x + 20, this.y + 5, this.x + 20, this.y - 5);
}

//creates fish object
function makeFish(birthLocationX, birthLocationY) {
    var fs = {x: birthLocationX,
                y: birthLocationY,
                fishWidth: random(15, 30),
                speed: -2.0,
                fishHeight: random(7, 10),
                move: fishMove,
                displayF: fishDisplay}
    return fs;
}

For my landscape, I wanted to depict a peaceful waterfall scene. Using different noise functions, I was able to create gently flowing water, and subtle waves. The fish in the freshwater loop continuously, as if they were swimming around in the water and looping back where we could not see them turn. The most difficult part was this project was creating the objects. I had trouble with getting the correct amount of fish to show up, and with keeping the fish on the page. Over time, the waterfall changes position until it seems as if there are two waterfalls. Each time the landscape is refreshed, the fish sizes and positions are randomized.

Initial sketch of my waterfall landscape.

Jasmine Lee – Project 10 – Sonic Sketch

sonicsketch

//Jasmine Lee
//jasmine4@andrew.cmu.edu
//Section C
//Project-10 (Sonic Sketch)

var mySnd1; //variables to hold sound (cauldron, coins, pumpkin)
var mySnd2;
var mySnd3;
var noteC; //variables to hold sound (colored flasks)
var noteD;
var noteE;
var noteF;
var noteG;
var noteA;
var noteB;
var spiderB; //control spider's movement
var bounce; //control bubbles' movement
var bounce2;
var jingle; //control coins' movement
var bounce3;


function preload() {
    // call loadImage() and loadSound() for all media files here
    mySnd1 = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/bubble.wav");
    mySnd2 = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/coins.wav");
    mySnd3 = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/surprise.wav");
    noteC = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/glockenspielC.wav")
    noteD = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/glockenspielD.wav")
    noteE = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/glockenspielE.wav")
    noteF = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/glockenspielF.wav")
    noteG = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/glockenspielG.wav")
    noteA = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/glockenspielA.wav")
    noteB = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/glockenspielB.wav")
    mySnd1.setVolume(0.5);
    mySnd2.setVolume(0.5);
    mySnd3.setVolume(0.5);
    noteC.setVolume(0.5);
    noteD.setVolume(0.5);
    noteE.setVolume(0.5);
    noteF.setVolume(0.5);
    noteG.setVolume(0.5);
    noteA.setVolume(0.5);
    noteB.setVolume(0.5);
}

 function setup() {
     createCanvas(600, 600);
 }

function mousePressed() {
    //red-flask-sound
    if (mouseX > 77 & mouseX < 107 && mouseY > 270 & mouseY < 350){
        noteC.play();
    }

    //orange-flask-sound
    if (mouseX > 147 & mouseX < 177 && mouseY > 270 & mouseY < 350){
        noteD.play();
    }

    //yellow-flask-sound
    if (mouseX > 217 & mouseX < 247 && mouseY > 270 & mouseY < 350){
        noteE.play();
    }

    //green-flask-sound
    if (mouseX > 287 & mouseX < 317 && mouseY > 270 & mouseY < 350){
        noteF.play();
    }

    //blue-flask-sound
    if (mouseX > 357 & mouseX < 387 && mouseY > 270 & mouseY < 350){
        noteG.play();
    }

    //purple-flask-sound
    if (mouseX > 427 & mouseX < 457 && mouseY > 270 & mouseY < 350){
        noteA.play();
    }

    //pink-flask-sound
    if (mouseX > 497 & mouseX < 527 && mouseY > 270 & mouseY < 350){
        noteB.play();
    }

    //cauldron-sound
    if (mouseX > 100 & mouseX < 200 && mouseY > 420 & mouseY < 500){
        mySnd1.play();
    }
    //coins-sound
    if (mouseX > 245 & mouseX < 380 && mouseY > 455 & mouseY < 500){
        mySnd2.play();
    }

    //pumpkin-sound
    if (mouseX > 400 & mouseX < 515 && mouseY > 405 & mouseY < 500){
        mySnd3.play();
    }
} 


function draw() {
    // you can replace any of this with your own code:
    background(109, 142, 143);
    angleMode(DEGREES);
    drawings();
    }

function drawings() {
    noStroke();

    //picture frames
    if (second() % 3 == 0) {
        spiderB = 25;
    } else {
        spiderB = -15;
    }

    push();
    translate(120, 50);
    strokeWeight(8);
    stroke(46, 45, 41);
    fill(255, 255, 255, 100); //black frames
    rect(0, 0, 160, 190);
    rect(300, 120, 70, 70);
    stroke(189, 182, 157); //beige frame
    rect(220, -10, 80, 80);
    noStroke();

    //crack in beige frame
    if (second() % 2 == 0) {
        fill(199, 201, 32, 150);
    } else {
        fill(199, 201, 32, 0);
    }
    triangle(296, 3, 296, -5, 250, 50);

    //crack in black frame
    if (second() % 6 == 0) {
        fill(133, 209, 237, 0);
    } else {
        fill(133, 209, 237, 150);
    }
    triangle(366, 124, 366, 134, 310, 180);
    pop();

    push();
    translate(130, 57);
    strokeWeight(4); //cobwebs
    stroke(200, 200, 200);
    line(0, 0, 0, 40);
    line(10, 0, 10, 30);
    line(30, 0, 30, 70 + spiderB);
    line(70, 0, 70, 7);
    line(80, 0, 80, 20);
    line(120, 0, 120, 35);
    line(130, 0, 130, 5);
    line(140, 0, 140, 90);
    noStroke();
    fill(46, 45, 41);
    ellipse(30, 70 + spiderB, 7, 10);
    pop();


    //top-shelf left bracket
    push();
    translate(60, 350);
    fill(46, 45, 41);
    rect(0, 0, 15, 60);
    pop();

    //top-shelf right bracket
    push();
    translate(525, 350);
    fill(46, 45, 41);
    rect(0, 0, 15, 60);
    pop();

    //top-shelf
    push();
    translate(50, 350);
    fill(189, 182, 157);
    rect(0, 0, 500, 15);
    pop();

    //bottom-shelf left bracket
    push();
    translate(60, 500);
    fill(46, 45, 41);
    rect(0, 0, 15, 60);
    pop();

    //bottom-shelf right bracket
    push();
    translate(525, 500);
    fill(46, 45, 41);
    rect(0, 0, 15, 60);
    pop();

    //bottom-shelf
    push();
    translate(50, 500);
    fill(189, 182, 157);
    rect(0, 0, 500, 15);
    pop();

    //flask-1
    push();
    translate(77, 270);
    fill(255, 255, 255, 100);
    rect(0, 0, 30, 80);
    rect(-10, 0, 50, 5);
    fill(204, 18, 18, 150); //red
    rect(2, 10, 26, 70);
    pop();

    //flask-2
    push();
    translate(147, 270);
    fill(255, 255, 255, 100);
    rect(0, 0, 30, 80);
    rect(-10, 0, 50, 5);
    fill(184, 133, 24, 150); //orange
    rect(2, 15, 26, 65);
    pop();

    //flask-3
    push();
    translate(217, 270);
    fill(255, 255, 255, 100);
    rect(0, 0, 30, 80);
    rect(-10, 0, 50, 5);
    fill(199, 201, 32, 150); //yellow
    rect(2, 20, 26, 60);
    pop();

    //flask-4
    push();
    translate(287, 270);
    fill(255, 255, 255, 100);
    rect(0, 0, 30, 80);
    rect(-10, 0, 50, 5);
    fill(87, 163, 69, 150); //green
    rect(2, 25, 26, 55);
    pop();

    //flask-5
    push();
    translate(357, 270);
    fill(255, 255, 255, 100);
    rect(0, 0, 30, 80);
    rect(-10, 0, 50, 5);
    fill(52, 98, 133, 150); //blue
    rect(2, 30, 26, 50);
    pop();

    //flask-6
    push();
    translate(427, 270);
    fill(255, 255, 255, 100);
    rect(0, 0, 30, 80);
    rect(-10, 0, 50, 5);
    fill(102, 64, 168, 150); //purple
    rect(2, 35, 26, 45);
    pop();

    //flask-7
    push();
    translate(497, 270);
    fill(255, 255, 255, 100);
    rect(0, 0, 30, 80);
    rect(-10, 0, 50, 5);
    fill(212, 125, 196, 150); //pink
    rect(2, 40, 26, 40);
    pop();

    //cauldron
    if (second() % 2 == 0) { //controls bounce of 1st and 4th bubble
        bounce = -2;
    } else {
        bounce = 2;
    }

    if (second() % 2 == 0) { //controls bounce of 2nd and 3rd bubble
        bounce2 = 3;
    } else {
        bounce2 = -3;
    }

    push();
    translate(150, 460);
    fill(46, 45, 41); //cauldron
    ellipse(0, 0, 100, 80);
    ellipse(0, -30, 100, 20);
    fill(89, 255, 122, 150); //bubbles
    ellipse(0, -30, 80, 10); 
    ellipse(-15, -30 + bounce2, 25, 25);
    ellipse(15, -40 + bounce, 20, 20);
    ellipse(5, -60 + bounce, 10, 10);
    ellipse(25, -75 + bounce2, 7, 7);
    pop();

    //coins
    if (second() % 2 == 0) { //angle at which the coins rotate
        jingle = -2;
    } else {
        jingle = 2;
    }

    if (second() % 2 == 0) { //controls bounce of top coin
        bounce3 = 6;
    } else {
        bounce3 = -6;
    }

    push();
    translate(260, 497);
    rotate(jingle);
    fill(156, 140, 39); //coin-shadows (4th row)
    ellipse(0, 0, 30, 10);
    ellipse(35, 0 + bounce, 30 , 10);
    ellipse(70, 0, 30, 10);
    ellipse(105, 0, 30, 10);
    fill(201, 184, 68); //coins (4th row)
    ellipse(0, -3, 30, 10);
    ellipse(35, -3 + bounce, 30, 10);
    ellipse(70, -3, 30, 10);
    ellipse(105, -3, 30, 10);

    fill(156, 140, 39); //coin-shadows (3rd row)
    ellipse(17, -10 + bounce, 30, 10);
    ellipse(52, -10, 30, 10);
    ellipse(87, -10 + bounce, 30, 10);
    fill(201, 184, 68); //coins (3rd row)
    ellipse(17, -13 + bounce, 30, 10);
    ellipse(52, -13, 30, 10);
    ellipse(87, -13 + bounce, 30, 10);

    fill(156, 140, 39); //coin-shadows (2nd row)
    ellipse(35, -20 + bounce2, 30, 10);
    ellipse(70, -20 + bounce2, 30, 10);
    fill(201, 184, 68); //coins (2nd row)
    ellipse(35, -23 + bounce2, 30, 10);
    ellipse(70, -23 + bounce2, 30, 10);

    fill(156, 140, 39); //coin-shadows (1st row)
    ellipse(52, -30 + bounce3, 30, 10);
    fill(201, 184, 68); //coins (1st row)
    ellipse(52, -33 + bounce3, 30, 10);
    pop();

    //pumpkin
    push();
    translate(460, 460);
    fill(83, 105, 88);
    rect(-5, -55, 15, 30);
    fill(135, 100, 26) //pumpkin-shadow
    ellipse(10, 0, 90, 80);
    ellipse(-10, 0, 90, 80);
    fill(184, 133, 24); //pumpkin
    ellipse(0, 0, 90, 80);
    fill(135, 100, 26, 130) //pumpkin-shadow front
    ellipse(0, 0, 40, 80); 

    //changes pumpkin face color
    if (second() % 2 == 0) {
        fill(0, 0, 0, 175);
    }else {
        fill(250, 227, 72, 175);
    }

    ellipse(-20, -5, 10, 20);
    ellipse(20, -5, 10, 20);
    ellipse(0, 15, 15, 15);
    pop();
}

The sounds included in my project are bubbling sounds, coins jingling, and a surprised noise. These can be played by clicking on the cauldron, coins, and pumpkins, respectively. The colored flasks on the top shelf can also be played, and they sound out glockenspiel notes C, D, E, F, G, A, B (from left to right). I wanted to create a project which could play notes once you clicked in different areas, and I decided to make it colorful. The flasks were the first things I designed, and I thought a Halloween motif would work for fitting in the other sounds.

Jasmine Lee – Looking Outwards – 10

During my search for computational sound art, I stumbled upon the Looks Like Music exhibit by Yuri Suzuki. Created as an installation for MUDAM, the piece involves small robots which create sound based on the tracks they encounter. These little robots move using little wheels, following a black path drawn by the user. When colored marks are also drawn along that path, the colored visuals are translated into sounds as they are encountered by the machine.

Above: Video of MUDAM 2013 Looks Like Music exhibit

The installation invites people to interact with it, encouraging people to make their own marks using colored felt pens on a large roll of white paper on the ground. There are five of the sound robots, each with their own distinct set of noises. The noises include low bass noises, computer percussion, drum samples, arpeggio, and chord samples. The artist’s sensibilities in the way he chose to depict the installation as a whimsical playground for visitors to enjoy. This is shown by the curvy, exploring lines drawn in the video example, the colorful visuals, and the abstract shapes of the machines.

Some of the drawn notations used in Suzuki’s project.

From left to right: drumcar, glitch car, arpeggiocar, basscar, melodycar

Jasmine Lee – Project 09 – Portrait

compportrait

//Jasmine Lee
//jasmine4@andrew.cmu.edu
//Section C 
//Project-09 (Computational Portrait)

var baseImage;

function preload() {
    var myImageURL = "https://i.imgur.com/Iprm8zU.jpg";
    baseImage = loadImage(myImageURL);
}

function setup() {
    createCanvas(400, 523);
    background(255);
    baseImage.loadPixels();
    frameRate(10000000);
    grid();
}

//creates grid "cloth" in background
function grid() {
    //creates the vertical lines
    for (var gridA = 0; gridA < width; gridA += 10){
        noStroke();
        fill(255, 238, 186);
        rect(gridA, 0, 2, 523);
    }
    //creates the horizontal lines
    for (var gridB = 0; gridB < height; gridB += 10) {
        noStroke();
        fill(255, 238, 186);
        rect(0, gridB, 400, 2);
    }
}

function draw() {

    var px = random(width); //randomixes location of crosstitch
    var py = random(height); //randomizes location of crossstitch
    var la = random(0, 30); //used for randomizing length of line
    var lb = random(0, 20); //used for randomizing length of line
    var a = random(1,15); //used for randomizing width of beads
    var b = random(1,15); //used for randomizing height of beads
    var ix = constrain(floor(px), 0, width - 1); //randomizes color of crosstitch
    var iy = constrain(floor(py), 0, height - 1); //randomizes color of crosstitch
    var theColorAtLocationXY = baseImage.get(ix, iy);
    var theColorAtMouse = baseImage.get(mouseX, mouseY);

    //draw cross-stitches
    strokeWeight(1);
    stroke(theColorAtLocationXY);
    line(px, py, px + 10, py - 10);
    line(px, py - 10, px + 10, py);

    //draw lines
    strokeWeight(random(0.2, 2));
    stroke(theColorAtMouse);
    line((mouseX - la), (mouseY - lb), (mouseX + la), (mouseY + lb));

    //draw lines-glint
    stroke(0.1);
    stroke(255, 255, 255, 150);
    line ((mouseX - la), (mouseY - lb - 0.5), (mouseX + la), (mouseY + lb - 0.5));

    //draw beads
    noStroke();;
    fill(theColorAtMouse);
    ellipse(mouseX, mouseY, a, b);
 
    //draw bead-glint
    fill(255, 255, 255, 150);
    ellipse(mouseX + 2, mouseY - 2, a - (a - 2), b - (a - 2));
}

//clears canvas when mouse is clicked
function mousePressed() {
    clear();
    //redraws grid after clearing canvas
    grid();

}

For this project, I chose to use a cross-stitching motif. I was inspired by the embroidery theme so I also included shiny “beads” and “thread” that follow the mouse cursor, as if the viewer was stitching along with the program. The resulting image, with movement of the mouse, results in a fuzzy image reminiscent of a especially fuzzy sweater.

Sketch of the intended elements of the project.

The resulting images after 2 min, 5 min, and 5 min (with the mouse effects).

Jasmine Lee – Looking Outwards – 09

For my Looking Outwards this week, I chose to look at Fanjie Jin’s Looking Outwards 05. He chose to write about Alex Roman’s renders, done using VRay and digital modeling. Although I am somewhat familiar with VRay, I have rarely looked at renders of this level before this. Roman’s renders focus on creating lighting conditions which are incredibly hard to capture in real life. Yet, he can completely convince the viewer that what they are looking at is real. His use of lighting is masterful and can turn blank-slate digital models into beautiful “snapshots” of famous existing buildings.

In his animated piece, “The Third & The Seventh,” Roman showcases his renders by providing a walk through instead of simply a slideshow of his pieces. He also shows the layers that went into creating each of his pieces, with multiple steps of post-processing. The inclusion of moving elements combined with varied light conditions adds a sense of fantasy to his illusions.

Even Exeter Library, a building which I had seen in person, felt somewhat familiar and otherworldly at the same time. Agreeing with Fanjie, the renders are so realistic they convince the viewer regardless of their previous experiences.

Phillips Exeter Library, recreated with dramatic lighting by Alex Roman.

Photograph of Exeter Library interior from ArchDaily.

Jasmine Lee – Looking Outwards – 08

Paola Antonelli is the Senior Curator of the Department of Architecture and Design at the Museum of Modern Art in NYC. She joined the museum department in 1994 as an associate curator, and has worked her way up since. Before joining the MoMa board, she was a lecturer at UCLA and taught a course at the Harvard Graduate School of Design. Although she received her Master’s degree in Architecture from the Polytechnic of Milan, Antonelli never practiced as an architect. In her long career, she has curated architecture and design exhibitions across Italy, France, and Japan.

Eyeo 2014 – Paola Antonelli from Eyeo Festival on Vimeo.

What I admire the most about Antonelli is the work she has done in educating people about the importance of design in everyday life. Her curated exhibits in the past have focused on bringing awareness to design in peoples’ everyday lives, and the responsibility that designers hold towards the people they create for. Antonelli was also one of the earliest proponents of MoMa’s digital presence. She created one of the first websites for the museum at a time when the internet barely existed. The website was a digital library for the exhibit Mutant Materials in Contemporary Design. Convinced of the importance of curators being able to understand the art they select, Antonelli learned to code the website on her own through the help of several university students.

The way that Antonelli presents is very convincing, with anecdotes given from through her long career. Antonelli presents one argument that people have made against her, and then spends some time refuting that argument before moving into another related point. She makes use of visual imagery and popular symbols to relate to the audience and to keep them engaged. What I learned from Antonelli about presenting is that it is useful to get the audience to relate to you. In doing so, the audience becomes much more engaged as they start to feel familiar to you.