jyook@andrew.cmu.edu – Page 2 – [OLD FALL 2018] 15-104 • Introduction to Computing for Creative Practice

Justin Yook- Project 07

// Justin Yook
// jyook@andrew.cmu.edu
// Section C
// Project 07

var nPoints = 250; // number of points drawn to create shape

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

function draw() {
    background(0);
    fill(255);
    text("Modified Quadrifolum", 20, 40);

    // draw the curve
    push();
    translate(width / 2, height / 2);
    drawQuadrifoliumMod();
    pop();
}

function drawQuadrifoliumMod() {
    // http://mathworld.wolfram.com/Quadrifolium.html
    // Polar equation is in form: r = a * sin(2 * theta), but I modified 2 to 6 to create a flower

    var x;
    var y;
    var r;
    var a = constrain(mouseX, 60, 220);

    beginShape();
    for (var i = 0; i < nPoints; i++) {
        var theta = map(i, 0, nPoints, 0, TWO_PI);

        // Modified Quadrifolium
        if (mouseX > width / 2) {
        fill(0, 191, 255);
        r = a * sin(6 * theta);
        x = r * cos(theta);
        y = r * sin(theta);
        vertex(x + random(-2, 2), y + random(-2, 2));
        }

        // Original Quadrifolium
        if (mouseX < width / 2) {
        fill(0, 191, 255);
        r = a * sin(3 * theta);
        x = r * cos(theta);
        y = r * sin(theta);
        vertex(x + random(-2, 2), y + random(-2, 2));
        }
    }
    endShape(CLOSE);
}

In this project, I used modified versions of the quadrifolium to create flower-like shapes. I was inspired by the way fire appears on gas stoves, so I made the shapes jiggle slightly. The parameter that is interactive is the size of the curves, and the number of flower petals. When the mouse moves to the right, more petals show up, and the size increases. When the mouse moves to the left, fewer petals show up, and the size decreases.

Justin Yook- Looking Outwards 07

Peak Spotting by Studio.NAND is an interactive application created for Deutsche Bahn, a railway company located in Berlin, Germany. It is a visual tool that allows Deutsche Bahn to manage their rail network by looking up to 100 days into the future. Specifically, tasks such as optimizing prices, train coordination, and providing better customer service. The program is run by machine learning algorithms that display data in an instant for the traffic managers. I think this application is interesting because it helps visualize and understand complicated issues, that might be hard for people to casually identify and resolve. The German rail network seems intricate and it can be easy for anyone to overlook details. One can see Studio.NAND’s artistic sensibilities from the simple design; the train routes, and the trains can be quickly checked.

Source: https://nand.io/projects/peak-spotting

Justin Yook – Project 06 – Abstract Clock

abstractClock

//Justin Yook
//jyook@andrew.cmu.edu
//Section C
//Project 06

var prevSec;
var millisRolloverTime;

var sizeS = []; // stores sizes for each seconds raindrop drawn
var xS = []; // stores x coordinates for seconds raindrop
var yS = []; // stores y coordinates for seconds raindrop

var sizeM = 0; // starting size of minute raindrop
var sizeH = 0; // starting sizse of hour raindrop

function setup() {
    createCanvas(300, 300);
    background(164, 194, 205);
}

function draw() {
    var S = second(); // keeps track of each second 
    var M = 0; // keeps track of each minute
    var H = 0; // keeps track of each hour

    // make sure that the second matches up properly with milliseconds passed
    if (prevSec != S) {
        millisRolloverTime = millis();
    }
    prevSec = S;
    var mils = floor(millis() - millisRolloverTime);

    // i represents current seconds raindrop
    for (var i = 0; i < S; i++) {
        var rxS = random(0, 300); // random x location of seconds raindrop
        var ryS = random(0, 300); // random y location of seconds raindrop
        xS.push(rxS); // append random x location of seconds raindrop to xS array
        yS.push(ryS); // append random y location of seconds raindrop to yS array

        var osizeS = 0; // all raindrops have size of 0 before expanding
        sizeS.push(osizeS); // append size of seconds raindrop to sizeS array


        fill(75, 105, 125, 200);
        noStroke();
        ellipse(xS[i], yS[i], sizeS[i], sizeS[i]);
        sizeS[i] += 1;
        
        // limit size of second raindrop size
        if (sizeS[i] > 40) {
            sizeS[i] = 40;
            fill(164, 194, 205);
            rect(0, 0, width, height);
        }

        // if second() reaches 59 seconds
        if (S % 59 == 0) {
            sizeS = [];
            xS = [];
            yS = [];
            M += 1; 

            // draw minute raindrop
            fill(75, 105, 125, 200);
            ellipse(width/2, height/2, sizeM, sizeM);
            sizeM += 1;

            // limit size of minute raindrop
            if (sizeM > 80) {
                sizeM = 80;
            }

            // if M reaches 59 minutes
            if (M % 59 == 0) {

                // draw hour raindrop
                fill(75, 105, 125, 200);
                ellipse(width/2, height/2, sizeH, sizeH);
                sizeH += 1;

                // limit size of hour raindrop
                if (sizeH > 120) {
                    sizeH = 120;
                }
            }
        }
    }
}

For this project, I tried to imitate raindrops falling into a pond. Every second, a small raindrop falls. And once it is one minute, a bigger raindrop appears. The hour raindrop follows the same idea. This project was the most difficult by far in my opinion, because I had to fully understand arrays to utilize it properly.

Justin Yook – Looking Outwards 06

Isohedral III by Tyler Hobbs is one of his many algorithmic computational art that uses the concept of randomness. In contrast to his other art, I think Isohedral III is most interesting because it is clear on how he uses randomness of shapes, patterns, and colors. For example, one can see how all the shapes such as spirals, circles, and radial lines have repetitions, but when they are put together in random ways, they create random tile shapes throughout. Unfortunately, Hobbs does not share his source code to the public. His artistic sensibilities are shown from his color arrangement; the way the overall color scheme changes from blue, to red, to green is eye popping, and complement each other very well.

Source: http://www.tylerlhobbs.com/

Justin Yook – Project 05 – Wallpaper

wallpaper

//Justin Yook
// Section C
// jyook@andrew.cmu.edu
// Project 05

// bear + flower wallpaper
function setup() {
    createCanvas(600, 600);
    background(135, 206, 250);
    noLoop();
}

function draw() {
    var box = 40; // bear original x position
    var boy = 50; // bear original y position
    var bvs = 55; // bear vertical spacing
    var bhs = 110; // bear horizontal spacing

    //draws bears and oranges  
    for (var y = 0; y < 11; y++) {
        for (var x = 0; x < 10; x++) {
            var bpy = boy + y * bvs; // y position of following bears drawn
            var bpx = box + x * bhs; // x position of following bears drawn 
            var fpx = bpx + bhs + (bhs /2); // x position of fruit for even rows
            var fpy = bpy + bvs; // y position of fruit for even rows

            //draw bears on even rows
            if (y % 2 == 0) {
                //draw bear head
                noStroke();
                fill(255);
                ellipse(bpx, bpy, 60, 60);

                //draw bear ears
                fill(255);
                ellipse(bpx + 14, bpy - 26, 15, 15);
                ellipse(bpx - 14, bpy - 26, 15, 15);

                //draw bear nose
                fill(234, 212, 182);
                ellipse(bpx, bpy, 20, 20);
                fill(0);
                ellipse(bpx, bpy - 8, 6, 6);

                //draw bear eyes
                fill(0);
                ellipse(bpx + 8, bpy - 12, 6, 6);
                ellipse(bpx - 8, bpy - 12, 6, 6);

                //draw mouth
                stroke(0);
                line(bpx, bpy - 8, bpx - 4, bpy);
                line(bpx, bpy - 8, bpx + 4, bpy);

                //draw rosy cheeks
                noStroke();
                fill(255, 192, 203);
                ellipse(bpx - 20, bpy, 15, 15);
                ellipse(bpx + 20, bpy, 15, 15);
            }

            //draw oranges on odd rows
            if (y % 2 != 0) {
                //draw orange body
                fill(255, 192, 79);
                ellipse(bpx - bhs - 60, fpy - bvs, 30, 30);

                //draw orange leaves
                fill(50, 205, 50);
                ellipse(bpx - bhs - 60, fpy - bvs - 10, 8, 8);
            }
        }
    }
}

I wanted to create a friendly and cute wallpaper that gives off a refreshing vibe. The blue background is supposed to be comfortable to the eyes, and the orange complements that color. I can imagine the wallpaper pattern to be on stationery products such as tapes, or pencil cases. There is no pen and paper sketch of the design, but my main inspiration was a bear character called Rice from StickyRiceCompany, a handmade-sticker shop; I tried to re-create the character as accurately as possible.

Store Link: https://www.etsy.com/shop/StickyRiceCompany?ref=search_shop_redirect

Justin Yook – Looking Outwards 05

“Transformers: Age of Extinction” is the 4th movie in the live-action “Transformers” films, directed by Michael Bay. “Transformers” films are known for their extensive use of 3D computer graphics, or CGI, but from what I have observed, the 4th movie has the most impressive computer graphics. All of the robots have intricate parts, and unique transformation sequences. For example, one of my favorite characters is Grimlock, a robot that can turn into a giant T-rex. The softwares that were most likely used to create the 3D models and their animations were Autodesk’s Maya or 3DS Max. I think that the creator’s artistic sensibilities can be seen from each robot’s design; the characters’ robot and transformed forms complement one another very well.

Justin Yook – Project 04 – String Art

stringArt

//Justin Yook
//Section C
//jyook@andrew.cmu.edu
//Project 04


var x1 = 0; 
var y1 = 0; 
var x2 = 0; 
var y2 = 300; 

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

function draw() {
    background(0);
    //generate lines on BOTTOM LEFT (1st curve) (green)
    for (var step1 = 0; step1 <= 1; step1 += .02) {
        x2 = lerp(0, 400, step1);
        y1 = lerp(0, 300, step1);
        stroke(124, 252, 0);
        line(x1, y1, x2, y2);
    }
 
    //generate lines on TOP LEFT (2st curve) (green)
    for (var step2 = 0; step2 <= 1; step2 += .02){
        x2 = lerp(0, 400, 1 - step2);
        y1 = lerp(0, 300, step2);
        stroke(124, 252, 0);
        line(x1, y1, x2, height - y2);
    }

    //generate lines on BOTTOM LEFT (3nd curve) (red)
    for (var step3 = 0; step3 <= 1; step3 += .03) {
        x2 = lerp(0, 400, 2 * step3);
        y1 = lerp(0, 300, step3);
        stroke(255, 0, 0);
        line(x1, y1, x2, y2);
    }

    //generate lines on TOP LEFT (4rd curve) (red)
    for (var step4 = 0; step4 <= 1; step4 += .03){
        x2 = lerp(0, 400, 2 * (1 - step4));
        y1 = lerp(0, 300, step4);
        stroke(255, 0, 0);
        line(x1, y1, x2, height - y2);
    }

    //generate lines on BOTTOM LEFT (5th curve) (blue)
    for (var step5 = 0; step5 <= 1; step5 += .04) {
        x2 = lerp(0, 400, 4 * step5);
        y1 = lerp(0, 300, step5);
        stroke(0, 204, 204);
        line(x1, y1, x2, y2);
    }

    //generate lines on TOP LEFT (6th curve) (blue)
    for (var step6 = 0; step6 <= 1; step6 += .04){
        x2 = lerp(0, 400, 4 * (1 - step6));
        y1 = lerp(0, 300, step6);
        stroke(0, 204, 204);
        line(x1, y1, x2, height - y2);
    }
}

For my string art, I wanted to create something asymmetrical because a lot of string art I usually see are not. So I decided to make “layers” of curves from the same sides (bottom left, and top left) and give a different color for each layer. Colors are supposed to represent the basic values of red, green, and blue.

Justin Yook – Looking Outwards 04

Sculptures have distinct shape and distance from each other

Yuri Suzuki Design collaborated with High Atlanta to create the Sonic Playground, an outdoors display of sound-interactive sculptures. There are a total of six steel sculptures, and they manipulate sound depending on where visitors stand, listen, and talk. The calculations for each sculpture’s optimization were done with the softwares: Grasshopper, and Rhinoceros 3D; Grasshopper is a software for writing programs visually, and Rhinoceros 3D is for making 3D models. Combination of both softwares allowed the creators to control sound source, direction of the sound, and reflect sound from various sculpture pieces. The creator’s artistic sense is shown through the distinct shapes of the sculptures, and the bright colors added to them in order to make the sculptures seem more fun. I think that this project is interesting because of how interactive it can be; the idea of allowing people to interact by moving around the sculptures adds a new dimension to sound art.

Source: http://www.creativeapplications.net/sound/sonic-playground-playful-acoustics-by-yuri-suzuki-design/

Justin Yook – Project 03 – Dynamic Drawing

dynamic_drawing

//Justin Yook
//Section C
//jyook@andrew.cmu.edu
//Project 03

var angle = 0; //angle for outer ellipses
var angle2 = 0; // angle for inner ellipses

var elColor = 220; //color value for ellipse
var baColor = 128; //background color value

var osize = 30; //outer ellipse size
var isize = 15; //inner ellipse size

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

function draw() {
    scale(.96);
    background(baColor);

    //draw center outer ellipses in radial pattern
    fill(elColor);
    noStroke();
    push();
    translate(width/2, height/2);
    rotate(radians(angle));
    ellipse(150, 0, osize, osize);
    ellipse(-150, 0, osize, osize);
    ellipse(0, 150, osize, osize);
    ellipse(0, -150, osize, osize);
    ellipse(100, 100, osize, osize);
    ellipse(-100, 100, osize, osize);
    ellipse(-100, -100, osize, osize);
    ellipse(100, -100, osize, osize);
    pop();

    //draw center inner ellipses in radial pattern
    push();
    translate(width/2, height/2);
    rotate(radians(angle2));
    ellipse(70, 0, isize, isize);
    ellipse(-70, 0, isize, isize);
    ellipse(0, 70, isize, isize);
    ellipse(0, -70, isize, isize);
    ellipse(45, 45, isize, isize);
    ellipse(-45, 45, isize, isize);
    ellipse(45, -45, isize, isize);
    ellipse(-45, -45, isize, isize);    
    pop();

    //draw left top corner outer ellipses in radial pattern
    push();
    translate(0, 0);
    rotate(radians(angle));
    ellipse(150, 0, osize, osize);
    ellipse(-150, 0, osize, osize);
    ellipse(0, 150, osize, osize);
    ellipse(0, -150, osize, osize);
    ellipse(100, 100, osize, osize);
    ellipse(-100, 100, osize, osize);
    ellipse(-100, -100, osize, osize);
    ellipse(100, -100, osize, osize);
    pop();

    //draw left bottom corner outer ellipses in radial pattern
    push();
    translate(0, 480);
    rotate(radians(angle));
    ellipse(150, 0, osize, osize);
    ellipse(-150, 0, osize, osize);
    ellipse(0, 150, osize, osize);
    ellipse(0, -150, osize, osize);
    ellipse(100, 100, osize, osize);
    ellipse(-100, 100, osize, osize);
    ellipse(-100, -100, osize, osize);
    ellipse(100, -100, osize, osize);   
    pop();

    //draw right top corner outer ellipses in radial pattern
    push();
    translate(640, 0);
    rotate(radians(angle));
    ellipse(150, 0, osize, osize);
    ellipse(-150, 0, osize, osize);
    ellipse(0, 150, osize, osize);
    ellipse(0, -150, osize, osize);
    ellipse(100, 100, osize, osize);
    ellipse(-100, 100, osize, osize);
    ellipse(-100, -100, osize, osize);
    ellipse(100, -100, osize, osize);  
    pop();

    //draw right bottom corner outer ellipses in raidal pattern
    push();
    translate(640, 480);
    rotate(radians(angle));
    ellipse(150, 0, osize, osize);
    ellipse(-150, 0, osize, osize);
    ellipse(0, 150, osize, osize);
    ellipse(0, -150, osize, osize);
    ellipse(100, 100, osize, osize);
    ellipse(-100, 100, osize, osize);
    ellipse(-100, -100, osize, osize);
    ellipse(100, -100, osize, osize);    
    pop();

    //draw left top corner inner ellipses in radial pattern
    push();
    translate(0, 0);
    rotate(radians(angle2));
    ellipse(70, 0, isize, isize);
    ellipse(-70, 0, isize, isize);
    ellipse(0, 70, isize, isize);
    ellipse(0, -70, isize, isize);
    ellipse(45, 45, isize, isize);
    ellipse(-45, 45, isize, isize);
    ellipse(45, -45, isize, isize);
    ellipse(-45, -45, isize, isize);    
    pop();

    //draw left bottom corner inner ellipses in radial pattern
    push();
    translate(0, 480);
    rotate(radians(angle2));
    ellipse(70, 0, isize, isize);
    ellipse(-70, 0, isize, isize);
    ellipse(0, 70, isize, isize);
    ellipse(0, -70, isize, isize);
    ellipse(45, 45, isize, isize);
    ellipse(-45, 45, isize, isize);
    ellipse(45, -45, isize, isize);
    ellipse(-45, -45, isize, isize);    
    pop();

    //draw right top corner inner ellipses in radial pattern
    push();
    translate(640, 0);
    rotate(radians(angle2));
    ellipse(70, 0, isize, isize);
    ellipse(-70, 0, isize, isize);
    ellipse(0, 70, isize, isize);
    ellipse(0, -70, isize, isize);
    ellipse(45, 45, isize, isize);
    ellipse(-45, 45, isize, isize);
    ellipse(45, -45, isize, isize);
    ellipse(-45, -45, isize, isize);    
    pop();

    //draw right bottom corner inner ellipses in raidal pattern
    push();
    translate(640, 480);
    rotate(radians(angle2));
    ellipse(70, 0, isize, isize);
    ellipse(-70, 0, isize, isize);
    ellipse(0, 70, isize, isize);
    ellipse(0, -70, isize, isize);
    ellipse(45, 45, isize, isize);
    ellipse(-45, 45, isize, isize);
    ellipse(45, -45, isize, isize);
    ellipse(-45, -45, isize, isize);    
    pop();

    //outer and inner ellipses rotate opposite directions, change size, and change to white when mouse is to the right side
    if (mouseX > width/2) {
        angle += 2;
        angle2 -= 6;
        elColor = 255;
        baColor = 0;
        osize += .5;
        isize += .3;
    }

    //limit on max size of outer ellipse when mouse is on right side
    if (osize >= 60) {
        osize = 60;
    }

    //limit on max size of inner ellipse when mouse is on right side
    if (isize >= 35) {
        isize = 35;
    }

    //outer and inner ellipses rotate opposite directions, change size, and change to black when mouse is to the left side 
    if (mouseX < width/2) {
        angle -= 6;
        angle2 += 8;
        elColor = 0;
        baColor = 255;
        osize -= .5;
        isize -= .3;
    }

    //limit on max size of outer ellipse when mouse is on left side
    if (osize <= -60) {
        osize = -60;
    }

    //limit on max size of inner ellipse when mouse is on left side
    if (isize <= -35) {
        isize = -35;
    }
}

The four aspects of this project are: size, angle, velocity, and color. Depending on the location of the mouse (right or left side), four aspects of the ellipses change. I was inspired by Mac laptop screen savers, and thought I would try to make a design that was very dynamic, but made of simple circles.

Justin Yook- Looking Outwards 03

The project “Decorative Elements” by user mrule on Thingiverse is a 3D printed structure that functions as a lamp that diffuses light in the room. The inspiration for this design came from a “back-lit space organism” according to the description. In addition, it seems that the geometry was made in OpenSCAD, a software for creating solid 3D models that can be printed.

I found this project interesting because it showed me how versatile and powerful computational fabrication can be; it allows one to extend their creativity, and express it in a tangible form. For example, when I usually think of lamps, my mind imagines the common lamp shade, but mrule’s creation pushes the limits of that idea to construct a shade out of smaller hexagonal ones. I also think it is nice that creators can share and download the CAD designs.

Decorative Elements: https://www.thingiverse.com/thing:6281