Author: yinjiet@andrew.cmu.edu

Jacky’s Project 07

sketch

//Yinjie Tian
//Section B
//yinjiet@andrew.cmu.edu
//Assignment-07-A
function setup() {
    createCanvas(480, 480);
    frameRate(10);
}

function draw() {
    background(0);
    noFill();
    stroke(255, random(150,255), 255)
    var nPoints = 20;
    var radius = width / 2 - mouseX;
    var radius2 = width / 2 - mouseX * random(0.4, 0.9)
    var radius3 = width / 2 - mouseX * random(0.4, 0.9)
    var radius4 = width / 2 - mouseX * random(0.4, 0.9)
    var radius5 = width / 2 - mouseX * random(0.4, 0.9)
    var radius6 = width / 2 - mouseX * random(0.4, 0.9)
   
    
    
    // draw the circle as a wiggly circle
    push();
    
    translate(width / 2, height / 2);
    beginShape();

    for (var a = 0; a < nPoints; a++) { //circle 1
        var theta = map(a, 0, nPoints, 0, TWO_PI);
        var px = radius * cos(theta);
        var py = radius * sin(theta);
        vertex(px + random(-5, 5), py + random(-5, 5));
    }
        noFill();
        stroke(random(150,255), 255, 255)
     for (var b = 0; b < nPoints; b++) {    //circle 2
        var theta = map(b, 0, nPoints, 0, TWO_PI);
        var px = radius2 * cos(theta);
        var py = radius2 * sin(theta);
        vertex(px + random(-5, 5), py + random(-5, 5));
    }
    noFill();
        stroke(random(150,255), random(150,255), random(150,255))
     for (var c = 0; c < nPoints; c++) {    //circle 3
        var theta = map(c, 0, nPoints, 0, TWO_PI);
        var px = radius3 * cos(theta);
        var py = radius3 * sin(theta);
        vertex(px + random(-5, 5), py + random(-5, 5));
    }
     for (var d = 0; d < nPoints; d++) {    //circle 4
        var theta = map(d, 0, nPoints, 0, TWO_PI);
        var px = radius4 * cos(theta);
        var py = radius4 * sin(theta);
        vertex(px + random(-5, 5), py + random(-5, 5));
    }
        noFill();
        stroke(random(150,255), 255, 255)
     for (var e = 0; e < nPoints; e++) {    //circle 5
        var theta = map(e, 0, nPoints, 0, TWO_PI);
        var px = radius5 * cos(theta);
        var py = radius5 * sin(theta);
        vertex(px + random(-5, 5), py + random(-5, 5));
    }
    noFill();
        stroke(random(150,255), random(150,255), random(150,255))
     for (var f = 0; f < nPoints; f++) {    //circle 6
        var theta = map(f, 0, nPoints, 0, TWO_PI);
        var px = radius6 * cos(theta);
        var py = radius6 * sin(theta);
        vertex(px + random(-5, 5), py + random(-5, 5));
    }
    endShape(CLOSE);
    pop();
    
    
    
}

For this project, I first choose the ellipse as the base geometry. Then I use vertex to make each of the ellipse to wiggle. The radius for the ellipse are selected randomly based on the mouseX position. Colors for the curves are also selected randomly.

yinjiet-project-06

sketch

//Yinjie Tian
//Section B
//yinjiet@andrew.cmu.edu
//Assignment 06

var x = []; 
var y = [];
var dx = []; 
var dy = []; 
var col = []; 

function setup() { 
    createCanvas(480, 480);
    angleMode(DEGREES);
    for (i = 0; i < 100; i++) { 
        x[i] = random(width);
        y[i] = random(height);
        dx[i] = random(-5, 5);
        dy[i] = random(-5, 5);
        col[i] = color(random(255), random(255), random(255));
    }
    frameRate(5);
}


function draw() {
 
    background(80, 200, 100);
 
 //bubbles at the background   
    noStroke();
    for (i = 0; i < 100; i++) {  // for each rectangle ...
        fill(col[i]);
        ellipse(x[i], y[i], 10, 10);
        x[i] += dx[i];
        y[i] += dy[i];
        
        if (x[i] > width) x[i] = 0;        //horizontally
        else if (x[i] < 0) x[i] = width;
        if (y[i] > height) y[i] = 0;       //vertically
        else if (y[i] < 0) y[i] = height;
    }

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

//clock bubbles
    push();
    noStroke();
    fill(200, 200, s * 5);
    translate(width/2,height/2);
    rotate(s * (360/60));
    
    ellipse(200, 0, 60, 60);
    line()

    pop();
    
    push();
    noStroke();
    fill(200, m * 5, 200);
    translate(width/2,height/2);
    rotate(m*(360/60));
    
    ellipse(60, 0, 40, 40);
    pop();
    
    push();
    noStroke();
    fill(h * 25, 200, 200);
    translate(width/2,height/2);
    rotate(h*(360/12));
    
    ellipse(100, 0, 20, 20);
    pop();

//center point
    strokeWeight(4);
    stroke(0)
    line(width / 2 - 25, height / 2, width / 2 + 25, height / 2);
    line(width / 2, height / 2 - 25, width / 2, height / 2 + 25);
    fill(255, 0, 0);
    ellipse(width/2, height/2, 10, 10); 

}

The background is a bunch of randomly moving rectangle with random colors. A cross with a red dot representing the center for the clock. Three bubbles with constantly changing colors based on time orbiting around the cross indicates the time. Second is the largest and furthers bubble and hour is the smallest and closest bubble.

 

jacky-project-05

sketch

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()
}

I was inspired by the famous Burberry Pattern with the rectangle and lines that going both in vertical and horizontal direction.

yinjiet-LookingOutwards-05

3D Computer Graphics — Transformers

CGI & VFX Showreels: ILM “Transformers 3” by Brad Kinley

Talking about three dimensional computer graphics art, Transformers series must be one of the masterpieces.  The 165-minute movies are mostly about intricate giant robot actions. It is extremely data-heavy behind the scene. The artwork starts with a lot of design and photoshop in 2D. Then they producers turn the 2D artworks into a 3D characters and built all its little pieces little by little. For example, Optimus has over 10000 pieces in him and every single piece in him has to modeled correctly. For me, the whole movie is like a collection and every single robot is like a piece of 3D computational artwork. With all the structures, colors, animations and etc come together, the robots become realistic on the screen.

source link: https://www.creativebloq.com/making-transformers-3123105

 

Jacky Tian’s project 04

jacky’s sketch 1



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

    

        // stroke(100, 0, 100);
        // line(width/5+i*10, 0, 0, height/2+i*(-5));
        
    }
}

In this project, I created five sets of lines rotating along the sides to create five curves. The background is black so that it makes the colors more obvious.

yinjiet-LookingOutwards-04

Music Visualization – Debussy, Arabesque #1, Piano Solo

Animation created by Stephen Malinowski

This is a classical music piece composed by Claude Debussy. Stephen Malinowski, an American composer, pianist and software engineer, performed and transferred this classical music into a music visualization project. Stephen produces animated graphic scores and a system of colored shapes to represent elements in music. Particularly in this piece, Stephen mainly uses geometries like circles and lines. Each circle represent a note for piano, and the lines are the melody and flow of the music. When the music is playing, the geometries are animated with the rhythm. Stephen turns a music into a piece of computational artwork. With his algorithm system where he took information from MIDI file, he can generate graphical animations for every music. Stephen once used a quote from Eric Isaacson that “What you see is what you get”. Sometimes it is hard for audience to fully experience the music just by hearing. Therefore, with the help of animated graphics, audience can visually interact with the music. I’m inspired by Stephen Malinowski and I think that there should not just be one way to approach to an art pieces. We should be able to use as much senses as we can.

Jacky Tian’s Project 03

sketch

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;


}

For this project, the 4 dynamic aspects of image elements include size, position, angle and color. The lines changes its position and length based on the mouse’s position. Also, there is a square rotating around the mouse and it spins faster as it move towards the right side.

Jacky Tian LookingOutwards 03

Generative Design – The Water Cube in Beijing

Exterior View of The Water Cube

The Water Cube is the perfect prove that the generative design provides a powerful opportunity for architecture to explore new ideas and techniques regarding structure. Generative design becomes a new introduced grammar in architecture. Moreover, with the help of generative design techniques, architects can explore the relationship between environment and structure. For example, in The Water Cube, during the day the building mostly rely on natural light and safes 55% of the energy for lighting. Also, the envelope is built with 3065 blue air cushions with customized sizes that can withhold the 20% of solar energy. With the solar energy reserves, it can be used to heat the swimming pools. In addition, 80% of the rain can be collected by the facade and be recycled and reused.

Interior View of The Water Cube

Source Link: https://www.arup.com/projects/chinese-national-aquatics-center

yinjiet – Looking Outwards 02

Generative Design Meets Architecture- Metropol Parasol

perspective view of Metropol Parasol in Seville, Spain

The name of the project is called Metropol Parasol designed by J. Mayer H. Architects. It is a redevelopment of Plaza de la Encarnacion in Seville, Spain. The building contains 5000 square meters throughout 4 stories. The structure is mainly concrete, timber and steel. The whole building costs 90 Million Euro in construction.

Metropol Parasol is one of the earliest example in architecture that involves generative design. Designers can create unimaginable surfaces and spaces with infinite possibilities and variabilities by the change of a few parameters though self defined algorithms.

Like the project Metropol Parasol, when the designers explore with generative designing softwares like grasshopper, the construction process becomes simple and straightforward. The workers do not need to built each pieces on site, but rather, the pieces are mostly prefabricated in the factory with the help of highly efficient machines. That is the reason why, nowadays, tools like three dimensional printer becomes more and more popular in architectural design.

Source link: https://www.yatzer.com/Metropol-Parasol-The-World-s-Largest-Wooden-Structure-J-MAYER-H-Architects

 

 

yinjiet-Project-02-Variable-Face

In this exercise, I tried to present a life cycle from  young age to old. The three aspects of variability are the color of the hair, movement of the ears, and the size of the face.

project-02

//Jacky Tian
//Section B
//yinjiet@andrew.cmu.edu
//project-01


function setup() {
    createCanvas(480, 640);
    
}
var x1 = 175;
var y1 = 320;
var x2 = 425;
var y2 = 320;
var count = 0;
var eyecolor = 0;
var facew = 250;
function draw() {
	background(220);
	strokeWeight(1);
	stroke(0, 0, 0);
	fill(236, 212, 190);
	ellipse(x2, y1, 25, 50);
	ellipse(x1, y1, 25, 50);

	strokeWeight(0);
	stroke(0, 0, 0);
	fill(236, 212, 190);
	rect(270, 460, 60, 60),
	
	strokeWeight(0);
	stroke(0, 0, 0);
	fill(236, 212, 190);
	ellipse(300, 320, facew, 300);

	fill(eyecolor)
	quad(175, 270, 280, 270, 308, 160, 210, 185);
	quad(320, 270, 425, 270, 390, 185, 292, 160);
	
	strokeWeight(4);
	stroke(212, 175, 55);
	fill(255);
	rect(200, 275, 80, 60);
	rect(320, 275, 80, 60);
	line(280, 300, 320, 300);
	line(175, 285, 200, 300);
	line(425, 285, 400, 300);

	strokeWeight(1);
	stroke(0, 0, 0);
	fill(236, 212, 190);
	triangle(300, 350, 290, 375, 310, 375);

	strokeWeight(1);
	stroke(0, 0, 0);
	noFill();
	arc(300, 415, 80, 80, 0, PI + QUARTER_PI, OPEN);

	stroke(0, 0, 0);
	fill(0, 0, 0);
	quad(200, 520, 400, 520, 500, 600, 100, 600);

	stroke(0, 0, 0);
	fill(51);
	rect(200, 580, 80, 100);
	
}
function mousePressed() {
    // when the user clicks, these variables are reassigned
    // to random values within specified ranges. For example,
    // 'faceWidth' gets a random value between 75 and 150.
	if(count % 2 == 0){
		y1 -= 10;
	}else{
		y1 += 10;
	}
	eyecolor += 15;
	eyecolor = eyecolor % 255
	count += 1;
	facew -= 5; 
    // x1 = x1 - 5;
    // x2 = x2 + 5;

}