Author: sarahk1@andrew.cmu.edu

Sarah Kang – Project 07 – Curves

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);
    rotate(radians(ang));
    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

“Madonna’s ‘Like a Virgin’“, by Martin Wattenberg

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.

“Moonlight Sonata, by Beethoven” by Martin Wattenberg

http://bewitched.com/song.html

Sarah Kang-Project-06-Abstract Clock

clockk

//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 rad = 100;
    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);
    arc(x1, y1, rad + 80, rad + 80, 0, RMH);
    //med ring for minutes
    stroke(240, 192, 201);
    strokeWeight(4);
    arc(x1, y1, rad + 50, rad + 50, 0, RMM);
    //small ring for seconds
    stroke(201, 231, 255);
    strokeWeight(7);
    arc(x1, y1, rad, rad, 0, RMS);


    //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);
    arc(x2, y2, rad + 100, rad + 100, 0, RMS);
    //med ring for minutes
    stroke(240, 192, 201);
    strokeWeight(8);
    arc(x2, y2, rad + 75, rad + 75, 0, RMM);
    //small ring for hours
    stroke(201, 231, 255);
    strokeWeight(12);
    arc(x2, y2, rad + 20, rad + 20, 0, RMH);

    //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);
    arc(x3, y3, rad + 40, rad + 40, 0, RMS);
    //med ring for seconds
    stroke(240, 192, 201);
    strokeWeight(2);
    arc(x3, y3, rad + 20, rad + 20, 0, RMS);
    //small ring for seconds
    stroke(201, 231, 255);
    strokeWeight(4);
    arc(x3, y3, rad, rad, 0, RMS);

    //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);
    arc(x4, y4, rad, rad, 0, RMS);
    //med ring for seconds
    stroke(240, 192, 201);
    strokeWeight(2);
    arc(x4, y4, rad - 10, rad - 10, 0, RMS);
    //small ring for seconds
    stroke(201, 231, 255);
    strokeWeight(4);
    arc(x4, y4, rad - 20, rad - 20, 0, RMS);

    //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);
    arc(x5, y5, rad - 20, rad - 20, 0, RMS);
    //med ring for seconds
    stroke(240, 192, 201);
    strokeWeight(2);
    arc(x5, y5, rad - 30, rad - 30, 0, RMS);
    //small ring for seconds
    stroke(201, 231, 255);
    strokeWeight(4);
    arc(x5, y5, rad - 45, rad - 45, 0, RMS);

}

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

“Medusa”, by Fabio Morreale, PHD

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.

Another piece from “Medusa”, by Fabio Morreale, PHD

https://fabio.kiwi/medusa

Sarah Kang – Looking Outwards – 05

Then Flying the Youth, by Shang-Peng Lang, from CG Society

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

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.

initial sketch

Sarah Kang – Project-04-String Art

string

//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

Deguster L’augmente by Erika Marthins

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.

Déguster l'augmenté ECAL/Erika Marthins from ECAL on Vimeo.

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

dydraw

//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);
    rotate(radians(angle * -1));
    rect(ogX, ogY, mouseX / 8, mouseY / 8);
    pop();
    push();
    translate(170, 70);
    rotate(radians(angle * -1));
    rect(ogX, ogY, mouseX / 8, mouseY / 8);
    pop();
    push();
    translate(270, 70);
    rotate(radians(angle * -1));
    rect(ogX, ogY, mouseX / 8, mouseY / 8);
    pop();
    push();
    translate(370, 70);
    rotate(radians(angle * -1));
    rect(ogX, ogY, mouseX / 8, mouseY / 8);
    pop();
    push();
    translate(470, 70);
    rotate(radians(angle * -1));
    rect(ogX, ogY, mouseX / 8, mouseY / 8);
    pop();
    push();
    translate(570, 70);
    rotate(radians(angle * -1));
    rect(ogX, ogY, mouseX / 8, mouseY / 8);
    pop();

    // middle medium rectangles, rotating in opposite direction

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

    //bottom big rectangles

    fill(mouseX, 255, mouseY);
    push();
    translate(100, 420);
    rotate(radians(angle * -1));
    rect(ogX, ogY, mouseX / 2, mouseY / 2);
    pop();
    push();
    translate(320, 420);
    rotate(radians(angle * -1));
    rect(ogX, ogY, mouseX / 2, mouseY / 2);
    pop();
    push();
    translate(540, 420);
    rotate(radians(angle * -1));
    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

Bjork wearing Rottlace, from media.mit.edu

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.

Rottlace designed by the Mediated Matter Group, printed with Stratasys

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/