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

Nawon Choi— Looking Outward 02

Generative Art— Georg Nees

Schotter— Georg Nees (1965)
https://collections.vam.ac.uk/item/O221321/schotter-print-nees-georg/

After looking through various generative art/artists, I found one that really stood out to me. It was Georg Nees’ Schotter. I admire its simplicity— the algorithm incrementally increases the amount of disorder in two variables: position and rotation. All other factors remain the same, the size of each square, and the number of squares in each row. I love the way that the orderly squares gradually descend into chaos, as if it’s falling apart, or crumbling away.

Georg Nees was actually a mathematician and physicist who also worked as a software engineer at Siemens. He is known today as one of the pioneers of computer graphics and art. It’s fascinating to see how someone with a non-traditional “art” background could be one of the first to create generative computer art. It’s also interesting to see the way his background informed his art— his works are very well thought-out and calculated to create aesthetic compositions.

Nawon Choi— Project-02 Variable Face

nawonc-variable-face

// Nawon Choi
// Section C
// nawonc@andrew.cmu.edu
// Project-02 Variable Faces

var sushiX = 233;
var sushiType = "egg";
var browHeight = 147;
var browAngle = 0;
var eyeballSize = 33;
var eyeSize = 1.5;


function setup() {
    createCanvas(640, 480);
    background(220);  
}

function draw() {
    // background
    noStroke();
    fill("#E3CBC8");
    rect(0, 0, 640, 250); 

    // hair
    noStroke();
    fill("#6A6159");
    ellipse(304, 250, 394, 500);

    noStroke();
    fill("#6A6159");
    ellipse(382, 249, 302, 465);

    // head
    noStroke();
    fill("#F2E3C2");
    ellipse(325, 236, 356, 423);

    // fringe
    noStroke();
    fill("#6A6159");
    quad(124, 182, 270, 125, 373, 30, 198, 61);

    noStroke();
    fill("#6A6159");
    triangle(223, 57, 294, 16, 373, 30);

    // eyebrows
    strokeWeight(10);
    stroke("#8F847B");
    noFill();
    beginShape();
    curveVertex(183, browHeight + browAngle);
    curveVertex(183, browHeight + browAngle);
    curveVertex(213, browHeight - browAngle);
    curveVertex(278, browHeight + browAngle);
    curveVertex(278, browHeight + browAngle);
    endShape();

    strokeWeight(10);
    stroke("#8F847B");
    noFill();
    beginShape();
    curveVertex(365, browHeight + browAngle);
    curveVertex(365, browHeight + browAngle);
    curveVertex(430, browHeight - browAngle);
    curveVertex(460, browHeight + browAngle / 2);
    curveVertex(460, browHeight + browAngle / 2);
    endShape();

    // eyes
    noStroke();
    fill("#ffffff");
    ellipse(224, 193, 57 * eyeSize, 46 * eyeSize);

    noStroke();
    fill("#ffffff");
    ellipse(417, 193, 57 * eyeSize, 46 * eyeSize);

    // eyeballs
    var leftEye = 224;
    var rightEye = 417;
    var eyeHeight = 200;
    var sushiCenter = sushiX + 88;

    if (sushiCenter < 201) {
        leftEye = 201,
        rightEye = 394;
    } else if (sushiCenter >= 201 & sushiCenter <= 225) {
        leftEye = sushiCenter,
        rightEye = 394;
    } else if (sushiCenter > 225 & sushiCenter < 394) {
        leftEye = 240,
        rightEye = 394;
    } else if (sushiCenter >= 394 & sushiCenter <= 418) {
        leftEye = 240,
        rightEye = sushiCenter;
    } else {
        leftEye = 240,
        rightEye = 418;
    }

    noStroke();
    fill("#6A6159");
    ellipse(leftEye, eyeHeight, eyeballSize, eyeballSize);

    noStroke();
    fill("#6A6159");
    ellipse(rightEye, eyeHeight, eyeballSize, eyeballSize);

    noStroke();
    fill("#FAFAFA");
    ellipse(leftEye-4, eyeHeight-4, 12, 12);

    noStroke();
    fill("#FAFAFA");
    ellipse(rightEye-4, eyeHeight-4, 12, 12);

    // table
    noStroke();
    fill("#AA827C");
    rect(0, 250, 640, 134);

    noStroke();
    fill("#9B736D");
    rect(0, 384, 640, 30);

    noStroke();
    fill("#E1ACA4");
    rect(0, 414, 640, 86);
    
    // rice
    noStroke();
    fill("#F3EEE9");
    rect(sushiX, 250, 175, 80, 29);

    if (sushiType == 'egg'){
        // egg
        noStroke();
        fill("#F2BD39");
        rect(sushiX-20, 224, 214, 53, 7);

        noStroke();
        fill("#F8D683");
        rect(sushiX-20, 224, 214, 20, 7);

        // seaweed
        noStroke();
        fill("#424944");
        rect(sushiX+72, 220, 30, 24);

        noStroke();
        fill("#27312B");
        rect(sushiX+72, 244, 30, 33);

        noStroke();
        fill("#151916");
        rect(sushiX+72, 277, 30, 53);
    } else if(sushiType == 'salmon'){
        // salmon
        noStroke();
        fill("#EC9326");
        rect(sushiX-20, 224, 214, 53, 7);

        var space = 32;
        var sushiY = sushiX + 19;

        strokeWeight(10);
        stroke('#F6CCAF');
        line(sushiX, 229, sushiY, 272);

        strokeWeight(10);
        stroke('#F6CCAF');
        line(sushiX + space, 229, sushiY + space, 272);

        strokeWeight(10);
        stroke('#F6CCAF');
        line(sushiX + space * 2, 229, sushiY + space * 2, 272);

        strokeWeight(10);
        stroke('#F6CCAF');
        line(sushiX + space * 3, 229, sushiY + space * 3, 272);

        strokeWeight(10);
        stroke('#F6CCAF');
        line(sushiX + space * 4, 229, sushiY + space * 4, 272);

        strokeWeight(10);
        stroke('#F6CCAF');
        line(sushiX + space * 5, 229, sushiY + space * 5, 272);
    } else if(sushiType == 'tuna') {
        // tuna
        noStroke();
        fill("#F2464A");
        rect(sushiX - 20, 224, 214, 53, 7);

        var space = 30;
        var sushiY = sushiX + 17;

        strokeWeight(5);
        stroke('#FFA2A9');
        line(sushiX + 35 - space, 229, sushiY - space, 272);

        strokeWeight(5);
        stroke('#FFA2A9');
        line(sushiX + 35, 229, sushiY, 272);

        strokeWeight(5);
        stroke('#FFA2A9');
        line(sushiX + space + 35, 229, sushiY + space, 272);

        strokeWeight(5);
        stroke('#FFA2A9');
        line(sushiX + space * 2 + 35, 229, sushiY + space * 2, 272);

        strokeWeight(5);
        stroke('#FFA2A9');
        line(sushiX + space * 3 + 35, 229, sushiY + space * 3, 272);

        strokeWeight(5);
        stroke('#FFA2A9');
        line(sushiX + space * 4 + 35, 229, sushiY + space * 4, 272);

        strokeWeight(5);
        stroke('#FFA2A9');
        line(sushiX + space * 5 + 35, 229, sushiY + space * 5, 272);
    }

}

function mousePressed() {
    // variables are reassigned when user clicks
    let sushis = ['egg', 'salmon', 'tuna']
    floats = [1.0, 1.1, 1.2, 1.3, 1.4, 1.5];
    colors = ['#6A6159', '#c795b5', '#1d3f75', '#c9b75b', '#cc7a4e', '#6d1873'];
    sushiX = random(38, 430);
    sushiType = random(sushis);
    eyeballSize = random (23, 43);
    eyeSize = random (floats);
    browHeight = random(137, 160);
    browAngle = random(0, 10);


}

I made three different kinds of sushi and made them correlate to different string variables, “egg”, “salmon”, and “tuna”. I also tried to make the position of the eyes correspond to the location of the sushi so that the eyes would follow the sushi. It was fun playing around with different variables to see what types of expressions could be made just by switching around different values.

I showed this to a friend and they mentioned that it kind of looks like sushi going along a conveyor belt!

Nawon Choi— Project 01

nawon-portrait

// Nawon Choi
// Section C
// Project-01 Self-Portrait


function setup() {
    createCanvas(500, 500);
    background(220);    
}

function draw() {
    
    // background
    noStroke();
    fill("#E3CBC8");
    rect(0, 0, 500, 250);
    
    // head
    noStroke();
    fill("#6A6159");
    ellipse(234, 250, 395, 500);

    noStroke();
    fill("#6A6159");
    ellipse(312, 249, 302, 465);

    noStroke();
    fill("#F2E3C2");
    ellipse(255, 236, 356, 423);

    noStroke();
    fill("#6A6159");
    rect(122, 142, 69, 16);

    noStroke();
    fill("#6A6159");
    rect(315, 142, 69, 16);

    noStroke();
    fill("#6A6159");
    quad(128, 61, 303, 30, 200, 125, 54, 182);

    noStroke();
    fill("#6A6159");
    triangle(224, 16, 303, 30, 153, 57);

    // table
    noStroke();
    fill("#AA827C");
    rect(0, 250, 500, 134);

    noStroke();
    fill("#9B736D");
    rect(0, 384, 500, 30);

    noStroke();
    fill("#E1ACA4");
    rect(0, 414, 500, 86);
    
    // rice
    noStroke();
    fill("#F3EEE9");
    rect(163, 250, 175, 80, 29);

    // egg
    noStroke();
    fill("#F2BD39");
    rect(143, 224, 214, 53, 7);

    noStroke();
    fill("#F8D683");
    rect(143, 224, 214, 20, 7);

    // seaweed
    noStroke();
    fill("#424944");
    rect(235, 220, 30, 24);

    noStroke();
    fill("#27312B");
    rect(235, 244, 30, 33);

    noStroke();
    fill("#151916");
    rect(235, 277, 30, 53);

    // eyes
    noStroke();
    fill("#ffffff");
    ellipse(154, 198, 57, 46);

    noStroke();
    fill("#ffffff");
    ellipse(347, 198, 57, 46);
    

    // eyeballs
    let x1, x2, y;
    // let x1 = mouseX+153;
    //     x2 = mouseX
    //     y = mouseY-142;

    // LEFT x range: (142 - 166)
    // RIGHT x range: (335 - 359)
    // y range: (192 - 205)
    if (mouseY < 192 ){
        y = 192;
    } else if (mouseY >= 192 & mouseY <=205) {
        y = mouseY;
    } else {
        y = 205;
    }

    if (mouseX < 142) {
        x1 = 142,
        x2 = 335;
    } else if (mouseX >= 142 & mouseX <= 166) {
        x1 = mouseX,
        x2 = 335;
    } else if (mouseX > 166 & mouseX < 335) {
        x1 = 166,
        x2 = 335;
    } else if (mouseX >= 335 & mouseX <= 359) {
        x1 = 166,
        x2 = mouseX;
    } else {
        x1 = 166,
        x2 = 359;
    }

    noStroke();
    fill("#6A6159");
    ellipse(x1, y, 33, 33);

    noStroke();
    fill("#6A6159");
    ellipse(x2, y, 33, 33);

    noStroke();
    fill("#FAFAFA");
    ellipse(x1-4, y-4, 12, 12);

    noStroke();
    fill("#FAFAFA");
    ellipse(x2-4, y-4, 12, 12);

    
}

I definitely wanted to have an interactive component for my self-portrait, so I made the eyes follow the direction of the mouse. Perhaps the most challenging part of this project was coding the values so that the eyeballs would stay within the range of the eyes. I thought for a while on what I wanted my self-portrait to look like, and ultimately, I decided to focus on my two of my favorite foods—eggs and sushi.

Nawon Choi— Looking Outward 01

“The Smithsonian’s design museum goes high tech” by The Verge

The New Cooper Hewitt Experience

The Cooper Hewitt Smithsonian Design Museum’s interactive pen and tabletop experience left a deep impression on me when I first experienced it.

I was inspired by the way it augmented a typical museum experience by personalizing each visitor’s journey throughout the galleries. While there are many features of this unique project, one of the key computational/interactive art moments is the Immersion Room. This room takes inspiration from the museum’s own permanent wallpaper collection, and transforms the way people experience it. In the Immersion Room, visitors can not only digitally project wallpapers from the Museum’s collection, but also draw and display their own creations on the wall. When visitors draw on the tabletop interface using their pen, their drawing is projected on the walls in real-time.

Demo of the Immersion Room

Many different teams were involved in ideating, designing, and developing this experience. It integrates existing products, such as Sistelnetworks’ “vWand”, which have been re-engineered to fit the specific needs of the museum. I admire the way this project not only challenges the traditional museum experience, but also opens up the possibility for other industries/organizations, such as schools, to utilize these interactive technologies to enhance or radically change the way people experience and learn new things.