Author: minjaej@andrew.cmu.edu

Minjae Jeong-Project-07

sketch

//Minjae Jeong
//Section B
//minjaej@andrew.cmu.edu
//Project-07



function setup() {
    createCanvas(480, 480);
    background('black');
}

function draw() {
    push();// draw in the middle
    translate(width / 2, height / 2);
    drawHypotrochoid();
    pop();
}

//Equations from http://mathworld.wolfram.com/Hypotrochoid.html
 function drawHypotrochoid() {
    var x;
    var y;
    var a1 = mouseX; //move mouse to control hypotrochoids drawing
    var a2 = mouseY;
    var h = 5;

    beginShape(); //draw hypotrochoid
    for (i = 0; i < 480; i += 5){
        var t = map(i, 0, 200, 0, width);
        x = (a1- a2) * cos(t) + h * cos(t * (a1 - a2) / a2);
        y = (a1- a2) * sin(t) - h * sin(t * (a1 - a2) / a2);
        vertex(x, y);
    }
    endShape();



}

This simple looking black and white drawing with hypotrochoids attracted me more than other colorful tries in many reasons. First of all, the first impression is very wild, and simple. With the mouse cursor starting at the middle of the canvas (240, 240), the canvas starts black, and creates white spaces as the mouse moves. The fun part is, the background will never be pitch black once you move your mouse.

The mouse movement is sensitive, the drawing can change in many ways according to the user control. Although it can’t go full black unless refreshing the page, the drawing can go all-white which can reset the drawing.

Minjae Jeong-LO-06

http://www.chrisharrison.net/index.php/Visualizations/ColorFlower

I was in Chris Harrison’s class, designing human centered software, last semester and he does many interesting and innovative projects that I find very valuable. One of my favorite information visualization project he did is the “color flower”, because even with such large amount of data, the visualization of the data is really easy to understand, and also the patterns and position of colors really create a theme that fits well with color. Chris is a very brilliant engineer and designer, that I think there are many things we can learn from him in both technical and design thinking process.

Minjae Jeong-project-06-abstract-clock

sketch

//Minjae Jeong
//Section B
//minjaej@andrew.cmu.edu
//project-06



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

function draw() {
    clear();
    var H = hour(); //Hours
    var M = minute(); //Minutes
    var S = second(); //Seconds
    background(0);

    push(); //orbits
    translate(width / 2, height / 2);
    stroke('white');
    strokeWeight(0.5);
    noFill();
    ellipse(0, 0, 100, 100); //inner orbit (seconds)
    ellipse(0, 0, 250, 250); //outer orbit (minutes)
    pop();

    push(); //Seconds
    translate(width / 2, height / 2);
    fill(255, 153, 255);
    rotate(TWO_PI * (S - 15) / 60); //starts at 0 seconds
    ellipse(50, 0, 30, 30);
    pop();

    push(); //Minutes
    translate(width / 2, height / 2);
    fill(102, 255, 102);
    rotate(TWO_PI * (M - 15) / 60); //starts at 0 minutes
    ellipse(125, 0, 45, 45);
    pop();

    translate(width / 2, height / 2);//Outer planets (Hours)
    var hours = H >= 12 ? H - 12 : H; //If H >= 12, subtract 12 from H to make 12hr clock
    for (i = 0; i < 12; i++) {
        push();
        rotate(TWO_PI * (i - 3) / 12);
        if (i == hours) {
        fill('yellow'); //fill yellow for current time
        }
        else {
        fill(51, 153, 255);
        }
        ellipse(195, 0, 50, 50);
        pop();
    }


}

I got my motivation while watching my friend playing a video game, and I designed my clock with space theme. With 12 circles (planets) that represent each hour, I made the planet change to yellow for current hour. Then I made two planets rotating around their orbits according to minutes and seconds.

Minjae Jeong-Looking Outwards-06

I found the installation by John Cage in Kettle’s Yard gallery in Cambridge as very interesting art using randomness.

https://www.facebook.com/pg/kettlesyard/photos/?tab=album&album_id=436476306159

John Cage: Every Day is a Good Day

The randomness used in his installation was computer generated random coordinates, and Cage hung up the pictures on the generated coordinates, and reinstalling them according to the newly generated coordinates. When we integrate art with technology, there are many more ways that we can get creative. I thought the creative process of art is to think what to draw, but another creative process to think is what to draw with.

Minjae Jeong-project-05

sketch

//Minjae Jeong
//Section B
//minjaej@andrew.cmu.edu
//Project-05



function setup() {
    createCanvas(350, 350);
    background(0);
    stroke(255);
}

function draw() {
    stroke(255);
    for (i = 0; i < 4; i++) { //Xs
        for (j = 0; j < 4; j++) {
            var x1 = 45 + i * 80;
            var x2 = 65 + i * 80;
            var y1 = 15 + j * 100;
            var y2 = 35 + j * 100;
            line(x1, y1, x2, y2);
            line(x2, y1, x1, y2);
        }
    }
    stroke("red");
    for (i = 0; i < 3; i++){ //circles
        for (j = 0; j < 3; j++){
            noFill();
            var x = 95 + i * 80;
            var y = 75 + j * 100;
            ellipse(x, y, 30, 30);
        }
    }
    // big X
    stroke('red');
    line(0, 0, 350, 350);
    line(350, 0, 0, 350);

    stroke('red');
    ellipse(175, 175, 165, 165);
    stroke('white');
    ellipse(175, 175, 255, 255);
}

For this project, I got my inspiration from crosshair of a firearm. When I thought of a crosshair, it was appropriate to use crosses and circles. With black background and red elements, it provides a feeling that no one is safe.

Minjae Jeong-LO-5

https://www.pk3d.com/

The works by Piotr Kosinski attracted me more than other arts because I like cars. The artist produces many car projects, not only the exterior but also the interior of cars. At first when I looked at his works, I thought they were high quality photos of cars taken by professionals to promote the automobile. However, knowing that it is a work done with 3D computer graphics, I’m amazed how detailed it can be, and also how it perfectly represents the real vehicles. With such details, I’m sure the 3D computer graphics are useful in many ways for companies to promote and design their products.

Minjae Jeong-Project-04-StringArt

sketch

//Minjae Jeong
//Section B
//minjaej@andrew.cmu.edu
//Project-04


function setup() {
    createCanvas(400,300);
    background("black");
    strokeWeight(0.1);
}

function draw() {
    stroke(mouseX / 3, mouseY / 2, 255); //diagonal line
    line(0, 300, 400, 0);

    for (i = 0; i < 400; i += 10) { //top left purple curve
        stroke(204, 153, 255);
        line(0, 300 - i, i, 0);
    }

    for (i = 0; i < 400; i += 10) { //bottom right emerald curve
        stroke(0, 255, 255);
        line(i, 300, 400, 300 - i);
    }

    //center
    for (i = 0; i <= 200; i += 20) { //1st quadrant
        stroke(153, 102, 255);
        line(200, i - 50, 200 + i, 150);
    }
    for (i = 0; i <= 200; i += 20){ //3rd quadrant
        stroke(0, 255, 204);
        line(i, 150, 200, 150 + i);
    }
}

First it was very confusing to integrate for loops and line function to create string art. But after understanding the basics, It was a very fun and creative project to work on.

Minjae Jeong – LookingOutwards-04-SoundArt

Computational Design of Metallophone Contact sounds by Columbia engineering shows how to optimize a customized instrument with computational design and digital fabrication. For each sound spectrum, the computer optimizes the surface with isotropic scaling optimization. I found this project very interesting because computer technology will continue to develop and will produce more accuracy than ever, which means that musical instruments will eventually be more intertwined with computers. But how will technology have more influence on classical instruments than now? Until when will classical instruments remain as the most prestigious instruments?

Minjae Jeong – Project 03 – Dynamic Drawing

sketch

// Minjae Jeong
// Section B
// minjaej@andrew.cmu.edu
// Project -03

var angleX = 0;
var angleY = 0;

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

function draw() {
    background((mouseX - mouseY) / 2, mouseX - mouseY, mouseY + 17); // change colors
    r = mouseX - 300;
    g = mouseY - 200;
    b = mouseX - mouseY;

    fill(mouseX / 3, 163, 223);
    push();
    translate(mouseX / 3, mouseY / 2);
    rotate(radians(angleX));
    rect(130, 30, mouseX / 3, 50);
    angleX = angleX + 1;
    pop();

    fill(r, g, b);
    push();
    translate(mouseX / 3, mouseY / 2);
    rect(140, 50, mouseX - 200, mouseY / 3);
    pop();

    fill(81, mouseX / 2, 223);
    push();
    translate(mouseX, mouseY);
    rotate(radians(angleY));
    ellipse(300, 250, 50, mouseY / 2);
    angleY = angleY - 1;
    pop();

    fill(81, mouseX / 2, 223);
    push();
    translate(mouseX / 6, mouseY / 4);
    ellipse(300, 250, 50, mouseY);
    pop();
}

This project, I wanted to create what randomness in order would look like. It started from a thought that what if what we see everyday that seems random is actually not random?

Minjae Jeong – LO – 03

I found a project done by The Computational Fabrication Group at MIT called Knitting Skeletons: Computer-Aided Design Tool For Shaping and Patterning of Knitted Garments inspiring in a way that it is a great example of how computational fabrication can change our daily lifestyle.

http://cfg.mit.edu/content/knitting-skeletons-computer-aided-design-tool-shaping-and-patterning-knitted-garments

This work aims to allow anyone to design a simple knitted garment with much freedom. This work was very interesting that until now, I thought manufacturing garments did not have much connection with computer programming. But with such technique, it allows the designers to create their pieces with more flexibility and creativity.