Category: SectionB

Project 03 – Dynamic Drawing – srauch

Here is my interactive picture! As you move your mouse left to right, it gets dark outside and the moon comes up, and as you move your mouse up and down, the plant grows and its leaves open up.

sketch
//Sam Rauch / srauch / section B
//This code creates an interactive picture of a plant with a window behind it. As you move
//the mouse up and down, it gets darker and lighter outside. As you move the mouse side to
//side, the plant grows bigger and smaller. 

var windowTransparent //alpha for transparency of blue window, ie how light outside
var moonY = 300; //y position of moon
var moonview = 0; //alpha for transparency of moon
var potCenterX; //x center of pot
var potCenterY; //y center of pot
var bluefade = 0; //amount of blue added to colors as it gets darker outside
var colorfade = 0; //amount of color subtracted to colors as it gets darker outside
var plantTipY; //y tip of plant
var stemweight = 10;
var leafSizeX = 50; //width of leaf
var leafSizeY = 25; //height of leaf
var leftRotate; //rotates left-side leaves
var rightRotate; //rotates right-side leaves

var width;
var height;

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

    width = 450;
    height = 600;
    windowTransparent = 255;
    potCenterX = 200; 
    potCenterY = 500; 
    plantTipY = potCenterY; //start the tip of the plant in the center of the pot

    leftRotate = 270;
    rightRotate = 90;

}

//draws an ellipse where the first two parameters are the ellipse's left tip
function lefttipellipse(tipX, tipY, wide, tall) {
    ellipseMode(CORNER);
    ellipse(tipX, tipY-tall/2, wide, tall);
    ellipseMode(CENTER);
}

//draws an ellipse where the first two parameters are the ellipse's right tip
function righttipellipse(tipX, tipY, wide, tall) {
    ellipseMode(CORNER);
    ellipse(tipX-wide, tipY-tall/2, wide, tall);
    ellipseMode(CENTER);
}

function draw() {

    background(230-colorfade*1.5, 230-colorfade*1.5, 120+bluefade);

    //window
    fill(240-colorfade, 240-colorfade, 230+bluefade);
    noStroke();
    rect(100, 0, 350, 450);

    //dark blue rect
    fill(26, 32, 128);
    rect(125, 0, 325, 425);

    //moon
    noStroke();
    fill(250, 250, 240, moonview); //moon white
    ellipse(300, moonY, 80);
    fill(26, 32, 128); //dark blue circle to make it a crescent
    ellipse(290, moonY-10, 70);

    //light blue sky color
    fill(185, 240, 250, windowTransparent);
    rect(125, 0, 325, 425);

    //table
    fill(110-colorfade, 60-colorfade, 37+bluefade); //brown
    rect(0, height-50, width, 50);
    //fill(100, 50, 27); //darker brown

    //plant stem
    stroke(74-colorfade, 150-colorfade, 74+bluefade); //green
    strokeWeight(stemweight);
    strokeCap(ROUND);
    line(potCenterX, potCenterY, potCenterX, plantTipY);
    noStroke();

    // the y coordinate of a point half the distance up the stem
    var yspot1 = potCenterY-(dist(potCenterX, potCenterY, potCenterX, plantTipY)/2);

    // y coordinate of a point 3/4 the distance up the stem
    var yspot2 = potCenterY-(dist(potCenterX, potCenterY, potCenterX, plantTipY)*(3/4));

    // y coordinate of a point at the top of the stem
    var yspot3 = potCenterY-(dist(potCenterX, potCenterY, potCenterX, plantTipY));

    //drawing them leaves at set points up the stem

    fill(90-colorfade*2, 180-colorfade*2, 90+bluefade); //leaf green

    //bottom right
    push();
    translate(potCenterX, yspot1);
    rotate(leftRotate);
    lefttipellipse(0, 0, leafSizeX, leafSizeY);
    pop();

    //bottom left
    push();
    translate(potCenterX, yspot1);
    rotate(rightRotate);
    righttipellipse(0, 0, leafSizeX, leafSizeY);
    pop();

    //middle right
    push();
    translate(potCenterX, yspot2);
    rotate(leftRotate);
    lefttipellipse(0, 0, leafSizeX*(7/8), leafSizeY*(7/8));
    pop();

    //middle left
    push();
    translate(potCenterX, yspot2);
    rotate(rightRotate);
    righttipellipse(0, 0, leafSizeX*(7/8), leafSizeY*(7/8));
    pop();

    //top right
    push();
    translate(potCenterX, yspot3);
    rotate(leftRotate);
    lefttipellipse(0, 0, leafSizeX*(2/3), leafSizeY*(2/3));
    pop();

    //top left
    push();
    translate(potCenterX, yspot3);
    rotate(rightRotate);
    righttipellipse(0, 0, leafSizeX*(2/3), leafSizeY*(2/3));
    pop();

    //pot
    fill(230-colorfade, 140-colorfade, 83+bluefade); //salmon
    rectMode(CENTER);
    rect(potCenterX, potCenterY, 120, 150);
    triangle(potCenterX-60, potCenterY-75, potCenterX-60,
        potCenterY+75, potCenterX-80, potCenterY-75);
    triangle(potCenterX+60, potCenterY-75, potCenterX+60,
        potCenterY+75, potCenterX+80, potCenterY-75);
    fill(240-colorfade, 150-colorfade, 93+bluefade);
    rect(potCenterX, potCenterY-90, 170, 60);
    rectMode(CORNER);

    //as move mouse left to right, the sky gets darker and colors fade to bluer shade
    windowTransparent = map(mouseX, width, 0, 0, 255);
    bluefade = map(mouseX, width, 0, 0, 40, true);
    colorfade = map(mouseX, 0, width, 0, 40, true);

    //as move mouse left to right, moon comes up
    moonY = map(mouseX, 0, width, 375, 100, true);
    moonview = map(mouseX, 0, 450, 0, 255);

    //as move mouse up and down, plant grows
    plantTipY = map (mouseY, height, 0, potCenterY, 230); //gets taller
    stemweight = map (mouseY, height, 0, 5, 25); //stem gets thicker
    leafSizeX = map (mouseY, height, 0, 50, 150); //leaves get longer
    leafSizeY = map (mouseY, height, 0, 30, leafSizeX/3); //leaves get taller
    leftRotate = radians(map(mouseY, height, 0, 270, 340)); //right leaves open up
    rightRotate = radians(map(mouseY, height, 0, 90, 20)); //left leaves open up
    //plant pot

}

Project 03: Dynamic Drawing

This is my project for dynamic drawing. The most difficult part for me is understanding the relationship between the size of the hearts and the distance between the hearts and my mouse.

sketch 

//Jenny Wang
//Section B

function setup() {
    createCanvas(600,450);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
    smooth();
    noStroke();
}

var s = 30 //space in between
var x = 0
var y = 0
var heart
var angle = 0
function draw() {
    background("lightblue");

    //set color variation
    var R = (dist(x,y,mouseX,mouseY)/100)*30;
    var G = (dist(x,y,mouseX,mouseY)/100)*20;
    var B = (dist(x,y,mouseX,mouseY)/100)*30;

    
     
    //draw hearts with for loops
    var maxD = 50;
    var maxS = 3;

    for (x = 0; x < width; x += s) {
      for (y = 0; y < height; y += s) {
      fill (R,G,B);
      var size = (dist(x,y,mouseX,mouseY)/maxD)*maxS;
      //set size variation
      heart(x+s/2, y+s/2, size);
      }
    }

    //draw heart
    var r = mouseX/2
    
    push()//square1
    fill("lightyellow");
    translate(width/2,height/2);
    rotate(radians(angle)+10);
    ellipse(mouseX/2,mouseY/2,r*2+mouseX/2);
    pop();
    angle += 2;

    push()//square2
    fill("lightgreen");
    translate(width/2,height/2);
    rotate(radians(angle)+20);
    ellipse(mouseX/2,mouseY/2,r*2+mouseX/2);
    pop();
    angle += 2;
    

    push();
    fill("pink");//circle 3
    translate(width/2,height/2);
    rotate(radians(angle)+30);
    ellipse(mouseX/2,mouseY/2,r*2+mouseX/2);
    pop()
    angle += 2;


function heart (x,y,size){
    // fill(R,G,B);
    beginShape();
    vertex(x, y);
    bezierVertex(x - size / 2, y - size / 2, x - size, y + size / 3, x, y + size);
    bezierVertex(x + size, y + size / 3, x + size / 2, y - size / 2, x, y);
    endShape(CLOSE);
}
//draw a heart


}

Blog 03: “Twisted Belly Vase”

By Ilia Urgen
Section B

Twisted Belly Vase is a 3D printed object created on April 25th, 2022 by Instagram artist namu3d. The original size of the figure was 80mm by 60mm, but the model was printed 60% larger. Altogether, the print took around one-and-a-half, which is the average print time for a model of this size.

There are many features that make the Twisted Belly vase stick out, and my favorite design feature is the flow of the rather-vertical lines around the vase’s upper and lower diameters. The thinning neck around the center of the vase gives off the hourglass aesthetic, with the “belly” of the vase greatly expanding in proportion and then once again, returning to its original diameter size.

The software used to 3D print this vase was MakerBot, a highly ubiquitous design program. It allows the creator to explore various vector scales, rotations, and linear parallel lines, which are just three of many possible functions and variables when it comes to computational fabrication.

The creators of Twisted Belly Vase, namu3d, has made other aesthetically-pleasing vases, bowls, and cylindrical elements. His design style involves simple, yet complex-looking geometric shapes and unusual rotations. I have a deep appreciation of namu3d’s design style because I too, find beauty in the simplest geometric shapes found in the world around us.

“Twisted Belly Vase”
@namu3d on Instagram

Blog 03 – Computational Fabrication – srauch

I’m inspired by the whole body of Micheal Hansmeyer’s work, but a piece of his that perhaps most outwardly displays the algorithmic nature of his architectural practice is Subdivided Columns. As Hansmeyer describes it, he did not design columns, but rather designed a process that produces a column. His algorithm “subdivides” the surface of a cylinder into smaller and smaller surfaces, applying different division ratios to produce unique forms. The final column is generated by breaking up the digital column into 2700 horizontal “slices”, which are laser cut out of greyboard and assembled.

In Subdivided Columns, Hansmeyer plays with the idea of the undrawable vs the unimaginable. Even though we can imagine these forms, or at least the idea of them, most computer software and traditional drawing techniques are incapable of generating them. With a computer’s help, for the first time in human history, we can actually realize them. It makes you think about how our work is the product of our minds and our tools. Hansmeyer’s work embodies the notion that with new computational tools, we can produce something deeply human – the kind of computational thinking we’ve been pondering for centuries – but at the same time, completely new.

Here’s a video showing the process used to create Subdivided Columns

Looking Outwards 03

Mike Kneupfel, Keyboard Frequency Sculpture https://www.businessinsider.com/mike-knuepfel-keyboard-frequency-2011-6 

I find Mike Kneupfel’s Keyboard Frequency Sculpture (as discussed in Prof. Levin’s lecture) to be very interesting. As a whole, I typically find myself drawn to works that are funny in some sort, and I think the visualization of data in this way, almost like a bar graph (but not really), to be pretty funny. Imagining the use of this object in real life is also pretty amusing. On one hand, it would be very easy to find the keys most frequently used, but ergonomically, the piece is a nightmare. The way that an intention of practicality manifests in complete usability is a humorous paradox. In terms of the actual construction, I’d assume that to create this piece, whatever percentage of the time a key is used would correspond to a certain height. For example, maybe 1% use = 1 cm, so keys used 3% of the time would be 3 cm tall. 

Photograph of Kneupfel’s Keyboard Frequency Sculpture.

Project-03-Dynamic-Drawing

TIME 2 PARTY!

sketch 

// Zoe Lin (ID: youlin)
// Section B

var x, y, r, g, b, rad;

function setup() {
  createCanvas(500, 500);
  noStroke();
  rectMode(CENTER);
}

function draw() {
  background(random(0, 15));
  
  //party lights!!!
  push();
  blendMode(SCREEN);
  r = random(255); //randomizes color
  g = random(50);
  b = random(255);
  x = random(width); //randomizes where lights spawn
  y = random(height);
  rad = random(2, 50); //randomizes size of circle
  noStroke();
  fill(r, g, b, random(75, 125)); //sets a random transparency
  circle(x, y, rad); //spawns a circle anywhere on canvas
  circle(mouseX, mouseY, rad*2); //spawns lights where the cursor is
  pop();
  
  let r1 = map(mouseX, 0, height/2, 0, width/2); //tracks horizontal location of mouse
  let r2 = width - r1;
  
  let up = map(mouseY, 0, height, 0, width); // tracks vertical location of mouse
  let down = height - up; //the other way

  //circle1
  let circle1X = width / 3 + r2 * 0.75 //x position of circle 1
  let circle1Y = height / 3 - r2 / 3.5 //y position of circle 1
  let circle1Mouth = up/4 //mouth location of circle 1
  
  //body
  noStroke();
  fill(up/3,r1/3,down/3,r2/3);
  ellipse(circle1X, circle1Y, down, r2); //fluid body
  
  //eye
  fill(0, r2);
  circle(circle1X - up/4, circle1Y - r2/10 , down/20);
  
  //eye
  fill(0, r2);
  circle(circle1X + up/4, circle1Y - r2/10 , up/12);
  
  //mouth
  noFill();
  stroke(0, r2);
  strokeWeight(4);
  arc(circle1X, circle1Y + r2/12, circle1Mouth, circle1Mouth, TWO_PI, PI);

  //circle2
  let circle2X = width / 2
  let circle2Y = height / 2 + down / 2
  let circle2Mouth = down/4
  
  noStroke();
  fill(r2/3,up/3,r1/3,down/3);
  ellipse(circle2X, circle2Y,  down*1.25, up*1.5);
  
  fill(0, r2)
  circle(circle2X - r2/4, circle2Y - down/10 , up/8);
  
  fill(0, r2)
  circle(circle2X + r2/4, circle2Y - down/10 , down/8);
  
  noFill();
  stroke(0, r2);
  strokeWeight(4);
  arc(circle2X, circle2Y + r2/20, circle2Mouth, circle2Mouth, TWO_PI, PI);
  
  //circle3
  let circle3X = width / 1.5 + r2 / 2
  let circle3Y = height / 2
  let circle3Mouth = down/10
  
  noStroke();
  fill(down/3,r2/3,up/3,r1/3);
  ellipse(circle3X, circle3Y, r2*1.5, r2*1.5);
  
  fill(0, r2)
  circle(circle3X - r2/4, circle3Y - r2/10 , r2/8);
  
  fill(0, r2)
  circle(circle3X + r2/4, circle3Y - up/10 , r2/8);
  
  noFill();
  stroke(0,r2 );
  strokeWeight(4);
  arc(circle3X, circle3Y + r2/12, circle3Mouth, circle3Mouth, TWO_PI, PI);
  
  //circle4
  let circle4X = width / 1.5 - r1/1.7
  let circle4Y = height / 4 + r2/4
  let circle4Mouth = down/10
  
  noStroke();
  fill(r1/3,down/3,r2/3,up/2.5);
  ellipse(circle4X, circle4Y, r1*1.25, down);
  
  fill(0, r2)
  circle(circle4X - r1/4, circle4Y - r2/15 , r1/8);
  
  fill(0, r2)
  circle(circle4X + r1/4, circle4Y - r1/10 , r1/8);
  
  noFill();
  stroke(0,r2);
  strokeWeight(4);
  arc(circle4X, circle4Y + r1/10, circle4Mouth, circle4Mouth, TWO_PI, PI);
  
  //circle5
  let circle5X = width / 3 - r2 / 1.5
  let circle5Y = height / 2.5
  let circle5Mouth = r2/4
  
  noStroke();
  fill(down/3,r2/2,r1/2,r2/3);
  ellipse(circle5X/1.5, circle5Y/2, up, up*1.25);
  
  fill(0, r2)
  circle(circle5X - up/4, circle5Y - up/3 , r1/8);
  
  fill(0, r2)
  circle(circle5X + r1/4, circle5Y - r1/3 , r1/8);
  
  noFill();
  stroke(0,r2);
  strokeWeight(4);
  arc(circle5X, circle5Y + r1/20, circle5Mouth, circle5Mouth, TWO_PI, PI);
  
  //circle6
  let circle6X = width / 5 + r1 / 2.5
  let circle6Y = height - 10
  let circle6Mouth = r1/5
  
  noStroke();
  fill(r2/3,up/4,r2/2,up/3);
  ellipse(circle6X, circle6Y, up*0.6, down*1.2);  
  
  fill(0, r2)
  circle(circle6X - up/5, circle6Y - up/10 , r1/10);
  
  fill(0, r2)
  circle(circle6X + r1/7, circle6Y - r1/10 , r1/10);
  
  noFill();
  stroke(0,r2);
  strokeWeight(4);
  arc(circle6X, circle6Y + r1/10, circle6Mouth, circle6Mouth, TWO_PI, PI);
 
  //circ7
  let circle7X = width - 10
  let circle7Y = height / 2 - up
  let circle7Mouth = up/4
  
  noStroke();
  fill(up/3,r1/4,down/2,r2/3);
  ellipse(circle7X, circle7Y, down*0.5, up);
  
  fill(0, r2)
  circle(circle7X - up/4, circle7Y - up/10, r1/8);
  
  fill(0, r2)
  circle(circle7X + r1/4, circle7Y - r1/10 , r1/8);
  
  noFill();
  stroke(0,r2);
  strokeWeight(4);
  arc(circle7X, circle7Y+r1/20, circle7Mouth, circle7Mouth, TWO_PI, PI);
}

Project-02: Variable Faces; Face Variables

P2 Shirley

sketch
//Xinyi Du 
//15104 Section B

var eyes = 20;
var mouth = 20;
var face = 100;
var ears = 20;
var r // red
var g // green
var b // blue
var hairDeco = 20; //hair decorations
var hair = 30; //hair
var cloth = 200;

function setup() {
    createCanvas(300, 300);

}
 
function draw() {
    background(80);
    noStroke();

    // clothing
    fill(255-r, 255-g, 255-b);
    triangle(width / 2, height / 2, width/2-cloth/2, height/2+cloth, width/2+cloth/2, height/2+cloth);

    fill(255, 229, 204);
    ellipse(width / 2, height / 2, face, face); // face

    fill(255, 229, 204);
    ellipse(width / 2 - face / 2, height / 2, ears, ears); // left ear
    fill(255, 229, 204);
    ellipse(width / 2 + face / 2, height / 2, ears, ears); // right ear
    fill(255, 102, 102);
    ellipse(width/2, height/2+face/4, mouth,); // mouth

    var eyeL = width/2 - face/4; // left eye
    var eyeR = width/2 + face/4; // right eye
    fill(64, 64, 64);
    ellipse(eyeL, height/2, eyes, eyes+5);
    ellipse(eyeR, height/2, eyes, eyes+5);

    //hairstyle
    fill(r, g, b);
    ellipse(width/2, height/2-face/2, hairDeco, hairDeco); // hair decorations 1
    fill(r, g, b);
    // hair 1
    var x1 = width/2-hair/2;
    var y1 = height/2-face/2-hairDeco-hair;
    var x2 = width/2+hair/2;
    var y2 = height/2-face/2-hairDeco-hair;
    var x3 = width/2;
    var y3 = height/2-face/2-hairDeco/2;
    triangle(x1, y1, x2, y2, x3, y3);
    fill(r-30, g-30, b-30);
    ellipse(width/2-face/4, height/2-face/3, hairDeco, hairDeco); // hair decorations 2
    ellipse(width/2+face/4, height/2-face/3, hairDeco, hairDeco); // hair decorations 3

    // hair 2
    var x1 = width/2-face/4;
    var y1 = height/2-face/3-hairDeco/2;
    var x2 = width/2-face/4-hair/2;
    var y2 = height/2-face/3-hairDeco/2-hair;
    var x3 = width/2-face/4+hair/2;
    var y3 = height/2-face/3-hairDeco/2-hair;
    triangle(x1, y1, x2, y2, x3, y3);

    // hair 3
    var x1 = width/2+face/4;
    var y1 = height/2-face/3-hairDeco/2;
    var x2 = width/2+face/4-hair/2;
    var y2 = height/2-face/3-hairDeco/2-hair;
    var x3 = width/2+face/4+hair/2;
    var y3 = height/2-face/3-hairDeco/2-hair;
    triangle(x1, y1, x2, y2, x3, y3);

}
 
function mousePressed() {
    face = random(80, 150);
    eyes = random(10, 20);
    ears = random(12, 30);
    mouth = random(10, 25);
    hairDeco = random(10, 30);
    hair = random(20, 50);
    r = random(10, 250);
    g = random(10, 250);
    b = random(10, 250);
    cloth = random(150, 300);
    //
}

Looking Outwards 03: Computational Fabrication

The project that’s inspirational to me is a project done by a CMU Architecture student Madeline Gannon. Her project Reverb is a context-aware 3D modeling environment that allows you to create ready-to-print wearables that are based on your own body. Reverb employs computer vision, digital design, and digital fabrication techniques to translate your real-world hand gestures into intricate geometry that can be printed and worn on the body immediately. It employs a chronomorphologic modeling technique to generate complex forms quickly around a 3D scan. I picked this project because I’m interested in fashion and accessories and it’s interesting to see computational algorithms being applied to these fields in ways that we never expected. The modeling interface uses a three-phase workflow — 3D scanning, 3D modeling, and 3D printing — to enable a designer to craft intricate digital geometries around pre-existing physical contexts. Chronomorphology is a composite recording of an object’s movement. It helps record a full three-dimensional model of the object. The creator’s artistic sensibilities manifest in the final form by aggregating the animated 3D model to create complex geometries around the 3D scanned context.

Project Name: Reverb
Creator: Madeline Gannon
Year of Creation: 2016

Collar Studies & Wrist Studies
Source of Image: http://www.madlab.cc/reverberating-across-the-divide/

LO-03: Computational Fabrication

Quayola’s Unfinished Sculptures (“non-finito”) are a series of “unfinished” physical sculptures that seamlessly merges the digital and modern with classical sculptural styles of the Renaissance. Created by a generative system that carved out blocks of marble with a mechanical arm, these sculptures explore the tension and equilibrium between form and matter, man-made objects of perfection, as well as chaotic yet complex forms of nature. In programming this system, Quayola also took inspiration from Michelangelo’s unfinished series “Prigioni” (1513-1534). As an artist, I find the technique of which Quayola chose to employ in the making of this series to be especially admirable. Algorithmically, the system is composed of mathematical functions that processed geological formations which evolve infinitely, morphing eventually into the classical figures on display. Quayola’s code, then, essentially turns from an extension of his hand to an extension of the hardware which, in the end, results in an extension of the sum of ideas generated from both Quayola and Michelangelo’s brain – timeless, human and artificial.

Quayola, Unfinished Sculptures (2014 – ongoing)