carson michaelis – Page 2 – [OLD FALL 2020] 15-104 • Introduction to Computing for Creative Practice

Looking Outwards-05

A group that really interests me in their capacity for 3D graphics is the small architecture firm WOJR. The way in which they render their buildings can at times even make the unbuilt projects look extremely realistic. I think that the way they incorporate graphics into their workflow is really great, since they often have much rougher and patched together graphics to get an idea for the textures and feeling of the place, but are then able to translate those same ideas into realistic renderings that give a much greater sense of place for the viewer, and can sometimes trick you into thinking you’ve stumbled onto a staged photograph. The image below is from their house a ‘Mask House’.

Looking Outwards: 04

I really like the album Monolake Silence, by Robert Henke. The premise of the album is to create sound, but also a statement about how we currently listen to sound. Instead of working with different levels of compression and mixing, the entire cast of instruments has been set to the maximum at all times. This is because the way we listen to music in the modern world has changed. Instead of creating music with dynamics or elaborate compositions, current laptop, phone, and radio speakers are tuned to sound best when the music is mixed as loud as possible. This means that when songs of more dynamic genres are played, such as classical music, it sounds nowhere near as well as it might if it had been recorded live or if you were listening through headphones. In the final form you can very clearly tell that every track it at it’s maximum, but the arrangements have been left bare in that there are not too many instruments at a single time, such that we can hear all of the noises despite their volume.

https://www.roberthenke.com/releases/ml-025.html

Project 04: String Art

sketch Download

//Carson Michaelis
//Section C
var yy = -25
var xx = -25

function setup() {
    createCanvas(400, 300);
    background(220);
}

function draw() {
    var y = 300
    var y3 = 0
//make sure there's no trails
    background(220);
//black ellipse in middle
    push();
    noStroke();
    fill(0);
    ellipse(200,150,280,225);
    pop();

    noFill();
    strokeWeight(.5);
//moving points in middle
    if (yy == -25 & xx < 25) {
      xx += 1
    } else if (xx == 25 && yy < 25) {
      yy += 1
    } else if (yy == 25 && xx > -25) {
      xx -= 1
    } else if (xx == -25 && yy > -25) {
      yy -= 1
    }
//generating lines from side to side
      for (let x = 0; x <= 400; x += 400/24) {
          line(x,0,0,y);
          line(x,0,400,300-y);
          line(x,300,0,300-y);
          line(x,300,400,y)
          y -= 300/24;
      }

      push();
      stroke(255);
//lines connecting middle portion to outer lines
      line(200,25,365,150);
      line(200,25,35,150);
      line(200,275,35,150);
      line(200,275,365,150)

      print(xx.toString());
      print(yy.toString());
//generating moving lines inside ellipse
      for (let x = 0; x <= 20; x += 1) {
          line((x*(33/4))+200,y3+25,200+xx,150+yy);
          line((x*(-33/4))+200,y3+25,200-xx,150+yy);
          line((x*(33/4))+200,300-(y3+25),200+xx,150-yy);
          line((x*(-33/4))+200,300-(y3+25),200-xx,150-yy);
          y3 += (25/4);
        }
      pop();
}

For this project I wanted a portion of the lines to move, as well as to create black and white lines that contrast with each other. Here they explore the idea of an open versus occupied middle, as well as the way overlapping lines interact.

Project 03 – Variable Face

I was very interested in the Mondrian image we created for the first assignment and how I could build on that foundation to begin to create a painting which we can control in the same style.

sketch

function setup() {
    createCanvas(650, 450);
    background(240);
}

function draw() {

var rec1x = constrain(mouseX,60,340)
var rec1y = constrain(mouseY,120,390)

var rec2x = 400 - constrain(mouseX,60,340)
var rec2y = 450 - constrain(mouseY,120,390)

var rec3x = dist(400,0,constrain(mouseX,450,600),0)
var rec3y = dist(400,constrain(mouseY*(2/3),120,300),400,constrain(mouseY,180,390))

var rec4x = 650-constrain(mouseX,450,600)
var rec4y = constrain(mouseY/2,60,225)

//making sure movement doesn't leave a trail
  background(240);

//was having issues getting strokes to show up later so I decided to push this part in
  push();
  noStroke();
//top left rectangle
  if (rec1x*rec1y >= rec2x*rec2y) {
    fill(255,0,0);
  } else {
    fill(0,0,255);
  }
  rect(0,0,rec1x,rec1y);
//bottom middle rectangle
  if (rec1x*rec1y >= rec2x*rec2y) {
    fill(0,0,255);
  } else {
    fill(255,0,0);
  }
  rect(constrain(mouseX,60,340),constrain(mouseY,120,390),rec2x,rec2y);
//top middle yellow rectangle
  fill(255,255,0);
  rect(constrain(mouseX,60,340),0,400-constrain(mouseX,60,340),constrain(mouseY/2,60,330));
//colred retangle above yellow
  if (rec3x*rec3y >= rec4x*rec4y) {
    fill(0,0,255);
  } else {
    fill(255,0,0);
  }
  rect(constrain(mouseX,450,600),0,rec4x,rec4y);
//top tight rectangle
  if (rec3x*rec3y >= rec4x*rec4y) {
    fill(255,0,0);
  } else {
    fill(0,0,255);
  }
  rect(400,constrain(mouseY*(2/3),120,300),rec3x,rec3y);
//bottom yellow rectangle
  fill(255,255,0);
  rect(400,constrain(mouseY,180,390),250,450-constrain(mouseY,180,390));


  pop();
  strokeWeight(14);
//dividing line between two sections
  line(400,0,400,450)
//left side vertical line
  line(constrain(mouseX,60,340),0,constrain(mouseX,60,340),450);
//left side long horizontal
  line(0,constrain(mouseY,120,390),400,constrain(mouseY,120,390));
//left side short horizontal
  line(constrain(mouseX,60,340),constrain(mouseY/2,60,330),400,constrain(mouseY/2,60,330));
//right side bottom horizontal
  line(400,constrain(mouseY,180,390),650,constrain(mouseY,180,390));
//right side vertical
  line(constrain(mouseX,450,600),0,constrain(mouseX,450,600),constrain(mouseY,180,390));
//right side top horizontal
  line(constrain(mouseX,450,600),constrain(mouseY/2,60,225),650,constrain(mouseY/2,60,225));
//right side middle horizontal
  line(constrain(mouseX,450,600),constrain(mouseY*(2/3),120,300),400,constrain(mouseY*(2/3),120,300));


}

Looking Outwards 03 – Computational Fabrication

A work of computational fabrication which I find interesting is the Winery Gantenbein, by Gramazio & Kohler + Bearth & Deplazes.

This is an addition to an existing winery and is an open air fermentation room.
Here, the architects used a brick laying robot to attain great precision for these brick walls, but were able to stay playful with the material and keep the project feeling “human”. The pattern laid by the robot went brick by brick, and laid the bricks so the pattern could be read, while the design also allowed for fresh air
during fermentation, without allowing for direct sunlight. Here I think that the architects have done a great job, as they used computational fabrication in order to augment a design which may have otherwise ended up much more boring.

Project-02-Variable-Face

For this project I modeled the face from the aliens in Toy Story. I think they have relatively simple features that were easier to abstract. I found a cartoon collector toy version of them which served as a much better basis for the actual shapes.

sketch Download


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

function draw() {
    var antennas = random(3);
    var eyes = random(3);
    var mouth = random(4);
    var background = random(6);

    if (background < 1) {
      var backgroundColor = "#BF2D22"
    } else if (background > 1 & background < 2) {
      var backgroundColor = "#730B03"
    } else if (background > 2 && background < 3) {
      var backgroundColor = "#40211F"
    } else if (background > 3 && background < 4) {
      var backgroundColor = "#CA6861"
    } else if (background > 4 && background < 5) {
      var backgroundColor = "#400F0B"
    } else {
      var backgroundColor = "#8C2119"
    }
//background
    fill(backgroundColor);
    noStroke();
    rect(0,0,width,height);

//head
    fill(179,209,25);           //green
    rect(75,175,450,350,90);

  //ears
    beginShape();
    curveVertex(75,275);
    curveVertex(75,275);
    curveVertex(55,250);
    curveVertex(35,230);
    curveVertex(28,233);
    curveVertex(25,240);
    curveVertex(25,240);
    curveVertex(30,350);
    curveVertex(30,350);
    curveVertex(28,360);
    curveVertex(31,373);
    curveVertex(38,380);
    curveVertex(55,375);
    curveVertex(65,370);
    curveVertex(75,365);
    curveVertex(75,365);
    endShape();

    beginShape();
    curveVertex(600-75,275);
    curveVertex(600-75,275);
    curveVertex(600-55,250);
    curveVertex(600-35,230);
    curveVertex(600-28,233);
    curveVertex(600-25,240);
    curveVertex(600-25,240);
    curveVertex(600-30,350);
    curveVertex(600-30,350);
    curveVertex(600-28,360);
    curveVertex(600-31,373);
    curveVertex(600-38,380);
    curveVertex(600-55,375);
    curveVertex(600-65,370);
    curveVertex(600-75,365);
    curveVertex(600-75,365);
    endShape();

    stroke(0,0,0,60);       //transparent black
    strokeWeight(5);
    noFill();
    beginShape();
    curveVertex(75,285);
    curveVertex(75,285);
    curveVertex(35,240);
    curveVertex(45,360);
    curveVertex(45,360);
    endShape();

    beginShape();
    curveVertex(600-75,285);
    curveVertex(600-75,285);
    curveVertex(600-35,240);
    curveVertex(600-45,360);
    curveVertex(600-45,360);
    endShape();

//collar
    stroke(126,77,152);       //purple
    strokeWeight(40);
    line(155,530,455,530);

//shirt
    noStroke();
    fill(6,149,209);          //blue
    beginShape();
    curveVertex(0,599);
    curveVertex(0,599);
    curveVertex(25,555);
    curveVertex(155,530);
    curveVertex(155,530);
    curveVertex(455,530);
    curveVertex(455,530);
    curveVertex(574,555);
    curveVertex(599,599);
    curveVertex(599,599);
    endShape();

//antennas
    if (antennas < 1) {
      fill(179,209,25);
      beginShape();
      curveVertex(270,175);
      curveVertex(270,175);
      curveVertex(285,125);
      curveVertex(270,75);
      curveVertex(270,75);
      curveVertex(270,75);
      curveVertex(330,75);
      curveVertex(330,75);
      curveVertex(330,75);
      curveVertex(315,125);
      curveVertex(330,175);
      curveVertex(330,175);
      endShape();

      circle(300,75,60);
    } else if (antennas > 1 & antennas < 2){
      fill(179,209,25);
      beginShape();
      curveVertex(270-50,175);
      curveVertex(270-50,175);
      curveVertex(285-50,125);
      curveVertex(270-50,75);
      curveVertex(270-50,75);
      curveVertex(270-50,75);
      curveVertex(330-50,75);
      curveVertex(330-50,75);
      curveVertex(330-50,75);
      curveVertex(315-50,125);
      curveVertex(330-50,175);
      curveVertex(330-50,175);
      endShape();

      beginShape();
      curveVertex(270+50,175);
      curveVertex(270+50,175);
      curveVertex(285+50,125);
      curveVertex(270+50,75);
      curveVertex(270+50,75);
      curveVertex(270+50,75);
      curveVertex(330+50,75);
      curveVertex(330+50,75);
      curveVertex(330+50,75);
      curveVertex(315+50,125);
      curveVertex(330+50,175);
      curveVertex(330+50,175);
      endShape();

      circle(300+50,75,60);

      circle(300-50,75,60);
    } else {
      fill(179,209,25);
      beginShape();
      curveVertex(270,175);
      curveVertex(270,175);
      curveVertex(285,125);
      curveVertex(270,75);
      curveVertex(270,75);
      curveVertex(270,75);
      curveVertex(330,75);
      curveVertex(330,75);
      curveVertex(330,75);
      curveVertex(315,125);
      curveVertex(330,175);
      curveVertex(330,175);
      endShape();

      beginShape();
      curveVertex(270+80,175);
      curveVertex(270+80,175);
      curveVertex(285+80,125);
      curveVertex(270+80,75);
      curveVertex(270+80,75);
      curveVertex(270+80,75);
      curveVertex(330+80,75);
      curveVertex(330+80,75);
      curveVertex(330+80,75);
      curveVertex(315+80,125);
      curveVertex(330+80,175);
      curveVertex(330+80,175);
      endShape();

      beginShape();
      curveVertex(270-80,175);
      curveVertex(270-80,175);
      curveVertex(285-80,125);
      curveVertex(270-80,75);
      curveVertex(270-80,75);
      curveVertex(270-80,75);
      curveVertex(330-80,75);
      curveVertex(330-80,75);
      curveVertex(330-80,75);
      curveVertex(315-80,125);
      curveVertex(330-80,175);
      curveVertex(330-80,175);
      endShape();

      circle(300,75,60);

      circle(300+80,75,60);

      circle(300-80,75,60);
    }

//eyes
    if (eyes < 1) {
      fill(255,255,255);
      stroke(0);
      strokeWeight(3);
      circle(300,275,90);
      fill(0);
      circle(300,275,40);
    } else if (eyes > 1 & eyes < 2) {
      fill(255,255,255);
      stroke(0);
      strokeWeight(3);
      circle(300-60,275,90);
      fill(0);
      circle(300-60,275,40);

      fill(255,255,255);
      circle(300+60,275,90);
      fill(0);
      circle(300+60,275,40);
    } else {
      fill(255,255,255);
      stroke(0);
      strokeWeight(3);
      circle(300,275,90);
      fill(0);
      circle(300,275,40);

      fill(255,255,255);
      circle(300+110,275,90);
      fill(0);
      circle(300+110,275,40);

      fill(255,255,255);
      circle(300-110,275,90);
      fill(0);
      circle(300-110,275,40);
    }

//smile
    var mouthH = random(400,450);
    var mouthW = random(100,150);

    noFill();
    stroke(0);
    strokeWeight(10);

    beginShape();
    curveVertex((width/2)+mouthW,400);
    curveVertex((width/2)+mouthW,400);
    curveVertex(300,mouthH);
    curveVertex((width/2)-mouthW,400);
    curveVertex((width/2)-mouthW,400);
    endShape();
  }

function mouseClicked() {
    loop();
    noLoop();
    clear();
    background(220);
    //allowing user to click to loop another random face
  }

Looking Outwards 02 – Generative Art

One of the pieces of generative art that I found most interesting was a series
by Paul Prudence entitled “Daub”. I really like these prints because they are made from a semi-automatic painting function, yet the result seems almost infinitely complex; not just in the potential complexity of the program, but in the individual images themselves. Prudence also shows that the program is flexible enough to generate a variety of silhouettes in the series by changing the way the silhouette is formed on the print “Oriol”. These were made using footage of Ferrofluids, which would not be completely obvious at first thought but certainly seems a good starting point to create shapes like these. This work is a bit different than many of the other visual generative works that Prudence has done, as this one is almost fractal-like, while many of his other works are much cleaner and often generative videos instead of prints.

https://www.transphormetic.com/Daub

Project 01 – Self Portrait

self-portrait.js

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

function draw() {
    stroke(198,213,204);
    strokeWeight(100);
    line(-20,-20,619,619);
    line(0,427,600,480);
    noStroke();
    fill(234,219,192);
    ellipse(550,350,400,600);
    fill(183,172,157,140);
    triangle(550,460,520,360,580,360);
    ellipse(450,300,100,80);
    ellipse(635,300,100,80);
    stroke(0,0,0);
    strokeWeight(55);
    line(0,300,570,300);
    strokeWeight(35);
    line(350,450,650,450);
    line(0,520,545,520);
    noStroke();
    fill(255,255,255,70);
    circle(450,300,42);
    circle(450,300,20);
}

LO – My Inspiration

Looking Outward Assignment 1 Basics

One of my professors from the previous few years is currently a computational design student in the architecture program after working in the field for many years. The project that I am speaking about is one in which he was able to generate different swatches of neighborhood in Grasshopper for Rhino, which would fit into the urban
context of the neighborhood very well, yet not seem like it had been gridded like traditional urban planning. I really admire the project because it shows that the power of architecture (especially in relation to computationally generated architecture) is greater than just at the scale of the house. I believe he did it alone and took a semester. He used a lot of custom software. Was inspired by others in the field of Computational Design. I think it points to a future where computers can provide a baseline for how to design or rework parts of cities where we can quickly propose a multitude of opportunities for the neighborhood. The project is called Urban Synthesizer by Jinmo Rhee.