Author: fjin@andrew.cmu.edu

Fanjie Jin-Project-03-Dynamic-Drawing

fjin

// Fanjie Mike Jin
// Section C
//fjin@andrew.cmu.edu
//Project-03-Dynamic Drawing

var rgb = 255 / 640;
var rgb2 = 255 / 480;
var angle = 0;
var size = 15;


function setup(){
    createCanvas(640,480);
}

function draw(){
//change the background color
    size = constrain(size, 10, 80)
    background(255 - mouseY * rgb, 255- mouseX * rgb2, 255);
  
//ellipse1
    if (mouseX > width / 2){
      rectMode(CENTER)
      fill(255, 255 - mouseY * rgb2, 255 - mouseX * rgb);
      noStroke();
      push();
      translate(width / 2, height / 2);
      rotate(radians(angle));
      ellipse(150, 0, size, size);
      ellipse(-150, 0, size, size);
      ellipse(0, 150, size, size);
      ellipse(0, -150, size, size);
      ellipse(100, 100, size, size);
      ellipse(-100, 100, size, size);
      ellipse(-100, -100, size, size);
      ellipse(100, -100, size, size);
      pop();
      
//ellipse2       
      fill(255, 255 - mouseY * rgb2, 255 - mouseX * rgb);
      noStroke();
      push();
      translate(width / 4, height / 4);
      rotate(radians(angle));
      ellipse(150, 0, size, size);
      ellipse(-150, 0, size, size);
      ellipse(0, 150, size, size);
      ellipse(0, -150, size, size);
      ellipse(100, 100, size, size);
      ellipse(-100, 100, size, size);
      ellipse(-100, -100, size, size);
      ellipse(100, -100, size, size);
      pop();
      
//ellipse3     
      fill(255, 255 - mouseY * rgb2, 255 - mouseX * rgb);
      noStroke();
      push();
      translate(3 * width / 4, 3 * height / 4);
      rotate(radians(angle));
      ellipse(150, 0, size, size);
      ellipse(-150, 0, size, size);
      ellipse(0, 150, size, size);
      ellipse(0, -150, size, size);
      ellipse(100, 100, size, size);
      ellipse(-100, 100, size, size);
      ellipse(-100, -100, size, size);
      ellipse(100, -100, size, size);
      pop();
      
//ellipse4   
      fill(255, 255 - mouseY * rgb2, 255 - mouseX * rgb);
      noStroke();
      push();
      translate( width / 4, 3 * height / 4);
      rotate(radians(angle)); 
      ellipse(150, 0, size, size);
      ellipse(-150, 0, size, size);
      ellipse(0, 150, size, size);
      ellipse(0, -150, size, size);
      ellipse(100, 100, size, size);
      ellipse(-100, 100, size, size);
      ellipse(-100, -100, size, size);
      ellipse(100, -100, size, size);
      pop();
      
//ellipse5 
      fill(255, 255 - mouseY * rgb2, 255 - mouseX * rgb);
      noStroke();
      push();
      translate(3 * width / 4, height / 4);
      rotate(radians(angle));
      ellipse(150, 0, size, size);
      ellipse(-150, 0, size, size);
      ellipse(0, 150, size, size);
      ellipse(0, -150, size, size);
      ellipse(100, 100, size, size);
      ellipse(-100, 100, size, size);
      ellipse(-100, -100, size, size);
      ellipse(100, -100, size, size);
      pop();
}
  
    if (mouseX < width / 2){
      fill(255 - mouseX * rgb, 255- mouseY * rgb2, 100);
      noStroke();
      push();
      
//rectangle 1     
      translate(width / 2, height / 2);
      rotate(radians(angle));
      rect(150, 0, size, size);
      rect(-150, 0, size, size);
      rect(0, 150, size, size);
      rect(0, -150, size, size);
      rect(100, 100, size, size);
      rect(-100, 100, size, size);
      rect(-100, -100, size, size);
      rect(100, -100, size, size);
      pop();
      
//rectangle 2
      noStroke();
      push();
      translate(width / 4, height / 4);
      rotate(radians(angle));
      rect(150, 0, size, size);
      rect(-150, 0, size, size);
      rect(0, 150, size, size);
      rect(0, -150, size, size);
      rect(100, 100, size, size);
      rect(-100, 100, size, size);
      rect(-100, -100, size, size);
      rect(100, -100, size, size);
      pop();
      
//rectangle 3
      noStroke();
      push();
      translate(3 * width / 4 , height / 4);
      rotate(radians(angle));
      rect(150, 0, size, size);
      rect(-150, 0, size, size);
      rect(0, 150, size, size);
      rect(0, -150, size, size);
      rect(100, 100, size, size);
      rect(-100, 100, size, size);
      rect(-100, -100, size, size);
      rect(100, -100, size, size);
      pop();
      
//rectangle 4
      noStroke();
      push();
      translate(width / 4, 3 * height / 4);
      rotate(radians(angle));
      rect(150, 0, size, size);
      rect(-150, 0, size, size);
      rect(0, 150, size, size);
      rect(0, -150, size, size);
      rect(100, 100, size, size);
      rect(-100, 100, size, size);
      rect(-100, -100, size, size);
      rect(100, -100, size, size);
      pop();
      
//rectangle 5
      noStroke();
      push();
      translate(3 * width / 4, 3 * height / 4);
      rotate(radians(angle));
      rect(150, 0, size, size);
      rect(-150, 0, size, size);
      rect(0, 150, size, size);
      rect(0, -150, size, size);
      rect(100, 100, size, size);
      rect(-100, 100, size, size);
      rect(-100, -100, size, size);
      rect(100, -100, size, size);
      pop();  
//Change the size of the object
}
    if (mouseX < width / 4){
      size += 1.5;  
}
//Change the size of the object  
    if (mouseX > width / 4 & mouseX < width / 2 ){
      size += -1.5;    
}
//Change the size of the object  
    if (mouseX > width / 2 & mouseX < width * 0.75){
      size += 1; 
}
//Change the size of the object 
    if (mouseX > width * 0.75){
      size -= 1;
}
//Change the speed of the object 
   if (mouseY > height / 2){
      angle += 2; 
}
//Change the speed of the object
   if (mouseY < height / 2){
      angle += 6;
}
//Change the speed of the object
   if (mouseX > width / 2){
      angle += 4; 
}
//Change the speed of the object
   if (mouseX < width / 2){
      angle += 2;
}
}

I have been experimenting to create a dynamic drawing that focuses on rotation. When mouse is moved on the canvas, the size and color of the object, as well as the speed and shapes would be changed.

Fanjie Jin– Looking Outwards – 03

elevation of the ZHA chair, from www.zhaarchitecture.com
Rhino Model of the chair for fabrication, from www.zhaarchitecture.com

This char is designed by Zaha Hadid, who is a world renowned Pulitzer Prizer English architect. This chair was fabricated using 3D printer as the geometry of the chair is rather complicated and therefore it is not really possible to be fabricated by hand. When she was designing this chair, she has used the grasshopper modeling tool which is a language that is on Rhino platform. The chair is designed completely by script and therefore if there is some parameter for example the density of the mesh on the back of the chair changed, she can choose to whether apply that change to the other places for the chair. This is a great example of how coding and design are integrated and formed a new sense of ideality.

Fanjie Jin– Looking Outwards – 02

The fins are responding to the intense solar radiation

The Al Bahr Tower is an architecture project in Abu Dhabi designed by Aedas Architects. The building’s facade features a dynamic outer screen that is programmed to respond to the sun’s movement, shielding the building from gaining too much solar radiation. As the input parameter for the algorithm that is controlling the openness of the screen is sun, when the sun is at different location of the day, the screen also becomes a large dynamic and installation. I think this project is really profound in that such computational installation has not only engaged in solving some urgent sustainable and ecological urban issues but also functions as a large scale installation that is visually appealing. Bryan Hamilton, director at the Aedas Architects has commented on this project: “ This project represents the perfect marriage of technology and design as it entirely fit for purpose and sympathetic to their environment.” 

interior view of the fins

Fanjie Jin – project 02 – variable face

sketch

// Fanjie Mike Jin
//Section
//fjin@andrew.cmu.edu
//Project-02 (Variable Faces)

var eyeSize = 25;
var skin = 76;
var faceWidth = 230;
var faceHeight = 200;
var colorPink = 230;
var eyeW = 20;
var eyeH = 50;
var eyeballX = 360;
var eyeballX2 = 183;
var mouseW = 70;
var mouseH = 80;

function setup (){
    createCanvas(640, 480);
}

function draw(){
    background(57,skin, 117);

//footleft
    noStroke();
    fill(163, 65, 67);
    ellipse(350 - 0.5 * faceWidth, 430 - 0.5 * faceHeight, 60, 60 );

//footright
    noStroke();
    fill(163, 65, 67)
    ellipse(290 + 0.5 * faceWidth, 430 - 0.5 * faceHeight, 60, 60 );

//body
    noStroke();
    fill(255, colorPink, 219);
    ellipse(320, 240,faceWidth, faceHeight);

//handleft
    noStroke();
    fill(255, colorPink, 219);
    ellipse(315 - 0.5 * faceWidth, 310 - 0.5 * faceHeight, 70, 50);

//handright
    noStroke();
    fill(255, colorPink, 219);
    ellipse(315 + 0.5 * faceWidth, 295 - 0.5 * faceHeight, 70, 50);

//cheekLeft
    noStroke();
    fill (255, 191, 205);
    ellipse(256, 245, 46, 20);

//cheekRight
    noStroke();
    fill (255, 191, 205);
    ellipse(386, 245, 46, 20);

//eyesleft
    noStroke();
    fill (0);
    ellipse(288, 194, eyeW, eyeH);

//eyesright
    noStroke();
    fill (0);
    ellipse(360, 194, eyeW, eyeH);

//eyeballleft
    noStroke();
    fill (255);
    ellipse(eyeballX, 183, 9, 20);

//eyeballright
    noStroke();
    fill (255);
    ellipse(eyeballX - 72, 183, 9, 20);

//mouse
    noStroke();
    fill (255, 120, 192);
    ellipse(320, 279, mouseW, mouseH);
}

function mousePressed(){
    colorPink = random(204, 150);
    faceWidth = random(230, 260);
    faceHeight = random(200, 230);
    eyeW = random(20, 30);
    eyeballX = random(355, 365);
    mouseW = random(70, 80);
    mouseH = random(80, 90);
    skin = random(50, 80);
    }

I decided to make a variable face of Kirby which is my favorite hero in super smash bros. The variable components for this project are the size of Kirby’s face, eyeball positions, eye sizes and the color of Kirby as well as the background.

Fanjie Jin – Project 01 – Self Portrait

Sketch

//Fanjie Jin
//Section C
//Fjin@andrew.cmu.edu
//Project-01-Face

function setup(){
  createCanvas(600,600);
  background(167,226,235)}
// computer
function draw(){
//chair
  noStroke();
  fill(149,70,41);
  quad(362,343,545,354,535,600,337,600);

//cloth
  noStroke();
  fill(78,101,111);
  ellipse(329,600,280,220);

  noStroke();
  fill(72,75,75);
  quad(0,250,62,233,155,600,0,600);

  noStroke();
  fill(132,132,132);
  quad(62,233,108,244,203,600,155,600);

//neck
  noStroke();
  fill(255,223,203);
  rect(302,430,50,69);

  noStroke();
  fill(255,223,203);
  ellipse(329,335,195,230);

  noStroke();
  fill(255,223,203);
  ellipse(327,496,50,30);

//face
  noStroke();
  fill(230,202,184);
  ellipse(327,449,50,20);

  noStroke();
  fill(255,223,203);
  ellipse(329,350,195,210);

//ears
  noStroke();
  fill(255,223,203);
  ellipse(238,380,35,35);

  noStroke();
  fill(255,223,203);
  ellipse(418,380,35,35);

//hair
  fill(0);
  stroke(255);
  strokeWeight();
  beginShape();
  vertex(239, 340);
  quadraticVertex(304, 345, 359, 315);
  quadraticVertex(361, 324, 358, 330);
  quadraticVertex(400, 300, 400, 290);
  quadraticVertex(420, 320, 427, 357);
  quadraticVertex(450, 250, 340, 210);
  quadraticVertex(210, 210, 230, 360);
  endShape();

//hand
  fill(167,226,235);
  stroke(255);
  strokeWeight();
  beginShape();
  vertex(260, 600);
  quadraticVertex(260, 590, 260, 560);
  quadraticVertex(255, 590, 255, 600);
  endShape()

  fill(149,70,41);
  stroke(255);
  strokeWeight();
  beginShape();
  vertex(403, 600);
  quadraticVertex(403, 590, 403, 560);
  quadraticVertex(408, 590, 408, 600);
  endShape()

//eye left
  noStroke();
  fill(0);
  ellipse(283,370,13,13);

  noStroke();
  fill(255);
  ellipse(285,368,3,3);

//eyes right
  noStroke();
  fill(0);
  ellipse(373,370,13,13);

  noStroke();
  fill(255);
  ellipse(374,368,3,3);

//glasses
  noFill()
  stroke(87, 22, 22);
  strokeWeight(7);
  ellipse(374,378,50,50);

  noFill();
  stroke(87, 22, 22);
  strokeWeight(7);
  ellipse(285,378,50,50);

  noFill();
  strokeWeight(7);
  beginShape();
  vertex(310, 378);
  quadraticVertex(330, 365, 349, 378);
  endShape();

  noFill();
  stroke(87, 22, 22);
  strokeWeight(7);
  line(399,378,424,360);

  noFill();
  stroke(87, 22, 22);
  strokeWeight(7);
  line(260,378,230,360);

  noFill();
  strokeWeight(3);
  beginShape();
  vertex(310, 425);
  quadraticVertex(330, 435, 349, 425);
  endShape();

//ear
  noFill();
  strokeWeight(7);
  beginShape();
  vertex(310, 378);
  quadraticVertex(330, 365, 349, 378);
  endShape();

//eyebrow
  noFill();
  strokeWeight(2);
  beginShape();
  vertex(270, 350);
  quadraticVertex(284, 340, 298, 350);
  endShape();

  noFill();
  strokeWeight(2);
  beginShape();
  vertex(360, 350);
  quadraticVertex(374, 340, 388, 350);
  endShape();}

Throughout the process, I have begun to gain more familiarity with this new workflow and I am looking forward to learning how to develop the code I wrote in much cleaner, more efficient ways.

Fanjie Jin: Looking Outwards – 01

Pipilotti Rist is an installation artist from Switzerland. Her work is often described as surreal, intimate and abstract. 

Over the summer, I have gotten chance to visit the Louisiana Museum in Copenhagen, Denmark, in which the installation ‘Åbn min lysning (Open My Glade)’ by Pipilotti Rist was exhibited. There are two galleries and people interact with the technological art in different manners. The first installation took place in a living room setting where people can circulate in the space and sit on the couches and chairs. There are a number of projectors in the room and the projected videos almost have covered every corner in the room even on the moving audiences. The progressive videos have transferred the room into a very surreal environment in that it blurs the boundary of the objects in the room. The second installation takes place in a room full of lanterns. It has transform the architectural space into a massive dreamlike environment enhanced by the mysterious music.  When people entering into the space the light will change rhythmically according to the people that have passed by.