Author: t.chen

Looking Outward 06

“Collage with Squares Arranged according to the laws of Chance” By the DaDaist artist Jean (Hans) Arp, is a seemingly ordered yet disorganized collage composed of torn up pieces of colored paper on a grey background. For many DaDaist artists, found objects and chance encounters became an extremely important aspect of their creative process as they saw it as a way to break from from the traditional elements that defined artistic practices like intention, craft and control. This was the DaDaist approach to the ever increasing rational/ industrializing world that was developing around them. During the composition of the piece, Arp, alledgedly got frustrated by the original drawing he was working on and tore up the paper, dropping them on to the floor. This “accident”, a purely random encounter, in turn became the ultimate form of expression for the piece he created. Nothing, humanly composed or created will have as much of an accurate portrayal of expression, (an idea artists have been exploring for centuries) than the landing and fluttering down of the paper pieces. In the end I think what makes the concept of randomness powerful in computational and generative art is that it allows a certain degree of looseness. This looseness, formerly could not be found elsewhere in the art and design world. Everything was about intention and structure. Yet, randomness subverts those ideals and allows for the art to have a certain degree of agency away from the creator, breathing itself into life.

Untitled (Collage with Squares Arranged according to the Laws of Chance), Jean (Hans) Arp
(French, born Germany (Alsace). 1886–1966),

Project 5 Wallpaper

Continuing my exploration of abstracting puritst paintings of the architect Le Corbusier/ Charles Edouard Jeanneret. This week I decided to attempt to re-interpret some of the common motifs that occur in his paintings into the wall paper assignment. Purists paintings and cubist paintings alike require often require subtle differences in their repetitions of geometry to achieve their ambiguous depth and transparency, so reinterpreting them into a wall paper which inherently a tiled seamless graphic proved to be a difficult task.

sketch
//tjchen
//section A
function setup() {
    createCanvas(600, 600);
    background(220);
}

function draw() {
    scale(1);
    for ( var row = 0; row <= height; row += 80){
        for(var col = 0; col <= width; col += 80){
            tilebigger1(col,row);
        }
    }
    for ( var row = 40; row <= height; row += 80){
        for(var col = 0; col <= width; col += 80){
            tilebigger2(col,row);
        }
    }
}

function tilebigger1(x,y){
    tile(x,y);
    push()
    translate(20,20);
    rotate(radians(180));
    //translate(x+40,y);
    tile(-x-60,-y-20);
    pop();
}
//second row type
function tilebigger2(x,y){
    push()
    translate(20,20);
    rotate(radians(180));
    //translate(x+40,y);
    tile(-x-20,-y-20);
    pop();
    tile(x+40,y);
}
    


function tile(x,y){
    noStroke();
    push();
    translate(x,y);
    //background 
    fill(146, 195, 234);
    square(0,0,40);
    //midground
    fill(88, 96, 105);
    rect(0,0,40,15);
    //women/bull/violin
    strokeWeight(1);
    stroke(0);
    fill(253, 223, 186);
    beginShape();
    curveVertex(40,0);
    curveVertex(40,0);
    curveVertex(23.9,4.56);
    curveVertex(21.62,10.8);
    curveVertex(24.7,16.55);
    curveVertex(32.69,16.29);
    curveVertex(35.72,23.64);
    curveVertex(31.37,27.76);
    curveVertex(23.89,29.92);
    curveVertex(22.41,36.07);
    curveVertex(29.58,39.75);
    curveVertex(40,40);
    curveVertex(40,40);
    endShape();
    //eyes
    noFill();
    strokeWeight(1);
    stroke(0);
    rectMode(CENTER);
    rect(26.18,9.83,3,5,2);
    rect(26.64,33.83,3,5,2);
    //nose bottle
    rectMode(CORNER);
    noStroke();
    fill(86, 122, 183);
    rect(3.5,18.5,15,22);
    fill(255);
    rectMode(CENTER);
    strokeWeight(1);
    stroke(0);
    rect(11,20,15,8,4);
    fill(183, 52, 9);
    noStroke();
    circle(8.5,20,3);
    circle(13.5,20,3);
    //guitar middle 
    noFill();
    strokeWeight(1);
    stroke(0);
    arc(40,20,15,15,HALF_PI,PI+HALF_PI,OPEN);
    pop();
}

Looking outwards 05: 3D graphcis

Industrial light and Magic is a seminal american visual effects company that pioneered many computer graphic techiniques used in major movies, games and 3d graphics. The 1 project that they completed recently that will have a lasting effect on TV production is the Star Wars show, The Mandalorian. Having it’s founding roots in the original star wars movies, Industrial Light and Magic yet again pioneered another visual effects technique for the the new show. The filming of The Mandalorian was one of the first times real time rendering was used in filming. The desolate alien planets on the Mandalorian, where not real earthly locations but instead, real time, computer generated terrain designed by the 3D artists at ILM. These virtual sets were then cast onto “the Volume” a large circular stage with its floors ceilings and walls covered in high def LED screens for camera capture with the actors acting on them. What’s interesting about this is that the real time rendering engine ILM used was the Unreal engine, a 3d graphics software developed by the company Epic games with a focus on 3D video games. This feat, breaks several boundaries in that, not only does it prove that video game engines now have the capacity to perform at a level of photorealism but it also breaks the boundary of a simulated reality, in that in order for this technique to work, there needs to be real time 3D location and space tracking for the camera work to actually make sense in capturing the footage. Although 3D motion capturing was already a thing, it always required more post processing from the artists but in this case, it was good enough to be captured directly on camera.

LO 4 Sound art

The Long player
The long player is a thousand year long “musical piece” created by composer and artist Jem Finer. It started playing on the midnight of the 31st of December 1999 and won’t repeat itself until 2999. The piece itself is in reality a re-interpretation of a source piece that is 20 minutes and 20 secs in length. After being reprocessed by a simple computer algorithm, the variations and combos can be played for a runtime of 1000 years. The algorithm is written in the SuperCollider language, and is actually itself written to plan for the eventual failure and obsoleteness of current technology. Thus, the music score itself was designed to be able to be played on any instrument with any technology. Finer, produced the piece after spending several years studying musical systems, however the piece itself presents an exploration on a far larger scale. With the piece lasting 1000 years, the piece is a reflection and exploration on the concept of time, scale, ephemerality and our traditional ideas about music. Although the score is predetermined, the exact way the piece will be played is a constant unknown for a human listening to it because of the vast scale it exists on. For finer, the piece is an exploration into the unknown, something that will capture the human imagination on a unfathomable level.

The LongPlayer

Project 04 Line Art

The line art examples reminded me of space and warp patterns we would see in movies, so I decided to try to capture a sense of movement similar to a spaceship warp.

sketch
var dx1;
var dy1;
var dx2;
var dy2;
var tunnelW = 20;
var tunnelH = 20 ;
var xwall ;
var ywall;
var conNumLines = 20;
var numLines;
var x = 0;
var rb = 0;
var gb = 0;
var bb = 0;

function setup() {
    createCanvas(400, 400);
    background(200);
}
function draw(){
    var r = (random(0,255));
    var g = (random(0,255));

    numLines = random(15);
    xwall = max(dist(mouseX,0,0,0),dist(mouseX,0,width,0));
    ywall = max(dist(0,mouseY,0,0),dist(0,mouseY,0,height));
    //setupbackground
    background(rb,gb,bb);
    rb += random(0,1);
    gb += random(0,2);
    bb += random(0,2);
    if (rb>255 || gb>255 || bb>255){
        rb=0;
        gb=0;
        bb=0;
    }
    //setup end oof tunnel 
    rectMode(CENTER);
    noFill();
    push();
    translate(mouseX,mouseY);
    rect(0,0,tunnelW+x,tunnelH+x);
    x+=3;
    if ((tunnelW+x)> xwall || (tunnelH+x)> ywall) {
        x=0;
    }
    pop();
    fill(255);
    rect(mouseX,mouseY,2*tunnelW,2*tunnelH);
    
    //inner lines
    //top line
    line(mouseX-tunnelW,mouseY-tunnelH,mouseX+tunnelW,mouseY-tunnelH);
    //bottom line
    line(mouseX-tunnelW,mouseY+tunnelH,mouseX+tunnelW,mouseY+tunnelH);
    //left line
    line(mouseX-tunnelW,mouseY-tunnelH,mouseX-tunnelW,mouseY+tunnelH);
    //right line
    line(mouseX+tunnelW,mouseY-tunnelH,mouseX+tunnelW,mouseY+tunnelH);
    
    //outer lines 
    //top line
    line(0,0,width,0);
    //bottom line
    line(0,height,width,height);
    //left lin 
    line(0,0,0,height);
    //right lin
    line(width,0,width,height);

    //perspective line
    //top 
    dx1 = ((mouseX+tunnelW)-(mouseX-tunnelW))/numLines;
    dy1 = ((mouseY-tunnelH)-(mouseY-tunnelH))/numLines;
    dx2 = (width-0)/numLines;
    dy2 = (0-0)/numLines;
    stroke(r,g,0);
    strokeWeight(random(0.5,2));
    var topx1 = mouseX-tunnelW;
    var topy1 = mouseY-tunnelH;
    var topx2 = 0;
    var topy2 = 0;
    for (var i = 0; i <= numLines; i += 1) {
        line(topx1, topy1, topx2, topy2);
        topx1 += dx1;
        topy1 += dy1;
        topx2 += dx2;
        topy2 += dy2;
    }   
    //bottom 
    dx1 = ((mouseX+tunnelW)-(mouseX-tunnelW))/numLines;
    dy1 = ((mouseY+tunnelH)-(mouseY+tunnelH))/numLines;
    dx2 = (width-0)/numLines;
    dy2 = (height-height)/numLines;
    stroke(r,g,0);
    strokeWeight(random(0.5,2));
    var bottomx1 = mouseX-tunnelW;
    var bottomy1 = mouseY+tunnelH;
    var bottomx2 = 0;
    var bottomy2 = height;
    for (var i = 0; i <= numLines; i += 1) {
        line(bottomx1, bottomy1, bottomx2, bottomy2);
        bottomx1 += dx1;
        bottomy1 += dy1;
        bottomx2 += dx2;
        bottomy2 += dy2;
    }   
    //left 
    dx1 = ((mouseX-tunnelW)-(mouseX-tunnelW))/numLines;
    dy1 = ((mouseY+tunnelH)-(mouseY-tunnelH))/numLines;
    dx2 = (0-0)/numLines;
    dy2 = (height-0)/numLines;
    stroke(r,g,0);
    strokeWeight(random(0.5,2));
    var leftx1 = mouseX-tunnelW;
    var lefty1 = mouseY-tunnelH;
    var leftx2 = 0;
    var lefty2 = 0;
    for (var i = 0; i <= numLines; i += 1) {
        line(leftx1, lefty1, leftx2, lefty2);
        leftx1 += dx1;
        lefty1 += dy1;
        leftx2 += dx2;
        lefty2 += dy2;
    }   
    //right 
    dx1 = ((mouseX+tunnelW)-(mouseX+tunnelW))/numLines;
    dy1 = ((mouseY+tunnelH)-(mouseY-tunnelH))/numLines;
    dx2 = (width-width)/numLines;
    dy2 = (height-0)/numLines;
    stroke(r,g,0);
    strokeWeight(random(0.5,2));
    var rightx1 = mouseX+tunnelW;
    var righty1 = mouseY-tunnelH;
    var rightx2 = width;
    var righty2 = 0;
    for (var i = 0; i <= numLines; i += 1) {
        line(rightx1, righty1, rightx2, righty2);
        rightx1 += dx1;
        righty1 += dy1;
        rightx2 += dx2;
        righty2 += dy2;
    }   
    stroke(255);
    //side 1 
    dx1 = (width-0)/conNumLines;
    dy1 = (0-0)/conNumLines;
    dx2 = (0-0)/conNumLines;
    dy2 = (height-0)/conNumLines;
    strokeWeight(1);
    var sidex1 = 0;
    var sidey1 = 0;
    var sidex2 = 0;
    var sidey2 = height;
    for (var i = 0; i <= conNumLines; i += 1) {
        line(sidex1, sidey1, sidex2, sidey2);
        sidex1 += dx1;
        sidey1 += dy1;
        sidex2 -= dx2;
        sidey2 -= dy2;
    }
    //side 2
    dx1 = (width-0)/conNumLines;
    dy1 = (0-0)/conNumLines;
    dx2 = (width-width)/conNumLines;
    dy2 = (height-0)/conNumLines;
    strokeWeight(1);
    var sidex1 = 0;
    var sidey1 = 0;
    var sidex2 = width;
    var sidey2 = 0;
    for (var i = 0; i <= conNumLines; i += 1) {
        line(sidex1, sidey1, sidex2, sidey2);
        sidex1 += dx1;
        sidey1 += dy1;
        sidex2 += dx2;
        sidey2 += dy2;
    }
    //side 3
    dx1 = (width-width)/conNumLines;
    dy1 = (height-0)/conNumLines;
    dx2 = (width-0)/conNumLines;
    dy2 = (height-height)/conNumLines;
    strokeWeight(1);
    var sidex1 = width;
    var sidey1 = height;
    var sidex2 = 0;
    var sidey2 = height;
    for (var i = 0; i <= conNumLines; i += 1) {
        line(sidex1, sidey1, sidex2, sidey2);
        sidex1 -= dx1;
        sidey1 -= dy1;
        sidex2 += dx2;
        sidey2 += dy2;
    }
    //side 4
    dx1 = (width-0)/conNumLines;
    dy1 = (height-height)/conNumLines;
    dx2 = (0-0)/conNumLines;
    dy2 = (height-0)/conNumLines;
    strokeWeight(1);
    var sidex1 = width;
    var sidey1 = height;
    var sidex2 = 0;
    var sidey2 = height;
    for (var i = 0; i <= conNumLines; i += 1) {
        line(sidex1, sidey1, sidex2, sidey2);
        sidex1 -= dx1;
        sidey1 -= dy1;
        sidex2 += dx2;
        sidey2 -= dy2;
    }
}

Project – 3 Dynamic Drawing

This particular drawing was inspired by the Purist Paintings of Le Corbusier. The interactive painting re-interprets the ideas of transparency and multi-perspectival drawings explored in Cubist and purist paintings.

sketch
//tjchen 
// 15104 section A
var dia =5
var size = 5
var x
var y 
var vertex1 

function setup() {
    createCanvas(1000, 600);
    background(255);
}
function draw () {
    background(0);
    y = height/2;
    x = max(mouseX,width/5);
    vertex1 = max (0+mouseY*4, width/2);
    vertex2 = min (width-mouseY*4, width/2);
    push();
    var yguitar = height /3;
    rectMode(CORNER);
    fill(61, 80, 130);
    beginShape();
    vertex(vertex1,y);
    vertex(vertex2,y);
    vertex(0,height);
    vertex(width,height);
    endShape();

    //moving bottles
    push();
    scale(mouseY/400);
    rectMode(CENTER);
    fill(230,150);
    rect(mouseX+100,y,60,200,30);
    rect(mouseX+100,y-100,20,100,10);
    strokeWeight(1);
    stroke(0);
    circle(mouseX+100,y-150,20);
    fill(255,0,0,70);
    noStroke();
    rect(mouseX+100,y+15,60,170,30);
    stroke(255,0,0,140);
    pop();
   
    //GUITRAR
    noStroke();
    translate(width/2,height/2);
    scale(mouseY/200); 
    fill(140,height-mouseY);
    rectMode(CENTER);
    rect(200,0,150,50);
    rect(0,0,400,200,80);
    fill(mouseX);
    circle(0,0,50);
    fill(61, 80, 130);
    circle(0,(0)+100,80);
    fill(0);
    circle(0,(0)-100,80);
    //can
    pop();
    push();
    scale(1/(mouseX/400));
    fill(230);
    rectMode(CORNER);
    rect(x-25,y-15,50,150,25);
    strokeWeight(1);
    stroke(0);
    circle(x, y, 50);
    fill(150);
    circle(x, y, 30);
    pop();
    // circle 
    fill(41,71,82);
    circle(3*(width/5),mouseX,50);
    //bull nose
    var c =color(178,13,29,(height-mouseY)); 
    strokeWeight(height-mouseY);
    fill(c);
    rectMode(CENTER);
    rect((width/2)+50,height/2, abs(mouseY/4), mouseY/5,abs(mouseY/5));

}

Looking outwards 3 Computational Fabrication

Digital Fabrication/ Computational Fabrication

Computational fabrication is a relatively new field in comparison the rest of the discipline of building and making. With the advent of computational design and software the need for fabrication techniques to realize these new fantastical objects arose. Office Da an architectural firm based in Boston led by Nader Tehrani and Monica Ponce de Leon, explored these concepts in their piece “An Installation of folded Steel Plates” at the MoMa. Conceived in 1998 for the show “Fabrications” at the Museum of Modern art, Architecture as a discipline has just began to investigate the infinite possibilities of Digital fabrication with the opening of the Guggenheim Museum a year prior. For a building sized object to consist of many pieces of customized geometries and complex forms became possible with the inquiries the architects have made into computational designs and fabrication. In the installation Tehrani and Ponce de Leon created, they seek to use the fabrication techniques to blur the line between the traditional structural systems of architecture (tectonics) with actual geometrical design. They do this by digitally folding metal panels and stitching them together in very precise ways. The perforations on the panels are also generated via a computational device in order to lower the weight of the metal panels. The installation also relied on computational tools and fabrication to realize it’s optical illusionary characteristics. From certain angles the installation appears to be flat which it is actually conceived of many customized metal panels. This is interesting because the project begins to touch on the idea of mass customization, a process previously possible but costly. Large amounts of customizable pieces and objects can be designed and fabricated with the correct algorithms and machines. Customization, with the discoveries of Computational fabrication is no longer a luxury provided by the craftsman and artisans, but now a new mode of production.

MOMA FABRICATION

Looking Outwards 02

As digital fabrication tools get more and more sophisticated, there’s been calls for the field of architecture to keep up with the technology. Digital fabrication tools and computer algorithms come hand in hand, not only do computer algorithms help the tools realize the physical objects, the algorithms can also help designers and architects visualize and imagine previously impossible geometries. Michael Hansmeyer, a classically trained, architect, walks at the forefront of this endeavor. In is installation Digital Grotesque I, Hansmeyer explore the the expressive formal potentials of digital technologies, the forms, generated by a series of algorithms consists of 260 million geometric facets, an impossible feat via regular explicit modelling. What’s interesting about this is that, the algorithm, other than interpreting classical architectural forms, adds another layer of detail and complexity to it by exploring, ideas such as permutations and infinite scales. The artist demonstrates this on his website with a 3d model of the actual installation, where the piece itself can be zoom in infinitely. An exploration of fractals and endless permutations. Although the idea of infinite is limited by reality and our fabrication abilities and resolution, it is still without a doubt an interesting concept to explore at an architectural scale, that has been thought over by generations of architects. Although it is now, just a slight bit closer to reality, Hansmeyer’s piece can still only capped at a certain resolution. There is still much to discover through the lens of generative design.

http://www.michael-hansmeyer.com/digital-grotesque-I

Project 2 Variable Face!

Instead of just varying the sizes of the elements of the faces I decided to go with having 2 or 3 set options for each element, then by assigning them numbers and calling them out via the random command, I could get a variation of faces from the set.

tjchen face
//tjchen
//15-104 section a

var face = 2;
var eyesright = 2;
var eyesleft = 2;
var eyesizeL = 5;
var eyesizeR = 5;
var hair = 2;
var mouth = 2;
function setup() {
    createCanvas(480, 600);
    background(255);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
    background(220);
    rectMode(CENTER); 
    var cenx = (width/2);
    var ceny = (height/2);
    fill(255);
    rect(width/2, height/2, 50, 50);
    // short face
        if (face <=2 ){
            noStroke();
            rect(width/2, height/2, 80, 200, 40);
        } else if (face <= 3){
            noStroke();
            rect(width/2, height/2, 200, 200, 40);
        } else {
            noStroke();
            circle(width/2,height/2 ,200);
        }
    // eyes right
        if (eyesright<=2) {
            fill(0);
            circle((width/2)+ 10, (height/2)-20, eyesizeR);
        } else if(eyesright <=3) {
            fill(0);
            circle((width/2)+ 10, ((height/2)+ 3)-20, eyesizeR);
        } else {
            fill(0);
            circle((width/2)+ 10, ((height/2)- 3)-20, eyesizeR);
        }
    // eyes left
        if (eyesleft<=2) {
            fill(0);
            circle((width/2)- 10, (height/2)-20, eyesizeL);
        } else if(eyesleft <=3) {
            fill(0);
            circle((width/2)- 10, ((height/2)+3)-20, eyesizeL);
        } else {
            fill(0);
            circle((width/2)- 10, ((height/2)-3)-20, eyesizeL);
        }
    //hair 
        if (hair<=2) {
            //fro
            noStroke();
            fill(161, 119, 96);
            circle(cenx,ceny-100,80);
            circle(cenx+30,ceny-100,80);
            circle(cenx+80,ceny-100,80);
            circle(cenx-55,ceny-100,80);
            circle(cenx-80,ceny-100,80);

            circle(cenx,ceny-140,80);
            circle(cenx+30,ceny-135,80);
            circle(cenx+80,ceny-155,80);
            circle(cenx-55,ceny-140,80);
            circle(cenx-80,ceny-145,80);

            circle(cenx,ceny-180,80);
            circle(cenx+30,ceny-190,80);
            circle(cenx+80,ceny-185,80);
            circle(cenx-55,ceny-170,80);
            circle(cenx-80,ceny-180,80);
        } else if (hair<=3){
            //tophat
            noStroke();
            fill(0);
            rect(cenx,ceny-200,80,200);
            rect(cenx,ceny-100,100,20);
        }
    //mouth 
        if (mouth <=2) {
            stroke(0);
            strokeWeight(2);
            line(cenx-40, ceny+20, cenx+40, ceny+20);
        } else {
            fill(255,0,0);
            ellipse(cenx,ceny+20, 40,20);
            stroke(143, 4, 25);
            strokeWeight(2);
            line(cenx-20,ceny+20,cenx+20,ceny+20);
        }

}

function mousePressed(){
    face = (random(1,4)); 
    eyesright = (random(1,4));
    eyesleft = (random(1,4));
    eyesizeR = (random(5,10));
    eyesizeR = (random(5,10));
    hair = (random(1,4));
    mouth = (random(1,4));
}

Project 1: Portrait

Portrait!

sketch – portraitDownload
//Thomas Chen
// 15-104 section A

function setup() {
    createCanvas(600,600);
    background(255, 230, 250);
}

function draw() {
        noStroke();
        //noFill
        rectMode(CENTER);
        //hoodie
        fill(190, 209, 230)
        ellipse(291,387,198,173);
        //body
        rect(296,615,353,399,100);   
        //hat 
        fill(177,230,215);
        ellipse(311,267,144,133);
        fill(190, 230, 218)
        beginShape()
        curveVertex(268,273);
        curveVertex(323,238);
        curveVertex(373,233);
        curveVertex(404,244);
        curveVertex(404,250);
        curveVertex(383,243);
        curveVertex(326,251);
        endShape(CLOSE);
        fill(132, 171, 160)
        beginShape()
        curveVertex(404,250);
        curveVertex(383,243);
        curveVertex(326,251);
        curveVertex(268,273);
        curveVertex(327,258);
        curveVertex(404,258);
        endShape(CLOSE);
        //shadow
        beginShape();
        curveVertex(242,312);
        curveVertex(374,358);
        curveVertex(379,399);
        curveVertex(305,461);
        curveVertex(226,334);
        endShape(CLOSE);
        //face
        fill(232,199,155);
        beginShape();
        curveVertex(383,258);
        curveVertex(383,344);
        curveVertex(356,392);
        curveVertex(334,399);
        curveVertex(306,392);
        curveVertex(267,344);
        curveVertex(267,334);
        curveVertex(244,322);
        curveVertex(238,293);
        curveVertex(253,288);
        curveVertex(267,300);
        curveVertex(268,273);
        curveVertex(327,258);
        endShape(CLOSE);
        //neck
        quad(267,344,343,396,305,461,267,403);
        //lines
        strokeWeight(3);
        stroke(124, 139, 156);
        beginShape(LINES)
        vertex(199,420);
        vertex(226,441);
        vertex(226,441);
        vertex(254,461);
        vertex(254,461);
        vertex(287,503);
        endShape();
        line(200,555,200,600);
        line(400,555,400,600);
        stroke(196, 168, 130);
        line(350,306,350,340);
        line(350,340,340,338);
}