Author: sychoi@andrew.cmu.edu

Sarah Choi – Project 07 – Composition with Curves

project-07

//Sarah Choi 
//Section D
//sychoi@andrew.cmu.edu
//Project-07

var col;

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

function draw() {
    background(0);

    //randomize color
    col = color(random(255), random(255), random(255));

    x = constrain(mouseX, 0, width);
    y = constrain(mouseY, 0, height);
    
    // draw the frame
    fill(255); 
    noStroke();
    text("The Butterfly", 20, 40);
    stroke(255);
    noFill(); 
    rect(0, 0, width-1, height-1); 
    
    // draw the curve, rotate on mouseX
    push();
    translate(width / 2, height / 2);
    rotate(map(mouseX, 0, width, 0, 1));
    drawButterfly();
    pop();
}

//--------------------------------------------------
function drawButterfly() {
    // Butterfly Curve:
    // http://mathworld.wolfram.com/ButterflyCurve.html
 
    //adding variability and movement
    var m = (map(x, 0, mouseY, 0, width)); 
    var m = (map(y, 0, mouseX, 0, height));

    stroke(255);
    fill(col);

    beginShape();
    for (var i = 0; i < 300; i++) {
        var t = map(i, 0, 300, 0, 2 * TWO_PI);
        
    //butterfly curve equations
        r = (exp(cos(t))) - (2 * cos(4 * t)) + (sin((1 / 12) * t));

        x = r * sin(t) * m
        y = r * cos(t) * m
        vertex(x, y)
    }
    endShape(CLOSE);
}

I chose a curve that could turn on an angle. Thinking of fully randomizing and creating something abstract on the basis of mathematics was my main goal for this project. Because we have been focusing and reflecting on computational art, I wanted to be able to portray this with my own work. It was interesting to play around with the variables as they made a big difference in how the curve was portrayed.

Below, I have shown three different aspects of the curve showing the beginning and how it manifests as it follows the x and y coordinates of the mouse. I wanted to show portray nature by showing the beginning of a butterfly as pure blackness. As one moves the mouse, the shapes get bigger with colors constantly changing showing the beauty butterflies bring into our world. As the mouse moves more across the screen, the butterfly gets bigger to depict what the human eye takes in as a butterfly flies closer to him or her.

Sarah Choi – Looking Outwards – 07

Flight Patterns from Aaron Koblin on Vimeo.


Aaron Koblin: artist, designer, programmer, and entrepreneur

For this week’s Looking Outwards, we are focusing on computational information visualization, which is why I decided to focus on Aaron Koblin. He is an artist, designer, programmer, and entrepreneur specializing in data and digital technologies. I decided to focus on his Flight Patterns project, documenting his own custom software with computational and interactive information visuals of the paths of air traffic over North American through color and form. This project intrigued me as a pretty heavy traveler and growing up in South East Asia, the art of having technical engineering skills to fly all over the world has been an important aspect.

The algorithms generating the work were parsed and plotted using a form of process programming. This project first started as a series of experiments for a project called “Celestial Mechanics” with his colleagues at UCLA. However, during the process, Koblin wanted to make a project of his own using his artistic skills. 

The project’s final form was manifested through his artistic ability to make interactive visualizations but also was made through technical computing skills that went along with flight patterns over the United States. 

Paths of air traffic over North America visualized in color and form.
Flight Patterns

Sarah Choi – Project – 06 – Abstract Clock

My representation of the clock showed three different parts of the clock. I wanted to portray hours, minutes, and seconds in three different manners. By doing this, I was able to code the outside of the circle with an arc, showing the hour. I made an inner loop with the minutes by using stroke lines. And finally, the seconds were done with the squares in the perimeter.

project-06

//Sarah Choi 
//Section D
//sychoi@andrew.cmu.edu
//Project-06

var x = 0;
var y = 0;
var dX = 1;
var dY = 1;

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

function draw() {
    var h = hour();
    var m = minute();
    var s = second();
    var rects = [];

    background(0);

    //seconds
    //top half right side
    stroke(0);
    strokeWeight(1);
    for (i = 0; i < 8; i++) {
        x1 = 281 - (37.5 / 2) + i * 37.5;
        y1 = 0;
        rects.push([x1, y1, s > i]);
    }

    for (i = 8; i < 25; i++) {
        x1 = 600 - 37.5;
        y1 = (i - 8) * 37.5;
        rects.push([x1, y1, s > i]);
    }

    for (i = 25; i < 39; i++) {
        x1 = 600 - (37.5 * (i - 23));
        y1 = 600 - 37.5;
        rects.push([x1, y1, s > i]);
    }

    for (i = 39; i < 55; i++) {
        x1 = 0;
        y1 = 600 - (37.5 * (i - 38));
        rects.push([x1, y1, s > i]);
    }

    for (i = 55; i < 61; i++) {
        x1 = (i - 54) * 37.5;
        y1 = 0;
        rects.push([x1, y1, s > i]);
    }

    for (i = 0; i < 61; i++) {
        if (rects[i][2]) {
            x1 = rects[i][0];
            y1 = rects[i][1];
            fill(255);
            rect(x1, y1, 37.5, 37.5);
        } 
        else {
            x1 = rects[i][0];
            y1 = rects[i][1];
            fill(255, 153, 0);
            rect(x1, y1, 37.5, 37.5);
        }
    }

    //minute
    for (a = 0; a < m; a++) {
        fill(255);
        circle(300, 300, 300 - (5 * a), 300 - (5 * a));
    }

    //hour
    noFill();
    strokeWeight(20);
    stroke(0, 0, 255);
    arc(300, 300, 360, 360, -HALF_PI, TWO_PI * (h / 12) - HALF_PI);

    //time
    noStroke();
    fill(0);
    textSize(30);
    text(nf(h % 12, 2, 0) + ":" + nf(m, 2, 0) + ":" + nf(s, 2, 0), 240, 285, 300, 300);
}

Sarah Choi – Looking Outwards – 06

Norimichi Hirakawa , 16 unknowns and the irreversible (2013) from norimichi hirakawa on Vimeo.

Norimichi Hrakawa’s The Irreversible is a sequence of a thousand and twenty-four randomized two-second digital videos depicting the art of time. This recorded reversed time ticks forward in real-time on the minds of his audience. He explains he wanted to convey the idea of the past and present. He plays with the idea of realizing how the now is perceived to be different from what happened to people individually in the past as recent as a couple of seconds ago. 

The algorithms in which he was able to create his piece was completely through digital manipulation of his code. He focused on using inverse operations and generating a random method to create a moving illusion for two seconds. After each two-second video, he made his code restart, similar to the i = 0 functions we’ve been learning in class. 

In its final form, Hrakawa’s work brings out abstract and randomly produced generative art produced solely through digital manipulation. His creativity and play on time were intriguing to read about. He believes technological tools and computation develop innovative ideas for his art. From the beginning, Hrakawa relied on computation to explore more areas for themes to his art. He applied theorems of math and physics as parameters, and further advanced his art through playing with plotted pixels based on two-dimensional paintings. In terms of color, he explored R, G, and B color formats and created equations to randomize specific colors to his work. 

http://counteraktiv.com/#wrk

Sarah Choi – Project-05 – Wallpaper

For this project, I was inspired by abstract lines. I wanted to create colorful wallpaper against a dark blue background, as I was intrigued by rooms with dark-colored walls with lighter designs on top after going to multiple home furniture design showrooms during the summer. I wanted to light up the room by using lighter colors like white, light yellow, and lavender. I have always liked abstract wallpapers using only symmetrical lines combining to create something more “chaotic” to pair with simple furniture.

project-05

//Sarah Choi 
//Section D
//sychoi@andrew.cmu.edu
//Project-05

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

function draw() {
    background(0, 0, 153);
    for (var y = 0; y < height+25; y += 50) {
        for (var x = 0; x < width+25; x += 50) {
            noStroke();
            fill(255); 
            rect(x + 33, y, 10, 400)
        }
    }
    for (var i = 0; i < 400; i += 4) {
        stroke(252, 255, 122);
        strokeWeight(5);
        line(i, i * 20 - 30, 600, i + 400);
    }

    for (var a = 0; a < 400; a += 7) {
        stroke(204, 153, 255);
        strokeWeight(7);
        line(a, a * 10 + 350, 700, a - 100);
    }
    for (var b = 0; b < 600; b += 50) {
        stroke(255);
        strokeWeight(7);
        line(b, 0, b, 400);
    }
}

Sarah Choi – Looking Outwards – 05

Chaotic Atmospheres, also known as Istvan, is a freelance digital artist based in Switzerland. He created a series of pictures called “Math:Rules – Strange Attractors” showcasing his interpretation of math with different shapes on a white background, showing various equations, definitions, and parameters for each shape. I admired the time and effort he wanted to show a field that was so computational with art. A background as a graphic designer in Paris for fashion, his passion is to tell stories with different forms of art, especially photography. Although admitting he wasn’t a mathematician, he studied “strange attractors” for their dynamic forms and feel of chaos, which is what he wanted to portray in this project. The algorithms he used was with Cinema 4D plugins that helped him configure the shapes.

His final product was able to portray the beauty of mathematics with beautiful and crazy art forms. 

https://chaoticatmospheres.com/mathrules-strange-attractors

Sarah Choi – Project – 04 – Generative Art


project-04

//Sarah Choi 
//Section D
//sychoi@andrew.cmu.edu
//Project-04

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

function draw() {
    background(0);
    for(var i = 0; i < 400; i += 2) {
        stroke(255);
        strokeWeight(0.2);
        line(i, mouseY / 2 + 200, 400, - i);
    }
    for(var a = 0; a < 400; a++) {
        fill(255, 0, 0);
        strokeWeight(0.5);
        line(a, - a + mouseX / 5, 400, - a);
    }
    for(var b = 0; b < 400; b += 5) {
        stroke(255, 255, 0);
        strokeWeight(0.5);
        line(mouseX - 150, - b, 400, b);
    }
    for(var c = 0; c < 400; c += 5) {
        stroke(255, 0, 255);
        line(mouseY - 100, c, 400, - c);
    }
    for(var d = 0; d < 400; d += 0.5) {
        stroke(255, 100, 100);
        strokeWeight(0.2)
        line(d, - mouseY, 400, d);
    }
}

Using string art, I wanted to create abstract art playing around with primary and complimentary colors along with a black background. I wanted my piece to follow the mouse, so it would be more interactive with the audience. 

Sarah Choi – Looking Outwards – 04

In July 2018, Funkhaus Berlin featured sound art called, “Meandering River”, a vibrant landscape showing the gradual flows of nature by onformative. The audiovisual installation portrays a small snapshot in our fast-paced and changing world. The artist believed in the importance of featuring real nature through art. The movement of the rivers shows the constant in past and present life. Onformative wanted to show the unchanging nature although with all the transformations going around in life. 

The “Meandering River” is a multi-channel video with a set generative soundscape. The algorithm calls attention to the abstract imagery showing movements of the fluctuations in a river. The music accompanied and adding to the piece was composed by Berliners Kling Klang Klong, interpreting river patterns and shifts in the surface. The artist wanted the audience to be more aware of time in order to reel out an emotional journey.

Meandering River – onformative’s newest audiovisual installation to premiere at Funkhaus Berlin, July 28 to 30

Sarah Choi – Looking Outwards – 03

This form of generated art interested me because the inspiration came from water. The MIT Media Lab showed “Water-Based Additive Manufacturing”, portraying the design approach of water-based robotic fabrication and technology for additive manufacturing. The entire project used biodegradable hydrogel composites.

Looking at dimensions, the project develops structural materials for additive deposition. They used different types of materials all around incorporating technology for biodegradable composite objects. The technological aspect to shape the objects created a basis for the algorithms that fully generated the work. This project combined art and nature, using natural hydrogels and further made different scaled objects. The fabricated objects were then dissolved in water and recycled. The final forms produced beautiful and radiant architectural structures.

The creator’s artistic sensibilities showed a unique variety of art, producing what people term “generative art”. The final forms produced beautiful and radiant architectural structures, reminding me of natural forms in our world which aren’t normally seen through the naked eye on a day to day basis.

https://www.media.mit.edu/projects/water-based-additive-manufacturing/overview/

Sarah Choi – Project 03 – Dynamic Drawing

project-03

//Sarah Choi 
//Section D
//sychoi@andrew.cmu.edu
//Project-03-Dynamic-Drawing

//spiral
var angle = 0;
var bright = 255;
var n = 0;
var m = 0;
var x = 8 * n;
var y = 8 * m;

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

function draw() {
    noStroke();
    if (mouseIsPressed) {
        bright = 255;
    }
    background(bright);
    bright = bright - 5;

    fill(255, 0, 0);
    var m = max(min(mouseX, 200), 20);
    var size = m * 200.0 / 250.0;
    rect(10 + m * 150.0 / 350.0, 400.0,
         size, size);
    fill(0, 0, 255);
    size = 200 + size;
    circle(150, 50 + m * 150 / 250.0,
         size / 2, size / 2);

    push();
    fill(0, 255, 0);
    ellipseMode(CORNER);
    var n = max(min(mouseX, 300), 200);
    var size2 = n * 200.0 / 400.0;
    ellipse(400 , size2, size2 * 2, size2 * 4);
    pop();
    
    if (mouseIsPressed) {
        fill(255, 255, 0);
        noStroke();
        strokeWeight(5);
        translate(mouseX, mouseY);
        rotate(radians(10));
        triangle(100, 0, 150, 150, 175, 150);
        quad(175, 150, 150, 150, 200, 200, 250, 200);
        triangle(200, 200, 250, 200, 150, 450);
        angle = angle + 5;

        push();
        translate(mouseX, mouseY);
        rotate(radians(10));
        triangle(300, 0, 275, 150, 250, 150);
        quad(275, 150, 250, 150, 300, 200, 350, 200);
        triangle(300, 200, 350, 200, 250, 450);
        pop();
        angle = angle + 5;

        push();
        translate(mouseX, mouseY);
        rotate(radians(10));
        triangle(25, 0, 0, 50, -25, 50);
        quad(0, 50, -25, 50, 45, 100, 75, 100);
        triangle(45, 100, 75, 100, 25, 250);
        pop();
        angle = angle + 5;
    }

    if (x <= width) {
        n += 1;
        bezier(x+2, y+2, x, y+6, x+2, y+8, x+4, y+6, x+2, y+2);
    }
    else { 
        m += 1;
        bezier(x+2, y+2, x, y+6, x+2, y+8, x+4, y+6, x+2, y+2);
    }
}

I was inspired by the weather. After playing around, I was able to come up with the code where when the mouse is pressed, the background inversed and slowly went back to normal. This reminded me of a flash of lightning, which is what I wanted to convey in my project.