Month: September 2019

Sean Leo – Project 03 – Dynamic Drawing

I wanted to create an dynamic drawing that was minimal and focused more the on the composition and geometries of the basic shapes. Stopping your mouse anywhere on the canvas will produce a new composition, color and relation between all the parts. Also it’s really satisfying to just roll your mouse around on the canvas!

project-03

//Sean B. Leo
//Section C
//sleo@andrew.cmu.edu

//Project-03
function setup() {
    createCanvas(600, 480);
    strokeWeight(4);
  }
  
  function draw() {
    background(0);
    noFill();
    //scale mouse X value from 0-175
    var a = map(mouseX, 0, width, 0, 175);
    //scale mouse Y value from 0-175
    var b = map(mouseY, 0, height, 0, 175);
    //print(a);
    //contrary motion
    var inX = width - mouseX;
    var inY = height - mouseY;
    //rectangle transformations
    stroke(a, 0, 100);//scales R value
    rect(inX, inY, inX, inY);
    //circle transformations 
    stroke(100, a, b);//scales G B values
    ellipse(width/2, height/2, a, b);
    //triangle transformations
    stroke(0, a, 100);//scales G values
    triangle(width/2, mouseX / 2, mouseY / 2, mouseY / 2, mouseX, mouseY);
  }

Sean Leo – Looking Outwards 3

Fosters+Partners
Fosters+Partners

In looking up computational fabrication, I came across a lot of examples in architecture that features heavy parametric modeling. Without the aid of computers, certain shapes would be next to impossible to produce especially when all the requirements of architectural engineering need to be up held. Below is an example from Fosters+Partners for the new Mexcio City International Airport.

Curving structures and complex geometries create the exoskeleton for the airport and were modeled using digital methods.

Fosters+Partners

Timothy Liu — Looking Outwards — 03

This work is by Christoph Hermann, an artist focused on natural, generative design.

For my Looking Outwards this week, I picked a work by Christoph Hermann from 2012. It’s a piece of wood mathematically and generatively designed to appear flowy, soft, and organic; as shown here, the ripples are so natural it almost appears to be a piece of cloth. This piece really stood out to me because it’s remarkable how natural a computer-generated algorithm was able to make wood, a very stiff material, appear. It’s a testament to how much work the artists must have put into their algorithm to make sure it didn’t appear mechanical or robotic. Hermann worked with the computational design firm Biot(h)ing in order to create code that could emulate the natural flow of rippling fabric. As Biot(h)ing explains on their website, their primary mission is to utilize algorithms to “mimic the process of autopoiesis through intricate entanglements” — in other words, they seek to build code that can create, reproduce, and maintain itself through natural forms.

Hermann’s work was shown at the “Lasvit Liquidkristal (LLK) Pavilion” at Milan Design Week in 2012, an exhibit specifically designed to showcase parametric architecture and organically flowing patterns. Each piece had a smooth exterior with interiors comprising of dips and pockets; presumably, the interior is the portion that was generated with an algorithm. Although it isn’t specified how the code was written, my guess would be that it might have involved using a command that “pushes” shapes toward a certain direction or side. For instance, if we were to write code that could cause shapes to contort to the direction a mouse moves in, it’d be possible to mimic a natural curve or ripple. I’m not exactly sure how to do this, but perhaps it involves easing or other contortion.

Sources:

https://generativedesigns.tumblr.com/post/66953241707/generative-design-operates-as-visual-archive
LIQUIDKRISTAL triennale lovegrove

BIOTHING

Yoshi Torralva – Project 03 – Dynamic – Drawing

sketch

// Yoshi Torralva
// Section E
// yrt@andrew.cmu.edu
// Project 03

var x = 40; //  x height of plaid
var y = 40; //  y height of plaid
var dx = 0; //diagonal var / width
var dy = 40; //diagonal var / height 

function setup() {
    createCanvas(480, 640);
}
function draw() {
    background(mouseX, mouseY, 0); // changes color
//thread to the left and right 
//conditional reactive to the mouse 
if(mouseX > 0) {
    x = mouseX;
}
//conditional reactive to the mouse 
if(mouseX < 200) {
    x = mouseX;
}
//conditional reactive to the mouse 
if(mouseY > 0) {
    y = mouseY;
}
//conditional reactive to the mouse 
if(mouseY < 200) {
    y = mouseY;
}
var bxscale = constrain(mouseX, 40, 100); // scale of ellipse
var byscale = constrain(mouseY, 40, 100); // scale of ellipse 
// plaid banners — layered 
    push();
    noStroke();
    fill(187, 0, 0);
    rect(0, 40, x, 40);
    fill(0, 136, 85);
    rect(160, 0, 40, y);
    fill(0, 136, 85);
    rect(40, 0, 40, y); 
    fill(0, 136, 85);
    rect(160, 0, 40, y);
    fill(34, 68, 51);
    rect(100, 0, 40, y);
    fill(187, 0, 0);
    rect(0, 100, x, 40);
    fill(187, 0, 0);
    rect(0, 160, x, 40);
    fill(34, 68, 51);
    rect(100, 0, 40, y);
    fill(187, 0, 0);
    rect(0, 220, x, 40);
    fill(34, 68, 51);
    rect(220, 0, 40, y);
// thin gold layering 
    fill(170, 102, 0);
    rect(0, 40, x, 10);
    fill(170, 102, 0);
    rect(40, 0, 10, y); 
    pop();
// push and pop used for strokeWeight only
    push();
    stroke(color(255));
    strokeWeight(10);
    line(mouseX, mouseY, 0, 0); // top left line 
    line(mouseX, mouseY, 480, 640); // bottom right line 
    fill("white");
    ellipseMode(CENTER);
    noStroke();
    ellipse(mouseX, mouseY, bxscale, byscale); // ellipse that moves to mouseX/Y
    pop();
}

With this project, I wanted to use the interaction of the mouse to create a plaid pattern. The rectangles react to the mouse and the white lines serve as a visual guide to imply that the mouse is weaving the plaid together. The background alternates color and the cursor shifts scale diagonally.

Alice Cai Looking Outwards 03

https://www.media.mit.edu/projects/meta-mesh-computational-model-for-design-and-fabrication-of-biomimetic-scaled-body-armors/overview/

a photo of METAMESH by Neri Oxman, Jorge Duro-Royo, and Laia Mogas-Soldevila.

MetaMesh is a project by Neri Oxman, Jorge Duro-Royo, and Laia Mogas-Soldevila. In this project, they study biomimetic design. This means studying and producing designs that mimic the functions and features of biochemical processes. MetaMesh studies and mimics the scaling of the Polypterus sengalus, which is an ancient fish. They developed a “hierarchical computational model” that mimics the “structure-function relationships found in the biological exoskeleton”. They then use additive manufacturing, a technology that uses additive layers in order to produce a three-dimensional object.

The purpose of this project was actually to propose a computational approach for protective armor. This scaled armor is meant to be multifunctional. The scaling/exoskeleton of the fish allows for flexibility as well as structural protection. Because the scales are segmented, they allow for movement and adhere to the curves of the body while the body is still covered.

First, they studied the biological organism, how it moves in reaction to curved surfaces. Then they looked at local, regional, and global analysis of the scales. In the regional analysis, they looked at how each scale can connect. In the locoal, they looked the parts of the fish and the proportions. Finally, they looked at the global analysis, which is how clothes adhere to the curves of the human body. This was then put through computational translation that digitalizes the studies to develop an algorithm.

^^ diagram of work flow: putting biological organism studies and new host geometry through computational translation.

I think this project is amazing because it is both functional, scientific, and aesthetic. This study serves a great purpose of protection but also generates such a natural and complex pattern.

Charmaine Qiu – Project 03 – Dynamic Drawing


sketch

Exploring the various ways that shapes in p5js can change with the movement of the cursor was really interesting! It was also interesting to incorporating text in different languages into my code.

/* Charmaine Qiu
   Section E
   charmaiq@andrew.cmu.edu
   Project-03-DynamicDrawing */


var angle = 0
var b = 0


function setup() {
    createCanvas(400, 400);
}

function draw() {
//square that follows the cursor
    fill(b);
    b = random (0, 255);
    strokeWeight(0);
    rectMode(CENTER);
    push();
    translate(mouseX, mouseY);
    background(0);
    rotate(radians(angle));
    rect(0, 0, 50, 50);
    pop();
    angle += 5;

//rectangle outlines in the center
    noFill();
    stroke(255);
    strokeWeight(5);
    push();
    translate(width / 2, height / 2);
    rect(0, 0, mouseX, mouseY);
    pop();

    stroke(b);
    strokeWeight(1);
    rect(width * 0.5, height * 0.5, mouseY, mouseX);

//dancing lines in the center
    stroke(255);
    strokeWeight(1);
    line(width / 2 - 40, height / 2, width / 2 - 40, mouseY + 50);
    line(width / 2 - 30, height / 2, width / 2 - 30, mouseY);
    line(width / 2 - 20, height / 2, width / 2 - 20, mouseY - 20);
    line(width / 2 - 10, height / 2, width / 2 - 10, mouseY + 40);
    line(width / 2, height / 2, width / 2, mouseY);
    line(width / 2 + 10, height / 2, width / 2 + 10, mouseY + 60);
    line(width / 2 + 20, height / 2, width / 2 + 20, mouseY + 10);
    line(width / 2 + 30, height / 2, width / 2 + 30, mouseY);
    line(width / 2 + 40, height / 2, width / 2 + 40, mouseY - 30);

//When the mouse move to the left side of the canvas
    if (mouseX <= width / 2){
      push();
      translate(mouseX - 50, mouseY - 50);
      rotate(radians(angle));
      rectMode(CORNER);
      rect(20, 20, 20, 20);
      pop();
      angle = angle + 0.5;

      push();
      translate(mouseX + 50, mouseY + 50);
      rotate(radians(angle));
      rect(0, 0, 10, 10);
      pop();
      angle = angle - 0.5

      //text
      textSize(15);
      text('WooHooo!!!', 20, 90);
      textSize(30);
      text('哦耶!', 280, 180);

    } else { //When the mouse move to the right side of the canvas
      fill(0);
      strokeWeight();
      push();
      translate(mouseX, mouseY);
      rotate(radians(angle));
      rectMode(CENTER);
      rect(0, 0, 30, 30);
      pop();
      angle = angle + 5

      //text
      textSize(20);
      fill(255);
      text('야호!', 280, 50);
      textSize(25);
      text('ヤッホ〜ー', 70, 350);

    }


}

Caroline Song – Project 03 – Dynamic Drawing

sketch

//Caroline Song
//Section E
//chsong@andrew.cmu.edu
//Project 03 - Dynamic Drawing

var speed = 3;
var distX = 0;
var distY = 1;
var rectX = 300;
var rectY = 300;
var rectWidth = 50;
var rectHeight = 300;

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

function draw(){
//change background color when mouse cursor is on lower half of canvas
    if(mouseY > height/3){
        background(255, 96, 71);
       } else{
       background ("black");
       }

//constantly moving yellow rectangle
    rect(rectX, rectY, rectWidth, rectHeight);
    fill(245, 236, 66);
    noStroke();
    rectX = rectX + distX * speed;
    rectY = rectY + distY * speed;

    if (rectY >= height){
        rectY = -rectHeight;
    }

//when mouse pressed, shapes change from circle to rectangle. 
//shapes will also change colors
    push();
    if(mouseIsPressed){

        //yellow rectangle following mouse cursor when mouse pressed
        rectMode(CENTER);
        rect(mouseX, mouseY, 100, 100);
        fill(245, 149, 66);
        noStroke();

        //blue rectangle when mouse pressed
        rectMode(CENTER)
        rect(400 - mouseX, 300 + mouseY, 75, 75);
        fill(66, 135, 245);
        noStroke();

        //purple rectangle when mouse pressed
        rectMode(CENTER);
        rect(width/2 + mouseX, height/2 - mouseY, 300, 300);
        fill(188, 66, 245);
        noStroke();

        //orange rectangle when mouse pressed
        rectMode(CENTER);
        rect(480, 400, 60, 60);
        fill(245, 236, 66);
        noStroke();

        //yellow rectangle in corner when mouse pressed
        rectMode(CENTER);
        rect(0, 0, 300, 300);
        fill(71, 255, 169);
        noStroke();

    } else {

        //yellow circle
        ellipse(mouseX, mouseY, 200, 200);
        fill(66, 245, 135);
        noStroke();

        //pink circle
        ellipse(400 - mouseX, 300 + mouseY, 300, 300);
        fill(232, 152, 245);
        noStroke();

        //blue circle
        ellipse(width/2 + mouseX, height/2 - mouseY, 100, 100);
        fill(152, 245, 228);
        noStroke();

        //orange circle
        rectMode(CENTER);
        rect(480, 400, mouseX, mouseY);
        fill(245, 236, 66);
        noStroke();

        //yellow rectangle
        rectMode(CENTER);
        rect(0, 0, mouseX, 300);
        fill(71, 255, 169);
        noStroke();

    }
    pop();

}

Coming up with an idea for my dynamic drawing was one of the most challenging parts for me, because there seemed to be so many things to choose from that I didn’t know where to start. However, once I began, I decided to focus on how shapes can interact and flow together in a single piece, creating my final dynamic drawing.

Charmaine Qiu – LookingOutwards – 03

MIT’s computer fabrication group tackles problems in digital manufacturing and computer graphics. The group develops new technology that brings changes to people’s lifestyles. One of their recent projects that intrigues me is the computer-aided knitting technology. “InverseKnit” is a system where automating knitted garments is made possible. It was created by a PhD student Alexandre Kaspar and his colleges. With a photo of knitted patterns, the system is able to translate the information into instructions to the machine, which makes the clothing following the instructions. This technology allows designers to create and actualize designs efficiently. 

Examples of products made by the lab through the 3D knitting system

Technologies like 3D knitting that visualizes the designer’s ideas efficiently can greatly assist the productivity of the design process, and i think that it would have greater potential in the future.

Here is a link for more information: https://www.csail.mit.edu/news/computer-aided-knitting

Sammie Kim-Project-03-Dynamic-Drawing

sketch

//Sammie Kim
//sammiek@andrew.cmu.edu
//Section D
//Project 3

//Global variables for default
var colorR = 0;
var colorG = 9;
var colorB = 48;
var angle1 = 0;
var angle2 = 0;

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

function draw() {
    //Changing background colorR as my mouse moves in the Y direction
    var colorR1 = min(colorR + mouseY, 173);
    var colorG1 = min(colorG + mouseY, 48);
    var colorB1 = min(colorB + mouseY, 63);
    background(colorR1, colorG1, colorB1);

    //Limit the mouse range, so the images don't go off the canvas
    mouseX = max(min(mouseX, 500), 0);

    //Y coordinates of the rectangle behind the circle
    var rectY = 480 - mouseY;
    var rect2Y = 0 + mouseY;

    fill("black");
    rectMode(CENTER);
    rect(320,rectY,140,300); //center rectangle
    rect(110,rect2Y,50,400); //left rectangle
    rect(530,rect2Y,50,400); //right rectangle

    //X locations of the circles
    var circAx = mouseX
    var circBx = mouseX - 40
    var circCx = mouseX - 20
    var circDx = mouseX-50

    //Changing the widths of the circles
    var circAw = mouseX - 80;
    var circBw = mouseX - 150;
    var circCw = mouseX * 0.5 - 30;
    var circDw = mouseX * 0.4;

    //Series of circles
    fill(mouseX, mouseY, 100);
    circAw = constrain(circAw, 90, 350); //constrain main circle size
    circle(circAx,240,circAw);//Big visible circle
    fill(colorR1, colorG1, colorB1);
    circle(circBx, 240, circBw); //Big hidden circle
    fill(mouseX, 200, mouseY);
    circle(circCx,240, circCw);//Small visible circle
    fill(colorR1, colorG1, colorB1);
    circle(circDx,240, circDw); //Small hidden circle

    //Changing size of the rotating squares
    var rectSize = mouseY * 0.2;
    var rectSize2 = mouseY * 0.1

    //Rotating square
    fill(253, 242, 216);
    noStroke();
    push();
    translate(mouseX,240);
    rotate(radians(angle1));
    rectMode(CENTER);
    rect(100,100,rectSize,rectSize);
    pop();
    angle1= angle1 + 2;

    //Second rotating square
    fill(126, 211, 216);
    push();
    translate(mouseX,300)
    rotate(radians(angle2));
    rectMode(CENTER);
    rect(120,100,rectSize2,rectSize2);
    pop();
    angle2 = angle2 + 2
  }

This project was challenging in many aspects; I had to think about the shape’s coordinates in relation to the mouse location and constrain them so that they don’t leave the canvas. I was able to apply a lot of the knowledge I gained from the lab exercises with rotating squares and the lecture about creating movement. Overall, this project prompted me to be both creative and logical.

Sean Leo-Looking Outwards-02

404.Zero

An artistic duo from St. Petersburg, Russia, 404.Zero create A/V performances that use custom-built synthesizers and generative graphics. Their work is performed live, and being generative in nature have the ability to mutate, grow, and react in realtime in the environment that they are performing in.

It’s of no surprise then that much of their visual work, while being 100% digitally generated, has an organic quality to it. Transforming textures and shapes elicit waves and other natural phenomenon. These visuals work in tandem with generative audio that drones. Utilizing tonal shifts and adjusting the parameters of their set-up they are exploring the liminal space that lies between states by creating a constant (and sometimes looping) flow.