September 2022 – Page 24 – [OLD SEMESTER] 15-104 • Introduction to Computing for Creative Practice

Project-03-Dynamic-Drawing Section D

I enjoyed the freeform in this project which was more open-ended. I had lots of fun playing tricks on the eye in addition to the mouse interaction. Move your mouse left and right and see what happens!!

dynamic drawing sketch

var angle = 0;
var x;
var y;
var w = 80;
var h = 80;
var xe;
function setup() {
    createCanvas(600, 450);
    background(220);
    frameRate(15); 
    
}

function draw() {
    background(204);
    var x = width/2;
    var y = height/2;
    var xe = width/2;
    var ye = height/2;
    

    angle = angle + 1; 
    if (mouseX <= width/2) {  // when mouse moves to left
        background(255); // black background
        // make square bigger
        w = w + 8;
        h = h + 8;

        // bigger white rectangle
        push();
        translate(x,y);   
        rotate(-angle);
        rectMode(CENTER);
        fill (0);
        rect(0, 0, w*20, h*20);
        pop();
        //bigger white circle
        fill(255);
        ellipse(xe, ye, w*17); 
        // big black rectangle 
        push();
        translate(x,y);   
        rotate(angle);
        rectMode(CENTER);
        fill (0);
        rect(0, 0, w*10, h*10);
        pop();
        // big white circle
        fill(255);
        ellipse(xe, ye, w*8);  
        // black rectangle
        push();   // this keeps whatever code that is inside push and pop "self contained" without affecting other code/ "undo"
        translate (x,y);
        rotate(-angle); 
        rectMode(CENTER);
        fill(0);
        rect(0, 0, w*4, h*4);
        // draw black ellipse in center of square
        pop(); 
        fill(255);
        ellipse (xe, ye, w*3);  
         // square inside of ellipse that rotates the opposite direction 
        push();
        translate(x,y);  
        rotate(angle);
        rectMode(CENTER);
        fill(0);
        rect(0, 0, w, h);
        pop();
        // small white circle that approaches center
        push();
        translate(300, 225);
        rotate(radians(angle)); 
        ellipse(xe -100, ye - 100, 50);
        pop();
        angle = angle + 8; // used to be 50

        
    } else if (mouseX >= width/2) {  // when mouse moves to right
        background(0); // white background
        // make square bigger
        w = w - 8; 
        h = h - 8;
         // bigger black rectangle
        push();
        translate(x,y);   
        rotate(angle);
        rectMode(CENTER);
        fill (255);
        rect(0, 0, w*20, h*20);
        pop();
        // bigger black circle
        fill(0);
        ellipse(xe, ye, w*17); 
        // big white rectangle
        push();
        translate(x,y);   
        rotate(-angle);
        rectMode(CENTER);
        fill (255);
        rect(0, 0, w*10, h*10);
        pop();
        // really big black circle
        fill(0);
        ellipse(xe, ye, w*8);  
        // big white rectangle
        push();
        translate (x,y);  
        rotate(angle); 
        rectMode(CENTER);
        fill(255);
        rect(0, 0, w*4, h*4);
        pop();
        // smaller black circle 
        fill(0);
        ellipse (xe, ye, w*3); 
        // white rectangle that rotates in opposite direction
        fill(255);        
        translate(x,y);  
        rotate(-angle);
        rectMode(CENTER);
        fill(255);
        rect(0, 0, w, h);
        // small black circle with white outline that approaches center
        push();
        translate(300, 225);
        rotate(radians(angle)); 
        stroke(255);
        fill(0);
        ellipse(xe -100, ye - 100, 50);
        pop();
        angle = angle - 8;

    }
}

anabelle’s blog 03

Some works that have always stunned me are by the fashion designer Iris van Herpen. Her designs uniquely merge nature and technology by using 3D printed fabrics to reproduce patterns and parametric structures from the natural world. I have always thought her works were the representatives for fashion as an artform. Anecdotally, you’d think that 3D printed fabrics would be stiff and lackluster, but her pieces capture motion with incredible fluidity, thus proving her mastery of design and knowledge of nature. I imagine the algorithms contain something similar to the forLoops that we’ve discussed in this course — there are a lot of repetitive shapes with slight transformations to build a grand, cohesive piece. My personal favorite collection that she’s done is “Syntopia.” There’s something so ethereal, futuristic, but organic about it. Generally, I don’t keep up with the fashion scene, but her works have never failed to impress me.

link to Syntopia: https://www.irisvanherpen.com/collections/ludi-naturae

Neri Oxman’s Man-Nahata: Looking Outwards-03

Neri Oxman has been a huge inspiration to me since I saw her featured on Netflix’s Abstract series. The concept of biomimicry (which is honestly more of a return to what was than a new concept) holds incredibly poignant as human innovation seems to split the sides of the uncanny valley and either try with incredible effort to mimic analog, natural, or otherwise older design ideas, or shoot beyond anything that has ever been imagined. Oxman’s most recent published project is entitled ‘Man-Nahata,’ the Native American word for the island of Manhattan. It imagines, if Manhattan were to undergo an collision wiping out its population, what the biological regrowth might look like, using ecological data from the island pre-colonization and also the current grid layout and zoning of the city. How might nature rebuild, and how might we rebuild around her? Generative algorithms imagine and plot how nature might overtake the current architecture, and how our city planning could influence a natural process.

Sample artistic generation of biological creep into future Manhattan.

Project 03-Dynamic Drawing

I went poking around the p5js reference library and found a really intriguing example in the randomGaussian() object so I decided to run with that and see what I could do with that. mouseX controls the properties of the yellow burst, and mouseY the blue. Click to randomize the burst lines, and click and drag to shade the background along greyscale.

sketch Download

// Bridget Doherty, bpdohert, 104 Section C
 
// Click to randomize burst density
// mouse X position changes yellow burst
// mouse Y position changes blue burst
// Clicking & dragging changes background color along greyscale

// Base code for bursts from p5js reference >> randomGaussian() object

let distribution = new Array(360);
var Burst1 = 200;
var Burst2 = 200;
let bkgColor = 0;

function setup() {
  createCanvas(600, 450);
  for (let i = 0; i < distribution.length; i++) {
    distribution[i] = floor(randomGaussian(0, Burst1));
  }
  for (let i2 = 0; i2 < distribution.length; i2++) {
    distribution[i2] = floor(randomGaussian(0, Burst2));
  }
}

function draw() {
  background(bkgColor);
  translate(width / 2, height / 2);
  for (let i = 0; i < distribution.length; i++) {
    rotate(TWO_PI / distribution.length);
    strokeWeight(1.5);
    stroke(color(243, 197, 101));
    let dist = abs(distribution[i]);
    line(0+mouseX, 0, dist, 0);
  }
  for (let i2 = 0; i2 < distribution.length; i2++) {
    rotate(TWO_PI / distribution.length);
    stroke(color(158, 182, 187));
    let dist = abs(distribution[i2]);
    line(0, 0+mouseY, dist, 0);
  }
}

function mousePressed(){
  let Burst1 = mouseX;
  let Burst2 = mouseY;
  print (Burst1 +", " + Burst2);
  for (let i = 0; i < distribution.length; i++) {
    distribution[i] = floor(randomGaussian(0, Burst1));
  }
  for (let i2 = 0; i2 < distribution.length; i2++) {
    distribution[i2] = floor(randomGaussian(0, Burst2));
  }
}

function mouseDragged() {
  bkgColor = bkgColor - 0.7;
  if (bkgColor<=0) {
    bkgColor = 255;
  }
}

The Foldable Fractal

The project I found that I admire is “Foldable Fractal 2.0” by David Dessens who is a generative artist. This project was from 2008.

I admire the visual look of it a lot. It is mesmerizing and beautiful to just look at. It is also gives off clock vibes to me, and makes me think of time passing or gears turning, even though the sculpture does not move. The design of it is simple as well, it seems to just be a pattern of hexagons that repeat within each other to create the structure. I admire how peaceful it seems too. It is a design that invites the viewer to stare and dissect.

The algorithms that were used to generate this art was through using a recursive algorithm that is based on a lindermayer system. It uses a recursive algorithm of a pentagon shape after folding a pentagonal dodecahedron. I believe the artist used a program called Generator.x 2.0 to build the algorithm and sculpture.

“Foldable Fractal 2.0” by David Dessen (2008)

Project 03: Alexia Forsyth

sketch

//Alexia Forsyth
//aforsyth
//Section A

var hVelocity = 50;
var vVelocity = 50;

var w = 50;
var h = w * .8;

var count = 0;

var drawing = true;

r = 20;
g = 100;
b = 120;

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

function draw() {
	if (drawing == true){
	print("Move your mouse to draw...")
	print(count);

	if (count == 50 || count == 100 || count == 150 || count == 200){
		w = 70;
		r = random(5,50);
		g = random(50,200);
		b = random(50,220);
	}
	else if (count == 300){
		drawing = false;
	}

	if (random(3) <= 1){
		fill(r, g, b);
	}
	else if (random(3) > 1 & random(3) < 2){
		fill(r+(.88*r), g+(.33*g), b+(.26*b));
	}
	else{
		fill(r+(3*r), g+(.59*g), b+(.37*b));
	}

	ellipse(mouseX,mouseY, w, h);

	if(mouseX >= width || mouseY >= height || mouseY <= 0 || mouseX <= 0){
		hVelocity = -hVelocity;
		vVelocity = -vVelocity;
		count += 1;
	}
	
}
else{
	print("Stop");
}

}

Some of my examples:

“Blooming” Fibonacci Zoetrope Sculptures by John Edmark

Alexia Forsyth

15104

09/13/22

“Blooming” Fibonacci Zoetrope Sculptures by John Edmark

John Edmark’s “Blooming” Fibonacci is a beautiful floral display of 3D fabrication. His series is beautiful and inspiring. The amount of detail is truly spectacular to see in a 3D fabrication. Edmark has several pieces similar to the one below, each magical and awe-inspiring. According to the artist, the piece was inspired by the golden angle: everything is synchronized explicitly to the rate as the sculpture turns 137.5 degrees. Every petal is placed at a particular length from the center. It gives the appearance of petals moving: shifting outwards and shrinking at the corners. The 3D model spins at 550 RPMs and is videotaped at 24-frames-per-second. This creates a repeating optical effect. His artwork is special because it mimics phyllotaxis, the geometric arrangement of leaves on a plant stem.

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

Looking Outwards 03

This project is a fashion line called Voltage by Iris Van Herpen, an architect-turned-designer. The line has pieces like a “skirt-and-cape combo lined with thousands of tiny white anemone-like nodules.” It essentially is a 3D printed (on an Object Connex) and laser sintered fashion line and a frontrunner of digital fabrication. What I find most interesting about the garments she made are that they have a mix of both soft/flexible and hard/structured elements. This varying of the softness and elasticity allows the clothes to have differing forms and ranges of motion. I assume that the process of production and the algorithms used are related to CAD, or computer-aided design, to make templates that can be used to make 3D models.

Iris Van Herpen’s Voltage , 2013

Video of Voltage line : YouTube video of Van Herpen’s full line

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