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

Sewon Park – LO – 07

One information visualization project that I found most inspiring was Multiplicity by Moritz Stefaner. His machine learning algorithm conducts a full view of thousands of photos taken of Paris and organizes them through similarity in content and color. Such organization creates a massive mosaic composed of Paris’s favorite tourist spots, unvisited places, and the people of Paris.

I find this project inspiring as it used such advanced technology to really portray the culture of Paris. Through analyzing the myriad of photos taken by locals and tourists, it captures the beauty of the city. The project uses neural networks trained for image classification with t-sne mapping to find the optimal layout of similar images.

-layout configured through t-sne mapping

The artist proclaimed the focus of the project was on the visualization piece and the data-collection mechanics was merely a tool to facilitate the realization.

Sewon Park – LO – 08

The artist that I have selected from the EYEO presentations is Meejin Yoon. As I have several friends that are enrolled in the architecture program, I have developed significant interest in the field of architecture. Yoon’s Korean descent led me to select and view the project, which was both aesthetically mesmerizing and technologically inspiring

Meejin Yoon is currently the dean of architecture at Cornell University and heads the Howeler + Yoon studio, completing architecture projects ranging from from memorials to olympic infrastructures. Yoon studies architecture and likes to incorporate modern technology in her work.

http://www.howeleryoon.com/work/49/circus-conservatory (Link to her studio website)

During her lecture, she gives an effective presentation of her work through discussing why the use of technology was important in her work. She uses reusable energy for the environment and interactive technology to engage the viewers. I admire that she not only uses technology for aesthetics but also for practical purposes.

Meejin Yoon’s lecture at EYEO 2015

Sewon Park PO-06

sketch

//Sewon Park
//sewonp@andrew.cmu.edu
//Section B
//Project-06

function setup() {
    createCanvas(400, 400);
    text("p5.js vers 0.9.0 test.", 10, 15);
    angleMode(DEGREES);
}

function draw() {
background(220);

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

fill(255,255,100);
ellipse(320,320,120,120); //Reference circle around second circle
fill(S*(4.25),S*(4.25),S*1.7); //Second circle changes color to match the reference Circle
ellipse(320,320,S*2,S*2); //Second circle grows to match the reference circle

fill(0,0,255);
ellipse(200,200,120,120); //Reference circle around minute cricle
fill(0,0,M*(4.25)); //Minute circle changes color to match the reference circle
ellipse(200,200,M*2,M*2); //Minute circle grows to match the reference circle

fill(255,0,0);
ellipse(80,80,120,120); //Reference circle around hour circle
fill(H*(4.25),0,0); //Hour circle changes color to match the reference circle on a 24 hour scale
ellipse(80,80,H*5,H*5); //Hour circle grows to match the reference circle on a 24 hour scale

push();
noStroke();
fill(255,255,0);
translate(width/2,height/2);
rotate(S*(6));
rotate(-90);
ellipse(85, 0, 50, 50);
pop(); //Yellow circle rotating to match second
    
push();
noStroke();
fill(0, 0, 255)
translate(width/2,height/2);
rotate(M*(6));
rotate(-90);
ellipse(80, 0, 40, 40);
pop(); //Blue Circle rotating to match minute
    
push();
noStroke();
fill(255, 0, 0);
translate(width/2,height/2);
rotate(H*(15)); //on a 24 hour scale
rotate(-90);
ellipse(75, 0, 30, 30);
pop(); //red circle rotating to match hour
   

}

For the abstract clock assignment, I wanted to show how as time passes, your day becomes “full”. As such I put base ellipses that represent the entirety of time (by seconds, minutes, and hours). As such, I used 24 hours as increments as 24 hours represents the entire day. Then, I put ellipses that grow and changes color as time passes to eventually become the base circles. I also created ellipses that spun just as the clock would.

Sewon Park – LO – 06

Abstract Art drawn by the Random Number Generator designed and created by Larry Cotton (2017)

One interesting piece of art that utilized randomness is the RNG abstract art by Larry Cotton. Designing an algorithm that creates random art can be rather difficult to create. Although using random digits to dictate aspects of art such as size or color may not be too difficult using programs such as p5.js, Cotton has designed a machine that uses such algorithm to directly paint on the painting.

The machine is linked directly to the t-shaped glass panel that controls the stroke of the pen

The machine is linked directly to a computer where Cotton programs it to use random numbers to dictate color and pen stroke. In order to put some structure to the randomness, the user can dictate a certain range for the variables. As a Carnegie Mellon student, obviously I have heavy interest in engineering and other STEM subjects. As such, seeing an effective use of machinery to create abstract art was very inspiring.

Draw Abstract Art with a Random Number Generator

Sewon Park – PO – 05

sketch

function setup() {
    createCanvas(600, 400);
    background(255,250,205);
}

function draw() {

    for (var x=10; x<600; x=x+20) {
        for(var y=10; y<400; y= y+20) {
        stroke(135,206,235);
        fill(135,206,235);
        rect(x,y,1,10); //rain on background
        
        } 
    }
    //small white rectangles 
      
    for (var a=30; a<600; a=a+80) {
        for(var b=30; b<400; b=b+160) {
        stroke(0,0,0);
        
        fill(255,255,255);
        triangle(a-10,b-5,a-10,b-20,a,b-10); //Totoro's left ear
        triangle(a,b-10,a+10,b-20,a+10,b-5); //Totoro's right ear
        
       
        ellipse(a,b,20,30); //Totoro's body
        
        fill(0,0,0);
        ellipse(a-4,b-4,3,4); //Totoro's left eye
        ellipse(a+4,b-4,3,4); //Totoro's right eye
    	}
    }

    for (var c=70; c<600; c=c+80) {
    	for(var d=110; d<400; d=d+160) {

    	fill(0,0,0);
        arc(c,d,30,30,PI,0);
        rect(c-1.5,d,3,20);
        
        } //Umbrella
    }

    
    }

For this project, I used the classic toddler wallpaper color of baby yellow and added rain as a special touch. I used the baby white Totoro and umbrellas (a recurring symbol of Totoro) as the recurring pattern of the wallpaper.

Sewon Park – LO – 5

Image result for typography portrait christopher haines — -A less typical Typography Portrait by Cristopher Haines used as cover of Computer Arts Magazine #111

One project produced through the use of computer graphics are the series of typography produced by Cristopher Haines. Although there are some significantly less complicated versions of such work, Haines utilizes his background in photography and digital art to create a more advanced form of portraits drawn through words. Through this work, Haines demonstrates mastery over Master Adobe Illustrator and a unique sense of style.

Typography portraits are interesting in that it can utilize words to deliver meaning. As such they are sometimes used in political campaigns. However, Haines attempts to show the convoluted nature of a human mind with a disorganized array of letters that combine together to create a disturbing face that eerily represents a woman’s. Such style puts his project at a completely new dimension from the simple works of typography portrait into a new realm of art.

Sewon Park – PO – 04

sketch

// Sewon Park
// sewonp@andrew.cmu.edu
// Section B
// sewonp-po-04

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

function draw() {
    background(200)
     
      for (var a = 0; a <= 100; a+=5) {
        stroke(255, 255, 255);
        line(a,0,0,height); // White Lines from bottom left corner
        line(0,a,400,0); // White Lines from top right corner
      }


      for (var b = 300; b <= 400; b+=5) {
        stroke(255,255,255);
        line(b,300,400,0); // Black Lines from top right corner
      }
 
      for (var c = 200; c <= 300; c +=5) {
        stroke(255,255,255);
        line(400,c,0,300); // Black Lines from bottom left corner
      }

      for (var d = 0; d <= 400; d+=5) {
        stroke(255,0,0);
        line(0, height-d, d, 0); //top left
        line(d,300,400,height - d/1.7); //bottom right
        line(0, d*0.75, d, 300); //bottom left
        line(d, 0, 400, d*0.75); //top right
        //Curves in the four corners

        stroke (0,0,0);
        line(0,d,400,height-d); 
        line(d,300,width-d,0); //Red Lines meeting at center
      }  

      
      }

For the string art project, I tried to recreate the Sharingan (a special type of eye-technique) in an abstract fashion. The original Sharingan also possesses the three colors of black, red, and white.

Sewon Park – LO-04

Image result for nocturne samson young — Samson Young getting ready for his performance of “Nocturne”

A piece of sound art that has inspired me is Samson Young’s “Nocturne”. I believe that the most important value of art is the message that it conveys to its audience. Nocturne is a groundbreaking project that incorporates both sound and visual effects to recreate the many aspects of the U.S bombings of the Middle East.

The visual component of the project includes a 6 hour film created through piecing together difference clips from news, radio, and youtube videos. The film is mute and the sounds are replaced by the array of household objects that Young brings in. He conducts research to find sounds that most accurately represents the original sound from the video and makes the coordination between the sounds and the film flawless through digital/manual coordination. His artistic sensibility is evident by the resemblance of the sounds produced by household objects to the one of the battlefields.

Young also draws his methods from the historical tactics of Ghost Army, who used their own tactics for deception during war. They recorded combat sounds and employed fake radio transmissions to confuse enemies. Young used similar algorithms to coordinate the sounds to the film.

A short film of “Nocturne” performed to give an idea of the coordination between visual and sound effects of the project.

Sewon Park – PO – 03

sketch

//Sewon Park
//sewonp@andrew.cmu.edu
//Section B
//Project-03



var angle = 10 // used for rotation of squares later
function setup () {
createCanvas(640,480)

}

function draw () {
background(dist(320,240,mouseX,mouseY)); //background color dependent on mouse location from center



//Ellipse that moves with center at mouse location (Main Ellipse)
fill(mouseX,0,mouseY); // color dependent on mouse movement
stroke(0);
ellipse(mouseX,mouseY,mouseX/2,mouseY/2) // position and size dependent on mouse movement

 //Ellipse2 moves diagnally from main ellipse with mouse movement away from center. 
var x = width - mouseX
var y = height - mouseY 
fill(mouseX,0,mouseY) // color dependent on mouse movement
stroke(0);
ellipse(x,y,mouseX/2,mouseY/2)
x = x - 3
y = y - 3  

//Ellipse3 moves vertically from main ellipse from mouse movement away from center.
var x2 = 0 + mouseX
var y2 = height - mouseY
fill(0,mouseX,0) // color dependent on mouse movement
stroke(0);
ellipse(x2,y2,mouseX/2,mouseY/2)
x2 = x2 - 3
y2 = y2 + 3

//Ellipse4 moves horizontally from main ellipse from mouse movement away from center.
var x3 = width - mouseX
var y3 = 0 + mouseY
fill(0,mouseX,0) // color dependent on mouse movement
stroke(0);
ellipse(x3,y3,mouseX/2,mouseY/2)
x3 = x3 - 3
y3 = y3 + 3

//Square1 spins with its corner respect to main ellipse's center
fill(0,mouseY,mouseX); //color dependent on mouse movement
stroke(0);
push();
translate(mouseX, mouseY);
rotate(angle);
rectMode(CORNER); 
rect(0, 0, 50, 50);
pop();
angle = (angle+dist(320,240,mouseX,mouseY))*0.5; // rotation speed dependent on mouse movement

//Square2 spins with its corner respect to ellipse 2's center
fill(0,mouseY,mouseX);  //color dependent on mouse movement
stroke(0);
push();
translate(x, y);
rotate(angle);
rectMode(CORNER); 
rect(0, 0, 50, 50);
pop();
angle = (angle+dist(320,240,mouseX,mouseY))*0.5; // rotation speed dependent on mouse movement

//Square3 spins with its corner respect to ellipse 3's center
fill(0,mouseY,mouseX);  //color dependent on mouse movement
stroke(0);
push();
translate(x2, y2);
rotate(angle);
rectMode(CORNER); 
rect(0, 0, 50, 50);
pop();
angle = (angle+dist(320,240,mouseX,mouseY))*0.5; // rotation speed dependent on mouse movement

//Square4 spins with its corner respect to ellipse 4's center
fill(0,mouseY,mouseX);  //color dependent on mouse movement
stroke(0);
push();
translate(x3, y3);
rotate(angle);
rectMode(CORNER); 
rect(0, 0, 50, 50);
pop();
angle = (angle+dist(320,240,mouseX,mouseY))*0.5; // rotation speed dependent on mouse movement

}

This project was probably the toughest yet as coordinating movements to your mouse movements is no easy task. I tried to incorporate two different types of movements through altering position and rotation in respect to change in cursor position.

Sewon Park LO-03

A demonstration of the framework used to analyze the structure of a bird’s beak.

A computational fabrication project that I found to be inspiring is the Narrow-Band Topology Optimization by Haixiang Liu, Yuanming Hu, Bo Zhu, Wojciech Matusik, and Eftychios Sifakis. As structures found in nature are often unique in shape and feature, it is difficult to analyze and recreate such structures with the existing computational approach. As such, the team created a highly efficient framework.

Although the exact algorithm used to devise the framework is highly complicated, the general idea was to track the evolution of such structures in a in a narrow-region grid with high density so no effort is wasted on large void areas.

This project is captivating as it uses pre-existing structure in nature to enhance existing structural components. Such components can be used in a variety of fields including architecture and product design. Because structured naturally developed by the Earth’s atmosphere is high in both practicality and beauty, the new framework will be valuable for the path of futuristic design. The few given examples demonstrates the engineer’s sense for incorporating the beauty of nature to everyday products.

Introductory Video of practical applications of the framework.