Author: rsjin@andrew.cmu.edu

Romi Jin – Looking Outwards 06

Gifpop is the art of transforming a gif into a one, printable image (i.e. a postcard). Gifpop utilizes a process called lenticular printing, which is a technology that uses lenticular lenses to create an illusion of depth through images, or to create the ability to see different images from different angles (aka a “moving” image). The company takes up to ten frames and merges them to create a single image on a card (slower gifs with fewer frames will have better resolution).



(Examples of gifpop cards.)

This process (including lenticular printing) has a lot of potential to grow into something even larger, and I was intrigued to learn what lenticular printing is and how it can be applied.

Romi Jin – Project-05-Abstract Clock

sketch

/*
Romi Jin
Section B
rsjin@andrew.cmu.edu
Project-06
*/

var hr;
var min;
var sec;

var secMap;
var minMap1;
var minMap2;
//var hrMap;

function setup() {
    createCanvas(480, 900);
    background(255, 228, 225);
    angleMode(DEGREES);

    //carrots redraw
    for(var i = 0; i < second(); i++) {
        push();
        carrots(i*(width/60));
        pop();
    }
}

function draw() {

    hr = hour();
    min = minute();
    sec = second();

    secMap = map(sec, 0, 60, 0, width);
    minMap1 = map(min, 0, 60, 50, height-100);
    minMap2 = map(min, 0, 60, 101, height-50);
    //hrMap = map(hr % 12, 0, 12, 0, height);

    push();
    balloons(minMap1);
    pop();
    push();
    bunny(minMap2);
    pop();
    push();
    carrots(secMap);
    pop();
    grass();

    //redraw canvas after one minute so the carrots begin at 0 again
    if (sec==59) {
        background(255,228,225);
        push();
        balloons(50+min+10);
        pop();
        push();
        bunny(101+min+10);
        pop();
        grass();
    }

}

function carrots(xpos) {

    translate(xpos+5, height-13);
    noStroke();

    //left stem 
    push();
    rotate(-20);
    fill(114, 173, 101);
    ellipse(2, -10, 2, 4);
    pop();

    //right stem
    push();
    rotate(20);
    fill(114, 173, 101);
    ellipse(-2, -10, 2, 4);
    pop();

    //middle stem
    fill(114, 173, 101);
    ellipse(0, -10, 3, 6);

    //carrot body
    fill(249, 181, 118);
    ellipse(0, 0, 6, 18);

}

function grass() {

    translate(2, height);
    stroke(203, 232, 189);
    strokeWeight(2);

    //vertical
    var x = 0; //spacing
    for (i = 0; i < width; i++) {
        line(i + x, 0, i + x, -15);
        x += 5; 
    }

    //diagonal
    var x = 0; //spacing
    for (i = 3; i < width; i++) {
        line(i + x, 0, i + x + 3, -15);
        x += 5; 
    }

}

function balloons(ypos) {

    var vals = [240, 220, 210, 265, 235, 255];
    var balloonD = 30;

    //strings
    push();
    stroke(0);
    strokeWeight(0.25);
    line(vals[0], ypos+17.5, width/2, ypos+100);
    line(vals[1], ypos+17.5, width/2, ypos+100);
    line(vals[2], ypos+17.5, width/2, ypos+100);
    line(vals[3], ypos+17.5, width/2, ypos+100);
    line(vals[4], ypos+17.5, width/2, ypos+100);
    line(vals[5], ypos+17.5, width/2, ypos+100);
    pop();

    //balloons
    push();
    noStroke();

    fill(255, 250, 165);
    ellipse(vals[1], ypos+10, balloonD, balloonD+5);
    fill(255, 250, 200);
    ellipse(vals[2], ypos-10, balloonD, balloonD+5);
    fill(190, 240, 235);
    ellipse(vals[3], ypos+10, balloonD-5, balloonD);
    fill(190, 250, 200);
    ellipse(vals[4], ypos-20, balloonD, balloonD+5);
    fill(190, 225, 200);
    ellipse(vals[5], ypos-15, balloonD, balloonD+5);
    fill(255, 221, 165);
    ellipse(vals[0], ypos, balloonD, balloonD+5);
    pop();

}

function bunny(ypos) {

    fill(255);
    stroke(0);
    strokeWeight(0.75);
    //right ear
    push();
    translate(width/2+4, ypos);
    rotate(10);
    ellipse(0, 0, 5, 15);
    pop();
    //left ear
    push();
    translate(width/2-4, ypos);
    rotate(30);
    ellipse(0, 0, 5, 15);
    pop();
    //tail
    ellipse(width/2-15, ypos+41, 8);
    //right foot
    push();
    translate(width/2-10, ypos+49);
    rotate(-45);
    ellipse(18, 15, 8, 12);
    pop();
    //body
    ellipse(width/2, ypos+27, 40, 50);
    //left foot
    push();
    translate(width/2-10, ypos+49);
    rotate(-45);
    arc(3, 4, 8, 12, -10, 260, OPEN);
    pop();
    //left cheek
    push();
    noStroke();
    fill(255, 228, 225);
    ellipse(width/2-7, ypos+19, 6);
    pop();
    //right cheek
    push();
    noStroke();
    fill(255, 228, 225);
    ellipse(width/2+14, ypos+18, 6);
    pop();
    //left eye
    push();
    strokeWeight(3);
    point(width/2-5, ypos+17);
    pop();
    //right eye
    push();
    strokeWeight(3);
    point(width/2+12, ypos+16);
    pop();
    //nose
    line(243, ypos+18, 244, ypos+19);
    line(244, ypos+19, 245, ypos+18);
    //left hand
    push();
    translate(width/2-10, ypos+31);
    rotate(-45);
    arc(3, 4, 6, 8, -10, 250, OPEN);
    pop();
    //right hand
    push();
    translate(width/2-10, ypos+33);
    rotate(-45);
    arc(18, 15, 6, 8, -10, 250, OPEN);
    pop();

}

For my clock, I illustrated a bunny floating down on balloons as time passes. The carrots at the bottom indicate the seconds passed, the bunny moves down as each minute passes, and the bunny resets (goes back to the top) after 12 hours. I wanted to do a lot more with this project (i.e. make the balloons different colors and disappear after each minute went by (it would begin with 60 balloons) and the bunny moving down every hour instead of ever minute), but I ran out of time and was more difficult than I thought it’d be. However, I had so much fun making this project and loved coming up with ideas to make a non-conventional clock! (also, it looks like an iPhone wallpaper I would use!!)

Romi Jin – Looking Outwards 06

Black Shoals Stock Market Planetarium is an art project in which the audience look up at a domed ceiling in which a computer projects the stock market in a system of stars and galaxies (like a planetarium). The project is presented in real-time and represents randomness in computational design in that it uses actual numbers of the stock market to deduce if, and which, stars glow, and how they move toward each other. The result of the installation is dependent on the activity of people in real life and determines how the planetarium looks at any given moment.


A visitor observing the project.

Each traded company is represented by a star, which glows as someone buys or sells a share. The stars do not stay stagnant; they drift and gather together according to the history of the company (the stronger the correspondence between two companies, the stronger the pull). Therefore, the stars can eventually form galaxies; however, they can also form black holes, in which specific stars, or companies, can be pulled into a vortex because of the collapse of a certain stock company. The stars start out randomly distributed at the beginning of the project but move toward each other and form ever-changing constellations, galaxies, and interesting outlines.


Two images produced by the planetarium at random moments of time.

Romi Jin – Looking Outwards 05

Four researchers at Aalto University present their input on “occluder simplification”, an algorithm they have created that requires very few inputs (does not need to be a perfectly formulated, closed mesh) and easy to implement. In the example below, the simplified triangular shapes or polygons (occluders) of a hairball and bunny.


(example of occluder simplification from triangles)

When applied to larger, more complex shapes, this process could be useful. It is interesting to think about what can be done and what can be advanced in the 3D computer graphics field. In the video below, a before and after is shown, and how much this process simplifies the input, decreasing the input to as low as 2% of the objects.

Video Player

(The algorithmic process utilized in a 3D route of a city.)

Romi Jin – Project-05-Wallpaper

sketch

/*
Romi Jin
Section B
rsjin@andrew.cmu.edu
Project-05
*/

//var x = 0;
//var y = 0;

var faceWidth = 40;
var earWidth = 15;
var earHeight = 40;
var bodyWidth = 40;
var bodyHeight = 60;
var tailWidth = 20;
var body2w = 50;
var body2h = 40;
var eyew = 3;
var eyeh = 5.5;
var nosew = 6;
var noseh = 5;

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

function draw() {
    background(252,236,235);
    bunny();

    for (var x = 35; x < width-35; x += 75) {
        for (var y = 135; y < height; y += 150) {
            bunny(x,y);
        }
    }

    noLoop();
}
 
function bunny(x,y) {


    //left ear
    stroke(128,128,128);
    strokeWeight(.2);
    fill(255);
    ellipse(x,y-100,earWidth,earHeight);
 
    //right ear 
    stroke(128,128,128);
    strokeWeight(.2);
    fill(255);
    ellipse(x-10,y-95,earWidth,earHeight);

    //body
    stroke(128,128,128);
    strokeWeight(.2);
    fill(255);
    ellipse(x,y-30,body2w,body2h/2);

    stroke(128,128,128);
    strokeWeight(.2);
    fill(255);
    ellipse(x,y-40,bodyWidth,bodyHeight);

    //tail
    stroke(128,128,128);
    strokeWeight(.2);
    fill(255);
    ellipse(x-10,y-15,tailWidth,tailWidth);

    //face
    stroke(128,128,128);
    strokeWeight(.2);
    fill(255); 
    ellipse(x,y-75,faceWidth,faceWidth);

    //eye
    noStroke();
    fill(0);
    ellipse(x-10,y-80,eyew,eyeh);

    //nose
    noStroke();
    fill(237,171,166);
    ellipse(x+14,y-75,nosew,noseh);

}

For this project, I wanted to make a simple wallpaper of bunnies! I discovered that this project was easier than I thought it would be. I simply made a new function called “bunny” and placed all the features of the bunny in it, then referenced that function in the for loop (in the draw function).

Romi Jin – Looking Outwards 04

The Infinity Machine consists of about 150 suspended, antique mirrors that has three variables — rotation, lighting, and sound, all constantly changing. Created by Janet Cardiff and George Bures, this installation is their first large scale mobile that essentially acts as a contemplation of “space, time and consciousness”.

Infinity Machine Installation View
“Infinity Machine Installation View”

These rotating (orbital) mirrors are illuminated by lights that consistently change, casting interesting shadows and a beautiful nebula form. The sounds that also accompany it are described as “mysterious” and “mesmerizing”, initially discovered on a CD made for relaxation. The sounds consist of recordings of the solar system and are played throughout the exhibition. Specifically, they reflect each of the planets (i.e. Uranus = bells, Earth = forest at night, etc). This is interesting to me because everything connects so beautifully and works so well in unison. In addition, I have never thought of sound as part of the computational fabrication realm, but this project has inspired me to research more about it.

Romi Jin – Project-04-String-Art-Section B

sketch

/*
Romi Jin
Section B
rsjin@andrew.cmu.edu
Project-04
*/

// spacing variables
var space1 = 5; 
var space2 = .01;

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

function draw() {

// middle mouse strokes
    stroke(180);
    strokeWeight(0.1);
    line(mouseX, height, 0, mouseY);


// bottom left
    for (var y = 0; y < width; y += space1) {
        stroke(245,195,194);
        strokeWeight(0.1);
        line(y, height, 0, y);
    }

// top right
    for (var z = 0; z < width; z += space1) {
        stroke(253,185,200);
        strokeWeight(0.1);
        line(z, 0, width, z);
    }

// top left
    for (var a = 0; a < 10; a +=space2) {
        stroke(254,127,156);
        strokeWeight(0.1);
        push();
        var x = lerp(width, 0, a);
        var y = 0;
        var x2 = 0;
        var y2 = lerp(0, height, a);
        line(x, y, x2, y2);
        pop();
    }

// bottom right
    for (var b = 0; b < 10; b += space2) {
        stroke(253,171,159);
        strokeWeight(0.1);
        push();
        var x = width;
        var y = lerp(0, height, b);
        var x2 = lerp(width, 0, b);
        var y2 = height;
        line(x, y, x2, y2);
        pop();
    }



}

I wanted to make a several pink curves at each corner and interactive strokes in the middle (if you move your mouse over the image, it will draw gray lines in the center of the four curves).

Romi Jin – Looking Outwards 03

Having taken an architecture course about computation fabrication (Fundamentals of Computational Design), I have some familiarity in this field. After researching a few examples, HG’s Opening Chronometry interested me. In the class I took, I created many parametric pavilions similar to that of HG Architecture’s. The process is essentially translating a shell into a larger shell — placing double-layered cones into a mathematical pattern created using Grasshopper.
Grasshopper-created parametric system of units to assemble a pavilion.
(above) Grasshopper-created parametric system of units to assemble a pavilion.

It is interesting to think how a small-scale structure built using simple units can potentially be transformed into a large-scale home or building using a modular system. Parametric systems use a strict logic to create its design; however, this logic can be flexibly manipulated into visually different forms for different purposes as well. Computational fabrication can also be used to help build cheap, sustainable and easy-to-assemble homes, as well as speed up the process and lessen the effort placed into the whole process of construction.

Romi Jin – Project-03-Dynamic-Drawing-Section B

romi-project03

/*
Romi Jin
Section B
rsjin@andrew.cmu.edu
Project-03
*/


var r = 252;
var g = 236;
var b = 235;

var faceWidth = 40;
var earWidth = 15;
var earHeight = 40;
var bodyWidth = 40;
var bodyHeight = 60;
var tailWidth = 20;
var body2w = 50;
var body2h = 40;
var eyew = 3;
var eyeh = 5.5;
var nosew = 6;
var noseh = 5;

var carrot = -150;

function setup() {
    createCanvas(640, 480);
}
 
function draw() {
    background(r,g,b);
    /*if (mouseX>width/2) {
        r=255;
        g=213;
        b=210;
        */
   if (mouseX > 0 & mouseX < width){
        r = 252 - mouseX/30;
        g = 236 - mouseX/30;
        b = 235 + mouseX/10;
    }

     //carrots
    if (mouseX > width/4) {
        carrot ++;
        if (carrot > height-175) {
        carrot = height-175;
        }

    } else {
        carrot =- 150;
    }
    
    stroke(252,194,149);
    strokeWeight(3);
    line(width/2,carrot+10,width/2,carrot+40);
    line(360,carrot-50,360,carrot-20);
    line(360,carrot+10,360,carrot+40);
    line(360,carrot+60,360,carrot+90);
    line(380,carrot-40,380,carrot-10);
    line(380,carrot+20,380,carrot+50);
    line(400,carrot+5,400,carrot+35);
    line(400,carrot+70,400,carrot+100);
    line(420,carrot+50,420,carrot+80);
    line(420,carrot-50,420,carrot-20);
    line(440,carrot+40,440,carrot+70);
    line(440,carrot-20,440,carrot+10);
    line(460,carrot+70,460,carrot+100);
    line(460,carrot+20,460,carrot+50);
    line(480,carrot+30,480,carrot+70);
    line(480,carrot+90,480,carrot+120);
    line(500,carrot+10,500,carrot+40);
    line(500,carrot-40,500,carrot-10);
    line(520,carrot+20,520,carrot+50);
    line(520,carrot+90,520,carrot+120);
    line(540,carrot-50,540,carrot-20);
    line(540,carrot+60,540,carrot+90);
    line(560,carrot-70,560,carrot-40);
    line(560,carrot+80,560,carrot+110);
    line(580,carrot+30,580,carrot+60);
    line(580,carrot-40,580,carrot-10);
    line(600,carrot+70,600,carrot+100);
    line(600,carrot+10,600,carrot+40);
    line(620,carrot+60,620,carrot+90);
    line(620,carrot-20,620,carrot+10);


    //bunny

    //bigger
    if (mouseX > width/2) {
        faceWidth ++ & 
        earWidth ++ && 
        earHeight ++ && 
        bodyWidth ++ && 
        bodyHeight ++ && 
        tailWidth ++ && 
        body2w ++ && 
        body2h ++ &&
        eyew ++ &&
        eyeh ++ &&
        nosew ++ &&
        noseh ++;

    }

    if (faceWidth > 45) {
        faceWidth = 45;
    }
    if (earWidth > 20) {
        earWidth = 20;
    }
    if (earHeight > 45) {
        earHeight = 45;
    }
    if (bodyWidth > 45) {
        bodyWidth = 45;
    }
    if (bodyHeight > 65) {
        bodyHeight = 65;
    }
    if (tailWidth > 25) {
        tailWidth = 25;
    }
    if (body2w > 55) {
        body2w = 55;
    }
    if (body2h > 45) {
        body2h = 45;
    }
    if (body2h > 45) {
        body2h = 45;
    }
    if (eyew > 3.5) {
        eyew = 3.5;
    }
    if (eyeh > 5.5) {
        eyeh = 5.5;
    }
    if (nosew > 6) {
        nosew = 6;
    }
    if (noseh > 5) {
        noseh = 5;
    }

    //smaller
    if (mouseX < width/2) {
        faceWidth-- & 
        earWidth-- && 
        earHeight-- && 
        bodyWidth-- && 
        bodyHeight-- && 
        tailWidth-- && 
        body2w-- && 
        body2h-- &&
        eyew-- &&
        eyeh-- &&
        nosew-- &&
        noseh--;
    }

    if (faceWidth<35) {
        faceWidth=35;
    }
    if (earWidth<10) {
        earWidth=10;
    }
    if (earHeight<35) {
        earHeight=35;
    }
    if (bodyWidth<35) {
        bodyWidth=35;
    }
    if (bodyHeight<55) {
        bodyHeight=55;
    }
    if (tailWidth<15) {
        tailWidth=15;
    }
    if (body2w<45) {
        body2w=45;
    }
    if (body2h<35) {
        body2h=35;
    }
    if (eyew<3) {
        eyew=3;
    }
    if (eyeh<3.5) {
        eyeh=3.5;
    }
    if (nosew<4.25) {
        nosew=4.25;
    }
    if (noseh<4) {
        noseh=4;
    }

    //left ear
    stroke(128,128,128);
    strokeWeight(.2);
    fill(255);
    var x = map(mouseX,0,width,body2w/2,width-body2w/2,true);
    ellipse(x,height-100,earWidth,earHeight);
 
    //right ear 
    stroke(128,128,128);
    strokeWeight(.2);
    fill(255);
    ellipse(x-10,height-95,earWidth,earHeight);

    //body
    stroke(128,128,128);
    strokeWeight(.2);
    fill(255);
    ellipse(x,height-30,body2w,body2h/2);

    stroke(128,128,128);
    strokeWeight(.2);
    fill(255);
    ellipse(x,height-40,bodyWidth,bodyHeight);

    //tail
    stroke(128,128,128);
    strokeWeight(.2);
    fill(255);
    ellipse(x-10,height-15,tailWidth,tailWidth);

    //face
    stroke(128,128,128);
    strokeWeight(.2);
    fill(255); 
    ellipse(x,height-75,faceWidth,faceWidth);

    //eye
    noStroke();
    fill(0);
    ellipse(x-10,height-80,eyew,eyeh);

    //nose
    noStroke();
    fill(237,171,166);
    ellipse(x+14,height-75,nosew,noseh);

}

I think I was too ambitious for this project and wanted to do a lot more than what I have, but I was aiming for this to be a cute cartoon of a bunny eating carrots falling from the sky. If you move the mouse to the right side of the screen, carrots begin to drop from the sky and as the bunny moves to the right, he gets larger as he eats the falling carrots. If you move the mouse back to the left, the bunny becomes smaller and the carrots disappear.

Romi Jin – Looking Outwards 02

For this week’s Looking Outward blog post, I was curious about the correlation between architecture and algorithmic systems and discovered an a computational architect named Michael Hansmeyer. He initiated a project that overlays a 1960s theory (founded by a biologist named Aristid Lindenmayer) with the field of architecture. This theory is called L-Systems, which follows a string-rewriting algorithm to model plants and how they grow. This system is now being applied to architectural practices in two steps: first, by further analyzing the theory of L-Systems using mapping schemes and turtle graphics, and the second, expanding the system to include parametrics that would allow architectural design to benefit from the algorithms.

Parametric L-System

In this link, a step-by-step interpretation of an example of an L-Systems string is shown, based on algorithmic processes that are still being developed and further improved. It is fascinating to see how math, science and architecture can weave together to create something so beautiful. Though the product is astounding, the process itself is even more intriguing.