Computational Fabrication

I admire Andrew Kudless‘s collaborative idea of nature and the computational form that is shown in the picture of “C_Wall” / 2006. When I look at this picture, I think it is interesting to see how natural wave-like circular patterns are created from the shadow of the sun, coming from the physical sculpture. I feel like the artist generated this work from nature like coral reef/honeycomb/etc something that is repetitive but not artificially but naturally created structural forms. Looking at the final forms(including other works) the Voronoi algorithm that the creator used, is successfully displayed to facilitate the translation of information from simulations and other point-based data. I think the creator created the perfect harmony of nature/man-made physical-forms considering how to express the materialization aspects at the same time.

“C_Wall”
“C_Wall”

LO 03 – Computational Fabrication

John Edmark

Blooms: Strobe-Animated Sculptures


Blooms: Strobe-Animated Sculptures

Today, I will be taking a look at John Edmark’s 3D printed sculpture, Bloom. These sculptures are designed to animate when spun under a strobe light. The animation is achieved by progressive rotations of the golden ratio. This project caught my attention because it is mostly inspired by nature, through his use of the golden ratio which can be found in pinecones and sunflowers. The sculpture is satisfying to look at, but also very discomforting at the same time. The movement and flexibility from a plastic object is very provocative and unexpected. I believe that the author used some sort of an intricate variable system to map out the shapes before 3D printing. The creator’s artistic sensibilities are present in the final form not only through the visually appealing outcome, but also his careful and intentional use of scale, and proportions to create these kinetic sculptures. 

View portfolio here

Blooms: Strobe Animated Sculptures

Project-03: Dynamic Drawing

I was somewhat inspired by the overlapping tonal shapes of the art of designer Verner Panton, so I decided to use a similar concept for building tonal shades through scaling, adapting to the mouse movements. The whole structure of the program runs off of one while loop to create the intervals in spacing, location, rotation, and scale that many of the objects have.

Verner Panton Art Prints for Any Decor Style | Society6
Verner Panton painting

mouseadaptiveart

var centerX = 300;
var centerY = 225;

function setup() {
    createCanvas(600, 450);
    background(255);
}

function draw() {
	noStroke();
	background(255);
	rectMode(CENTER);
	let i =0;
	while(i<mouseX){
		noStroke();
//centered rectangle matrix
	fill(0,0,mouseX/3,20);
	rect(centerX,centerY,mouseX-i,mouseY-i); 
	rect(centerX,centerY,mouseY-i,mouseX-i);
//circles
    fill(255-(mouseY/3),0,255-(mouseX/3),10);
    //top left
	    ellipse(50,50,width-(mouseX-i),height-(mouseY-i));
	    ellipse(50,50,mouseY-i,mouseX-i);
	//top right
	    ellipse(550,50,width-(mouseX-i),height-(mouseY-i));
	    ellipse(550,50,mouseY-i,mouseX-i);
	//bottom right
	    ellipse(550,400,width-(mouseX-i),height-(mouseY-i));
	    ellipse(550,400,mouseY-i,mouseX-i);
	//bottom left
	    ellipse(50,400,width-(mouseX-i),height-(mouseY-i));
	    ellipse(50,400,mouseY-i,mouseX-i);
//gray bars
    fill(0,0,0,7);
    //left vert
        rect(150,centerY,300-(mouseY-(i/2)),height);
    //right vert
        rect(450,centerY,300-(mouseY-(i/2)),height);
//white bars
    fill(255);
    rect(centerX, centerY-i,width, i/20);
    rect(centerX, centerY+i,width, i/20);
//black twisting lines, use i to determine degree
    stroke(0);
    line(50,50+(i/2),550,400-(i/2));
    line(550-(i/2),50,50+(i/2),400);
	i+=50;
    }
//white ellipses
    strokeWeight(10);
    stroke(255);
    noFill();
    let j=0;
    while(j<15){
    	strokeWeight(5/j);
    	 ellipse(centerX, centerY+i,mouseX+(50*j), mouseX+(50*j));
    	 ellipse(centerX, centerY-i,mouseX+(50*j), mouseX+(50*j));
    	j++;
    }
}

Looking Outwards-03

Generating a New Balance 3D-printed midsole from pressure data from Nervous System on Vimeo.

This collaboration between footwear brand New Balance and 3D printing company Nervous System uses code to generate a 3D printed lattice for a sneaker midsole. I think the algorithm that they used relies on taking various weight inputs and understanding how different thicknesses of strands and densities of the lattice can be combined to allow for structural support as well as enough flex and bounce needed in a shoe midsole. The creator’s artistic sensibilities are shown in the final form through the type of lattice used, the overall form of the midsole, and the color and properties of the material used. Due to the fact that most of the structure and density are automatically generated, there isn’t as much room for creative expression.

8

New Balance and Nervous System for the Zante Generate
https://vimeo.com/146938134

02 Project Variable Face – Whack-A-Frog

I seem to have toads and frogs on my mind a lot lately. A lot of people say I embody the same spirit as one, so I am trying to embrace that in a positive way. For this project, I wanted to depict a frog poking its head out of water.

As I progressed with the code, I wanted to add some additional environmental elements. With the help of some online searches, I found a project on p5js.org with randomized dots. I tried using them to show movement of water. I am not sure how effective it was, but I think it makes the scene a bit more interesting.

Again this week, I really took advantage of the power of arcs in p5.js. With so many parameters, you can do so much curvature so easily. I used arcs for the eyeball and pupil, which are very different shapes, but by adjusting the mode of arc from CHORD to PIE, you can get a lot of variety. Hot tip: switch the degree mode of the project from RADIANS to DEGREES if you don’t explicitly process the world in immediate relation to Pi. Or don’t, if you like pain.

sketchDownload

//Julia Steinweh-Adler
//Section D

//Global Variables

var eyesSize = 20
var headWidth = 150;
var eyeWidth= 40;
var mouthSize = 30;
var mouthWidth = 30;
var pupil=20;
var smallX = 600/2    //canvas width divided by 2  
var smallY = 480/2    //canvas height divided by 2
var largeX = 600/3.5   //canvas width divided by 3.5  
var largeY = 480/3.5   //canvas height divided by 3.5
var pupilAngle = 300
var nostrilWidth = 5
var nostrilHeight = 6

    //Water Ripple Dot Background values
var spot = {    //coordinates
    x:100,
    y: 50,
};

var col = {    //color values
    r:0,
    g:0,
    b:255,
};

function setup() {
    createCanvas(600, 480);
    angleMode(DEGREES);    //Change angle mode to degrees to make arcs easier
    frameRate(2)    //Change framerate to 2 frames per second
  
}
  function draw() {
    noStroke();

//BACKGROUND
    background(49, 30, 220); //Light Blue
    
    
    //Water Ripple Dot Pattern Background
    spot.x= random (0, width);
    spot.y= random (0, height);

    noStroke();
    col.r = random (0);
    col.g = (0);
    col.b = random (100, 200);
    
    fill (col.r, col.g, col.b, 120);
    ellipse (spot.x, spot.y, 1600, 400);    //Change dot dimensions and coordinates
    
    //Water Ripple
    stroke(60, 30, 220);
    strokeWeight(4);
    noFill();
    ellipse(smallX, smallY-90, 200, 100)
    ellipse(smallX, smallY-90, 250, 120)

    
//FROG
    //Face
    noStroke();
    fill(44, 94, 76); // Face Color, Green
    arc(smallX, smallY - 90, headWidth, 80, 0, 180, PIE);    //Head top arc
    arc(smallX, smallY - 89, headWidth, 100, 180, 0, PIE);   //Head bottom arc
    circle(smallX+50, smallY-125, eyesSize+10);    //right eyelid
    circle(smallX-50, smallY-125, eyesSize+10);    //left eyelid
      
    //Eyeball
    fill(124, 84, 30);     //Brown eyeball color
    arc(smallX + 50, smallY-125, eyesSize, eyesSize, 210, 120, CHORD);    //right eye arc
    arc(smallX - 50, smallY-125, eyesSize, eyesSize, 60, 330, CHORD);    //left eye arc
    
    //Eye Pupil   
    fill(0);     //Black pupil
    stroke(204, 168, 18);    //Change stroke to yellow
    strokeWeight(2);
    arc(smallX + 50, smallY-125, eyesSize, eyesSize, pupilAngle, pupilAngle-255, PIE);    // right eye pupil
    arc(smallX - 50, smallY-125, eyesSize, eyesSize, (-pupilAngle)+435,(-pupilAngle)+540, PIE);    //left eye pupil
    
    //Nostril
    noStroke();
    ellipse(smallX + 10, smallY - 90, nostrilWidth, nostrilHeight)    //Right Nostril
    ellipse(smallX - 10, smallY - 90, nostrilWidth, nostrilHeight)    //Left Nostril   
    
    
    //Mouth
    noStroke();
    fill(109, 165, 144); //top lip color, Green (same as face to integrate shape)
    arc(smallX, smallY-70, mouthWidth, mouthSize, 0, 180, PIE);    //top lip arc 
    fill(44, 94, 76);    //mouth color, light green
    arc(smallX, (smallY)-75, mouthWidth, mouthSize, 0, 180, PIE);    //mouth arc
    
    
//Foreground Grass
    beginShape();
    fill(10,60,4);
    vertex(0,height);
    vertex(width*1/24,height*3/4);//peak 1
    vertex(width*2/24,height*1/2);
    vertex(width*3/24,height*5/9);//peak 2
    vertex(width*4/24,height*27/32);
    vertex(width*5/24,height*3/4);//peak 3
    vertex(width*6/24,height*29/32);
    vertex(width*7/24,height*2/3);//peak 4
    vertex(width*8/24,height);
    vertex(width*9/24,height*1/2);//peak 5
    vertex(width*10/24,height*30/32);
    vertex(width*11/24,height*5/9);//peak 6
    vertex(width*12/24,height*27/32);
    vertex(width*13/24,height*3/4);//peak 7
    vertex(width*14/24,height*29/32);
    vertex(width*15/24,height*2/3);//peak 8
    vertex(width*16/24,height);
    vertex(width*17/24,height*2/3);//peak 9
    vertex(width*18/24,height*29/32);
    vertex(width*19/24,height*3/4);//peak 10
    vertex(width*20/24,height*30/32);
    vertex(width*21/24,height*5/9);//peak 11
    vertex(width*22/24,height*27/32);
    vertex(width*23/24,height*3/4);//peak 12
    vertex(width,height);
  endShape();
}



function mousePressed() {
    smallX = random(100,500);
    smallY = random(280,310);
    largeX = random(190, 200);
    largeY = random(140,150);
    headWidth = random(130, 170);
    pupilAngle = random(250,350);
    mouthWidth = random(60, 100)
    eyesSize = random(30, 50);
    mouth = random(2,5);
    nostrilWidth = random(4,15);
    nostrilHeight = random(4,15)
}
Frog poking its head out of the water Stock Photo: 180696071 - Alamy

LO 2 – Generative Art; Bone Chair

At its surface, generative art doesn’t mean much to me. As a design-oriented person, I appreciate beautiful things, yet they are most meaningful to me when they are rooted in some practical function. However, I have found an example of generative art that provides enough practical use to satisfy me – Joris Laarman’s ‘Bone Chair’.

Joris Laarman. Bone Chair. 2006 | MoMA

This chair is a piece of furniture resulting from a specially designed computer algorithm, used to structure supports in a way that mimics the natural growth of bones and trees. Starting with a chunk of material and virtually applied forces, the algorithm slowly removes material where it is not structurally significant, leaving behind only the most essential material for the given position of the furniture. As you might imagine, the final product feels machine-made in its precision and finish. However, this sculpting technique effectively captures the innate beauty of natural, irregular structures while simultaneously ensuring comfort and strong support. This algorithm draws me to the world of algorithmic art, since it shows me how digitally crafted art does not have to feel unnatural or impractical – if anything, it can streamline the integration of biomimicry into common objects around us in unexpected ways. And that, I find very exciting. 

Project 2 Faces

Already upset that this isn’t working the way it’s supposed to so here’s a pessimistic post about my future in this class.

Project 2Download
function setup() {
    createCanvas(480, 640);
    background(45);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
	var w = random(100, 400)
	var h = random(100, 500)
	var eyeWidth = random(10, 50)
	var eyeHeight = random(10, 60)
	var eyeBrow = random(300 - 2*eyeHeight, 320 - 2*eyeHeight)
    background(45);
    fill(190);
    ellipse(240, 320, w, h); //head
    fill(255);
    ellipse(240 - eyeWidth, 320 - eyeHeight, eyeWidth, eyeHeight); //left eye
    ellipse(240 + eyeWidth, 320 - eyeHeight, eyeWidth, eyeHeight); //right eye
    var x = 240 - eyeWidth/2
    var y = 320 - 2*eyeHeight
    var n = 240 + eyeWidth/2
    strokeWeight(4)
    line(x, y, x - eyeWidth, eyeBrow) //left eyebrow
    line(n, y, n + eyeWidth, eyeBrow) //right eyebrow
    if (y > 250) {
    	noFill()
    	stroke(247, 18, 18)
    	strokeWeight(1)
        circle(x - 15, y, 10)
    } else {
    	noFill()
    	stroke(247, 18, 18)
    	strokeWeight(1)
    	circle(n + 15, y, 10)
    }
    noLoop()
}

Looking Outwards 02 – Generative Art

For this blog, I’m looking at Michael Hansmeyer’s Subdivided Columns. I’ve always been enmeshed in ancient Greek architecture, and the notion of a new order of columns based on subdivision processes intrigued me. Of course we’re always adding to and building onto the work of our predecessors, but does this art do that or does it create a new thing entirely? After looking into it, I admire that this project seems to do both. You begin with the basic doric column, and abstract it. As far as I can tell, the way this piece works is, using an input form, you can detail information about the column’s shaft, capital, base, fluting, and entasis. According to the website, “the architect effectively designs a process that produces a column, rather than designing a column directly.” Michael Hansmeyer’s hand is still clear in these computer-generated columns. The intricate patterns of almost-recognizable figures and the detailed texturing work that traverses the whole length of the columns are distinctive to his style.

http://www.michael-hansmeyer.com/subdivided-columns

Looking Outwards-02

https://mtchl.net/acf-my-climate/

This project by Mitchell Whitelaw is called the “My Climate 2050” project created in December 2018. It generates a visualization tool in Australia that visualizes the impacts of climate change of local areas. The project uses the datasets from the government and climate institutes, which contains around 4700 data projections about the temperature, seasonality, etc. The project reveals that at almost all of the recorded locations, the average temperature year-round is increasing, which signifies an alarming phenomenon of extended summer periods.

I think that the visuals and aesthetics of this tool is effective because of the display of colors and details. I am inspired by this because of how generative art like this can be really useful for our understanding of the climate crisis right now.

Project 02: Variable Faces

sketch
var bodyWidth = 270;
var bodyHeight = 340;
var eyeWidth = 11;
var eyeHeight = 12;
var mouthWidth = 20;
var mouthHeight = 10;
var armLY = 290
var armRY = 280
var legLX = 250
var legRX = 350
var backgroundR = 243;
var backgroundG = 127;
var backgroundB = 135;


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

function draw() {
    background(backgroundR, backgroundG, backgroundB);

    //left arm
    stroke(169, 124, 80);
    line(width/2-200, armRY, width/2, height/2);
    //right arm
    stroke(169, 124, 80);
    line(width/2, height/2+20, width/2+200, armLY);

    //left leg
    stroke(169, 124, 80);
    line(legLX, height/2+200, width/2, height/2);
    //right leg
    stroke(169, 124, 80);
    line(width/2, height/2, legRX, height/2+200);

    //body shape back
    fill(134, 197, 74);
    stroke(30, 69, 37);
    strokeWeight(15);
    ellipse(width/2, height/2, bodyWidth, bodyHeight);
    //body shape front
    noStroke()
    fill(201, 221, 101)
    ellipse(width/2, height/2, bodyWidth-30, bodyHeight-30);

    //seed
    fill(169, 124, 80);
    circle(width/2, height/2+50, 150);

    //eyes
    fill(0)
    var eyeLX = width/2 - bodyWidth*0.15;
    var eyeRX = width/2 + bodyWidth*0.15;
    ellipse(eyeLX, height/2.45, eyeWidth, eyeHeight); //left eye
    ellipse(eyeRX, height/2.45, eyeWidth, eyeHeight); //right eye
    
    //mouth
    var mouthY = height/2 - bodyHeight*0.13
    if (eyeWidth > eyeHeight) {
        arc(width/2, mouthY, mouthWidth, mouthHeight, PI, 2*PI);
    }
    else {
        fill(247, 165, 170)
        arc(width/2, mouthY, mouthWidth, mouthHeight, 2*PI, PI);
    }
}
function mousePressed() {
    bodyWidth = random(220, 345);
    bodyHeight = random(300, 370);
    eyeWidth = random(7, 20);
    eyeHeight = random(6, 20);
    mouthWidth = random(20, 30);
    mouthHeight = random(10, 50);
    armLY = random(280, 360);
    armRY = random(210, 320);
    legLX = random(220, 270);
    legRX = random(320, 370);
    backgroundR = random(180, 270);
    backgroundG = random(130, 200);
    backgroundB = random(135, 160);
}

The process of coding this avocado was really fun. I enjoyed seeing the different features come together at the end and all the combinations that it created. Here is my sketch in illustrator: