Author: jinal2@andrew.cmu.edu

Jina Lee – Project – 02

sketch

//Jina Lee
//Section E
//jinal2@andrew.cmu.edu
//Project-02

//variables
var headW = 290;
var headH = 290;
var LeftBrow = 250;
var RightBrow = 250;
var noseW = 50;
var noseH = 50;
var mouth = 80

function setup() {
    createCanvas(480, 640);
//Random Colors
    r = random(255);
    g = random(255);
    b = random(255);
}

function draw() {
    background(80, 182, 226);
    noStroke();
//body
    noStroke();
    fill(255, 153, 153);
    ellipse(100, 600, headW * 1.5, headH * 1.5);
//head
    fill("beige");
    ellipse(240, 320, headW, headH);
//nose
    fill(190, 90, 90);
    ellipse(240, 320, noseW, noseH);
//eye whites
    fill("white");
    circle(170, 280, 60);
    circle(310, 280, 60);
//pupils
    fill(r, g, b, 127);
    circle(170, 280, 40);
    circle(310, 280, 40);
//eyebrows
    strokeWeight(20);
    stroke(180, 90, 90);
    line(140, LeftBrow, 200, RightBrow);
    line(340, LeftBrow, 280, RightBrow);
//mouth
    noFill();
    strokeWeight(10);
    arc(230, 380, mouth, mouth, PI / 7, PI);
//ear
    noStroke();
    fill("beige");
    ellipse(100, 300, 30, 40);
    noStroke();
    fill("beige");
    ellipse(380, 340, 30, 40);
}

function mousePressed() {
    var d = dist(mouseX, mouseY, 400, 400);
    if (d < 400) {
        r = random(255);
        g = random(255);
        b = random(255);
        noseW = random(20, 80);
        noseH = random(70, 100);
        headW = random(260, 300);
        headH = random(260, 300);
        LeftBrow = random(200, 250);
        RightBrow = random(200, 250);
        mouth = random(80, 100);
    }
}

When I first started this project, I wasn’t sure where to start. At first, I had a hard time understanding the codes that were used to change the drawing when your mouse clicked on it. I made multiple different iterations, because I was unable to understand the formula correctly for a while. Later, I was finally able to grasp the concept and make my face. I used primitive shapes for the face so that I could focus more on the variabilities. I tried making all the parts of the face have variability. Afterwards, I tried having variability in the eye color which I went to the p5.JS reference page to understand better.

Jina Lee – Looking Outwards 02


Robert Hodgin is an interactive director and co-founder of Rare Volumes. His project “Taxi, Taxi!” shows NYC Open Data taxi against routes created with Open Street Map. This digital installation is shown through a 3D model of New York City. This project was shown in Samsung 837 which is a three story display. He used Cinder C++.

This photo shows the digital installation that is shown in Samsung 837.

I admire how inclusive this project is. Everyone can relate to looking on their smartphone to find the fastest and shortest way to get to their destination. This digital installation can help people understand the main routes for taxis so they can decide whether it is a good idea or not to take it. In addition, because it is 3D it makes it easier to understand the map. I feel like sometimes when I am on on the Apple Maps it is difficult to read because it is flat and I can not comprehend the map as well. I understand that right now the design is only an installation, but I feel like in the future they could create for smartphones so that everyone can use. I think I have slight knowledge about the algorithm that was used to generate this work. In high school, I took Geospatial Analysis, so we would create various routes depending on the prompt with Open Street Maps. In order to do so, we had to collect data points so that it was easier to create on the software. Through that program you could create buffers, paths, and other ways of identifying data points on a map. I really enjoyed how clean and simple the design was. Usually, it feels like maps are so overwhelming with so much information, but this one didn’t.

People looking at the map.

Website Link

Jina Lee – Looking Outwards 01


https://renaudrohlinger.com

Renaud ROHLINGER is a French developer that lives in Japan who made an interactive website portfolio to help depict his experience when he traveled to Japan. The main objective of his project is to show Japanese culture. He stated on his website that he wanted to create a “cool webgl design without using Distortion and Wave effects.”

When entering the website, you see a kitten that directs you to the title then sleeps. Everything is animated so you can see the background continuously moving. Once you scroll, the kitten wakes up and walks into the background.

As the cat leads you into the background, the setting changes from black and white to color. At first, it is difficult to see where the kitten is at, but the camera zooms out so you are able to see the “world” that the kitten is in.

I really enjoyed the transitions that the designer made. Every time you scrolled to move on, there were cool transitions that helped you get immersed into the work. In addition, the interaction was extremely fun to play around with. The designer gave a backstory in the beginning of how he started. While doing so, he talked about what kind of softwares he uses. He also added that he uses an old Mac and like everyone he hates lags. His writings were very relatable which I enjoyed. He used Phaser.io, Pixi with Canas/WebGL, HowlerJS, Es6 StandarJS, Webpack. In the end he talked more about how he was able to create his portfolio. He mentions architecture, 3D optimizations and three optimizations, animations. I really thought the animations and interactions were really were integrated with each others. I would like to do something like this in the future once I am more educated about coding. Through this portfolio, I was able to see what a long and tedious process it is to create cool and interactive projects.

Jina Lee – Project – 01

Before starting this code, I made an Adobe Illustrator file. The reference made it easier for me to understand where the coordinates were. When I first started, I couldn’t mentally imagine the where the shapes were on the canvas, but as I added more elements it got easier.

This was the reference that I used when making the base of my self-portrait.

sketch

function setup() {
    //Jina Lee
    //Section E
    //jinal2@andrew.cmu.edu
    //Project-01(Self-Portrait)

    createCanvas(400, 400);
    background('rgb(46, 175, 74)');
    
    //hair
    noStroke();
    fill('rgb(61, 52, 35)');
    rect(50, 160, 80, 150);
    
    noStroke();
    fill('rgb(61, 52, 35)');
    rect(270, 160, 80, 150);
    
    noStroke();
    fill('rgb(61, 52, 35)');
    ellipse(200, 160, 300, 210);
    
    //face
    noStroke();
    fill('rgb(201, 171, 112)');
    rect(163.5, 270, 71.2, 40);
    
    noStroke();
    fill('rgb(221, 188, 115)');
    ellipse(200, 180, 250, 210);
    
    noStroke();
    fill('rgb(221, 188, 115)');
    ellipse(70, 180, 30, 40);
    
    noStroke();
    fill('rgb(221, 188, 115)');
    ellipse(330, 180, 30, 40);

    //shirt
    noStroke();
    fill('rgb(118, 185, 219)');
    arc(200, 401, 250, 200, PI, 0, CHORD);

    noStroke();
    fill('rgb(201, 171, 112)');
    arc(199, 301, 71, 65, 0, PI, OPEN);
    
    //eyes
    noStroke();
    fill('white');
    ellipse(130, 160, 60, 60);
    
    noStroke();
    fill('white');
    ellipse(275, 160, 60, 60);
    
    noStroke();
    fill('black');
    ellipse(275, 160, 30, 30);
    
    noStroke();
    fill('black');
    ellipse(130, 160, 30, 30);

    //earrings
    noStroke();
    fill('rgb(183, 183, 183)');
    arc(340, 170, 10, 10, 0, PI + QUARTER_PI, PIE);

    noStroke();
    fill('white');
    ellipse(335, 190, 5, 5);

    noFill();
    stroke('rgb(183, 183, 183)');
    strokeWeight(2);
    arc(330, 199, 10, 10, 0, PI);

    noFill();
    stroke('rgb(183, 183, 183)');
    strokeWeight(2);
    arc(70, 199, 10, 10, 0, PI);
    
    //mouth
    noStroke();
    fill('white');
    ellipse(200, 230, 50, 50);

    noStroke();
    fill('black');
    arc(200, 230, 50, 50, 0, PI, PIE);
    
    stroke('black');
    strokeWeight(4);
    line(200, 250, 200, 206.5);

    //baby hairs
    noFill();
    stroke('rgb(61, 52, 35)');
    strokeWeight(10);
    line(110, 60, 130, 80);

    noFill();
    stroke('rgb(61, 52, 35)');
    strokeWeight(10);
    line(130, 60, 130, 80);
}

function draw() {          
}