Kimberlyn – Page 2 – [OLD FALL 2019] 15-104 • Introduction to Computing for Creative Practice

Kimberlyn Cho- Looking Outwards 07

Virality by Rachel Binx visualizes the spread of facebook stories by analyzing the origin of the story to its various branchings. Her team focused on the three most shared images on facebook (all from George Takei’s page) and tried to emulate the energy of these images using WebGL.

With the help of Zach Watson, Binx uses WebGL as a framework for her project to produce the visualization as well as iterate on various animation styles. WebGL, short for Web Graphics Library, is a JavaScript interface for rendering interactive graphics on a web browser. It uses a 3d project exported from various 3d softwares such as Blender or Autodesk Maya to produce an interactive visualization accessible from most, if not all, browsers. The software allows Binx to experiment with different rendering options such as the color, opacity, degree, density of the branches

The animated data visualization starts from the origin of the viral facebook images and analyzes its various branches, with each re-share of the image becoming its own branch. Some re-shares show a burst of energy with the re-share almost becoming its own viral element, while others create new branches in the visual form of arcs of various angles.

I found this work to be interesting in its relevance to modern day social media tactics and its resourcefulness. Social media can be considered one of the most efficient ways to spread information to various groups of people today. Many businesses and corporations take advantage of the excessive use of social media to exploit users as well as spread data or any other types of information. To be able to track the pathway of a viral image on facebook can indicate useful advertising tactics, as well as interesting feedback and conclusions for not only companies, but also for the average social media user.

virality

Kimberlyn Cho- Project 06- Abstract Clock

ycho2-06

/* Kimberlyn Cho
Section C
ycho2@andrew.cmu.edu
Project-06 */

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

function draw() {
	noStroke();
	var h = hour();
	var m = minute();
	var s = second();

	var hr = h % 12
	var sec = map(s, 0, 59, 0, width);

	background(hr + hr * 20);

	//cloud
	fill(230);
	ellipse(sec, 45, 70, 55);
	ellipse(sec + 35, 50, 70, 55);
	ellipse(sec + 65, 45, 60, 45);
	ellipse(sec + 25, 25, 50, 35);
	ellipse(sec + 52, 25, 50, 35);	

	//buildings
	fill(0);
	rect(0, 100, 60, 300);
	rect(65, 150, 45, 250);
	rect(110, 75, 75, 325);
	rect(185, 110, 50, 300);
	rect(235, 200, 35, 100);
	rect(275, 50, 80, 250);
	rect(355, 125, 40, 175);
	rect(400, 80, 80, 220);

	//window1
	var a = 115
	for (var y = 0; y < 8; y++) {
		var wa = a + y * 25
		fill(255);
		rect(15, wa, 10, 10);
		rect(35, wa, 10, 10);
	};

	//window2
	var bx = 122
	var by = 85
	var count = 0
	for (var y = 0; y < 8; y++) {
		for (var x = 0; x < 3; x++) {
			var wbx = bx + x * 20
			var wby = by + y * 28

			if (count == m & count < 24) {
			fill(255, 255, 0);
			rect(wbx, wby, 10, 10);

		    } else {
		    	fill(100);
		    	rect(wbx, wby, 10, 10);
		    }
		    count += 1
		};
	};

	//window3
	var c = 120
	for (var y = 0; y < 12; y++) {
		var wc = c + y * 15
		fill(230);
		rect(192, wc, 30, 5);
	};

	//window4
	var d = 65
	for (var y = 0; y < 7; y++) {
		var wd = d + y * 35
		fill(255);
		rect(290, wd, 10, 20);
		rect(310, wd, 10, 20);
		rect(330, wd, 10, 20);
	};

	//window5
	var ex = 412
	var ey = 90
	for (var y = 0; y < 9; y++) {
		for (var x = 0; x < 4; x++) {
			var wex = ex + x * 15
			var wey = ey + y * 24

			if (count == m & count > 23) {
			fill(255, 255, 0);
			rect(wex, wey, 10, 10);

		    } else {
		    	fill(100);
		    	rect(wex, wey, 10, 10);
		    }
		    count += 1
		};
	};	
};

I was inspired by the night view of my home, NYC. The lights in some of the buildings light up according to the minutes to represent how the city is never really dead. The clouds move by the second and the background color changes a different shade of gray based on the hour. I went through different iterations in the input parameters for the time through my sketches.

Kimberlyn Cho – Looking Outwards 06

The “Random Number Multiple” series by Marius Watz and Jer Thorp attempt to encourage artists to use old school fine art strategies to hand print their computational (any computer or software-based) art. As part of the “Random Numbers” exhibit in NYC, the series takes part in a platform curated by Christina Vassallo for artists to experiment with new techniques or mediums.

Marius Watz’s “Arc” series uses a somewhat random composition of radial shapes that are distorted by a 3d surface to imitate a sense of movement while maintaining a focal point. Jer Thorp took a more systematic approach than Watz by using the newspaper as his reference. He tracked the frequency of specific words in the New York Times in a twenty-year time period, which he then graphed using a randomized group of colors based on the theme of the artwork.

I found the combinative nature of the design process of these artworks to be most interesting. Most artists seem to go about one specific way of producing their art, whether it be by hand or with a certain software. I found it innovative how Watz and Thorp use a software to produce the computational image they want and then incorporate a factor of randomness with either the colors or array of the shapes to portray the work with traditional techniques. The timeless incorporation of a variety of strategies leaves room for results that might’ve not been expected or accidental new elements to the creation that creates work that the artist can then learn from.

Kimberlyn Cho – Project 05 – Wallpaper

ycho2-05

/* Kimberlyn Cho
Section C
ycho2@andrew.cmu.edu
Project 5 */

function setup() {
    createCanvas(500, 400);
    background(255);
    noLoop();
}

function draw() {
    var ex = 50 // x position of first pupil
    var ey = 40 // y position of first pupil
    var ew = 15 // size of pupil

    for (var y = 0; y < 8; y++) {
        for (var x = 0; x < 6; x++) {
            var eyex = ex + x * 80 // x position of arrayed pupils
            var eyey = ey + y * 45 // y position of arrayed pupils

            //eyeballs
            fill(0, x * 50 + 50, y * 30 + 100);
            strokeWeight(0);
            ellipse(eyex, eyey, ew * 2, ew * 2);

            //pupils
            fill(0);
            ellipse(eyex, eyey, ew, ew);

            //reflection on pupils
            fill(255);
            ellipse(eyex + 3, eyey - 3, ew / 2, ew / 2);
            
            //eye
            noFill();
            stroke(0, x * 30 + 50, y * 50 + 100);
            strokeWeight(3);
            arc(eyex, eyey + 22, ew * 5, ew * 5, PI + QUARTER_PI, -QUARTER_PI, OPEN);
            arc(eyex, eyey - 22, ew * 5, ew * 5, QUARTER_PI, PI - QUARTER_PI, OPEN);
        };
    };
};

I was inspired by the static yet varied nature of human eyes for this project. While every eye in the pattern has the same elements (pupil, reflection, etc.), each eye has its own combination of colors that make it unique, as do humans.

Kimberlyn Cho- Looking Outwards 05

Koola, a computer graphics artist, uses a video game development tool called Unreal Engine 4 to create incredibly realistic scenery renderings. The youtuber is known for his/her attention to environmental details and the effects on the 3D attributes of the landscapes. Koola doesnt limit him/herself to any specific season or environment. From underwater structures to science fiction depictions, the renderings all depict a high level of reality.

I was initially intrigued by the shocking resemblance to reality. As the article is literally titled “This Isn’t Real Beach”, I clicked on it to see just how realistic the beach looked. Renderings are an important tool for artists to depict the physical realities of their design. Architects for example, use rendering tools to portray how their design would look in reality in context to the site and human interaction when proposing an idea. I appreciate the attention to detail as well as both the realistic and creative aspects of Koola’s renderings.

This Isnt a Real Beach

Kimberlyn Cho- Project 04

string

/* Kimberlyn Cho
Section C
ycho2@andrew.cmu.edu
Project 4 */

//all comments in context of left to right

function setup () {
	createCanvas(400, 300);
	background(255);
	strokeWeight(0.03);
}

function draw () {
	for (var i = 0; i < 30; i++) {
		var a = i * 5
		var b = i * 7
		b = constrain(b, 0, width / 2);

		//bottomleft fold
		stroke(0);
		line(0, b + height / 2, b, height);

		//middle gray fold 
		stroke(105);
		line(0, a, b, height / 2);
		stroke(0);
		line(b, height / 2, width / 2, height / 2 + b);
		stroke(105);
		line(width / 2, height / 2 + a, b + width / 2, height);

		//middle red fold
		stroke(160,0,0);
		line(0, a / 2, b / 2, height / 4);
		stroke(72,0,0);
		line(a - width / 9, height / 4, width / 4, a + height / 4);
		stroke(160,0,0);
		line(width / 4, a + height * 0.26, b + width / 4, height * 0.75);
		stroke(72,0,0);
		line(b + width / 4, height * 0.75, width * 0.75, height * 0.75 + b);
		stroke(160,0,0);
		line(width * 0.75, height * 0.75 + b, width * 0.75 + b, height);

		//outer right
		stroke(0);
		line(width, b * 1.5, b * 2, 0);

		//middletop
		stroke(0, 0, 204);
		line(b, 0, width / 2, b);
		line(b + width / 2, 0, width / 2, height / 2 - b);
		
		//pins
		fill(0);
		ellipse(0, 0, 20, 20)
		ellipse(0, height / 4, 10, 10)
		ellipse(width / 4, height / 4, 10, 10)
		ellipse(width / 4, height * 0.75, 10, 10)
		ellipse(width * 0.75, height * 0.75, 10, 10)
		ellipse(width * 0.75, height, 10, 10)
		ellipse(width, height, 20, 20)
		ellipse(0, height / 2, 10, 10)
		ellipse(width / 2, height / 2, 10, 10)
		ellipse(width / 2, height, 10, 10)
		ellipse(width, 0, 20, 20)
		ellipse(0, height, 20, 20)

	};
}

I was inspired by tensile systems such as pinning down flexible materials such as nylon. I used different shades to emphasize the folding pattern of the middles pieces.

Kimberlyn Cho- Looking Outwards- 04

Meier & Erdmann’s single, “Howler Monkey” uses a computational algorithm to visualize the driving sounds of the song in the music video. The algorithm was created by Victor Doval using both Processing and Blender (specifically the Sverchok add-on). The music video shows charcoal structures, archways, and spheres that constantly evolve to portray the “landscape”in sync with the music. The audio data from the spectrum of sound in the song determines the shape, material, and lighting of the objects in the video.

I really appreciate the experience provided by this computational music video. By accommodating a 24-hour timelapse in 290 seconds, the audience is able to watch the sunrise to the sunset, which evokes a “dreamy” experience for contemplation. I think its a great way to create a deeper relationship between the music and the music video in terms of the audience’s experience. By correlating the music to the visual art, musicians are also able to create unique videos for their music which I find more personal and thoughtful.

created by Victor Doval for the music video of “Howler Monkey” 2017

Kimberlyn Cho- Project03

I was inspired by the static of a TV to create my dynamic drawing. I took into consideration the size of the static, rotation of the dials, position of the slider, degree of static, and colors to make my drawing dynamic in accordance to the position of the mouse.

ycho2-03

/* Kimberlyn Cho
Section C
ycho2@andrew.cmu.edu
Assignment-03 */

/* directions:
move vertically = vary length of static controlled by the slide
move horizontally = vary color and level of static controlled by the dials */

var screenW = 360
var screenH = 300
var rectW = 10
var rectH = 20
var angle = 0

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

function draw() {
    background(256, mouseX, mouseY);
    rectMode(CENTER);

    //antenna
    stroke("pink");
    strokeWeight(5);
    line(320, 95, 370, 10);
    line(320, 95, 250, 5);
    strokeWeight(0);
    fill("white");
    ellipse(320, 95, 100, 50);

    //tv
    fill("pink");
    rect(320, 280, 500, 380, 50);
    fill("white");
    rect(290, 280, 380, 320, 30);

    //tv controls
    ellipse(525, 175, 50, 50);
    ellipse(525, 250, 50, 50);
    fill("pink"); 
    //rotating dials
    push();
    translate(525, 175);
    rotate(radians((angle + 20) + mouseX / 2));
    rect(0, 0, 40, 10);
    pop();
    push();
    translate(525, 250);
    rotate(radians(-angle + mouseX / 2));
    rect(0, 0, 40, 10);
    pop();
    //slider
    fill("white");
    rect(525, 360, 6, 136);
    var slider = constrain(mouseY, 292, 428);
    rect(525, slider, 25, 25);

    //tv screen
    fill("black");
    rect(290, 280, screenW, screenH);
    
    //to imitate static
    var color = random(0, 255);
    //to constrain static heights within screen
    var length = constrain(mouseY, 130, 430);
    var staticH = height - length;

    //static
    fill(200);
    translate(110, 130);
    fill(color, mouseX, color);
    rect(screenW * 0.02, screenH / 2, rectW, staticH * .3);
    rect(screenW * 0.06, screenH / 2, rectW, staticH * .8);   
    rect(screenW * 0.10, screenH / 2, rectW, staticH * .6);
    rect(screenW * 0.14, screenH / 2, rectW, staticH * .4);
    rect(screenW * 0.18, screenH / 2, rectW, staticH * .7);
    rect(screenW * 0.22, screenH / 2, rectW, staticH * .3);
    rect(screenW * 0.26, screenH / 2, rectW, staticH * .5);
    rect(screenW * 0.30, screenH / 2, rectW, staticH * .8);
    rect(screenW * 0.34, screenH / 2, rectW, staticH * .4);
    rect(screenW * 0.38, screenH / 2, rectW, staticH * .3);
    rect(screenW * 0.42, screenH / 2, rectW, staticH * .6);
    rect(screenW * 0.46, screenH / 2, rectW, staticH * .7);
    rect(screenW * 0.50, screenH / 2, rectW, staticH * .8);
    rect(screenW * 0.54, screenH / 2, rectW, staticH * .5);
    rect(screenW * 0.58, screenH / 2, rectW, staticH * .7);
    rect(screenW * 0.62, screenH / 2, rectW, staticH * .6);
    rect(screenW * 0.66, screenH / 2, rectW, staticH * .4);
    rect(screenW * 0.70, screenH / 2, rectW, staticH * .4);
    rect(screenW * 0.74, screenH / 2, rectW, staticH * .2);
    rect(screenW * 0.78, screenH / 2, rectW, staticH * .3);
    rect(screenW * 0.82, screenH / 2, rectW, staticH * .5);
    rect(screenW * 0.86, screenH / 2, rectW, staticH * .7);
    rect(screenW * 0.90, screenH / 2, rectW, staticH * .6);
    rect(screenW * 0.94, screenH / 2, rectW, staticH * .8);
    rect(screenW * 0.98, screenH / 2, rectW, staticH * .4);

}

Kimberlyn Cho- Looking Outwards- 03

Iris van Herpen collaborated with various designers and architects to create 3D printed magnetic dresses and accessories called “Magnetic Motion”. Her inspiration for this SPRING/SUMMER 2015 collection came from a Swiss scientific research facility called CERN, which researches and manufactures magnetic fields in incredible scales. Herpen experimented with different metal-infused materials with magnets to avoid repetition in her designs, as well as techniques such as injection moulding and laser cutting to emphasize details and complexity. Her diversity in use of materials and minimal color palette give each piece a different focus while maintaining a cohesive story.

Model wears a 3D printed clear dress made in collaboration with architect Niccolo Casas.

I was intrigued by the practical use of digital fabrication in every day life. Generative art, specifically digital fabrication, is often used in the context of installations due to its intricate process and limit in medium and form. However, Herpen uses the process in a more applicable approach for the general public. She shows the promising future of digital fabrication by using it to create something directly usable by people. I found this approach very practical, innovative, and suggestive of a future most definitely more reliant on digital fabrication than now.

Kimberlyn Cho- Project 02- Variable Face

I decided to draw a hotdog because of a sudden late night craving. After a few iterations of different hotdogs, I focused on varying the droopiness of the eyelids to portray a sleepy hotdog.

variable

/* Kimberlyn Cho
Section C
ycho2@andrew.cmu.edu
Assignment-02 */

//background
var R = 179;
var G = 236;
var faceHeight = 700;
var droop = 180;
var mouthW = 60;
var mouthH = 10;

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

function draw() {
    //background
    background(R, G, 255);

    //face
    strokeWeight(5);
    fill(255, 121, 92);
    ellipse(320, 480, 350, faceHeight);

    //hands
    fill(255, 204, 102);
    ellipse(320 - 175, 225 + faceHeight * 0.4, 150, 200);
    ellipse(320 + 175, 225 + faceHeight * 0.4, 150, 200);

    //eyes
    strokeWeight(0);
    fill("white");
    var eyeLX = width / 2 - 350 * 0.15;
    var eyeRX = width / 2 + 350 * 0.15;
    var eyeLY = 480 - faceHeight * 0.3;
    ellipse(eyeLX, eyeLY, 40, 60);
    ellipse(eyeRX, eyeLY, 40, 60);
    fill("black");
    ellipse(eyeLX, eyeLY, 25, 50);
    ellipse(eyeRX, eyeLY, 25, 50);

    //eyelids
    strokeWeight(3);
    fill("green");
    arc(eyeLX, eyeLY, 45, 70, droop, 0, OPEN);
    arc(eyeRX, eyeLY, 45, 70, droop, 0, OPEN);

    //mouth
    strokeWeight(0);
    fill("yellow");
    ellipse(320, 480 - faceHeight * 0.15, mouthW * 3, mouthH * 6);
    fill("red");
    ellipse(320, 480 - faceHeight * 0.15, mouthW * 2, mouthH * 4);
    fill("white");
    ellipse(320, 480 - faceHeight * 0.15, mouthW, mouthH);


}

function mousePressed() {
    //background
    R = random(150, 200);
    G = random(200, 250);
    faceHeight = random(600, 780);
    droop = random(HALF_PI + QUARTER_PI, PI + QUARTER_PI);
    mouthW = random(50, 70);
    mouthH = random(5, 15);

}