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

Stefanie Suk – Looking Outwards – 07

Installation of Unnumbered Sparks in Vancouver, Canada

Unnumbered Sparks, a work by Aaron Koblin and Janet Echelman, is a monumental interactive sculpture installed in the sky. This sculpture is a crowd-controlled visual artwork on a large canvas, where the color and design on the sculpture is choreographed by visitors at the moment through their mobile device. The visitors were able to use their smartphones and tablets to paint colors of light across the installation. Every small movement of the electronic devices projected vivid beans of light across the sculpture. What I admire the most about this artwork is the scale and complexity achieved in a single piece of installation. The computational software used in this sculpture explores scale, density, shape, and interaction with people, which I thought was the most fascinating about this project. Thus, the material used in this installation also caught my attention. The whole sculpture is made out of soft fibers attached directly into existing buildings. This exploration of material and application of interaction technology, I thought, really showed how much the artists wanted people to feel projected/connected to their artwork. This sculpture was definitely successful in using computation technology to create interaction between artwork and the visitors.

Video of Unnumbered Sparks in Vancouver, Canada

Stefanie Suk – Project 06 – Abstract -Clock

sketch

//Stefanie Suk
//15-104 D
//ssuk@andrew.cmu.edu
//Project - 06 - Abstract Clock

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

function draw() {
    background(5, 0, 50); //background color

    fill(50); //color of buildings
    noStroke();
    rect(10, 350, 120, 150);
    rect(30, 280, 30, 150);
    rect(80, 260, 60, 220);
    rect(80, 240, 20, 20);
    rect(360, 380, 110, 130);
    rect(385, 300, 60, 220);
    rect(405, 220, 20, 220); // buildings in background

    fill(238, 232, 37);
    ellipse(400, 60, 70, 70); //moon

    fill(218, 214, 85);
    ellipse(300, 50, 5, 5);
    ellipse(270, 74, 5, 5);
    ellipse(130, 50, 5, 5);
    ellipse(20, 80, 5, 5);
    ellipse(360, 100, 5, 5);
    ellipse(70, 160, 5, 5);
    ellipse(230, 140, 5, 5);
    ellipse(443, 170, 5, 5); //stars 


    var H = hour();
    var M = minute();
    var S = second();

    var buildingH = map(H, 23, 0, 280, 0);
    var buildingM = map(M, 59, 0, 280, 0);
    var buildingS = map(S, 59, 0, 280, 0);
    var change = 150/3;

    fill(230);
    rect(155, 200, change, buildingH);
    fill(230);
    rect(175+change, 200, change, buildingM);
    fill(250);
    rect(195+2*change, 200, change, buildingS); //ticking building that represents time, referenced code given in the instructions 

}

I thought a lot about how I can represent time without making the clock too literal. I personally think the hardest part about this project was to think of how I can represent my clock than actually creating it. As I was thinking about what to create late at night, I looked outside the window and saw buildings across from my dorm. This struck me hard as I realized how much time I spend working at night. Every time I work at night, I tend to look outside the window once in awhile because I get tired as time passes by. I feel like I’m more aware of ‘time’ during the night than the day, which is why I decided to create a visual of a night cityscape I see outside the window and use the tall buildings as an indicator of time (building is forming as time goes).

Stefanie Suk – Looking Outwards – 06

Natalie Stopka is an artist who focuses on the creative process from the materials and forces of the natural world. One of the art techniques she likes to use in her work is marbling, which is a method of creating “random” pattern designs using color and water. This method is the result of floating color onto the surface of the water, then transferring the pattern to an absorbent surface, like paper or fabric. Marbling is a perfect definition of randomness because the artist never has full control over the design. Although the artist may be able to create designs using a sharp utensil to form patterns on the color, every single drop of color the artist puts on the water spreads differently throughout the surface. The direction, size, and color changes every time the color is dropped onto the surface of the water, and I think this marbling method effectively uses randomness to create unique patterns. Natalie Stopka’s marbling artwork shows a perfect example of the use of random movements from the natural force of color.

Video of Marbling Method

Stefanie Suk – Project 05 – Wallpaper

sketch

//Stefanie Suk
//15-104 D
//ssuk@andrew.cmu.edu
//Project 05 - Wallpaper

var spacing = 25;

function setup() {
    createCanvas (500, 500);
    background(222, 211, 170);
}

function draw() {
    noStroke();

    for(var a = 25; a < width; a += 50) {
        for(var b = 15; b < width; b += 100) {
            tri(a, b);
        }
    }

    for(var e = 25; e < width; e += 90) {
        for(var f = 45; f < height; f += 140) {
            dia(e, f);
        }
    }

    for(var g = 57; g < width; g += 95) {
        for(var h = 60; h < height; h += 120) {
            cir(g, h);
        }
    }


    for (var y = 0; y < height; y++) {
        if(y % 2 == 0){
            for (var x = 0; x < width; x++) {
                fill(120, 107, 37);
                ellipse(spacing * x, spacing * y + 25, 4, 4);
            }
        }
        noLoop();
    }


 //   for(var j = 60; j < width; j += 80) {
 //       for(var k = 70; k < height; k += 110) {
 //           rec(j, k);
 //       }
 //   }

//    for(var c = 25; c < width; c += 50) {
//        for(var d = 15; d < width; d += 100) {
//            tritwo(c, d);
//        }
//    }



}

function tri(a, b) {
    fill(252, 103, 103);
    triangle(a - 20, b + 10, a, b + 40, a + 20, b + 10);
}

function dia(e, f) {
    fill(97, 223, 213);
    circle(e, f, 20, 20);
}

function cir(g, h) {
    fill(254, 123, 250);
    ellipse(g, h, 10, 25);
}

//function rec(j, k); {
//    fill(225, 199, 57);
//   rect(j, k, 10, 10);
//}

//function tritwo(c, d) {
//    fill(252, 103, 103);
//    triange(c - 20, d + 35, c, d - 40, c + 20, d + 45);
//}

For this project, I was inspired by ethical patterns I have in my handkerchief. This handkerchief consists of simple shapes like circles and triangles, but are organized in a beautiful pattern. This is why I used different triangles and circles in my wallpaper, layout them in a simple yet artistic pattern. I also explored different bright neon colors to each shape to make the design pop and lively. I really like the colors I used for this project because the background color and the shape colors really go well together.

Stefanie Suk – Looking Outwards – 05

Red Shoes is a Korean animation movie that was released in July 25, 2019. This movie is so far titled as the most quality animation ever made in Korea, and the reason behind this is from the movie’s character designer, Sangjin Kim. Sangjin Kim worked in Disney the past few years and was once responsible for designing characters in the world’s most representative animation, Frozen. For this reason, we can clearly see Kim’s artistic sensibilities in the movie, in other words, we can see how similar the characters of Red Shoes and Frozen look alike. Not only that, but there were people in the production crew who worked for DreamWorks as well, making people proudly announce the animation to be made by the most skilled, influential people in Korean animation history. As a Korean and as a design major student, I admire this work so much because of its quality 3d computer graphic techniques applied to the movie. In the actual movie, audiences are able to see many detailed computer graphics applied. Also, the characters of the movie themselves are designed exquisitely that the 3d computer graphics in the movie are nearly flawless. According to Sangjin Kim, his dream was to collaborate with Korean animators as a Korean himself. He wanted to create a major work in Korean animation industry and show people that Korea can also create quality 3d animations as well. I can really see how much time and work he has spent to create this animation just by watching the movie from the beginning to the end, which makes me admire this work even more.

Drawing Video of the Red Shoes

Stefanie Suk – Project 04 – String Art

sketch

//Stefanie Suk
//15-104 D
//ssuk@andrew.cmu.edu
//Project-04: String Art

var x = 75
var y = 500

function setup() {
    createCanvas(640, 480);
    background(171, 186, 255);
}

function draw() {
    stroke(255);
//    for (var i = 10; i <= 640; i += 15) 
//        line(width/2, 0, i, y)
    for (var i = 10; i <= 640; i += 30)
        line(width - i, 0, 0, height)
    for (var i = 10; i <= 640; i += 30)
        line(0, height, 640, i)
    stroke(150);
    for (var i = 10; i <= 640; i += 15)
        line(width/2, i, width/2 + i, height)
    for (var i = 10; i <= 640; i += 15)
        line(width/2, i, width/2 - i, height)
    for (var i = 0; i <= 300; i += 10)
        line(width - i, 0, 0, i)
    for (var i = 0; i <= 300; i += 10)
        line(i, height, width, height - i)
    stroke(10);
    for (var i = 10; i <= 640; i += 70)
        line(0, height/2, 640, i)
    for (var i = 10; i <= 640; i += 70)
        line(640, height/2, 0, i)

}

For this project, I tried to incorporate different possible string arts I can create into one single piece of work. By adding straight, curved, twisted lines, I explored the varieties of lines in string art and tried to create unity with the different lines.

Stefanie Suk – Looking Outwards – 04

CarbonScape, a kinetic data sound installation that incorporates both traditional and futuristic concepts of technology, is a work by a Chinese artist Chris Cheung. This work consists of 18 different tracks of synthesized sound samples that visualizes the carbon dioxide levels from data received by NOAA (National Oceanic and Atmospheric Administration). Inspired by the artist’s natural environment, the installation is designed like a series of bamboo forest with black spheres inside representing the carbon dioxide levels in the atmosphere. This black sphere changes its position from top to bottom (to show the changes in carbon dioxide levels) as the sounds are emitted under the bamboo-like tube. I am deeply admired by this installation because of the combination of man-made object (sphere & tube) and natural energy (sound) to create a single piece of art that represents our world’s natural disaster. I know that the data from the NOAA that is computed to automatically send its information to the installation generated this artwork. I can see from the installation that the artist pursues minimalistic design, which also attracted me because the simple black and white structure made the installation easy to see/read and also made it visually appealing.

Demonstration Video of CarbonScape

Stefanie Suk – Looking Outwards – 03

Image of 3D Printed Shoe from Adidas and Carbon

Adidas has been exploring the application of 3D printing to sneakers in the past few years. It was not that long ago when Adidas was able to release their innovative 3D printed shoe, which was created with a Silicon Valley startup company called Carbon. The 3D printing method they use to manufacture is told to be printed with zero support material, in other words, the company is not only able to reduce complex traditional manufacturing processes but they can reduce raw material costs as well. This printing method, which Carbon calls the Digital Light Synthesis (DLS) technology, is applied to producing Adidas’s 3D printed shoes. What I admire about this production is how effective 3D printings are to create Adidas runner shoes all economically, environmentally, and visually. The open and dense lattice structure of the shoe’s cushion not only gives aesthetic patterns but it also offers a perfect lockdown fit to the feet and stable cushioning to the shoe. Thus, the lattice also shows the creator’s artistic sensibilities to create the most suitable structure for the shoes. The fact that Carbon and Adidas was able to come up with a 3D printed shoe using the perfect material and structure shows how much they have been studying the 3D printing technology, and shows how successful they were with their final product. This success really made me admire the AdidasXCarbon collaboration for 3D printed shoes.

3D Printed Shoes (Futurecraft 4D) in Collaboration with Carbon and Adidas

Stefanie Suk – Project 03 – Dynamic Drawing

sketch

//Stefanie Suk
//15-104 D
//ssuk@andrew.cmu.edu
//Dynamic Drawing

var a = 251; //background color
var b = 224; //background color
var c = 233; //background color
var angle = 0;

function setup() {
    createCanvas(640, 480);
}
function draw() {
    a, b, c = mouseX/4; 
    // background color change when mouse is moved 
    background(a, b, c);
    noStroke();
    push();
    translate(mouseY + 75, width/2)
    rotate(radians(angle));
    ellipseMode(CENTER);
    fill(130, 175, 255);
    stroke(217, 255, 147);
    strokeWeight(20);
    ellipse(0, 0, 200, 500);
    pop();
    angle = angle + 5
    // rotating oval position change; left when mouse moves up right whien mouse moves down
    let circlex = width - mouseX;
    let circley = height - mouseY;
    fill(230, 111, 183);
    ellipse(circlex, height/2, circley, circley); 
    // pink circle size and position change; left when mouse moves right, right when mouse moves left, big when mouse moves up, small when mouse moves down
    let cirx = height - mouseY;
    let ciry = width - mouseX;
    fill(185, 111, 230);
    ellipse(mouseX, height/2, mouseY, mouseY); 
    // purple circle size and position change; moves along the mouse, big when mouse moves down, small when mouse moves up
    fill(111, 208, 230);
    ellipse(cirx, height/2, ciry, ciry); 
    // blue circle size and position change; left when mouse moves down, right when mouse moves up, big when mouse moves left, small when mouse moves right 
    translate (mouseX + 10, height/2);
    ellipseMode(CENTER);
    fill(255, 147, 147);
    stroke(213, 68, 98);
    strokeWeight(15);
    ellipse(mouseX - 150, mouseY - 200, mouseX/2, mouseY/2); 
    // pink orange oval shape position change; long when mouse moves down and left, wide when mouse moves up and right,
}

For this project, I studied the various possibilities in the change of the shape, ellipse. Ellipse is one of my favorite shape to study because although it is a simple, single lined structure, there are so many varieties of different ellipse we can create. I tried to incorporate as many different aspects of image elements possible, like the changes in sizes, angles, colors, and position as I move the cursor around different places within the canvas.

Stefanie Suk – Project-02 – Variable Faces

For this project, I tried to create as many aspects of variability as possible, including size, color, and position. I also used variables that are necessary to create and change the face every time I click onto the screen.

sketch

//Stefanie Suk
//15-104 D
//ssuk@andrew.cmu.edu
//Project 02

var faceW = 323;
var faceH = 257;
var noseW = 62;
var noseH = 39;
var nostrilW = 9;
var nostrilH = 16;
var backgroundR = 189;
var backgroundG = 140;
var backgroundB = 191;
var facecolorR = 250;
var facecolorG = 201;
var facecolorB = 222;
var ribboncolorR = 221;
var ribboncolorG = 66;
var ribboncolorB = 134;
var nosecolorR = 239;
var nosecolorG = 128;
var nosecolorB = 177;
var eyecolor = 46;
var eyesizeW = 22
var eyesizeH = 22
var mouthline = 292

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

function draw() {
    background(backgroundR, backgroundG, backgroundB);
    noStroke();
    fill(facecolorR, facecolorG, facecolorB);
    ellipse(319.5, 232.5, faceW, faceH);
    //face
    noStroke();
    fill(eyecolor)
    ellipse(259, 233, eyesizeW, eyesizeH);
    //lefteye
    noStroke();
    fill(eyecolor);
    ellipse(379, 233, eyesizeW, eyesizeH);
    //righteye
    noStroke();
    fill(facecolorR, facecolorG, facecolorB);
    triangle(175.5, 176.1, 191.5, 102.9, 263.7, 118.9);
    //leftear
    noStroke();
    fill(facecolorR, facecolorG, facecolorB);
    triangle(466.5, 191, 466.5, 118, 393, 118);
    //rightear
    noStroke();
    fill(nosecolorR, nosecolorG, nosecolorB);
    ellipse(320, 259.5, noseW, noseH);
    //nose
    noStroke();
    fill(0);
    ellipse(305.5, 259, nostrilW, nostrilH);
    //leftnostril
    noStroke();
    fill(0);
    ellipse(333.5, 259, nostrilW, nostrilH);
    //rightnostril
    noStroke();
    fill(ribboncolorR, ribboncolorG, ribboncolorB);
    triangle(275, 185, 275, 125, 320, 155);
    //ribbonleft
    noStroke();
    fill(ribboncolorR, ribboncolorG, ribboncolorB);
    triangle(320, 155, 365, 185, 365, 125);
    //ribbonright
    noStroke();
    fill(ribboncolorR, ribboncolorG, ribboncolorB);
    ellipse(320, 155.5, 19, 19);
    //ribboncenter
    stroke(0);
    strokeWeight(10);
    line(304, mouthline, 320, 309);
    stroke(0);
    line(336, mouthline, 320, 309);
    //mouth
}

function mousePressed() {
    mouthline = random(292, 323);
    eyesizeW = random(22, 60);
    eyesizeH = random(22, 44);
    backgroundR = random(131, 242);
    backgroundG = random(140, 174);
    backgroundB = random(133, 202);
    facecolorR = random(201, 250);
    facecolorG = random(201, 219);
    facecolorB = random(201, 250);
    nosecolorR = random(76, 239);
    nosecolorG = random(114, 143);
    nosecolorB = random(87, 253);
}