Author: Min Ji Kim Kim

Min Ji Kim Kim – Project 02 – Variable-Face

sketch

/*
Min Ji Kim Kim
Section-A
mkimkim@andrew.cmu.edu
Project-02
*/

//variables
var mouthHeight = 330;
var mouthWidth = 80;
var irisSize = 25;
var pupilSize = 12;
var headColor = 231;
var overallsColor = 130;
var eyeNumber = 2;


function setup() {
    createCanvas(640, 480);
    background(210, 210, 255);
}

function draw() {
    noStroke();
    //head
    fill(254, headColor, 81);
    rect(210, 150, 220, 300, 100, 100, 0, 0);

    //goggle band
    fill(47, 47, 41);
    rect(210, 235, 220, 20);

    //Number of eyes
    if (eyeNumber >= 2){
        //two eyes
        //goggles
        fill(201, 208, 202);
        circle(280, 245, 90);
        circle(360, 245, 90);
        //eyes
        fill(255);
        circle(280, 245, 70);
        circle(360, 245, 70);
        //iris
        fill(102, 45, 19);
        circle(280, 245, irisSize);
        circle(360, 245, irisSize);
        //pupils
        fill(0);
        circle(280, 245, pupilSize);
        circle(360, 245, pupilSize);

    } else {
        //one eye
        //goggle
        fill(201, 208, 202);
        circle(320, 245, 90);
        //eye
        fill(255);
        circle(320, 245, 70);
        //iris
        fill(102, 45, 19);
        circle(320, 245, irisSize);
        //pupil
        fill(0);
        circle(320, 245, pupilSize);

    }

    //overalls
    strokeWeight(1.5);
    stroke(172, 121, 77);
    fill(53, 96, overallsColor);
    rect(210, 400, 220, 50);

    //mouth
    fill(255);
    strokeWeight(3);
    stroke(200, 117, 0);
    arc(320, mouthHeight, mouthWidth, 80, 0, PI, CHORD);

}

function mousePressed(){
    // when the user clicks, these variables are reassigned
    // to random values within the specifed ranges.
    mouthHeight = random(300, 340);
    mouthWidth = random(30, 100);
    irisSize = random(20, 30);
    pupilSize = random(8, 16);
    headColor = random(180, 240);
    overallsColor = random(100, 250);
    eyeNumber = random(1,3);

}

I had so much fun doing the project this week. The hardest part was trying to figure out how to use the if statement to get the single or double eye as well as understanding how to manipulate variables for the mousePressed function.

Min Ji Kim Kim – Looking Outwards – 02

Quantum Fluctuations video visualizing the different events of proton collision. 

Quantum Fluctuations is a generative art piece created by digital artist Markos Kay in 2016. Working together with scientists at the CERN research institute in Geneva, Kay took the hard to understand quantum world, and used art and technology to visually display proton collision. Utilizing particle simulations from the laboratory, Kay was able to virtually paint the different stages involved in this complicated process.

Visual representation of Hadron Decay, the last stage of proton collision.

I was attracted to this art piece because of the chaotic, complex yet beautiful combination of motion, colors and sound. These different components come together to create a synergistic effect, really reflecting and mirroring the intricate process of proton collision. I really admire how Kay was able to use generative art to visualize what otherwise is not detectable to the human eye, and do so in a very aesthetically pleasing way. Looking at this artwork made me feel like I was inside the proton collision itself.

Min Ji Kim Kim – Project 01 – Face

sketch

/*
Min Ji Kim Kim
Section A
mkimkim@andrew.cmu.edu
Project-01
*/

function setup() {
    createCanvas(600,600);
    background(103,186,178);
}

function draw() {
    noStroke();
    //hair
    fill(60,36,36);
    rect(152,90,285,400,150,150,0,0);
    
    //shirt
    fill(255);
    rect(170,470,250,107,50,50,0,0);

    //neck
    fill(225,175,160);
    rect(266,400,65,105,30);

    //head
    fill(235,190,180);
    rect(170,130,250,315,200);

    //nose
    fill(190,130,120);
    ellipse(300,320,4,20);

    //mouth
    fill(250,137,143);
    arc(310,350,100,135,0,HALF_PI+QUARTER_PI,CHORD);

    //glasses
    fill(90,0,24);
    ellipse(250,260,75,70);
    ellipse(350,260,75,70);

    fill(235,190,180);
    ellipse(250,260,65,60);
    ellipse(350,260,65,60);

    //glasses bridge
    fill(90,0,24);
    rect(287,255,26,8);

    //eyes
    fill(0);
    ellipse(255,260,10,18);
    fill(0);
    ellipse(345,260,10,18);

    //eyebrows
    fill(60,36,36);
    triangle(210,215,225,205,287,215);
    triangle(312,215,375,205,390,215);

    //bangs
    fill(60,36,36);
    arc(320,151,170,70,0,PI+QUARTER_PI,OPEN);
    arc(154,119,180,220,0,HALF_PI,OPEN);
    }

This was my first time coding anything and although it was challenging at first, I had fun discovering how different shapes and colors came together to make this self portrait. I particularly learned about the importance of layering elements in the right order. 

Min Ji Kim Kim – Looking Outwards – 01

A video by creator Ken Kawamoto introducing the tempescope and its functionality.

A few years ago, I discovered this video while scrolling through my Facebook feed. I was fascinated by the idea that this object could not only serve an aesthetic purpose as house decor but also a functional one to remind one, for example, to take their umbrella because it’s raining.

Tempescope is essentially a clear case that visually displays weather conditions using a custom app. You can either set your location or manually choose whatever effect you want. Creator Ken Kawamoto built the first prototype in 2012 using the Objective-C and C++ programs after wanting to experience the Okinawa weather from his living room. In 2013, he created an open source version (available on GitHub) so other people could reproduce the tempescope at home.

After receiving a lot of attention from multiple media outlets, Kawamoto recruited a team of five people to create a retail version of the prototype and a funding campaign was initiated on Indiegogo. Although it received substantial attention, the campaign ultimately did not reach its funding goal and as of now, the project seems to be at a halt with no further development plans.

You can learn more about the tempescope here.