Category: Uncategorized

Sarah Kang – Project 03- Dynamic Drawing

dydraw

//sarah kang
//section c
//sarahk1@andrew.cmu.edu
//project-03-dynamic-drawing

var angle = 0; //angle for rectangle rotation
var ogX = 0;
var ogY = 0;

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

function draw() {
    background(0);
    strokeWeight(1.5);
    stroke(255, 255, 255);

    //top row small rectangles

    fill(mouseY, 102, mouseX);
    push();
    translate(70, 70);
    rotate(radians(angle * -1));
    rect(ogX, ogY, mouseX / 8, mouseY / 8);
    pop();
    push();
    translate(170, 70);
    rotate(radians(angle * -1));
    rect(ogX, ogY, mouseX / 8, mouseY / 8);
    pop();
    push();
    translate(270, 70);
    rotate(radians(angle * -1));
    rect(ogX, ogY, mouseX / 8, mouseY / 8);
    pop();
    push();
    translate(370, 70);
    rotate(radians(angle * -1));
    rect(ogX, ogY, mouseX / 8, mouseY / 8);
    pop();
    push();
    translate(470, 70);
    rotate(radians(angle * -1));
    rect(ogX, ogY, mouseX / 8, mouseY / 8);
    pop();
    push();
    translate(570, 70);
    rotate(radians(angle * -1));
    rect(ogX, ogY, mouseX / 8, mouseY / 8);
    pop();

    // middle medium rectangles, rotating in opposite direction

    fill(mouseX, 166, mouseY);
    push();
    translate(600, 230);
    rotate(radians(angle));
    rect(ogX, ogY, mouseX / 4, mouseY / 4);
    pop();
    push();
    translate(450, 230);
    rotate(radians(angle));
    rect(ogX, ogY, mouseX / 4, mouseY / 4);
    pop();
    push();
    translate(300, 230);
    rotate(radians(angle));
    rect(ogX, ogY, mouseX / 4, mouseY / 4);
    pop();
    push();
    translate(150, 230);
    rotate(radians(angle));
    rect(ogX, ogY, mouseX / 4, mouseY / 4);
    pop();
    push();
    translate(0, 230);
    rotate(radians(angle));
    rect(ogX, ogY, mouseX / 4, mouseY / 4);
    pop();

    //bottom big rectangles

    fill(mouseX, 255, mouseY);
    push();
    translate(100, 420);
    rotate(radians(angle * -1));
    rect(ogX, ogY, mouseX / 2, mouseY / 2);
    pop();
    push();
    translate(320, 420);
    rotate(radians(angle * -1));
    rect(ogX, ogY, mouseX / 2, mouseY / 2);
    pop();
    push();
    translate(540, 420);
    rotate(radians(angle * -1));
    rect(ogX, ogY, mouseX / 2, mouseY / 2);
    pop();

    angle = angle + 5; // rotation speed and direction

    //changing rotation speed, controlled by mouseX

    if(mouseX >= 320){
      angle = angle + 10;
    }
}

For this assignment, I was inspired by the parametric graphic references provided in the guidelines and wanted to emulate it through my drawing.

Project 03 – Dynamic Drawing


sketch

// Deklin Versace Section E
var eyeX = 700;
var eyeY = 250;
var diameter = 75;
var r = 100;
var g = 50;
var b = 50;
var handY = 500;
var handX = 375;

function setup() {
    createCanvas(900, 900);
    r = random(0, 255);
    g = random(0, 255);
    b = random(0, 255);
}

function draw() {
  background(r, g, b);
  noStroke();
  fill(r - 60, g - 60, b - 60);
  quad(width / 2 - 150, eyeY, width / 2 + 150, eyeY, 485, 900, 415, 900);
  fill(r - 60, g - 60 ,b - 60);
  ellipseMode(CENTER);
  ellipse(width / 2, eyeY, eyeX + abs(700 - eyeX), abs(450 - eyeX / 3));
  headH = abs(450 - eyeX / 3);
  headW = eyeX + abs(700 - eyeX);
  fill(240);
  ellipse(eyeX, eyeY, diameter, diameter);
  ellipse(width - eyeX, eyeY, diameter, diameter);
  if(mouseX > 650 || mouseX < 250 || (mouseX > 400 & mouseX < 500)){
    eyeX = eyeX;
  }   else{
      eyeX = mouseX;
  }

  fill(r - 100, g - 100, b - 100);
  bezier((width / 2) - (headW / 5), eyeY + 50, (width / 2) - (headW / 5), eyeY + (headH / 2) - 50, (width / 2) + (headW / 5), eyeY + (headH / 2) - 50, (width / 2) + (headW / 5), eyeY + 50);


  strokeWeight(60);
  stroke(r - 50, g - 50, b - 50);
  line(width / 2 - 100, 420, width / 2 - 250, 420 + ((handY - 420) / 2));
  line(width / 2 + 100, 420, width / 2 + 250, 420 + ((handY - 420) / 2));
  stroke(r - 40, g - 40, b - 40);
  line(width / 2 - 250, 420 + ((handY - 420) / 2), handX, handY);
  line(width / 2 + 250, 420 + ((handY - 420) / 2), 900 - handX, handY);
  if(mouseX > 100 & mouseX < 410)
  handX = mouseX;
  else{
  handX = handX;
  }
  if(mouseY < 700){
    handY = mouseY;
  } else{
  handY = 700;
}
}
function mousePressed() {
  r = random(0, 255);
  g = random(0, 255);
  b = random(0, 255);
}

Shariq M. Shah – Looking Outwards 03


Neri Oxmann and MIT, in this project, explore the intersection of biomimetics, digital fabrication, and material properties. Bio-composites, cellulose, chitosan, and pectin, which are among some of the most abundant organic materials, are digitally fabricated to dynamically respond to changes in heat and humidity. There is an interesting relationship between digital and computational processes and highly organic matter that both intersect to develop something that is neither clearly computational nor organic. However, it is clear that the use of such techniques allows for an architecture that is deeply engaged with natural conditions. Although the process that  creates the artifact is highly calibrated and computational, the result is something that, as a system, behaves and performs like an organic structure. A challenge of this process seems to be quantifying and measuring that which is highly nuanced: natural materials. Many systems in nature are highly complex, and the implementation of digital fabrication techniques into such nuanced systems could prove to be difficult.

https://www.archdaily.com/894979/neri-oxman-and-mit-develop-programmable-biocomposites-for-digital-fabrication

Shariq M. Shah – Dynamic Drawing – Project 03

shariqs_project-03

// Shariq M. Shah
// Section C
// shariqs@andrew.cmu.edu
// {Project - 03



var posC = 0;
var angle = 0;
var t = 'polar'

var midX = 320
var midY = 240



function setup() {
    createCanvas(640, 480);
    background(0);

}

function draw() {

//Rotating ellipses creating void in the center

    push();
    translate(320, 240);
    rotate(radians(angle));
    noFill()
    stroke(250, mouseX, mouseY)

    ellipse(0, 0, 100, posC + 250);

    pop();

    angle = angle + mouseY * 0.1
    posC = posC + 0.5


//Text that changes color acccording to rest of the graphic

  textSize(10);
  rectMode(CENTER)
  text('polar', midX - 10, midY);
  fill(250, mouseX, mouseY);


//If mouse is moved to center, lines become black creating vortex

  if ((mouseX > midX - 20 & mouseX < midX + 20) && (mouseY > midY - 20 & mouseY < midY + 20)) {

    push();
    translate(midX, midY);
    rotate(radians(angle));
    noFill()
    stroke(0)

    ellipse(0, 0, 100, posC + 250);

    pop();

    angle = angle - mouseY * 0.5
    posC = posC + 0.5
  }


}

In this project, I explored geometries and mathematical aggregation of an ellipse to create highly articulated and complex patterns. Using a limited amount of code, the program is able to use the user’s input to create a variety of vibrant mandala like patterns. The geometry is calibrated to leave a perfect circle in the center of the canvas, where the text changes color according to the the lines that are being drawn.

Janet Peng-Looking Outwards-02

Flight Patterns from Aaron Koblin on Vimeo.

This project is called Flight Patterns and it’s by Aaron Koblin. I believe it was created in 2009 (10 years ago). The piece visualizes the movement of airplanes over North America over time. I really appreciate the simplicity of the piece and how it affectively visualizes important data without being confusing or overwhelming. As well, even though it’s just data, it’s beautiful and mesmerizing to stare at. It creates a strong emotional reaction for me as I can feel myself traveling from place to place on a plane when looking at the piece. It reminds me of the airport and how it feels to go someplace new and return home afterwards. The piece was created by parsing and plotting data from the Federal Aviation Administration using Processing, a  Javascript web application framework. The creator’s artistic sensibilities manifest in the algorithm by being able to simplify and visualize large groups of data in a way that can be effectively coded in a visual manner.

William Su – Project 03 – Dynamic Drawing

sketch

// William Su
// Section E
// wsu1@andrew.cmu.edu
// Project-03

x = 100;
y = 100;
angle1 = 0;
segLength = 30;

function setup() {
  createCanvas(640, 480);
  strokeWeight(10);
  stroke(0);
}

function draw() {
  r = 640 - mouseX; // Used for color and shape length
  g = 480 - mouseY; // color
  b = (mouseX + mouseY)/4; // messing with more color

  background(0);

  //Calculating angles for rotation based on mouseX and mouseY
  dx = mouseX - x;
  dy = mouseY - y;
  angle1 = atan2(dy, dx);
  x = mouseX - cos(angle1) * segLength;
  y = mouseY - sin(angle1) * segLength;

  //Line Color and Line Weight
  stroke(r + 100, g + 100, b + 100); // Changes color based on mouse movement.
  strokeWeight(10 + (mouseX / 100)); // Gets thicker as you move mouse right.

// segLength and r changes length of line and also center of rotation.

// Top left
  push();
  translate(width/4, height/4);
  rotate(angle1);
  line(-segLength - r/4, r/100, segLength + r/4, r/100);
  pop();

// Bottom right
  push();
  translate(3 * width/4, 3 * height/4);
  rotate(angle1);
  line(-segLength - r/4, r/100, segLength + r/4, r/100);
  pop();

// Top Right
  push();
  translate(3 * width/4, height/4);
  rotate(angle1);
  line(-segLength - r/4, r/100, segLength + r/4, r/100);
  pop();

// Bottom Left
  push();
  translate(width/4, 3 * height/4);
  rotate(angle1);
  line(-segLength - r/4, r/100, segLength + r/4, r/100);
  pop();
}

In this project, I tried making a isometric, rotating prism. I wasn’t able to work out the faces but I think the gist of it is shown with the 4 segments shown. The segments change size (thickness and length), color, and orientation depending on where your mouse is in the window.

Monica Chang – Looking Outwards- 03

Neri Oxman and MIT develop a collection of programmable bio-composites for Digital Fabrication called Aguahoja. They developed Aguahoja in response to the cumbersome, plastic consumption occurring globally which has been intoxicating our planet. With this, they hope to create a solution that corrupts this toxic cycle of plastic by uniting the “made” and nature to produce an organic environment that can be constructed and deconstructed without harming the earth’s soil.

This collection is digitally designed and robotically manufactured out of the most available materials on earth- materials within trees, insect exoskeletons , apples, and bones- in hopes of avoiding depleting more of Earth’s materials.

“…this work points toward a future where the grown and the made unite.”

Although the structures are all built from the same components, the structural makeup and its purpose in an environment vary.

I admire this piece because of its insightfulness towards the world and its current condition. The amount of research and intricate pieces created for this project intrigues me. It’s nice to know that there definitely is a way that we can avoid polluting our planet even further without changing anything about halting our momentum for modernizing the world.

Katrina Hu – Looking Outwards – 03

Voxel-Printing of the Human Brain

Data physicalization of the human brain, made by the Mediated Matter Group

The Mediated Matter Group at MIT uses a multimaterial voxel-printing method. This enables the physical visualization of data sets. These data sets are visualized on a screen, and then converted into physical 3-D objects. One of the objects that stood out to me was the physicalization of the human brain. The viewer is able to see various brain structures, including bundles of axons that connect different parts of the brain.

I admire this work because it allows people to actually visualize structures that may otherwise be hard to see. It is very effective, as physical manifestations of data sets can improve spatial perception skills. It also makes the presentation of new information more intuitive for students. It allows much more interaction than 2-D information displays.

To generate this work, the group converts data sets into dithered material deposition descriptions. The data sets then can be visualized on screen and can later be converted into physical objects. 

Carly Sacco – Looking Outwards – 03

Coded Clay is a project and business where 3D parametric fabrication creates pots and vases for people to use in their homes. This project is particularly interesting because code is used to alter every aspect of the 3D printing process to create unique vases. The 3D printer is also custom built to be able to print clay after using parametric coding in grasshopper.

The 3D printer prints clay in an arrangement coded and designed parametrically.

The process taken to create the pots starts by a sketch idea of a form/shape. Then by the use of parametric coding in grasshopper, the forms are digitally modified until the desired aspects of the pot are met. Lastly, the pots are 3D printed, fired twice, and hand glazed. Brian Peter is the creator of these and he if interested in both computational architecture as well as pottery. He went to undergrad for Studio Art and completed a ceramic residency – where the 3D printed clay idea started.

The pots are coded parametrically before the printing process begins.