Author: xindil@andrew.cmu.edu

Xindi Lyu-project 07- Curves-Section A

sketch

 
/*
Xindi Lyu
Section A
xindil@andrew.cmu.edu
*/


var nPoints = 100;
var HYPOCYCLOID = 1;
var EPICYCLOID = 0;
var curveMode = HYPOCYCLOID;

function setup() {
    createCanvas(500, 500);
    frameRate(10);
        }

 



function draw() {
    
    push();
    translate(250,250);
    switch (curveMode){
        case HYPOCYCLOID:
        drawHypocycloid();
        break;
        case EPICYCLOID:
        drawEpicycloid();
        break;
    }
    pop();


    }


function drawHypocycloid() {//drawcurve
    background(200,200+mouseX*0.1,200+mouseY*0.1);//make the changing background for Hypocycloid
    var x;
    var y;
    var a=map(mouseX, 0, 500, 1, 100);//size of the geometry
    var n=map(mouseX, 0, 500, 1, 15);//devision of thhe curve
    fill(200,150+mouseX*0.1,200+mouseY*0.1);//fill the geometry with changing color 
    
    stroke(0.4*mouseX+0.4*mouseY);//change the ourline color
    beginShape();
    for(var i=0; i<nPoints; i++){
        var t = map(i, 0, nPoints, 0, 2*PI);
        x=a*(((n-1)*cos(t)+cos((n-1)*t))/n);
        y=a*(((n-1)*sin(t)-sin((n-1)*t))/n);
        vertex(x+random(-5,5),y+random(-5,5));
    }
    endShape(CLOSE);
}



function drawEpicycloid() {//drawcurve
    background(200,150+mouseX*0.1,200+mouseY*0.1);//make the changing background for Epicycloid
    var x;
    var y;
    var a=map(mouseX, 0, 500, 1, 100);//size of the geometry
    var n=map(mouseY, 0, 500, 1, 15);//devision of thhe curve
    fill(200,200+mouseX*0.1,200+mouseY*0.1);;//fill the geometry with changing color 
    stroke(0.4*mouseX+0.4*mouseY);
    beginShape();
    for(var i=0; i<nPoints; i++){
        var t = map(i, 0, nPoints, 0, 2*PI);
        x=(a+n)*cos(t)-n*cos((a+n)/n*t);
        y=(a+n)*sin(t)-n*sin((a+n)/n*t);
        vertex(x+random(-5,5),y+random(-5,5));
    }
    endShape(CLOSE);
}

function mousePressed(){
    curveMode = 1- curveMode;//switch between geometries
}

For this project I experimented with two different types of curves and rendering them with the jittering effect to add a lively feeling to the image.

Xindi Lyu-Looking Outwards 07

Pixel Avenue

The installation project “Pixel Avenue” is installed on the underside of a tunnel where it can display the movements across the area. The creator of the project, digitalarti, designed it as a huge pixelated screen with white and blue lights to intimate a “clear sky” and when pedestrians, cars or any other movement occurs, the light bulbs to their positions would change their light colors red to reflect the movements. Its rhythm and forms are directly linked with the everyday life of the area.


I am inspired by this project because it again showed how the dynamic data can be visualized as something artistically dynamic but with the contexts of facts and statistics. It is a very innovative use of data visualization and the application of these visualizations is way more of an artistic approach.

Xindi Lyu-Project 06- Abstract Clock-Section A

sketch

/*
Xindi Lyu
Section A
xindil@andrew.cmu.edu
Project-06-Abstract Clock
*/
var angleS=0;

function setup() {
 createCanvas(550,500);
 background(230);



}
   
    
function draw() {
        var S=second();
        var M=minute()
        var H=hour();
        noStroke();
      fill(70,100,70)
     ellipse(270,250,500,500);
        strokeWeight(2);
                 for(c=0;c<360;c=c+15){
            push();
        stroke(0);
        translate(270,250);//creating 24 strokes representing each hour of a day
        rotate(radians(c));
         line(0,0,250,0);//creating the base image for the hour section
        pop();
    }
    push();
            translate(270,250);
            rotate(radians(15*H));
            stroke(255);//highlighting the hour represented
            line(0,0,250,0)
            
            pop();
            push();
            translate(270,250);
            rotate(radians(15*H-15));
            stroke(0);
            line(0,0,250,0)//reseting the hours passed
            
            pop();
             
                noStroke();
    fill(70,100,70);
    ellipse(220,250,300,300)


        for(b=0;b<360;b=b+6){
            push();
        stroke(0);//creating 60 strokes representing each minute within an hour
        translate(220,250);
        rotate(radians(b));
         line(0,0,150,0);//creating the base image for the minute section
        
        pop();
    }
    
    push();
            translate(220,250);
            rotate(radians(6*M));
            stroke(255);
            line(0,0,150,0)
            
            pop();
             
             push();
            translate(220,250);
            rotate(radians(6*M-6));
            stroke(0);
            line(0,0,150,0)
            
            pop();

    noStroke();
    fill(70,100,70);
    ellipse(250,250,200,200)

 

        for(a=0;a<360;a=a+6){
            push();
        stroke(0);
        translate(250,250);
        rotate(radians(a));//creating 60 strokes representing each second within a minute
         line(0,0,100,0);
        pop();

        }
             push();
            translate(250,250);
            rotate(radians(6*S));
            stroke(255);
            line(0,0,100,0)
            
            pop();
              
        push();
        stroke(0);
        translate(250,250);
        rotate(radians(6*S-6));
         line(0,0,100,0);
        pop();
    noStroke();
    fill(70,100,70);
    ellipse(230,250,130,130)
}

I experimented with the offsetting circles and how lines cooperated with this geometry. I used simple colors and ways to indicated the time changes to maintain the visual clarity.

Xindi Lyu-Looking outwards 06

The Emotionally Charged Paintings Lee Krasner Created

This painting was made between 1959 to 1962 by female artist Lee Krasner, following the death of her husband Jackson Pollock in a fatal car crash. Krasner at the period of time was going through a rough stage of her life with the emotional impact of the death of her mother and the attention drawn to her because of the death of Pollock. These were reflected in the painting with the dense curves covered with knots and slashes painted in the restricted tones of brown and white, as a they were once described by the critic Amei Wallach as having the “impact of a hurricane.”

This painting really inspired me because the randomness of it has brilliantly and accurately expressed the emotion of its author. It showed the how randomly generated drawing being more expressive and full of impact while being dynamic and unpredictable. This art piece also was only consist of the simplest element such as strokes and slashes, which led to further possibilities of creating an art piece full of volume but only with simple techniques and elements.

Xindi Lyu-Looking Outwards 05

One of the art pieces in the series

The  prize winning generative art series in 2015 during Independent Festival of Creative Communication in Chroatia in 3D category– “Papilarnie”  really pushed and blurred the boundary between 2 dimensional lines and three dimensional forms. Graphics of this series were published in the second part of the album “The Magic of Lines: Line Illustration by Global Artists.” The author of this art series, Polish artist Janusz Jurek, showed the seemingly “deconstruction” of human features, while adding volume to the overall form but also showed movement and a sense of tension within this dynamic piece.
showing movement

This art series really inspired me because it is a successful outcome of attempting to use simple geometries or modules to create a incredibly dynamic art piece, and also it showed that capturing a moment in the constructing process could result in very interesting outcomes.

Xindi Lyu-Project 05-Wall paper-Section A

sketch

 /*Xindi Lyu
 Section A
 xindil@andrew.cmu.edu
 project_05*/
 function setup() {
     createCanvas(600, 600);
     background(240);
}

 function draw() {
  background(255,243,69);
  for(var b=-600; b<600;b+=30){
    for(var c=-600;c<600;c+=15){
      var d=b+c;
      fill(0);
      ellipse(d,c,2,2);//polka dots background
    }
  }

  //ponrose triangles
  for(var a=-600; a<700; a+=200){
    for(var y=-600; y<height; y+=120){
      
 
  fill(251,51,139);
  noStroke();
  
  var x=a+y;
  quad(36+x,34+y,58+x,72+y,58+x,162+y,36+x,152+y);//pink 1
  quad(58+x,72+y,36+x,34+y,116+x,82+y,98+x,92+y);//pink 2
  

  fill(53,177,149);
  quad(58+x,72+y,78+x,82+y,78+x,130+y,58+x,162+y);//green 1
  quad(58+x,162+y,78+x,130+y,158+x,82+y,158+x,106+y);//green 2
   
   fill(173,221,255);
  quad(36+x,34+y,58+x,22+y,158+x,82+y,116+x,82+y);//purple 1
  quad(158+x,82+y,116+x,82+y,78+x,104+y,78+x,130+y);//purple 2


  //the profile lines for the triangles
  stroke(0);
  strokeWeight(1.2);
  line(58+x,22+y,36+x,34+y);
  line(36+x,34+y,36+x,152+y);
  line(36+x,152+y,56+x,162+y);
  line(158+x,106+y,56+x,162+y);
  line(158+x,82+y,158+x,106+y);
  line(58+x,22+y,158+x,82+y);
  line(58+x,162+y,58+x,72+y);
  line(58+x,72+y,98+x,92+y);
  line(98+x,92+y,78+x,104+y);
  line(78+x,104+y,78+x,82+y);
  line(78+x,130+y,158+x,82+y);
  line(78+x,104+y,78+x,130+y);
  line(116+x,82+y,78+x,104+y);
  line(116+x,82+y,36+x,34+y);

  
}
}



    
    }

For this project I was inspired by the extreme color contrast of pop art as well as the intriguing idea of “loops” within the penrose triangle.

Pop art inspiration

Xindi Lyu-Looking Outwards 04


The performance of the art piece.

A sound art by Dutch artist Ronald van der mejis experimented with the mechanism of using the burning cigars as the control of the installation. The art piece-titled ‘play it one more time for me la ville fumée’- had its mechanism based on the way each of the different cigars has their own strengths due to the natural and traditional method they were made, while that leads to the different burning rate of each individual cigars. These fire rates eventually produced a very unnatural rhythm. This magnificent artwork is constructed with 4 tuners each in control of an instrument as a recorder containing the hand-rolled cigars. The pistons of the cigars and the recorders are both attached to two abstract airbags as “lungs”.

The recorders and the “lungs”

This art piece really inspired me with its astonishing way of material using and the smartness of using the cigars as a mechanism. The out-of-this-world idea of using cigars to generate a sound art installation really encouraged me to think beyond the conventions.

Xindi Lyu-Project 04-String art-Section A

sketch

 /*Xindi Lyu
 Section A
 xindil@andrew.cmu.edu
 project_04*/
 function setup() {
     createCanvas(400, 300);
     background(240);
}

 function draw() {
     background(240);
    
     var c=5;


     
     
      //background
      for(var b=0; b<150; b+=c){
        strokeWeight(0.5);
    stroke(120,200,230);
    line(400,b,4/3*b,0);//top-right corner
    stroke(200,200,230);
    line(0,b,400-4/3*b,0);//top-left corner
    stroke(130,170,170);
    line(400,300-b,4/3*b,300);//bottom-right corner
    stroke(250,170,170);
    line(0,300-b,400-4/3*b,300);//bottom left corner
   }


     
     for(var a=50; a<200; a+=c){
      strokeWeight(0.5);
      stroke(100,80,150);
      line(a,-4*a/3+850/3,a+150,4*a/3-150/3);//top of the triangle
      stroke(150,70,120);
      line(a+150,4*a/3-150/3,400-a,215);//the bottom-right corner of the triangle
      

     
 }
for(var a=50; a<200; a+=c){
      strokeWeight(0.5);
      stroke(100,80,150);
      line(a,4*a/3+50/3,a+150,-4*a/3+1000/3);//the btop part of the up-side-down triangle
      stroke(150,70,120);
      line(a,4*a/3+50/3,250-a,82);//the bottom left part of the -upside down triangle
      
      
    }
      
          



 }

For this project I experimented with line weights as well as the elegance of cooperating curves with sharper angles, and also symmetry and asymmetries.

Xindi Lyu-Project 03-Dinamic Drawing-Section A

sketch


/*Xindi Lyu
Section A
xindil@andrew.cmu.edu
Project-03-Dinamic Drawing */
function setup() {
    createCanvas(640, 480);
    background(255);
    rectMode(CENTER);
    
}
function draw() {
    noStroke();
    background(49,76+mouseY,87+mouseX/2);
 var a = max(min(mouseX,640),0);
 var b = a*24/64;
 fill(255);
//red


fill(254-a/5,228,196-b)
triangle(160,240+a*120/640,320,240+a*120/640,240,120+b);
triangle(160,480+a*120/640,320,480+a*120/640,240,360+b);
triangle(160,0+a*120/640,320,0+a*120/640,240,0+b);
triangle(160,240+a*120/640,320,240+a*120/640,240,240+b);
triangle(480,240+a*120/640,640,240+a*120/640,560,120+b);
triangle(480,480+a*120/640,640,480+a*120/640,560,360+b);
triangle(480,0+a*120/640,640,0+a*120/640,560,0+b);
triangle(480,240+a*120/640,640,240+a*120/640,560,240+b);




fill(232-a/20,173+a/20,159+a/20);
triangle(0,120+a*120/640,160,120+a*120/640,80,0+b);
triangle(320,120+a*120/640,480,120+a*120/640,400,0+b);
triangle(0,0,160,0,80,0+b/2);
triangle(0,360+a*120/640,160,360+a*120/640,80,240+b);
triangle(320,360+a*120/640,480,360+a*120/640,400,240+b);
triangle(0,120+a*120/640,160,120+a*120/640,80,120+b);
triangle(320,0,480,0,400,0+b/2);
triangle(320,120+a*120/640,480,120+a*120/640,400,120+b);


fill(251-a/10,149+b,13+a/5);
triangle(160,120+a*120/640,320,120+a*120/640,240,0+b);
triangle(160,360+a*120/640,320,360+a*120/640,240,240+b);
triangle(160,0,320,0,240,0+b/2);
triangle(160,120+a*120/640,320,120+a*120/640,240,120+b);
triangle(480,120+a*120/640,640,120+a*120/640,560,0+b);
triangle(480,360+a*120/640,640,360+a*120/640,560,240+b);
triangle(480,0,640,0,560,0+b/2);
triangle(480,120+a*120/640,640,120+a*120/640,560,120+b);
 
fill(93+a/5,212-b,206);
triangle(0,240+a*120/640,160,240+a*120/640,80,120+b);
triangle(0,480+a*120/640,160,480+a*120/640,80,360+b);
triangle(0,0+a*120/640,160,0+a*120/640,80,0+b);
triangle(0,240+a*120/640,160,240+a*120/640,80,240+b);
triangle(320,240+a*120/640,480,240+a*120/640,400,120+b);
triangle(320,480+a*120/640,480,480+a*120/640,400,360+b);
triangle(320,0+a*120/640,480,0+a*120/640,400,0+b);
triangle(320,240+a*120/640,480,240+a*120/640,400,240+b);

}

For this project I experimented the pattern image and how it would interact with a user. The triangular patters varies as long as their color schemes, while some sort of their orientations remained the same.

Xindi Lyu-Looking Outwards-03

The front elevation of the Maohaus

The MaoHaus is an experimental facade built in Hutongs of Beijing, China. It explores digital fabrication with masonry based on their performative qualities and the historical context of the area. It was built based on an existing structure and the facade ventured into the to the more like a floating fabric. Besides from the form, the installation also filters light and most important of all, at night time it reveals a series of chairman Mao’s portrait, heavily suggesting the historical background of the site, for being located adjacent to The People’s Art House Print shop, which was the workshop for Chairmanmao’s iconic image.


I find this project highly inspirational because not only does it has a very interesting form generated by digital modeling but also the fusion of historical background and the design aesthetic was so well done due to the aid of computation, the right material was used also in the best way possible. This truly showed me the potential of computational fabrication playing parts in any physical design and how future design aesthetic would develop with this merged into the design process.

link: https://www.archdaily.com/886282/the-maohaus-antistatics-architecture