## Sarah Kang – Project 07 – Curves

``````//sarah kang
//section c
//sarahk1@andrew.cmu.edu
//project-07-curves

var ang = 0;
var nPoints = 100;

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

function draw() {

background(0);
noFill();
//orange curves
push();
translate(width / 2, height / 2);
strokeWeight(2);
stroke(255, 159, 28);
drawHypo1();
pop();
//red curves
push();
translate(width / 2, height / 2);
strokeWeight(8);
stroke(181, 42, 74);
drawHypo2();
pop();
//yellow curves
push();
strokeWeight(2);
stroke(255, 240, 122);
translate(width / 2, height / 2);
ang += mouseX / 50;
drawRan();
pop();
}
//Ranunculoid Curve
function drawRan(){ //http://mathworld.wolfram.com/Ranunculoid.html
var sz = 10;
//curve
beginShape();
for (var i = 0; i < nPoints; i += 0.1){
var xr = sz * (6 * cos (i) - cos (6 * i));
var yr = sz * (6 * sin (i) - sin (6 * i));
vertex(xr, yr);
}
endShape();
}

//Hypotrochoid Curve 1
function drawHypo1() { //http://mathworld.wolfram.com/Hypotrochoid.html

var x;
var y;
//controls
var h = map(mouseY, 0, height, 0, 80);
var a = map(mouseX, 0, width, 0, 300);
var b = a / 8;
//curve
beginShape();
for (var i = 0; i < nPoints; i ++) {
var t = map(i, 0, 100, 0, TWO_PI)
x = (a - b) * cos(t) + h * cos(((a - b) / b) * t)
y = (a - b) * sin(t) - h * sin(((a - b) / b) * t)
vertex(x, y)
};
endShape();
}

//Hypotrochoid Curve 2
function drawHypo2() { //http://mathworld.wolfram.com/Hypotrochoid.html

var x;
var y;
//controls
var h = map(mouseY, 0, height, 0, 80);
var a = map(mouseX, 0, width, 0, 300);
var b = a / 12;
//curve
beginShape();
for (var i = 0; i < nPoints; i ++) {
var t = map(i, 0, 100, 0, TWO_PI)
x = (a - b) * cos(t) + h * cos(((a - b) / b) * t)
y = (a - b) * sin(t) - h * sin(((a - b) / b) * t)
vertex(x, y)
};
endShape();
}

``````

At first, trying to understand how the math equations were controlled was pretty confusing; after experimenting with the variables, I was able to adjust and change the outputs of the curves equations to how I wanted it to look. Then, I formatted the curves in terms of color and stroke weight to create a flowery design.

## Sarah Kang-Looking Outwards-07

In this project, “The Shape of Song”, artist Martin Wattenberg demonstrates his explorations of trying to “see” musical form. I was intrigued by this project because adding a dimension of visual sense allows one to experience and interpret music in a brand new way. To achieve this experiment, Wattenberg created a visualization program that highlights the repeated verses in music using translucent arcs, called an “arc diagram”. This software, written entirely in Java. analyzes “MIDI” files of the musical piece which are commonly found on the web. Using this information, an arc connects a pair of identical sections of a musical piece. The arcs seem to be proportionally sized in terms of the spacing of the repeated sections. This allows the piece to be viewed in terms of its structure, rather than sound. The visualizations created by Wattenberg allow the viewer to analyze the entire musical piece as one visual composition in a matter of seconds, as opposed to the minutes it would take to listen to the entire song.

http://bewitched.com/song.html

## Sarah Kang-Project-06-Abstract Clock

``````//sarah kang
//section c
//sarahk1@andrew.cmu.edu
//project-06-clock

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

function draw() {
//current time
var S = second();
var M = minute();
var H = hour();

//remap
var RMH = map(H, 0, 23, 0, 360);
var RMM = map(M, 0, 59, 0, 360);
var RMS = map(S, 0, 59, 0, 360);
var sec = S / 60;

var dim = 80;
var dim2 = 40;
var dim3 = 30;
var x1 = 220;
var y1 = 160;
var x2 = 350;
var y2 = 260;
var x3 = 200;
var y3 = 340;
var x4 = 80;
var y4 = 390;
var x5 = 400;
var y5 = 60;

angleMode(DEGREES);

//first bubble
fill(63, 57, 64);
noStroke();
ellipse(220, 160, sec * dim, sec * dim); //center
//big ring for hours
noFill();
stroke(105, 9, 46);
strokeWeight(1);
//med ring for minutes
stroke(240, 192, 201);
strokeWeight(4);
//small ring for seconds
stroke(201, 231, 255);
strokeWeight(7);

//second bubble
fill(94, 86, 93);
noStroke();
ellipse(350, 260, sec * dim, sec * dim); //center
//big ring for seconds
noFill();
stroke(105, 9, 46);
strokeWeight(4);
//med ring for minutes
stroke(240, 192, 201);
strokeWeight(8);
//small ring for hours
stroke(201, 231, 255);
strokeWeight(12);

//third bubble
fill(99, 101, 115);
noStroke();
ellipse(200, 340, sec * dim2, sec * dim2); //center
//big ring for seconds
noFill();
stroke(105, 9, 46);
strokeWeight(1);
//med ring for seconds
stroke(240, 192, 201);
strokeWeight(2);
//small ring for seconds
stroke(201, 231, 255);
strokeWeight(4);

//4th bubble
fill(140, 143, 161);
noStroke();
ellipse(80, 390, sec * dim2, sec * dim2); //center
//big ring for seconds
noFill();
stroke(105, 9, 46);
strokeWeight(1);
//med ring for seconds
stroke(240, 192, 201);
strokeWeight(2);
//small ring for seconds
stroke(201, 231, 255);
strokeWeight(4);

//5th bubble
fill(149, 140, 161);
noStroke();
ellipse(400, 60, sec * dim3, sec * dim3); //center
//big ring for seconds
noFill();
stroke(105, 9, 46);
strokeWeight(1);
//med ring for seconds
stroke(240, 192, 201);
strokeWeight(2);
//small ring for seconds
stroke(201, 231, 255);
strokeWeight(4);

}``````

I wanted to make a bubble clock and vary the hour, minute, and second variables by the layers of the bubbles. To make the frame changes more apparent, I used more seconds variables in the visualization.

## Sarah Kang- Looking Outwards – 06

Fabio Morreale’s research focuses on how understanding the influence of computer technologies in shaping the way people compose, learn, listen to, and perform music. “Medusa” is one of his few visual works that “explore the redistribution of control between human and computer agents in the creation of visual artworks” (Morreale). What first drew me to this artwork was the fluidity and organic nature of the composition. This project was coded on Processing. Morreale uses the initial position of a virtual pen on his virtual canvas as his driver, and traces lines that produce numbers of autonomous agents that independently begin to roam the canvas, while leaving a trail. The only human control in this artwork is the original location of the agents, not the control over their evolution. Through this artwork, Morreale explores the cause and effect evolution paths between the relationship of humans with computer technologies, and the ratio of control between the two spectrums.

https://fabio.kiwi/medusa

## Sarah Kang – Looking Outwards – 05

When I first saw the top image of the girl’s face, I didn’t even register that she was not a real human. I picked this artwork because it was so photo-realistic, but also haunting when I continued to scroll and found out that she was a 3D model rendered and processed into this image.

Shang-Peng Lang is an online graphic artist and hoped to portray an emotional expression of a young girl in a soft breeze. To create this girl, Lang used the software MARI, Maya, Photoshop and Silo, and used VRay to render and post-process the image. MARI is a 3D painting software and I assume that VRay was mostly used in the final stages for lighting and fine filter adjustments. This project is a demonstration of a collaboration between graphic art and advanced modeling/painting software; this combination can take 2D images to another level, to a point where one cannot even discern if it’s rendered or actually existing.

http://forums.cgsociety.org/t/then-flying-the-youth-shang-peng-leng-3d/1580505

## Sarah Kang – project 05 – Wallpaper

``````//sarah kang
//section c
//sarahk1@andrew.cmu.edu
//project-05-wallpaper

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

function draw() {
background(255, 207, 207);

for (var y = 55; y < height + 100; y += 150) {
for (var x = 55; x < width + 100; x += 150) {
noFill();
strokeWeight(7);
stroke(31, 0, 97);
rect(x, y, 40, 40); // thick purple squares

strokeWeight(2);
rect(x - 10, y - 10, 60, 60); // thin purple squares

stroke(211, 240, 238);
noFill();
rect(x - 70, y - 70, 30, 30); // light blue squares

fill(211, 240, 238);
ellipse(x -  55, y - 55, 10, 10); // light blue circles
}
}

for (var y = -70; y < height - 20; y += 150) {
for (var x = -70; x < width - 20; x += 150) {
noFill();
strokeWeight(4);
stroke(255, 254, 207);
rect(x, y, 140, 140); // big yellow squares
}
}
}``````

For this wallpaper, I wanted to see what kind of graphics I could make by layering simple geometries such as squares.

## Sarah Kang – Project-04-String Art

``````//sarah kang
//section c
//sarahk1@andrew.cmu.edu
//project-04-string art

//for center diamond
var r = 255;
var g = 125;
var b = 175;

//for intermediate rays
var rr = 255;
var gg = 196;
var bb = 179;

//for corner rays
var rrr = 255;
var ggg = 253;
var bbb = 232;

//canvas
var W = 400;
var H = 300;

function setup() {
createCanvas(W, H);
}

function draw() {
background(0);

strokeWeight(1);

//center diamond
for (var i = 0; i < W; i += 10) {
line(i, H / 2, W / 2, H - (0.8 / i));
stroke(r, g, b);

line(W / 2, 0.8 / i, i, H / 2);
stroke(r, g, b);
}

//intermediate rays
for (var i = 0; i < W; i += 30) {
line(W, 0.8 / i, i, H / 2);
stroke(rr, gg, bb);

line(i, H / 2, W, H - (0.8 / i));
stroke(rr, gg, bb);

line(0, 0.8 / i, i, H / 2);
stroke(rr, gg, bb);

line(i, H / 2, 0, H - (0.8 / i));
stroke(rr, gg, bb);
}

//corner rays
strokeWeight(0.3);
for (var i = 0; i < W; i += 5) {
line(i, H / 2, mouseX, H - (0.8 / i));
stroke(rrr, ggg, bbb);

line(mouseX, 0.8 / i, i, H / 2);
stroke(rrr, ggg, bbb);

line(i, H / 2, W - mouseX, H - (0.8 / i));
stroke(rrr, ggg, bbb);

line(W - mouseX, 0.8 / i, i, H / 2);
stroke(rrr, ggg, bbb);
}
}

``````

It was pretty confusing at first when figuring out how the variables were controlled and changed, but after playing around with different options, I finally got the hang of the basic inputs.

## Sarah Kang – Looking Outwards – 04

For her recent graduate design project, a collaborative with ECAL (Bachelor Media & Interaction Design), Swedish designer Erika Marthins explored the ways to elevate the every day aspect of food by adding another of dimension of sensory effect. The initial picture of a slab of chocolate on a record player seems like just an artsy edit, but to imagine that the chocolate actually functions as a record was amazing to me. The chocolate record player is one of three desserts explored; Marthins embeds poetry into a lollipop and creates edible robotics.

The chocolate record performs the same way as a typical vinyl record. The sounds produced by the chocolate round are made by grooves on its surface and when the record needle comes into contact with the moving surface, one can hear a high-pitched, wavering sound playing. Erika Marthin’s explorations as a designer is manifested through this successful project; she manages to create a poetic experience by achieving her goal to enable the diner to not only hear the sound of the chocolate, but to taste it.

http://erikamarthins.com/

## Sarah Kang – Project 03- Dynamic Drawing

``````//sarah kang
//section c
//sarahk1@andrew.cmu.edu
//project-03-dynamic-drawing

var angle = 0; //angle for rectangle rotation
var ogX = 0;
var ogY = 0;

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

function draw() {
background(0);
strokeWeight(1.5);
stroke(255, 255, 255);

//top row small rectangles

fill(mouseY, 102, mouseX);
push();
translate(70, 70);
rect(ogX, ogY, mouseX / 8, mouseY / 8);
pop();
push();
translate(170, 70);
rect(ogX, ogY, mouseX / 8, mouseY / 8);
pop();
push();
translate(270, 70);
rect(ogX, ogY, mouseX / 8, mouseY / 8);
pop();
push();
translate(370, 70);
rect(ogX, ogY, mouseX / 8, mouseY / 8);
pop();
push();
translate(470, 70);
rect(ogX, ogY, mouseX / 8, mouseY / 8);
pop();
push();
translate(570, 70);
rect(ogX, ogY, mouseX / 8, mouseY / 8);
pop();

// middle medium rectangles, rotating in opposite direction

fill(mouseX, 166, mouseY);
push();
translate(600, 230);
rect(ogX, ogY, mouseX / 4, mouseY / 4);
pop();
push();
translate(450, 230);
rect(ogX, ogY, mouseX / 4, mouseY / 4);
pop();
push();
translate(300, 230);
rect(ogX, ogY, mouseX / 4, mouseY / 4);
pop();
push();
translate(150, 230);
rect(ogX, ogY, mouseX / 4, mouseY / 4);
pop();
push();
translate(0, 230);
rect(ogX, ogY, mouseX / 4, mouseY / 4);
pop();

//bottom big rectangles

fill(mouseX, 255, mouseY);
push();
translate(100, 420);
rect(ogX, ogY, mouseX / 2, mouseY / 2);
pop();
push();
translate(320, 420);
rect(ogX, ogY, mouseX / 2, mouseY / 2);
pop();
push();
translate(540, 420);
rect(ogX, ogY, mouseX / 2, mouseY / 2);
pop();

angle = angle + 5; // rotation speed and direction

//changing rotation speed, controlled by mouseX

if(mouseX >= 320){
angle = angle + 10;
}
}``````

For this assignment, I was inspired by the parametric graphic references provided in the guidelines and wanted to emulate it through my drawing.

## Sarah Kang Looking-Outwards-03

Rottlace is a project fabricated by the Mediated Matter Group based at MIT. The series of masks is custom designed for the Icelandic singer-songwriter Bjork. From her newest album, Vulnicura, the Mediated Matter group drew inspiration from her messages of self-healing and portraying “the face without a skin”. The resulting product is a mask that encapsulates Bjork’s facial structure with a new layer of that represents a new identity.

The fiber tissues of the mask are computationally calculated with the curve directions of the point cloud data derived from Bjork’s facial scan. The bone-like locations are geometrically informed as another result from the data, but their material composition is graded from a spectrum of stiff to flexible, and from opaque to transparent-this information is derived as a function of geodesic distances given by the face scans.

What I admire about this work is how the project creates a collaboration between humanistic aspects and computational art. The world of generative, computational art opens many doors to encapsulating human elements and using digital technologies to convey it most accurately and elevate the information to new levels. The Mediated Matter Group combined both spectrums to fuse together a mask that encompasses this collaboration.

https://www.media.mit.edu/projects/rottlace/overview/