Author: yinjiet@andrew.cmu.edu

Jacky Tian’s LookingOutwards 06

Generative randomness — CHARLES STREET CAR PARK

Seemingly random pattern can be generated by a comprehensive computational logarithms. This multi story public parking space in Sheffield city centre has natural anodized aluminum panels on its external envelope. Each of the aluminum panel is manufactured from a single sheet of folded aluminum hung in four different orientations with a seemingly random rhythm. The gaps between the panels in four direction provides natural ventilation and creates a sense of sculpture for a box.

Jacky’s LookingOutwards 05

Virtual Reality and Architecture

The Dawn of the Virtual Reality in Architecture | Gunita Kulikovska | TEDxRiga

With the advancement of technology, the field of architecture has revolutionized and buildings no longer need to be physically built in order for architects to experience the space. With the help of virtual reality, architects are able to design and feel the space in real time in three dimensional virtual world.

In the Ted Talk, Gunita Kulikovska shared her experience as well as he research in how the virtual reality technologies can be used in the fields of architecture. Coherently involved in both architecture and fostering technology startups, Gunita Kulikovska believes that it is an revolutionary mission. She envisions to break the constrains of knowledge and limits of communication between client and architect, with the help of straightforward visual support from virtual reality.

Jacky Tian’s Project 05

sketch

//Yinjie Tian
//Section D
//yinjiet@andrew.cmu.edu
//project-05

function setup() {
    createCanvas(600, 400);
    background(128, 128, 128);
    var tw = 60;
    var th = 60;
    var oy = 25;
    var ox = 5;

    for (var y = 0; y < 6; y++) {
        for (var x = 0; x < 10; x++) {
            var py = oy + y * th;
            var px = ox + x * tw;
           
            strokeWeight(0);
            fill(200, 190,  100)
            rect(px, py, 50, 50);
            strokeWeight(2);
            stroke(255);
            line(px,  py + 15,  px + 80,  py + 15);
            strokeWeight(4);
            stroke(65, 105, 225);
            line(px + 35, py, px + 35, py +  80)
            noStroke()
            fill(128, 0, 0);
            ellipse(px + 50, py + 50, 10, 10);
        }
    }
  noLoop();
    
    }

function draw() {
    // draw is not called due to noLoop() in setup()
}

EARLY SKETCH / CONCEPT SKETCH

From the early concept sketch, you can see that i was intrigued by grids combined with rectangles and dots. I was then inspired by the color scheme of the original Burberry pattern which also has the grids and rectangles.

Jacky Tian’s LookingOutwards-04

LAETITIA SONAMI — Magnetic Memories

Laetitia Sonami is a sound and installation artist and performer. She explores ideas of presence and participation in relation to science through her sound performances, live-film collaborations and sound installations.

Born in France and later came to United States to study electronic music, Laetitia Sonami designed various of new gestural controllers for performance and applies new technologies and industrial materials to express and link the audiences to her through sound, place and objects.

As one of her most famous art pieces, Magnetic Memories was performed with a electrical charged magnetic ring and three strings going across the ring in the middle. During the performance, she vibrates and stops the three strings to create unique electronic sounds.

Jacky Tian’s Project-04

sketch

// Yinjie Tian
// yinjiet@andrew.cmu.edu
// Section D
// Project 04

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

function draw() {
    background(0)
    for (var i = 0; i < 21; i++) {
        stroke(255, 0, 0);
        line(width/5+i*10, 0, 0, height/2+i*(-5)); //line set 1

        stroke(255)
        line(0, height/2+i*10, width/3+i*(-5), 0); //line set 2

        stroke(0, 255, 0);
        line(0, height/3+i*10, width/2+i*(10), height);  //line set 3

        stroke(0, 0, 255);
        line(width, height/7+i*10, width*3/4+i*(-10), height); //line set 4

        stroke(150, 80, 0);
        line(width, height/7+i*10, width/4+i*(10), 0); //line set 5

        
    }
}

In this project, I created 5 different sets of lines that gradually rotates from the origin edge to the adjacent edge.

Jacky Tian’s Project 03

sketch

//Jacky Tian
//Section D
//yinjiet@andrew.cmu.edu
//Assignment-03-A

var unit = 50
var angle = 0
function setup() {
    createCanvas(640, 480);
    
}


function draw() {
    background(mouseX * 0.5, 70, 120);

    var len = 480 - mouseX
    var sta = 640 - mouseY 
    
    strokeWeight(4)
    stroke(170, mouseX * 0.1, 50);
    line(unit, sta * 0.1, unit, len);

    strokeWeight(4)
    stroke(170, mouseX * 0.2, 50);
    line(unit * 2, sta * 0.2, unit * 2, len);

    strokeWeight(4)
    stroke(170, mouseX * 0.3, 50);
    line(unit * 3, sta * 0.3, unit * 3, len);

    strokeWeight(4)
    stroke(170, mouseX * 0.4, 50);
    line(unit * 4, sta * 0.4, unit * 4, len);

    strokeWeight(4)
    stroke(170, mouseX * 0.5, 50);
    line(unit * 5, sta * 0.5, unit * 5, len);

    strokeWeight(4)
    stroke(170, mouseX * 0.6, 50);
    line(unit * 6, sta * 0.6, unit * 6, len);

    strokeWeight(4)
    stroke(170, mouseX * 0.7, 50);
    line(unit * 7, sta * 0.7, unit * 7, len);

    strokeWeight(4)
    stroke(170, mouseX * 0.8, 50);
    line(unit * 8, sta * 0.8, unit * 8, len);

    strokeWeight(4)
    stroke(170, mouseX * 0.9, 50);
    line(unit * 9, sta * 0.9, unit * 9, len);

    strokeWeight(4)
    stroke(170, mouseX, 50);
    line(unit * 10, sta, unit * 10, len);

    strokeWeight(4)
    stroke(170, mouseX * 1.1, 50);
    line(unit * 11, sta * 1.1, unit * 11, len);

    strokeWeight(4)
    stroke(170, mouseX * 1.2, 50);
    line(unit * 12, sta * 1.2, unit * 12, len);

    strokeWeight(4)
    stroke(170, mouseX * 1.3, 50);
    line(unit * 13, sta * 1.3, unit * 13, len);

    strokeWeight(2)
    stroke(70, mouseX * 0.1, mouseY* 0.1);
    line(unit + 25, sta * 0.1, unit, len);

    strokeWeight(2)
    stroke(70, mouseX * 0.2, mouseY* 0.15);
    line(unit * 2 + 25, sta * 0.2, unit * 2, len);

    strokeWeight(2)
    stroke(70, mouseX * 0.3, mouseY* 0.2);
    line(unit * 3 + 25, sta * 0.3, unit * 3, len);

    strokeWeight(2)
    stroke(70, mouseX * 0.4, mouseY* 0.25);
    line(unit * 4 + 25, sta * 0.4, unit * 4, len);

    strokeWeight(2)
    stroke(70, mouseX * 0.5, mouseY* 0.3);
    line(unit * 5 + 25, sta * 0.5, unit * 5, len);

    strokeWeight(2)
    stroke(70, mouseX * 0.6, mouseY* 0.35);
    line(unit * 6 + 25, sta * 0.6, unit * 6, len);

    strokeWeight(2)
    stroke(70, mouseX * 0.7, mouseY* 0.4);
    line(unit * 7 + 25, sta * 0.7, unit * 7, len);

    strokeWeight(2)
    stroke(70, mouseX * 0.8, mouseY* 0.45);
    line(unit * 8 + 25, sta * 0.8, unit * 8, len);

    strokeWeight(2)
    stroke(70, mouseX * 0.9, mouseY* 0.5);
    line(unit * 9 + 25, sta * 0.9, unit * 9, len);

    strokeWeight(2)
    stroke(70, mouseX, mouseY* 0.55);
    line(unit * 10 + 25, sta, unit * 10, len);

    strokeWeight(2)
    stroke(70, mouseX * 1.1, mouseY* 0.6);
    line(unit * 11 + 25, sta * 1.1, unit * 11, len);

    strokeWeight(2)
    stroke(70, mouseX * 1.2, mouseY* 0.65);
    line(unit * 12 + 25, sta * 1.2, unit * 12, len);

    strokeWeight(2)
    stroke(70, mouseX * 1.3, mouseY* 0.7);
    line(unit * 13 + 25, sta * 1.3, unit * 13, len);

    fill(120, 80, mouseX * 0.5); // control rect color explicitly
    stroke(0);
    push();
    translate(mouseX, mouseY);
    rotate(radians(angle));
    rectMode(CENTER); // center rect around 0,0
    rect(0, 0, 50, 50);
    pop();
    angle = angle + mouseX * 0.05;


}

In this project, I explored the movement of a series of paired lines and as the mouse move across the screen, these vertex of the two paired lines move from the top of the screen to the bottom of the screen. The color of the components change from cold to warm as the mouth move from left to right as well. Moreover, there is a spinning square at the position of the mouse and the speed of the spinning varies as the mouse moves.

Jacky Tian’s Looking Outwards – 03

Computational Design + Architecture

— The Moving Curtain

BUND FINANCIAL CENTER BY FOSTER + PARTNERS

I grew up in Shanghai, China, a city with plenty of modern architecture and technology. Computational design never lacks in a city like Shanghai. A new mixed-use complex called the Bund Finance Center has just finished its last construction phase. Designed by Norman Foster’s Architecture Firm and collabrated with Thomas Heatherwick’s design studio, The Bund Finance Center becomes a new landmark of The Bund in Shanghai.

Besides the functional spaces for banking services, the building also includes a traditional chinese theatre and combined with the most advanced curtain wall technology controlled by computer calculated programs. The facade of this three-story-height building is composed of curtain like wall of bronze tubes. These bamboo shaped bronze tubes are constructed in three layers, creating semi-transparent screen for the building. The architect in charge described the facade as a “moving veil”, which can adapt and transform based on the current use of the space. 

As a fourth year student in architecture, I was inspired by the connection between architecture and computational fabricated technology. I personally utilized digital fabrication tools like laser cutting machine a lot for my projects. With the help from these tools, a lot of complicated and organic form can be achieved in a much easier manner.

Jacky Tian’s LookingOutwards-02

idea space – a cyclic universe by karsten schmidt

A screenshot of cyclic universe by Karsten Schmidt

This generative artwork is a timelapse animation where digital artist Karsten Schmist created a ongoing visualization project of space where steadily increasing number of moving particles are attractive by slow moving, invisible gravitational force centres. The imaginary cylindrical space act as a four dimensional canvas where the moving particles will leave permanent traces in time as well as in space. The paradoxical set up created ironical results that even with the increase of particles approaching to infinite, there is no increase in computational cost.

From the image, one can see the the particles have larger movements when they are far away from the gravitational centres. On the other hands, near gravitational centres, the density of particles is significantly higher than far away places. This symbolizes the shift of the university.

Jacky Tian’s Project 02

sketch

// Yinjie Tian
// yinjiet@andrew.cmu.edu
// Section D
// Project 02

var earSize = 20
var hairColor = 0
var glassSize = 45
var pocketPosition = 450
var rgb1 = 250
var rgb2 = 250
var rgb3 = 250
var mouthSize = 30

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

function draw() {   
//Background
    stroke(0);
    fill(rgb1, rgb2, rgb3);
    rect(80, 50, 80, 550);
    fill(rgb2, rgb1, rgb3);
    rect(110, 80, 140, 520);
    fill(rgb3, rgb1, rgb2);
    rect(300, 100, 200, 500);
    fill(rgb1, rgb3, rgb2);
    rect(160, 170, 300, 430);
    fill(rgb2, rgb3, rgb1);
    rect(400, 200, 200, 400);

//Neck
    noStroke();
    fill(230,214,169);
    quad(240, 310, 235, 370, 320, 370, 315, 310);

//Ears
    stroke(240,224,179);
    fill(240,224,179);
 
    rect(195, 240, earSize, 40, 10);
    rect(340, 240, earSize, 40, 10);

//Face
    stroke(255,244,189);
    fill(255,244,189);
    strokeWeight(3);
    
    beginShape();
    vertex(210, 270); 
    vertex(210, 310);  
    vertex(250, 335);  
    vertex(310, 335); 
    vertex(340, 310); 
    vertex(340, 225);   
    vertex(215, 225); 
    endShape();

//Hair
    stroke(0);
    fill(hairColor);
    strokeWeight(4);

    beginShape();
    vertex(190, 220);
    vertex(205, 150);
    vertex(270, 125);
    vertex(338, 150);
    vertex(360, 218);
    vertex(342, 235);
    vertex(330, 235);
    vertex(290, 225);
    vertex(250, 235);
    vertex(217, 230);
    vertex(210, 230);
    endShape();

//Glasses
    stroke(225, 215, 0);
    strokeWeight(3);
    fill(255);
    rect(220, 240, glassSize, glassSize, 15);
    rect(288, 240, glassSize, glassSize, 15);
    line(265, 250, 288, 250);

//Nose
    stroke(0);
    strokeWeight(2);
    line(275, 280, 270, 300);
    line(270, 300, 275, 300);

//Mouth
    noStroke();
    fill(290,214,159);
    ellipse(290, 320, mouthSize, 10);

//Jacket
    stroke(0, 0, 0);
    fill(0, 0, 0);
    strokeWeight(4);
    beginShape();
    vertex(150, 365);
    vertex(90, 480);
    vertex(90, 600);
    vertex(430, 600);
    vertex(490, 480);
    vertex(410, 365);
    endShape();  

//Pocket
    stroke(255,165,0);
    rect(190, pocketPosition, 50, 60);

}

function mousePressed() {
    
    earSize = random(15, 30);
    hairColor = random(0, 220);
    glassSize = random(35, 55);
    pocketPosition = random(425, 475);
    rgb1 = random(0, 250);
    rgb2 = random(0, 250);
    rgb3 = random(0, 250);
    mouthSize = random(20, 50)
}

I used my portrait for project 1 as the base file. The three factors for variations I looked into were size, position and color. Based on the three factors, I created variables that can change the sizes of my nose, glasses, and mouth; alter the color of my hair and the background; reposition the pocket on my sweatshirt.

Jacky Tian – Looking Outwards – 01

Technology, Engineering and Art Expression

Millennium Bridge in London

On June 1oth, 2ooo, a new walkway the link the city of London with the historical district of St. Paul’s Cathedral was completed across the Thames River. The 325 meters long Millennium Bridge in London is the winning entry of an international architectural ‘bridge building’ competition.

The competition entry was name of “the blade of lights” with innovative steel structure, supported by complex engineering calculation done by varies computational design and simulation tools. The designer group, Foster and Partners worked with a specific technology company as well as a famous sculptor, Sir Anthony Caro.

The Millennium Bridge in London perfectly demonstrates how technology can affect bridge engineering towards a more artistic expression and tectonic patterns in design. The