Author: Sarah

Sarah Yae – Final Project

sketch

// Sarah Yae
// smyae@andrew.cmu.edu
// Section B
// Final Project - "EDM and Jam!"

// Declare sound variables globally

// "Rumors" by R3HAB
var r1;
var r2;
var r3;
var r4;
var r5;
var r6;
// "Lullaby" by R3HAB
var l1;
var l2;
var l3;
var l4;
var l5;
var l6;
var l7;
var l8;
var l9;
var l10;
// Drum Sounds
var d1;
var d2;
var d3;
var d4;
// Random Sounds
var rn1;
var rn2;
var rn3;
var rn4;
var rn5;
var rn6;
//Other Variables 
var x1 = 170;
var x2 = 230;
var y1 = 170;
var y2 = 230;
var rad = 60; 
var startpx = 10; 
var startox = 10;
var startix = 10; 
var ldia = 100;
var kdia = 100;
var jdia = 100;
var xb1 = 200;
var yb1 = 200;
var xb2 = 200;
var yb2 = 200; 
var uparc_x;
var uparc_y;
var arc_w = 100;
var arc_h = 50; 

// Load all sounds
function preload() {
    r1 = loadSound("rumor1.wav");
    r1.setVolume(0.5);

    r2 = loadSound("rumor2.wav");
    r2.setVolume(0.5); 

    r3 = loadSound("etc1.wav");
    r3.setVolume(0.5); 

    r4 = loadSound("rumor4.wav");
    r4.setVolume(0.5); 

    r5 = loadSound("rumor5.wav");
    r5.setVolume(0.5); 

    r6 = loadSound("rumor6.wav");
    r6.setVolume(0.5); 

    l1 = loadSound("lullaby1.wav");
    l1.setVolume(0.5); 

    l2 = loadSound("lullaby2.wav");
    l2.setVolume(0.5);

    l3 = loadSound("lullaby3.wav");
    l3.setVolume(0.5);

    l4 = loadSound("lullaby4.wav");
    l4.setVolume(0.5);

    l5 = loadSound("lullaby5.wav");
    l5.setVolume(0.5);

    l6 = loadSound("lullaby6.wav");
    l6.setVolume(0.5);

    l7 = loadSound("lullaby7.wav");
    l7.setVolume(0.5);

    l8 = loadSound("lullaby8.wav");
    l8.setVolume(0.5);

    l9 = loadSound("lullaby9.wav");
    l9.setVolume(0.5);

    l10 = loadSound("lullaby10.wav");
    l10.setVolume(0.5);

    d1 = loadSound("drum1.wav");
    d1.setVolume(0.5);

    d2 = loadSound("drum2.mp3");
    d2.setVolume(0.5);

    d3 = loadSound("drum3.wav");
    d3.setVolume(0.5);

    d4 = loadSound("drum4.wav");
    d4.setVolume(0.5);

    rn1 = loadSound("rand1.wav");
    rn1.setVolume(0.5);

    rn2 = loadSound("rand2.wav");
    rn2.setVolume(0.5);

    rn3 = loadSound("rand3.wav");
    rn3.setVolume(0.5);

    rn4 = loadSound("etc2.wav");
    rn4.setVolume(0.5);

    rn5 = loadSound("rand5.wav");
    rn5.setVolume(5.0);

    rn6 = loadSound("rand6.wav");
    rn6.setVolume(0.5);
}

//Setup Canvas
function setup() {
    createCanvas (400,400);
}

//Draw graphics and play corresponding sounds
function draw() {

    background (51);

    textSize(25);
    textAlign(CENTER);
    fill("Salmon");
    text("EDM AND JAM! press any key", width / 2, 50);

    if (keyIsPressed) {

        var slant = 30;

// Play "Rumors" = Key B, N , M, L, K, J

        if (key == 'm') { //pink slash lines
            r1.play();
            for (var i = 0; i < 40; i++) {
                strokeWeight(10);
                stroke(246, 203, 190);
                line(0, height - slant, slant, height);
                slant += 40; 
            }
        }         

        if (key == 'n') { //purple slash lines
            r2. play();
            for (var i = 0; i < 40; i++) {
                strokeWeight(10);
                stroke(203, 202, 231);
                line(0, height - slant, slant, height);
                slant += 40; 
            } 
        }

        if (key == 'b') { //half circles move
            r3.play();
            background (200);
            fill ('Salmon');

            arc(xb1, yb1, 100, 100, PI/2, PI*3/2);
            yb1 -= 10;
            if (yb1 < 0) {
                yb1 = 200; 
            }

            arc(xb2, yb2, 100, 100, PI*3/2, PI/2);
            yb2 += 10; 
            if (yb2 > height) {
                yb2 = 200; 
            }
        }
    
        if (key == 'l') { //yellow circle gets bigger
            r4.play();
            fill(204,255,0);
            noStroke();
            ellipse(width/2, height/2, ldia, ldia);
            ldia = ldia + 10;

            if (ldia > 150) {
                ldia = 30;
            }
        }

        if (key == 'k') { //blue circle gets bigger
            r5.play();
            fill(0, 204, 255);
            noStroke();
            ellipse(width/2, height/2, ldia, ldia);
            ldia = ldia + 10;

            if (ldia > 150) {
                ldia = 30;
            }
        } 

        if (key == 'j') { //pink circle gets bigger
            r6.play();
            fill(255, 0, 204);
            noStroke();
            ellipse(width/2, height/2, ldia, ldia);
            ldia = ldia + 10;

            if (ldia > 150) {
                ldia = 30;
            }
        }   

// Play Random Sounds = Key A, S, D, F, G, H

        if (key == 'a') { //yellow one dash
            rn1.play();
            strokeWeight(10);
            stroke(254, 226, 62);
            line(width/2 - 70, height/2, width/2 + 70, height/2)
        }

        if (key == 's') { //yellow two dashes
            rn2.play();
            strokeWeight(10);
            stroke(254, 254, 73);
            line(width/2 - 70, height/2 - 20, width/2 + 70, height/2 - 20);
            line(width/2 - 70, height/2 + 20, width/2 + 70, height/2 + 20);
        }

        if (key == 'd') { //yellow three dashes
            rn3.play();
            strokeWeight(10);
            stroke(255, 255, 146);
            line(width/2 - 70, height/2 - 30, width/2 + 70, height/2 - 30);
            line(width/2 - 70, height/2, width/2 + 70, height/2);
            line(width/2 - 70, height/2 + 30, width/2 + 70, height/2 + 30);
        }

        if (key == 'f') { //gradient orange
            rn4.play();
            loadPixels();
            for (var y = 0; y < height; y++) {
                for (var x = 0; x < width; x++) {
                    var ind = (x + y * width) * 4;
                    pixels[ind+0] = 200;
                    pixels[ind+1] = 100; 
                    pixels[ind+2] = y;
                    pixels[ind+3] = 255;
                }
            }
            updatePixels();
        }

        if (key == 'g') { //gradient pink
            rn5.play();
            loadPixels();
            for (var y = 0; y < height; y++) {
                for (var x = 0; x < width; x++) {
                    var ind = (x + y * height) * 4;
                    pixels[ind+0] = 100;
                    pixels[ind+1] = 50; 
                    pixels[ind+2] = y;
                    pixels[ind+3] = 255;
                }
            }
            updatePixels();
        }

        if (key == 'h') { //gradient blue 
            rn6.play();
            loadPixels();
            for (var y = 0; y < height; y++) {
                for (var x = 0; x < width; x++) {
                    var ind = (x + y * width) * 4;
                    pixels[ind+0] = 100;
                    pixels[ind+1] = 150; 
                    pixels[ind+2] = y;
                    pixels[ind+3] = 255;
                }
            }
            updatePixels();
        }

// Play "Lullaby" = Key P, O, I , U, Y, T, R, E, W, Q

        if (key == 'p') { //one top star moving
            l1.play();
            background(17, 30, 108); 
            textSize(50); 
            fill('Yellow');
            text('*', startpx, 100);
            startpx += 10; 

            if (startpx > width) {
                startpx = 10; 
            }
        }

        if (key == 'o') { //one middle star moving
            l2.play();
            background(17, 30, 108); 
            textSize(50); 
            fill('Yellow');
            text('*', startox, 200);
            startox += 10;  

            if (startox > width) {
                startox = 10; 
            }       
        }

        if (key == 'i') { //one bottom star moving
            l3.play();
            background(17, 30, 108); 
            textSize(50); 
            fill('Yellow');
            text('*', startix, 300);
            startix += 10;  

            if (startix > width) {
                startix = 10; 
            }  
        }

        if (key == 'u') { //green springs wallpaper
            l4.play();
            background(255, 235, 205);
            for (var uparc_y = 50; uparc_y < 500; uparc_y += 100) {
                for (var uparc_x = 50; uparc_x < 500; uparc_x += 100) {
                noFill ();
                stroke (177,194,122);
                strokeWeight (3);
                arc(uparc_x, uparc_y, arc_w, arc_h, PI, TWO_PI);
                }
            }
        }

        if (key == 'y') { //blue springs wallpaper
            l5.play();
            background(255, 235, 205);
            for (var uparc_y = 50; uparc_y < 500; uparc_y += 100) {
                for (var uparc_x = 50; uparc_x < 500; uparc_x += 100) {
                noFill ();
                stroke (180,216,231);
                strokeWeight (3);
                arc(uparc_x, uparc_y, arc_w, arc_h, PI, TWO_PI);
                }
            }
        }

        if (key == 't') { //pink springs wallpaper 
            l6.play();
            background(255, 235, 205);
            for (var uparc_y = 50; uparc_y < 500; uparc_y += 100) {
                for (var uparc_x = 50; uparc_x < 500; uparc_x += 100) {
                noFill ();
                stroke (255,195,194);
                strokeWeight (3);
                arc(uparc_x, uparc_y, arc_w, arc_h, PI, TWO_PI);
                }
            }
        }

        if (key == 'r') { //four triangles
            l7.play();
            noFill();
            for (var i = 0; i < 4; i++) {
                strokeWeight(12 - 3 * i)
                var rr = 244
                var rg = 147
                var rb = 242
                stroke(rr - (50 * i), rg + (20 * i), rb);
                triangle(width/2, (height/4) + 40 * i, (width/4) + 35 * i, (height*3/4) - 20 * i, (width * 3/4) - 35 * i, (height*3/4) - 20 * i);
            }
        }

        if (key == 'e') { //three triangles
            l8.play();
            noFill();
            for (var i = 0; i < 3; i++) {
                strokeWeight(12 - 3 * i)
                var er = 244
                var eg = 147
                var eb = 242
                stroke(er - (50 * i), eg + (20 * i), eb);
                triangle(width/2, (height/4) + 40 * i, (width/4) + 35 * i, (height*3/4) - 20 * i, (width * 3/4) - 35 * i, (height*3/4) - 20 * i);
            }
        } 

        if (key == 'w') { //two triangles
            l9.play();
            noFill();
            for (var i = 0; i < 2; i++) {
                strokeWeight(12 - 3 * i)
                var wr = 244
                var wg = 147
                var wb = 242
                stroke(wr - (50 * i), wg + (20 * i), wb);
                triangle(width/2, (height/4) + 40 * i, (width/4) + 35 * i, (height*3/4) - 20 * i, (width * 3/4) - 35 * i, (height*3/4) - 20 * i);
            }
        }
        
        if (key == 'q') { //one triangle
            l10.play();
            strokeWeight(12);
            noFill();
            for (var i = 0; i < 1; i++) {
                var qr = 244
                var qg = 147
                var qb = 242
                stroke(qr - (50 * i), qg + (20 * i), qb);
                scale(1/(1+i));
                triangle(width/2, height/4, width/4, height * 3/4, width * 3/4, height * 3/4);
            }
        }

// Play Drum Sounds = Key V, C, X, Z

        if (key == 'c') { //two balls move horizontally
            d1.play();

            noStroke();
            fill(255, 228, 196);
            ellipse(x1, height/2, rad, rad);
            x1 -= 5;

            fill(230, 230, 250);
            ellipse(x2, height/2, rad, rad);
            x2 += 5;

            if (x1 < 0) {
                x1 = 170;
            }

            if (x2 > width) {
                x2 = 230;
            }
        }

        if (key == 'v') { //two balls move vertically
            d2.play();

            noStroke();
            fill(255, 228, 196);
            ellipse(width/2, y1, rad, rad);
            y1 -= 5;

            fill(230, 230, 250);
            ellipse(width/2, y2, rad, rad);
            y2 += 5;

            if (y1 < 0) {
                y1 = 170;
            }

            if (y2 > height) {
                y2 = 230;
            }  
        }   

        if (key == 'x') { //white thunder
            d3.play();
            noFill();
            stroke('White');
            strokeWeight(10);
            beginShape();
            vertex(width/2, height/4 - 20);
            vertex(width/3 + 10, height/2);
            vertex(width*2/3 - 10, height/2);
            vertex(width/2, height*3/4 + 20);
            endShape();
        }

        if (key == 'z') { //yellow thunder
            d4.play();
            noFill();
            stroke('Yellow');
            strokeWeight(20);
            beginShape();
            vertex(width/2, height/4 - 20);
            vertex(width/3 + 10, height/2);
            vertex(width*2/3 - 10, height/2);
            vertex(width/2, height*3/4 + 20);
            endShape();
        }
    }
}

“EDM AND JAM!”

INSTRUCTIONS: Press any alphabetical key on the keyboard to play a particular sound and see a corresponding graphic. You can even listen to your favorite music and add beats to it, simply by pressing a key!

HOW TO OPERATE FROM ZIP FILE: Because this program incorporated a lot of sounds (approximately 26 different sound files), it was best to upload as a zip file. First, download the zip file. Secondly, run a terminal locating the file and localhost:8000. Third, open up the program and play around with it! Download it right here: smyae-finalproject

SCREENSHOTS:

Background of “EDM AND JAM!”
Key “u” pressed, a sound from “Lullaby” plays
Key “m” pressed, a sound from “Rumor” plays

REFLECTION STATEMENT: After getting inspired by “Patatap,” I wanted to create something similar to it. My project, “EDM AND JAM!” focuses on EDM sounds with animations or graphics that reminds me of a particular corresponding sound. Although the code was pretty straightforward, cutting out individual sound from music files was tedious and challenging. It was cool to see the final project though! I had a fun time playing around with it, and even putting a background music while I run the program.

SONGS USED: “Lullaby” by R3HAB, “Rumors” by R3HAB (and other random sounds)

Sarah Yae – Looking Outwards 12 – Section B

Regarding the project “Drum Kit” (http://ronwinter.tv/drums.html), this is an computational, interactive music project that plays drum-related sound that correlates with a specific key of the keyboard. I admire that it is under a certain theme (of drums), but I feel like there could have been volume control of the general program, so that users could put a background music and use “Drum Kit” at the same time.

Drum Kit

Regarding the project “Rave” (https://rave.dj/mix), this is a website that allows users to mash up two songs that are uploaded. It’s pretty cool in a way that it generates smooth mashup of music, but it would have been improved by allowing the users to change the mashup of songs, instead of automatically generating it.

Rave

The two above projects are very different from each other even though they both utilize music to create something new. Rave focuses more on using existing songs to create a new song, while Drum Kit focuses on using different sounds to create a song.

Sarah Yae – Final Project Proposal – Section B

For my final project, I will be creating an interactive computer keyboard instrument, similar to the example project, “Patatap”. “Patatap” seems like it uses a lot of mellow sounds, creating a very chill atmosphere, when one creates music with the keyboard. However, for my project, I want the sounds to be more EDM (Electronic Dance Music) focused, by having drum beats and boom effects. Originally, since I love makeup and beauty blogging, I wanted to do an interactive makeup game, where a user would give a character a makeover. However, I also love EDM and I thought “Patatap” was pretty cool (I couldn’t stop playing around with it). For some sound ideas, I would extract the sound from some of my favorite EDM like Whiplash by R3HAB, You & Me Remix by Flume, Thief by Ookay, Ghost by Jauz, and the list goes on. I would use Audacity to extract sound for each key, so I would have to extract about 26 different sounds, which would be played with a certain animation.

EDM Music Maker

Sarah Yae – Project 11 – Section B

sketch

//Sarah Yae
//smyae@andrew.cmu.edu
//Section B
//Project 11

var baseface; 

//Load Base Face Image
function preload() {
    var basefaceload = "https://i.imgur.com/FXyP6ss.gif";
    baseface = loadImage(basefaceload);
}

//Set up loaded Base Face 
function setup () {
    createCanvas(280,400);
    background(0);
    image(baseface, 0, 0);
    text("drag the mouse to make my brows thicker!", 10, 10);
}

function draw() {

    var distmousex = map(mouseX, 0, width, 0, 5);
    var distmousey = map(mouseY, 0, height, 0, 5);

//Right brow
    var browr = makeTurtle((width / 2) + 40 + distmousex, height/3 + distmousey);
    browr.setColor(color(210, 180, 140));
    browr.setWeight(4);
    browr.face(0);
    browr.forward(50);

//Left brow
    var browl = makeTurtle((width / 2) + distmousex, height/3 + distmousey);
    browl.setColor(color(210, 180, 140));
    browl.setWeight(4);
    browl.face(180);
    browl.forward(50); 

//Right Eye 
    var eyer = makeTurtle((width / 2) + 60, (height/3) + 15);
    eyer.setColor(50); 
    eyer.setWeight(1);

    for (var i = 0; i < 100; i++) {
        eyer.right(360/100);
        eyer.forward(0.7);
    }

//Left Eye 
    var eyel = makeTurtle((width / 2) - 20, (height/3) + 15);
    eyel.setColor(50); 
    eyel.setWeight(1);

    for (var i = 0; i < 100; i++) {
        eyel.right(360/100);
        eyel.forward(0.7);
    }

//Mouth
    stroke("Salmon");
    strokeWeight(6);
    arc((width / 2) + 20, (height/2) + 15, 80, 40, 0, PI);

//Right Iris 
    var irisr = makeTurtle((width / 2) + 60, (height/3) + 23);
    irisr.setColor(color(30, 17, 0));
    irisr.setWeight(7);

    for (var i = 0; i < 100; i++) {
        irisr.right(360/100);
        irisr.forward(0.2); 
    }

//Left Iris 
    var irisl = makeTurtle((width / 2) - 20, (height/3) + 23);
    irisl.setColor(color(30, 17, 0));
    irisl.setWeight(7);

    for (var i = 0; i < 100; i++) {
        irisl.right(360/100);
        irisl.forward(0.2);
    }   

}

//Turtle Graphics 
function turtleLeft(d) {
    this.angle -= d;
}
 
 
function turtleRight(d) {
    this.angle += d;
}
 
 
function turtleForward(p) {
    var rad = radians(this.angle);
    var newx = this.x + cos(rad) * p;
    var newy = this.y + sin(rad) * p;
    this.goto(newx, newy);
}
 
 
function turtleBack(p) {
    this.forward(-p);
}
 
 
function turtlePenDown() {
    this.penIsDown = true;
}
 
 
function turtlePenUp() {
    this.penIsDown = false;
}
 
 
function turtleGoTo(x, y) {
    if (this.penIsDown) {
      stroke(this.color);
      strokeWeight(this.weight);
      line(this.x, this.y, x, y);
    }
    this.x = x;
    this.y = y;
}
 
 
function turtleDistTo(x, y) {
    return sqrt(sq(this.x - x) + sq(this.y - y));
}
 
 
function turtleAngleTo(x, y) {
    var absAngle = degrees(atan2(y - this.y, x - this.x));
    var angle = ((absAngle - this.angle) + 360) % 360.0;
    return angle;
}
 
 
function turtleTurnToward(x, y, d) {
    var angle = this.angleTo(x, y);
    if (angle < 180) {
        this.angle += d;
    } else {
        this.angle -= d;
    }
}
 
 
function turtleSetColor(c) {
    this.color = c;
}
 
 
function turtleSetWeight(w) {
    this.weight = w;
}
 
 
function turtleFace(angle) {
    this.angle = angle;
}
 
 
function makeTurtle(tx, ty) {
    var turtle = {x: tx, y: ty,
                  angle: 0.0, 
                  penIsDown: true,
                  color: color(128),
                  weight: 1,
                  left: turtleLeft, right: turtleRight,
                  forward: turtleForward, back: turtleBack,
                  penDown: turtlePenDown, penUp: turtlePenUp,
                  goto: turtleGoTo, angleto: turtleAngleTo,
                  turnToward: turtleTurnToward,
                  distanceTo: turtleDistTo, angleTo: turtleAngleTo,
                  setColor: turtleSetColor, setWeight: turtleSetWeight,
                  face: turtleFace};
    return turtle;
}

I wanted to originally create a makeup simulation, but as I was working on the project, I found that to be difficult, as turtle graphics work more as a pen, rather than a painting function. I feel like my final product turned out to be way different than my first ideas.

First Sketches
Finished Product

Sarah Yae – Looking Outwards 11 – Section B

“Cy-Ens”(2018)  is a computer music project, produced by two Montreal-based composers and sound artists, MP (Max Pazhutan) and vH+ (Honey Pazhutan). “Aryabhatiya – Trigonometric Meditations” is a part of their project. This music can be listened through the embedded link. There are of course, other works that make up this project. This “Cy-Ens” project is themed around logical art that inspires learning and personal development, as well as to create art with it. The music is based off on an analogy, or a conceptual metaphor that works with mathematical material. This is suggested by the title of “Aryabhatiya – Trigonometric Meditations,” where patterns of musical structure are based off of mathematical equations. The sounds are then synthesized through open source audio programming languages. I admire this project because although I usually listen to music that is just pleasing to my ear, listening to computational music, although not the most pleasing to my ear, made me think about the production of sound and how music is structured.

The rest of the project could be listened on: https://soundcloud.com/cy-ens

Sarah Yae – Looking Outward 10 – Section B

http://www.katherinebennett.net/art/sleeping_thoughts.html

Katherine Bennett is a media artist, who uses programming and physical computing to present interactive installations. She earned her Master of Fine Arts from The School of Art Institute of Chicago and has won several grants. Her most recent exhibition is called “The Noise of the Heartbeat or Whatever the Hell”(2017) in New York, NY.

Her work, Sleeping Thoughts (2011) is an installation where she put up lights hanging from the ceiling at different lengths. Audience can walk around this room and immerse themselves into a 3-D constellation, almost. I admire this project because it gives me peace and relaxation. I like how pretty and simple it looks as well. It amazes me how much you can do with a room, to create such different atmosphere and vibes.

Sarah Yae – Project 10 – Section B

sketch

//Sarah Yae
//smyae@andrew.cmu.edu
//Section B
//Project 10 

var nails = [];

function setup() {
    createCanvas(400, 300);

    //Creation of initial nail polish
    for (var i = 0; i < 10; i++) {
        var rx = random(width);
        nails[i] = makeNails(rx);
    }
    frameRate(30);
}

function draw() {
    background(color(255,231,218));

    displayText();
    updateAndDisplayNails();
    removeOldNails();
    addNewNails();

    //Tabletop 
    noStroke();
    fill(230);
    rect(0, 260, width, height);
}

function displayText() {
    textSize(25);
    textAlign(CENTER);
    textStyle(BOLD);
    fill("Salmon");
    text("Welcome to Sarah's Nail Salon!", width / 2, 50);
}

function updateAndDisplayNails() {
    for (var i = 0; i < nails.length; i++) {
        nails[i].move();
        nails[i].display();
    }
}

function removeOldNails() {
    var nailskeep = [];
    for (var i = 0; i < nails.length; i++) {
        if (nails[i].x + 50 > 0) {
            nailskeep.push(nails[i]);
        }
    }
    nails = nailskeep;
}

function addNewNails() {
    var chance = 0.01;
    if (random(0,1) < chance) {
        nails.push(makeNails(width));
    }

}

function nailsMove() {
    this.x += this.speed;
}

function nailsDisplay() {
    var nailbody = 90;
    var nailtip = 60;

    noStroke();

    push();
    translate(this.x, height - 40);

    //Body of Nail Polish
    fill(this.randomColor);
    rect(this.x, -nailbody, this.bodybreadth, nailbody); 

    //Tip of Nail Polish
    fill(80);
    rect(this.x + 7, -nailbody - nailtip, this.tipbreadth, nailtip); 

    pop(); 

}

function makeNails(birthlocationX) {
    var nails = {x: birthlocationX, 
        bodybreadth: 40,
        tipbreadth: 25,
        speed: -1.0,
        randomColor: color(random(255), random(255), random(255)),
        move: nailsMove,
        display: nailsDisplay}
    return nails;
}

This project was difficult to tackle; I did not have any idea on which animation I wanted to do, nor did I have too much technical knowledge on where to start. However, I got inspired from my friend’s nail kit. My friends and I would go to her room and do each other’s nails sometimes- and I thought it would be a cool idea to display different nail polishes that circulate. For the code, I referred to the template to get initial ideas on where to develop my code. Overall, this was an interesting project!

Sketch of ‘Nail Salon’
My friend’s nail polish kit

 

Sarah Yae – Looking Outwards 9 – Section B

I reflected on Christine Chen’s Looking Outwards 3 post. I agree with Christine in that nature is actually way more complex than the artificial world, although many of us believe that the artificial world is more complex. Because nowadays, mankind is so much more familiar with technology  rather than nature, we tend to focus on the complex parts of our world, than the natural world. Although we use our developments to help create the things that we need, it is true that nature does the process “naturally” and that is the amazing part about how much computation we have to do to even copy a part of nature, like shown in Iris Van Herpen’s dress. Herpen’s artwork was Decrypt Kymono, a part of the Data Dust series in 2018. She attempted to showcase different aspects of nature, like texture and patterns through an artificially made dress. It is amazing how she was able to bring together art, nature and technology under one dress.

Sarah Yae – Project 9 – Section B

sketch

//Sarah Yae
//smyae@andrew.cmu.edu
//Section B
//Project 9

var basepic;
var sqsize = 5;
var click = 0; 

//Load Image
function preload() {
    var myportrait = "https://i.imgur.com/ZUZbO4M.png";
    basepic = loadImage(myportrait);
}

//Translates original image 
function setup() {

    createCanvas(275, 300);
    background(0);
    basepic.loadPixels();

//Makes certain pixels into rectangles after retrieving that pixel's color 
    for (var x = 2; x < width; x += (sqsize + 2)) {
        for (var y = 2; y < height; y += (sqsize + 2)) {
            var color = basepic.get(x,y);
            fill(color);
            noStroke();
            rect (x, y, sqsize, sqsize);
        }
    }

}

//Turns image into black and white once mouse pressed 
function mousePressed() {

    createCanvas(275, 300);
    background(0);
    basepic.loadPixels();

    for (var x = 2; x < width; x += (sqsize + 2)) {
        for (var y = 2; y < height; y += (sqsize + 2)) {
            var r = basepic.get(x,y)[1]; //Retrieves a pixel's 1st value in its array 
            fill(r, r, r);
            noStroke();
            rect (x, y, sqsize, sqsize);
        }
    }

}

Once you click on the image, the translated image turns black and white. I had a hard time figuring out how  to change the image black and white, but I used pixel array to make it work.

Translated Image with Color
Translated Image into Black and White

Sarah Yae Looking Outwards 8 Section B

Jessica Rosenkrantz is a MIT & Harvard graduate, who studied Architecture and Biology. After graduating, in 2007, she founded a design studio called Nervous System with Jesse Louis-Rosenberg. They work to bring in the fields of science, art and technology together.

In Nervous System, they produce unique and affordable art, jewelry and household appliances based on patterns found in nature.  I admire their Arboreal Pendant Lamp the most because I think it is amazing to portray nature, like light, from the computationally generated nature patterns.

Arboreal Pendant Lamp

To present their work effectively, they explain their motives clearly and walk through how they created a certain program step by step, so the audience can easily understand. They also reason through every step of why they did what they did; for example, on approximately 18:30 of the video, they explain how they decided their boundaries for their program. In order to present my own work, I should learn to present in a logical, easily-to-follow-along manner.

Her website can be found on: https://n-e-r-v-o-u-s.com

Her presentation video can be found on: https://vimeo.com/33369209

Nervous System – Eyeo Festival 2011 from Eyeo Festival on Vimeo.