kyungak-project-07-curves

sketch

//Kyunga Ko
//15104B
//kyungak@andrew.cmu.edu
//Project 07

var cenX;
var cenY;
var numO = 100;
var dis = 100;

function setup() {
    createCanvas(480, 480);
    cenX = (width / 2);
    cenY = (height / 2);
}

function draw() {
    background(0);

    for (var i = 0; i < numO; i++) {

        //constraining mouseX range + mouseX changes size of posX & posY
        var m = map(mouseX,0,480,0,100); 
        var control = (m+10);

        //framerate changes according to mouseY
        var frame = (frameCount*i)/mouseY;

        //position X + circular movement
        var posX = cenX + control * cos(radians(30 * i + frame)); 

        //position Y + circular movement
        var posY = cenY + control * sin(radians(30 * i + frame));

        //for loop of ellipses
        strokeWeight(1);
        noFill();
        stroke(255,255,255,100);
        ellipse(posX,posX,posY,posY); 

    }

}

For this project, I wanted to make a series of translucent ellipses that continuously rotated. I wanted this continuous rotation to illusion the individual objects to be seen as a whole. Although the result didn’t yield a perfectly symmetric object to the traditional X and Y line, it is still partly symmetric to the y=x line. When the mouseX moves across the canvas, the object gets bigger. When mouseY moves, the frame rate changes. The result turned out to be much more fascinating than I thought. It was a last minute decision to give a variation to frameCount, and I am very glad I did it. The aesthetics were very satisfying. Although figuring out the sin and cosine rules were a bit challenging, I feel like I learned a lot by completing this project.

kyungak-lookingoutwards-07

(Simon Russell, Audio Geometry: Circles Within Circles, 2016)

Simon Russell is an artist that explores the relationship between sound and shape. He utilizes the program “Houdini” to create and earn audio files produced by collusions of f-curves. Most sounds are created through 3D geometric shapes, and their heights differentiate the pitch of the sounds. After sounds are created in Houdini, they are then exported to Cinema 4D. Additional geometric shapes are rendered afterwards to create visuals that go with the sounds. This project is fascinating because the sound files and the geometric shapes are original. The sound comes from randomly colliding set of geometric shapes, and the sound in return produces a new representing set of geometric shapes. The give and take relationship of these factors seemed very new and interesting to me. The visuals were also very aesthetically pleasing, which is also a plus in terms of artistic sensibilities.

kyungak-project-06-abstract-clock

sketch

//Kyunga Ko
//15104B
//kyungak@andrew.cmu.edu
//Project 06

var ellcenx = 85;
var ellceny = 100;
var dia = 140;

function setup() {
    createCanvas(480, 200);
    angleMode(DEGREES);
    noStroke();
}

function draw() {

    background(213,158,153); //pink background

    var h = hour();
    var m = minute();
    var s = second();

    var mappedH = map(h, 0,23, 0,255);
    var mappedM = map(m, 0,59, 0,255);
    var mappedS = map(s, 0,59, 0,255);

    //donut base
    fill(195,132,46); //donut brown
    ellipse(ellcenx,ellceny,dia,dia); //left donut base
    ellipse(ellcenx+155,ellceny,dia,dia); //middle donut base
    ellipse(width-ellcenx,ellceny,dia,dia); //right donut base

    noStroke();
    //chocolate filling on left donut
    //color changes according to hours (blue - pink)
    fill(mappedH,100,150); 
    beginShape();
    for (var a = 0; a < 360; a += 40) {
        let x = 60 * sin(a+1) + ellcenx;
        let y = 60 * cos(a+1) + ellceny;
        vertex(x,y);
    }
    endShape(CLOSE);

    //chocolate filling on middle donut
    //color changes according to minutes (red - yellow)
    fill(200,mappedM,50); 
    beginShape();
    for (var a = 0; a < 360; a += 40) {
        let x = 60 * sin(a+1) + ellcenx+155;
        let y = 60 * cos(a+1) + ellceny;
        vertex(x,y);
    }
    endShape(CLOSE);

    //chocolate filling on right donut
    //color changes according to seconds (brown - purple)
    fill(100,50,mappedS); 
    beginShape();
    for (var a = 0; a < 360; a += 40) {
        let x = 60 * sin(a+1) + width-ellcenx;
        let y = 60 * cos(a+1) + ellceny;
        vertex(x,y);
    }
    endShape(CLOSE);

    //donut hole
    fill(213,158,153);
    ellipse(ellcenx,ellceny,dia-100,dia-100); //left donut hole
    ellipse(ellcenx+155,ellceny,dia-100,dia-100); //middle donut hole
    ellipse(width-ellcenx,ellceny,dia-100,dia-100); //right donut hole

    //left donut sprinkle
    fill(250,233,3);
    rect(ellcenx-30,ellceny-30,3,7);
    rect(ellcenx-38,ellceny-10,7,3);
    rect(ellcenx-10,ellceny+30,3,7);
    rect(ellcenx+20,ellceny-40,7,3);
    rect(ellcenx+30,ellceny+35,3,7);
    rect(ellcenx-30,ellceny+20,7,3);
    rect(ellcenx,ellceny-40,3,7);
    rect(ellcenx+30,ellceny-20,7,3);
    rect(ellcenx+40,ellceny+10,7,3);
    rect(ellcenx+10,ellceny+30,7,3);
    rect(ellcenx-40,ellceny+10,3,7);

    //middle donut sprinkle
    fill(255);
    rect(ellcenx-30+155,ellceny-30,3,7);
    rect(ellcenx-38+155,ellceny-10,7,3);
    rect(ellcenx-10+155,ellceny+30,3,7);
    rect(ellcenx+20+155,ellceny-40,7,3);
    rect(ellcenx+30+155,ellceny+35,3,7);
    rect(ellcenx-30+155,ellceny+20,7,3);
    rect(ellcenx+155,ellceny-40,3,7);
    rect(ellcenx+30+155,ellceny-20,7,3);
    rect(ellcenx+40+155,ellceny+10,7,3);
    rect(ellcenx+10+155,ellceny+30,7,3);
    rect(ellcenx-40+155,ellceny+10,3,7);

    //right donut sprinkle
    fill(255,145,0);
    rect(width-ellcenx-30,ellceny-30,3,7);
    rect(width-ellcenx-38,ellceny-10,7,3);
    rect(width-ellcenx-10,ellceny+30,3,7);
    rect(width-ellcenx+20,ellceny-40,7,3);
    rect(width-ellcenx+30,ellceny+35,3,7);
    rect(width-ellcenx-30,ellceny+20,7,3);
    rect(width-ellcenx,ellceny-40,3,7);
    rect(width-ellcenx+30,ellceny-20,7,3);
    rect(width-ellcenx+40,ellceny+10,7,3);
    rect(width-ellcenx+10,ellceny+30,7,3);
    rect(width-ellcenx-40,ellceny+10,3,7);

    fill(0);
    textSize(10);
    text( h + " hour(s) " + m + " minute(s) " + s + " second(s) ", 20,20);
}





For this project, I wanted to make three donuts that each represented hours, minutes, and seconds of time. Instead of tallying the time changes with visual elements, I wanted to express it through color. For me, using color meant taking more of an abstract approach to time, which is always expressed as exact numbers. By letting time gradually alter the icing color of the donut, I wanted the viewers to not be able to tell the time in a glance but to feel the time tick and change. Because hours and minutes don’t go by so quickly, I put a reference on the top to let people know that the clock is working. But by paying attention to the color changes, one can easily tell that the clock is doing its job, but in a unique way.

kyungak-lookingoutwards-06

(Bogdan Soban, Fire valley, http://ieeexplore.ieee.org/document/1683685/?reason=concurrency)

Soban is a generative artist that experiments with different computer programs to make algorithmic art. His initial inspirations came from his admiration of machines. He deeply respected the machines’ capability to process things better than humans and therefore wanted to gift them creativity. Utilizing the advantage of algorithmic programming, Soban started to create these randomized art.

To make this “Fire Valley” piece, Soban used solar systems to disturb the generative algorithms in his program. He wanted to give more randomization to the piece in order to truly transform the solar energy into his artwork. I admire Soban’s choice of algorithm. It is unusual to actually bring in the source of what he wants to depict to govern the artwork. In this case, solar energy successfully gave the product life. His passion is very much respected.

kyungak-project-05-wallpaper

sketch

//Kyunga Ko
//15104B
//kyungak@andrew.cmu.edu
//Project-05

var rows = 8;
var collums = 8;
var cirdia = 85;
var disX = 60;
var disY = 60;
var disX2 = 30;
var disY2 = 30;

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

function draw() {
    bloomingbackground();
}

function bloomingbackground() {
    background(255);
    for (var r=0; r<=rows; r++) {
        for (var c=0; c<=collums; c++) {

            if ((r+c)%2 == 0) {
                fill(135,47,40,50);
            } 

            else {
                fill(240,177,173,100);
            }
            //creates flower shaped pedals and the star shaped background
            ellipse(disX*c,disY*r,cirdia,cirdia); //overlap of bigger ellipse
        }

    }

    for (var r=1; r<=15; r++) {
        for (var c=1; c<=15; c++) {

            if((r+c)%2 == 0 & r%2 == 1) { 
                fill(255,255,255,200);
                noStroke();
                ellipse(disX2*r,disY2*c,20,20); // white center of the flowers

                strokeWeight(2);
                stroke(255,255,255,100);
                line(disX2*r,disY2*c-20,disX2*r,disY2*c-10); //upper pedal line
                line(disX2*r,disY2*c+10,disX2*r,disY2*c+20); //lower pedal line
                line(disX2*r-20,disY2*c,disX2*r-10,disY2*c); //left pedal line
                line(disX2*r+10,disY2*c,disX2*r+20,disY2*c); //right pedal line
            }
        }
    }

    noLoop();
}

The theme of this wallpaper is blooming flowers. I created pedals by playing with the transparency of the for looped ellipses. The overlapping parts became more saturated than the background and thus looked like pedals from the screen. I then added white pedal marks on each pedals to emphasize the flowers over the pink and brownish background. The results were satisfying and the process allowed me to thoroughly practice the for loop function once again. It was fun.

kyungak-lookingoutwards-05

https://vimeo.com/234677070

(Timo Lenzen, Dancing High-Rise, 2017)

Lenzen is a graphic designer known for producing simple but eye-catching designs. “Dancing High-Rise” is also one of the simple but aesthetically pleasing works of his. This animation was made to celebrate the Chinese New Year in 2017 and was installed on one of the tallest buildings at shanghai. I particularly enjoy his style because it is once again simple, but rich with meaning. I love the way he manipulates the abstract and architectural forms to produce something that is so uncomplicated yet unique. The designs are easily approachable but also new in their own ways. I am unsure of the programs he used to make this animation as it was not specified in his website. Overall, his works are very satisfying to watch.

kyungak-project-04-string-art

sketch

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

function draw() {
    background(95, 138, 128);

    var xpt1; //starting x coordinate
    var ypt1; //starting y coordinate   

//background blue lines
    strokeWeight(1);
    stroke(45,72,94,100);
    
    for (var xpt1 = 0; xpt1 < 30; xpt1 += 1) {
        line(0,10*xpt1,50*xpt1,300); //bottom grid background
        line(399,10*xpt1,20*xpt1,1); //top grid background
    }

//thick transparent blue lines 
    strokeWeight(7);                           
    stroke(82, 88, 135,130);

    for (var xpt1 = 0; xpt1 < 250; xpt1+=25) {      
        var ypt1 = 200;
        line(130, 50, xpt1, ypt1); //starting from top right
        line(130,250,xpt1,ypt1); //starting from bottom right

    }

//thin brown line inside the blue lines
    strokeWeight(1.5);
    stroke(140, 126, 15);
    for (var xpt1 = 0; xpt1 < 250; xpt1+=25) {      
        var ypt1 = 200;
        line(130, 50, xpt1, ypt1); //starting from top right
        line(130,250,xpt1,ypt1);

    }

//think transparent red lines
    strokeWeight(10);
    stroke(140,69,94,130);

    for (var ypt1 = 0; ypt1 < 300; ypt1+=40) {
        var xpt1 = mouseX;
        line(230,200,xpt1,ypt1+10);
    }

//turquoise lines
    strokeWeight(2);
    stroke(111,138,95,150);

    for (var ypt1 = 0; ypt1 < 300; ypt1+=20) {
        var xpt1 = mouseX;
        line(227,200,xpt1,ypt1+10)

    }

//eyebrow + eyes
    strokeWeight(10);
    stroke(0,0,0,150);
    line(40,120,80,130); //eyebrow
    ellipse(50,150,10,10); //outer eye
    stroke(255);
    ellipse(50,150,2,2);//inner eye

}

I was able to further practice the function “for loop” to create the abstract lines in the background. I then used the template to make the body and the moving tail of the fish. I thought the project turned out to be interesting, but not as aesthetically pleasing as I wanted it to be.

kyungak-lookingoutwards-04

(Anders Lind, LINES, 2016)

LINES is an interactive instrument that is electrically programmed to trigger sounds. It uses the program Max/MSP to convert physical signals into multiple sound outputs that are then combined to creatively compose a song. To be specific, when the signal is detected, the distance sensors primarily send the stimulus to the arduino board which then is sent to the Max/MSP program to produce physical sounds.

I found this project extra fascinating because it allows a single participator to play the “LINES” instrument as if multiple people are cooperating. By simply placing the metal stimulator on the lines, the participator can easily make chords without having to constantly touch the lines. Without prior knowledge to play the instrument, one could easily play around and quickly learn to utilize this instrument. Also, the sounds that are produced through the “LINES” is very unique and interesting.

kyungak-project-03-dynamic-drawing

sketch

//Kyunga Ko
//15104B
//kyungak@andrew.cmu.edu
//Project-03

var angle = 0;

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

}

function draw() {
    background(mouseX-70,mouseY-30,mouseY);

    //WHen the mouse is on the right side of the canvas

    if (mouseX > 250) {

        var length = max(min(mouseX,640),0);
        var size = length * 600 / 640;
        
        //outer left white eye + black boarder 
        fill(255);
        strokeWeight(10);
        ellipse(100 + length,170,size,size);

        //inner left black iris
        fill(0);
        ellipse(100 + length,170,100,100);

        //inner left grey pupil
        fill(70);
        ellipse(100 + length,170,50,50);

        //outer right white eye + black baorder
        fill(255);
        strokeWeight(10);
        ellipse(500 - length,170,size-100,size-100);

        //inner right black iris
        fill(0);
        ellipse(500 - length,170,size-200,size-200);

        //inner right grey pupil
        fill(70);
        ellipse(500 - length,170,size-250,size-250);

        //mouth
        fill(209,65,65);
        triangle(250,330,340,330,300,380);

    }

    //When the mouse is on the left side of the canvas

    if (mouseX < 250) {

    //green mouth
    strokeWeight(10);
    fill(71,135,100);
    ellipse(mouseX,mouseY,100,random(0,30));

     //green eyes
     fill(71,135,100);
    ellipse(mouseX-50,mouseY-50,30,30);
    ellipse(mouseX+50,mouseY-50,30,30);
    sizeX = 50;
 
    //red mouth
    fill(198,41,88);
    ellipse(mouseX+100,mouseY+200,100,random(0,30));

    //red eyes
    fill(198,41,88);
    ellipse(mouseX+50,mouseY+150,30,30);
    ellipse(mouseX+150,mouseY+150,30,30);
        
    //blue mouth
    fill(42,149,199);
    ellipse(mouseX+200,mouseY,100,random(0,30));

    //blue eyes
    fill(42,149,199);
    ellipse(mouseX+150,mouseY-50,30,30);
    ellipse(mouseX+250,mouseY-50,30,30);

    //line
    push();
    translate(mouseX,mouseY);
    rotate(radians(angle));
    rectMode(CENTER);
    line(mouseX,mouseY,100,100);
    fill(30,60,100);
    rect(mouseX+50, mouseY+50, 50, 50);
    fill(100,240,245);
    rect(mouseX+70, mouseY+150, 70, 70);
    text("BABABA", mouseX+30, mouseY+30);
    pop();
    angle = angle + 0.5;

    }

}


For this project, I wanted to divide the drawing into two parts: left and right. I tried to integrate two different parts into a single painting and continue with the “face” theme that we have been practicing in our previous works. While working on this project, I was able to learn from my mistakes and overcome problems. Although stressful, I believe I can now understand the language better.

 

(The picture is straight up on my desktop, but it turns around like this as soon as I attach it…)

kyungak-lookingoutwards-03

(Eric van Straaten, Groomer , 2012)

Pictures from: http://marbellamarbella.es/2016-02-06/world-fine-art-professionals-and-their-key-pieces-70-eric-van-straaten/ and http://imgur.com/gallery/45CapMf

Link (#5 on the list): https://3dprint.com/34900/10-cool-3d-printed-artworks/

Eric’s art takes the advantage of 3D printers to create surreal models of human figures. His work ranges from enlarged body parts to miniature figures of human, with most of them being young girls. Through his series of work, Eric tries to express aging and especially his transition from being young to old. Eric calls the above 3D printed sculpture as a self-portrait. He wanted to express the worst stage of a man’s life that he going through at this moment.

Looking at this project, I really admire the quality of the 3D printed result. It is already amazing to look at the details through the screen, and I wonder what it would be like to look at it in real life. Although he hasn’t specified which 3D printer system he uses, he has expressed his love for digital art for being able to make mistakes, undo, and fix.