Month: September 2022

Looking Outward Blog 03

Image 1 Shows the part of the structure, and how people interacts with the project.

https://www.jennysabin.com/polyform
I am looking at the project “PolyForm” constructed by Cornell University. What
What I admire about this project is its ability to achieve organic shapes through
the repetition of somewhat geometric surfaces. I really like the modular system
of using the same geometric logic and through repetition, creating something
complex and organic. What is also really like is that the structure seems to
be enclosed in a transparent box, an illusion created by the glass walls
around the structure, making the piece latch onto a surface.

I suppose the algorithm works by initially creating a geometric pattern that
mimics the patterns of nano-leveled cellular structure and creates a system
through parametric generation to achieve the ideal density of the material and
empty spaces in the project to generate the form. Then the structure would be

disassembled into different sheets and sent to a laser cutting lab or other 3-D
construction methods to create the panels, piecing the components
together to assemble the project.

The project is a collaboration between the school of architecture and the
college of human ecology within the university, thus it is apparent the
creators would have a higher appreciation of biomimicry structure. The
creators have supported this idea where they claim the concept is to bridge
the nanoscale to the human scale.

Project 03 Dynamic Drawing

This is my dynamic drawing of a cityscape with the fore, mid, and background each moving at a different pace as the mouse moves from left to right. The sun also rises and sets and the moon rises while the background changes color. The buildings also reverse in color as the background changes color

sketch
//Michael Li
//Section C 

function setup() {
    createCanvas(600, 450);
    rectMode(CENTER);
   
}

var diam = 50 // diameter for sun & moon
var opacity = 255 //set opacity & grey value
var timer = 0 // for star blinking

function draw() {

    //Background Change color

    //the opacity value is remapped so mouseX would return 
    //0-255 by inputing canvas width
    opacity = map(constrain(mouseX, 0, width), 0, width, 0, 255)
    background(192, 215, 218)
    background(4, 27, 46, opacity); //revealing the second background color as mouse moves to the right
    
    fill(255, 255, 0);

    // restrict mouseX within the canvas
    //remapping the mouseX value in different domains by inputing the canvas width

    //three different remapped values for each layer of the cityscape's translation
    var mapX = map(constrain(mouseX, 0, width), 0, width, 0, width*2);
    var mapX2 = map(constrain(mouseX, 0, width), 0, width, 200, width*2-200);
    var mapX3 = map(constrain(mouseX, 0, width), 0, width, 400, width*2-400);

    //variables used to change the sun&moon sizes
    var mapSunSizeX = map(constrain(mouseX, 0, width), 0, width, 0, 40);
    var mapSunSizeY = map(constrain(mouseY, 0, height), 0, height, 0, 100);

    var mapSun = map(constrain(mouseX, 0, width), 0, width, 180, 310);
    var mapMoon = map(constrain(mouseX, 0, width), width/2, width, 180, 270); 
    //width/2 so the moon appears halfway of the canvas

    //variables used to change the building heights
    var bSizeY = map(constrain(mouseY, 0, height), 0, height, 0, 40);
    var bSizeY2 = map(constrain(mouseY, 0, height), 0, height, 0, 20);
    var bSizeY3 = map(constrain(mouseY, 0, height), 0, height, 0, 10);
    fill(0)
    

    //Sun
    push() //saves all the conditions set before

    diam = 30 - mapSunSizeX +  mapSunSizeY 
    //the sun size changes as mouse moves across the canvas
    
    strokeWeight(0);
    translate(mapSun+diam/4, height*1);
    rotate(radians(mapSun));
    //the sun moves and rotates as the mouse moves 

    //two different stages of the sun
    //the opacity decreases to reveal the other sun
    fill(247, 240, 25); //yellow
    ellipse(width/2, height/2, diam, diam);

    fill(243, 88, 22, constrain(map(opacity, 0, 125, 0, 80), 0, 80));//orange glow
    ellipse(width/2, height/2, diam*2, diam*2);

    fill(243, 88, 22, opacity); //orange
    ellipse(width/2, height/2, diam, diam);

    pop() //return to previous set conditions

    //Moon
    push()

    noStroke();

    translate(mapMoon+diam/4, height*1);
    rotate(radians(mapMoon));
    //the moon moves and rotates with the mouse

    fill(255); //white
    ellipse(width/2, height/2, diam, diam); //cirlce for moon

    //circle to block the moon to form a crescent 
    fill(151, 202, 240)
    ellipse(width/2+diam/3, height/2+diam/3, diam, diam);
    fill(4, 27, 46, opacity)
    ellipse(width/2+diam/3, height/2+diam/3, diam, diam);
    
    pop()

    //clouds

    push()

    translate(mapSun+diam/4, height*1);
    //clouds move with the sun, but only 1/4 the distance traveled

    //ellipses to form the clouds
    fill(255, 120);
    strokeWeight(0);
    ellipse (0, 0-height*9/10, 200, 50);
    ellipse (30, 0-height*8.5/10, 200, 50);
    pop()

    //Stars

    push()

    timer += 1 //the timer ticks
    if (timer%40 ==0){ //every interval of 40 the stars blink once
        if (opacity >= 120){ 
        //the stars only appear when the background is in trasition between two colors
            for (var i = 0; i <= 300; i++){
                //use variable i to count, and draws 300 stars in the range set
                fill(255);
                ellipse(random(0-width*3/5, width*2.7-width*3/5), 
                random(0-height, height*2), random(3, 8), random(3, 8));
            }
        }
    }

    pop()

    //Translate Layer 0
    //the last layer in the back

    push()

    opacity = map(constrain(mouseX, 0, width), 0, width, 30, 200);
    //remap the grey value to create a gradient of grey

    fill(opacity);
    translate(mapX, 0);
    strokeWeight(0);
    rectMode(CORNER); //changes so the rectangles draw from the left corner

    //ground
    rect(0-width*1.9, height*7/8+ bSizeY, width*3, height/5);
    var bSize = map(constrain(mouseX, 0, width), 0, width, 20, 50);

    //buildings last layer
    //drawing each individual building with variious set heights and width
    //the height changes by the value of bSizeY
    rect(0-width*2, height*3/5 + bSizeY, 60, height);
    rect(0-width*1.95, height*2/5 + bSizeY, 75, height);

    rect(0-width*1.75, height*2.5/5 + bSizeY, 40, height);
    rect(0-width*1.7, height*1.5/5 + bSizeY, 60, height);
    rect(0-width*1.6, height*1.8/5 + bSizeY, 40, height);

    rect(0-width*1.5, height*2/5 + bSizeY, 40, height);

    rect(0-width*1.4, height*1.5/5 + bSizeY, 80, height);
    rect(0-width*1.35, height*2/5 + bSizeY, 50, height);

    rect(0-width*1.35, height*2/5 + bSizeY, 50, height);

    rect(0-width*1.25, height*3/5 + bSizeY, 50, height);
    rect(0-width*1.2, height*2/5 + bSizeY, 50, height);

    rect(0-width*1.1, height*1/5 + bSizeY, 50, height);
    rect(0-width*1.05, height*3/5 + bSizeY, 70, height);
    rect(0-width*1.03, height*2/5 + bSizeY, 40, height);

    rect(0-width*0.8, height*1/5 + bSizeY, 50, height);
    rect(0-width*0.85, height*2.3/5 + bSizeY, 70, height);
    rect(0-width*0.7, height*2/5 + bSizeY, 40, height);

    rect(0-width*0.8, height*1/5 + bSizeY, 50, height);
    rect(0-width*0.85, height*2.3/5 + bSizeY, 70, height);
    rect(0-width*0.7, height*2/5 + bSizeY, 40, height);

    rect(0-width*0.6, height*1.5/5 + bSizeY, 50, height);
    rect(0-width*0.55, height*2.7/5 + bSizeY, 70, height);
    rect(0-width*0.44, height*1.5/5 + bSizeY, 50, height);

    rect(0-width*0.3, height*3/5 + bSizeY, 50, height);
    rect(0-width*0.22, height*2.5/5 + bSizeY, 50, height);

    rect(0-width*0.1, height*2.8/5 + bSizeY, 50, height);

    rect(0+width*0.02, height*2.3/5 + bSizeY, 70, height);
    rect(0+width*0.1, height*1.8/5 + bSizeY, 60, height);
    rect(0+width*0.15, height*3.2/5 + bSizeY, 60, height);
    pop();


   //Translate Layer 1
   //second layer of buildings
   push()
    opacity = map(constrain(mouseX, 0, width), 0, width, 60, 150);
    //grey value is remapped to have a smaller range than layer 0

    fill(opacity)
    translate(mapX2, 0)
    strokeWeight(0);
    rectMode(CORNER)

    //buildings second layer
    //drawing each individual building with height varing by bSizeY2
    rect(0-width*1.9, height*11/12 + bSizeY2, width*2.8, height/5)

    rect(0-width*1.7, height*1.8/5 + bSizeY2, 100, height)

    rect(0-width*1.5, height*3/5 + bSizeY2, 80, height)
    rect(0-width*1.4, height*3.2/5 + bSizeY2, 40, height)

    rect(0-width*1.3, height*3/5 + bSizeY2, 80, height)
    rect(0-width*1.25, height*2.2/5 + bSizeY2, 60, height)

    rect(0-width*1.12, height*2.2/5 + bSizeY2, 80, height)
    rect(0-width*1.05, height*3.2/5 + bSizeY2, 60, height)

    rect(0-width*0.8, height*2.2/5 + bSizeY2, 80, height)
    rect(0-width*0.75, height*3.2/5 + bSizeY2, 60, height)

    rect(0-width*0.6, height*3.2/5 + bSizeY2, 80, height)
    rect(0-width*0.5, height*2.2/5 + bSizeY2, 60, height)

    rect(0-width*0.2, height*3.3/5 + bSizeY2, 80, height)
    rect(0-width*0.1, height*4.2/5 + bSizeY2, 60, height)
    pop()

//Translate Layer 2
//front layer

    push();

    opacity = map(constrain(mouseX, 0, width), 0, width, 90, 100);
    //grey values are further remapped to be in a lesser raneg than layer 1
    fill(opacity)
    translate(mapX3, 0)
    strokeWeight(0);
    rectMode(CORNER);

    //buidlings front layer
    //drawing buildings with varied heights adjusted by bSizeY3
    rect(0-width*1.35, height*17/18 + bSizeY3, width*2.8, height/5)

    rect(0-width*1.35, height*3.2/5 + bSizeY3, 100, height)

    rect(0-width*1.1, height*2.8/5 + bSizeY3, 100, height)

    rect(0-width*1.0, height*4/5 + bSizeY3, 80, height)
    rect(0-width*0.9, height*4.2/5 + bSizeY3, 40, height)

    rect(0-width*0.85, height*4/5 + bSizeY3, 80, height)
    rect(0-width*0.8, height*3.2/5 + bSizeY3, 60, height)

    rect(0-width*0.6, height*2.9/5 + bSizeY3, 50, height)
    rect(0-width*0.55, height*3.8/5 + bSizeY3, 60, height)

    pop();
}

Looking Outwards-03, Section A

I thought the piece by David Bizer was particularly inspirational. He used the timeline of an audiofile and then 3D printed it to create a jewelry piece for someone saying, “I love you.” I thought this piece was really cool because of how Bizer captures something that is typically thought to not be tangible. I just think it is a neat way to convey a message.

The algorithms must be able to pick up sound and then return different lengths of lines based on the sound.

The creator’s artisitic vision is shown in this piece because of the materials he chooses to make. Even though the shape of the piece is determined by the sound file, he chooses the material used.

Here is the link to the piece by David Bizer (2015).

Blog 3

Computational Design
Looking at the link to the pinterest board titled “computational design”, a lot of interesting and unique patterns are saved onto the board. Some are more geometric while others are more organic but they all seem to fit together as a whole. I often am pretty pessimistic and feel like I don’t learn as much as I would like to in classes and moments like these are nice because they show that I actually have. If you asked me three weeks ago how I thought that these patterns were created I wouldn’t have been able to tell you, but after learning the random line generation code I have a simplified idea of how they were made. It seems like a lot of interesting and efficient patterns can be made this way. Unlike people the computer can consider and compute an answer while considering tons of variables. For example structure, weight, direction, etc can all become complex variables that are called upon while creating a pattern like the ones we saw. A lot of these kind of look like those “futuristic” ultra light shoes that companies love making renderings of.

LO 3: Mouse intestine. FluoCells® prepared slide #4

https://www.thermofisher.com/us/en/home/technical-resources/research-tools/image-gallery/image-gallery-detail.2436.html

Off of the description given in the website, it is interesting that the function of this piece does not seem to be purely artistic.
It goes to purpose of digital art as a visual aid, something which we may tend to take for granted in this era. In order for the image to
be produced, nuclei were colored using a combination of lighting and stain. Three digitized sets were then compiled into this image. I
spoke in my last blog post about digitized art that is either hard or impossible to replicate traditionally, which is a concept that can
go beyond being a novelty and rather add something to the artistry of the piece. Here, digital art is also being used in a way that
cannot be replicated perfectly traditionally though the emphasis on its purpose in doing so is more in the realm of practicality, though
notably not necessarily outside of aesthetics when presented with the color choices and presentation and how that can influence our
understanding and focus on the piece.

Mouse intestine. FluoCells® prepared slide #4, a composite of three digitized images

Looking Outwards 03: Computational Fabrication

This project is called Mygenchair by Teemu Seppänen An and it produces a random chair with different design every time with existing dataset of chair designs. The random and creative nature inspires me because it is continuously creating creative designs while not being creative. This program lets the computer, which has no creativity do creative work just with existing data sets. The algorithm is very complex because it creates a 3d object in great detail. The creator uses eiganface algorithm to identify the similarities and differences in chairs to auto generate chaid designs. Also, since the program subdivides mesh faces, the creator is able to create small details in design which adds complexity to normal 3d art. The creator’s artistic work can also be applied in real life very easily if he 3d prints the objects. The program is very impressive because it does the job of what multiple people would do: brainstorms, creates design, and produces.

https://www.pinterest.com/pin/67342956900650454/?mt=login

Mygen Chair

Project-03: Dynamic Drawing

sketch
//Alicia Kim
//Section B

var r = 80;
var angle = 0;

function setup() {
    createCanvas(450, 600);
    background(220);
}

function draw() {
    noStroke ();
    //limiting y from 0 to 600
    var y = max(min(mouseY, 600), 0);  
    // as y increases background gets lighter
    background (255*y/650); 


//top ellipse
    fill (255,232,124); // star yellow
    ellipse (width/2,37.5,25,25);

//trunk
    fill (58.8,29.4,0); // brown
    rect(width/2-17.5,65,35,450);

//leaves
// as y increases, size of the leaves increases & y position changes 
    push();
    // higher the y, leaves get darker 
    fill (157-120*y/650,205-140*y/650,143-120*y/650); //frog
    triangle(width/2, 50, width/3, 120, 2/3*width,120);

    translate (-45*y/650,-25*y/650);
    scale (1+0.2*y/650);
    triangle(width/2, 50+65*y/650, width/3-8*1/3*y/650, 
        120+55*y/650, 2/3*width+8*1/3*y/650, 120+55*y/650);

    translate (-45*y/650,-25*y/650);
    scale (1+0.2*y/650);
    triangle(width/2, 50+95*y/650, width/3-12.121212*y/650, 120+100*y/650,
     width*2/3+12.121212*y/650, 120+105*y/650);

    translate (-45*y/650,-25*y/650);
    scale (1+0.2*y/650);
    triangle(width/2, 50+140*y/650, width/3-15.68627*y/650, 120+150*y/650,
     width*2/3+15.68627*y/650, 120+150*y/650);
   

    translate (-45*y/650,-25*y/650);
    scale (1+0.2*y/650);
    triangle(width/2, 50+175*y/650, width/3-18.05956*y/650, 120+185*y/650,
     width*2/3+18.05956*y/650, 120+185*y/650);
    pop();

//ornaments 
// higher the y, more ornaments appear

    if (y>125){
        fill (251,209,225); // ornaments pink
        ellipse (width/2-10,88,25,25);

    }
    if (y>165){
        fill (255,232,124); // ornaments yellow
        ellipse (width/2+27,138,25,25);
    }

    if (y>210){
        fill (255,218,173); // ornaments orange
        ellipse (width/2,200,25,25);
    }
    if (y>270){
        fill (250,128,114); // ornaments salmon
        ellipse (width/3,220,25,25);
    }
    if (y>330){
        fill (255,232,124); // ornaments yellow
        ellipse (width/2-8,300,25,25);
    }
    if (y>390){
        fill (255,218,173); // ornaments orange
        ellipse (width-width/3,280,25,25);
    }

    if (y>440){
        fill (255,232,124); // ornaments yellow
        ellipse (width/3,360,25,25);

    }

    if (y>495){
        fill (251,209,225); // ornaments pink
        ellipse (width/2+14,400,25,25);
    }

    if(y>550){
        fill (250,128,114); // ornaments salmon
        ellipse (width-width/4,420,25,25);

        fill (255,218,173); // ornaments orange
        ellipse (width/4,450,25,25);
    }
    
}
Ideation

Assignment 3 – Game

bouncy_ball_game
//David Vargas dvargas

var vVelocity =1; //direction and speed of ball
var hVelocity =5;
var x= 100; // x position of ball
var y= 100; // y position of ball
var diam = 35; //diameter of circle
var points=0; // number of points
var title = true; //title screen text variable


function setup() {
    createCanvas(200, 200);
    background(220);
    
}

function draw() {

    background(220);
    fill(150,160,240);
    ellipse(x,y,diam);
    textSize(15);
    text(points,width/2, 20);

    x += hVelocity; 
    y += vVelocity;

    // this makes ball bounce when it hits vertical walls
    if(x> width-diam / 2){
        hVelocity= random(-5,-1);
    } else if (x< diam/ 2 ) {
        hVelocity = random(1,5);
    }

    // this makes ball bounce when it hits horizontal walls
    if (y > width -diam/2){
        vVelocity= random(-5,-1);
    } else if (y < diam/2){
        vVelocity = random(1,5);
    }

    if(points>4){ //this creates the "you win" screen
        background(100,250,100,50);
        textSize(20);
        fill(255);
        text('You Win',width/3 ,height/2);
        noLoop();

    } else if(points<-4){ //this creates the "you lose" screen
        background(240,100,100,50);
        textSize(20);
        fill(255);
        text('You Lose',width/3, height/2);
        noLoop();
    }

    if(title){ // displays tile screen before mouse is pressed
        textSize(25);
        text('Click the Ball',width/6,height/2)
    }
    print('points='+points);

}

    function mousePressed() {
        if(dist(mouseX,mouseY,x,y)< diam/2){ //this changes circle direction after being pressed
        points+= 1
        vVelocity=random(-5,5)
        hVelocity=random(-5,5)
    } else (points+=-1) 

    title= false // title screen dissappears once mouse is pressed
    }

Dynamic Drawing – Project 3

trippy_geometry


function setup() {
    createCanvas(600, 400);
    background(255);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
    var w = width
    var h = height
    var mX = mouseX
    var mY = mouseY
    var diam= dist(w/2, h/2,mX,mY) //diameter of center circle
    var diam2= 2 * (dist(w/2,h/2,w/2 + w/4, h/2)- diam/2)// diameter of peripheral circles
    background(255);
    noFill();
    strokeWeight(constrain(diam/10,3,6)); //stroke 
    stroke(diam,diam/3,170)
    circle(w/2,h/2,diam); //this is the big circle in the middle
    
    push();
    noFill();
    strokeWeight(constrain(diam2/10,5,15));
    translate(w/2,h/2);// translates origin to canvas center
    
    var angle = atan((mY -h/2) / (mX - w/2)) //this outputs the angle of the cursor to the center of the canvas
    
    if(mX < w/2){
    var x = diam/2 * cos(angle - PI) // x position of peripheral circle based on angle of cursor
    var y = diam/2 * sin(angle - PI) // y position of peripheral circle based on angle of cursor
    } else {
    var x = diam/2 * cos(angle )
    var y = diam/2 * sin(angle )
    }
    for (var r=0; r<=2 * PI;r+=PI/4){ //the circles rotate every 45 degrees
    rotate(r);
    circle(x ,y,diam2); // these are the peripheral circles
}
    pop();

}