Month: September 2020

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

As digital fabrication tools get more and more sophisticated, there’s been calls for the field of architecture to keep up with the technology. Digital fabrication tools and computer algorithms come hand in hand, not only do computer algorithms help the tools realize the physical objects, the algorithms can also help designers and architects visualize and imagine previously impossible geometries. Michael Hansmeyer, a classically trained, architect, walks at the forefront of this endeavor. In is installation Digital Grotesque I, Hansmeyer explore the the expressive formal potentials of digital technologies, the forms, generated by a series of algorithms consists of 260 million geometric facets, an impossible feat via regular explicit modelling. What’s interesting about this is that, the algorithm, other than interpreting classical architectural forms, adds another layer of detail and complexity to it by exploring, ideas such as permutations and infinite scales. The artist demonstrates this on his website with a 3d model of the actual installation, where the piece itself can be zoom in infinitely. An exploration of fractals and endless permutations. Although the idea of infinite is limited by reality and our fabrication abilities and resolution, it is still without a doubt an interesting concept to explore at an architectural scale, that has been thought over by generations of architects. Although it is now, just a slight bit closer to reality, Hansmeyer’s piece can still only capped at a certain resolution. There is still much to discover through the lens of generative design.

http://www.michael-hansmeyer.com/digital-grotesque-I

project 02-face

face
var eyeSize = 20;
var eyebrowWidth = 40;
var eyebrowHeight = 10; 
var eyeLX = 80;
var eyeRX = 215;
var eyeHeight = 100;
var blushLX = 80;
var blushRX = 215;
var blushY = 138;
var blushWidth = 65;
var blushHeight = 20;
var mouthLX = 110;
var mouthRX = 178;
var mouthY = 175;
var R = 250;
var G = 100;
var B = 60;
 
function setup() {
    createCanvas(300, 300);
}
 
function draw() {
    background(R, G, B);
    strokeWeight(5);
    point(280, 70);
    point(150, 40);
    point(50, 60);
    point(35, 100);
    point(20, 150);
    point(90, 260);
    point(180, 255);
    point(250, 270);
    strokeWeight(1);

    noFill();
    beginShape();
    curveVertex(250, 270);
    curveVertex(250, 270);
    curveVertex(280, 70);
    curveVertex(150, 40);
    curveVertex(50, 60);
    curveVertex(35, 100);
    curveVertex(20, 150);
    curveVertex(90, 260);
    curveVertex(180, 255);
    curveVertex(250, 270);
    curveVertex(250, 270);

    endShape(); //shape of the face
    fill(139, 69, 19);
    ellipse(80, 85, eyebrowWidth, eyebrowHeight);
    fill(139, 69, 19);
    ellipse(215, 85, eyebrowWidth, eyebrowHeight); //eyebrow
    fill(0, 0, 0);
    circle(eyeLX, eyeHeight, eyeSize);
    fill(0, 0, 0);
    circle(eyeRX, eyeHeight, eyeSize); //eyes
    fill(250, 128, 114);
    ellipse(blushLX, blushY, blushWidth, blushHeight);
    fill(250, 128, 114);
    ellipse(blushRX, blushY, blushWidth, blushHeight); //blushes
    strokeWeight(5);
    point(mouthLX, mouthY);
    point(148, 200);
    point(mouthRX, mouthY);
    strokeWeight(1);

    noFill();
    beginShape();
    curveVertex(mouthLX, mouthY);
    curveVertex(mouthLX, mouthY);
    curveVertex(148, 200);
    curveVertex(mouthRX, mouthY);
    curveVertex(mouthRX, mouthY);
    endShape(); //mouth
}
 
function mousePressed() {
    eyeSize = random(10, 20);
    eyebrowWidth = random(25, 45);
    eyebrowHeight = random(5, 15); 
    eyeLX = random(60, 80);
    eyeRX = random(200, 220);
    eyeHeight = random(100, 115);
    blushLX = random(70, 95);
    blushRX = random(205, 225);
    blushY = random(130, 140);
    blushWidth = random(30, 70);
    blushHeight = random(20, 35);
    mouthLX = random(100, 140);
    mouthRX = random(170, 210);
    mouthY = random(170, 250); 
    R = color(random(0,255),random(0,255),random(0,255));
    G = color(random(0,255),random(0,255),random(0,255));
    B = color(random(0,255),random(0,255),random(0,255));
    
}

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:

Dillenberger, Hansmeyer, And the Parametric Grotto

https://www.archdaily.com/868540/this-mysterious-3d-printed-grotto-challenges-boundaries-of-computational-geometry-and-human-perception

Digital Grotesque II, by Dillenberger & Hansmeyer. Commissioned by the Centre Pompidou

Dillenberger & Hansmeyer’s 3D printer grotto is a perfect representation of that possibilities that computation and digital fabrication can bring to architecture. Inhumanly complex and detailed, its Gaudi-esque surface was generated using algorithms and built in sandstone using 3D printers. It leaves the limitations of the human ability to craft and even to design in the dust, relying purely on the now super-human abilities of our machines.

Works such as this one inevitably force people like me to ask hard questions about what design is worth. These algorithms and machines designed and built an object much more complex than I ever could, even given another thirty years to master design and a team of master stonemasons to work with. If this is what can be done with machines alone, what in what space are people like me left to work?

-Robert

Project 02 – Variable Face

Some of the detail in this project are similar to the program I covered in my Looking Out for this week. There are times when the face does not look as it should, while there are others when it seems as though the face is trying to convey real emotions. Left click to begin and change faces.

variableface

/* Lance Yarlott (lcy)
   Section D */

// variable definitions, names self explanatory
var canvasWidth = 400;
var canvasHeight = 400;

const headCenterX = canvasWidth / 2;
const headCenterY = canvasHeight / 2;
const headRadius = canvasHeight / 3;

const noseX = headCenterX;
const noseTopY = headCenterY;
const noseBottomY = noseTopY + (headRadius / 4);

const eyeCenterLX = headCenterX - (headRadius / 2);
const eyeCenterRX = headCenterX + (headRadius / 2);
const eyeCenterY = headCenterY - (headRadius / 3);
const eyeWhiteRadius = headRadius / 5;
const irisRadius = eyeWhiteRadius / 2;

const mouthY = headCenterY + (2 *headRadius / 3);
const mouthX = headCenterX;

var skinR = 255;
var skinG = 255;
var skinB = 255;

var noseWidth = 10;
    
var earWidth = 10;

var pupilDilationRadius = 1;
var eyeR = 255;
var eyeG = 255;
var eyeB = 255;
    
var eyebrowWidth = 10;
var eyebrowThickness = 1;
var eyebrowAngle = 0;
var eyebrowDistance = 0;
var eyebrowHeight = eyeCenterY - (2 * eyeWhiteRadius);

var mouthCurve = 0;
var mouthWidth = 1;
var mouthThickness = 1;

var hairR = 255;
var hairG = 255;
var hairB = 255;

var noseR = 255;
var noseG = 255;
var noseB = 255;

var bgColor = 255;

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

function draw() {
    if (mouseIsPressed) {
        if (mouseButton === LEFT) { 
            // colors
            skinR = random(0, 255);
            skinG = random(0, 255);
            skinB = random(0, 255);

            eyeR = random(0, 255);
            eyeG = random(0, 255);
            eyeB = random(0, 255);
            
            hairR = random(0, 255);
            hairG = random(0, 255);
            hairB = random(0, 255);

            noseR = random(0, 255);
            noseG = random(0, 255);
            noseB = random(0, 255);

            bgColor = random(0, 255);

            // face shapes
            noseWidth = random(10, headRadius / 2);

            pupilDilationRadius = random(1, irisRadius);
            
            eyebrowWidth = random(10, headRadius / 2);
            eyebrowThickness = random(1, eyeWhiteRadius);
            eyebrowAngle = random(-HALF_PI, HALF_PI);
            eyebrowDistance = random(0, eyebrowWidth);
            eyebrowHeight = eyeCenterY - (random(1, 3) * eyeWhiteRadius);

            mouthCurve = random(50);
            mouthWidth = random(1, headRadius * 2);
            mouthThickness = random(1, 10);
        }
    }

    // set background color
    background(bgColor);

    // draw face outline, variable skin color?
    fill(skinR, skinG, skinB);

    circle(headCenterX, headCenterY, 2 * headRadius);

    // TODO: nose
    fill(noseR, noseG, noseB);
    triangle(noseX - noseWidth, noseBottomY, noseX + noseWidth, noseBottomY,
            noseX, noseTopY);

    // TODO: variable eyes w/ variable color
    fill(255);
    circle(eyeCenterLX, eyeCenterY, eyeWhiteRadius);
    circle(eyeCenterRX, eyeCenterY, eyeWhiteRadius);

    fill(eyeR, eyeG, eyeB);
    circle(eyeCenterLX, eyeCenterY, irisRadius);
    circle(eyeCenterRX, eyeCenterY, irisRadius);

    fill(0);
    circle(eyeCenterLX, eyeCenterY, pupilDilationRadius);
    circle(eyeCenterRX, eyeCenterY, pupilDilationRadius);

    // TODO: variable eyebrows, match hair color
    stroke(hairR, hairG, hairB);
    strokeWeight(eyebrowThickness);
    line(headCenterX + eyebrowDistance, eyebrowHeight - 10 * sin(eyebrowAngle), 
        headCenterX + eyebrowDistance + eyebrowWidth, 
        eyebrowHeight + 10 * sin(eyebrowAngle));
    line(headCenterX - eyebrowDistance, eyebrowHeight - 10 * sin(eyebrowAngle),
        headCenterX - eyebrowDistance - eyebrowWidth,
        eyebrowHeight + 10 * sin(eyebrowAngle));

    // TODO: variable mouth, just shape of curve
    stroke(0);
    curve(mouthX - mouthWidth, mouthY + mouthCurve, mouthX - mouthWidth / 2,
        mouthY - mouthCurve, mouthX + mouthWidth / 2, mouthY - mouthCurve,
        mouthX + mouthWidth, mouthY + mouthCurve);
    noStroke();
}

LO – 02 (Generative Art)

For this week’s LO, I took a closer look at Collider by Robert Hodgin, who does a lot of work in 3D terrain simulations like this one. The concept behind the project is exploring a simulated particle system interacting with a universal gravitational force that is coded in.

I really enjoyed the way that this project took a simple physics concept and was able to visualize it in such a beautiful way to show the intersection between scientific and visual methods of communicating information. Not only is it visually pleasing to look at, it also demonstrates the theories of universal gravitation in a tangibly interactive way.

Robert Hodgin’s work is primarily done in Houdini and C++, for which he is a co-creator of Cinder C++, a free open-source library designed to be a resource for endeavors of creative coding in the aforementioned language.

Project 2 – Variable Faces

Click on the hamster and see its mood evolve as it eats and chews!

sketch
/*
 * Michelle Kim
 * Section B
 */

var faceWidth = 170;
var faceHeight = 150;
var leftCheekWidth = 85;
var leftCheekHeight = 70;
var rightCheekWidth = 85;
var rightCheekHeight = 70;
var eyeWidth = 15;
var eyeHeight = 20;
var noseWidth = 40;
var noseHeight = 25;
var leftEarWidth = 40;
var leftEarHeight = 50;
var rightEarWidth = 40;
var rightEarHeight = 50;
var bodyWidth = 240;
var bodyHeight = 200;
var footWidth = 50;
var footHeight = 30;
var leftMouthStop = 1.57;
var rightMouthStart = 1.57;

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

function draw() {
    var canvasCenter = width / 2;
    var footX = bodyWidth * 0.3;
    var footY = bodyHeight * 0.45;
    var bodyCenterY = height * 0.65;
    var faceY = bodyCenterY - (bodyHeight * 0.8);
    var earX = faceWidth * 0.25;
    var earY = faceY - (faceHeight * 0.45);
    var cheekY = faceY + (faceHeight * 0.25);
    var eyeX = faceWidth * 0.2;
    var eyeY = faceHeight * 0.1;
    var blushX = leftCheekWidth * 0.45;
    var handX = bodyWidth * 0.1;
    var mouthX = noseWidth * 0.25;
    var mouthY = faceY + (noseHeight * 0.8);
    var noseY = faceY + eyeY - (noseHeight * 0.2);
    var leftBlushX = leftCheekWidth * 0.3;
    var leftBlushY = leftCheekHeight * 0.2;
    var rightBlushX = rightCheekWidth * 0.3;
    var rightBlushY = rightCheekHeight * 0.2;

    background(204, 238, 245);
    noStroke();
    fill(218, 205, 141);
    //left foot
    ellipse(canvasCenter - footX, bodyCenterY + footY, footWidth, footHeight);
    //right foot
    ellipse(canvasCenter + footX, bodyCenterY + footY, footWidth, footHeight);

    fill(246, 231, 153);
    //yellow body
    ellipse(canvasCenter, bodyCenterY, bodyWidth, bodyHeight);
    //left yellow ear
    ellipse(canvasCenter - earX, earY, leftEarWidth, leftEarHeight);
    //right yellow ear
    ellipse(canvasCenter + earX, earY, rightEarWidth, rightEarHeight);

    fill(161, 154, 118);
    //left brown ear
    ellipse(canvasCenter - earX, earY, leftEarWidth / 2, leftEarHeight / 2);
    //right brown ear
    ellipse(canvasCenter + earX, earY, rightEarWidth / 2, rightEarHeight / 2);

    fill(246, 231, 153);
    //yellow face
    ellipse(canvasCenter, faceY, faceWidth, faceHeight);

    fill(242, 234, 183);
    //white body
    ellipse(canvasCenter, bodyCenterY, bodyWidth * 0.7, bodyHeight);

    fill(245, 239, 213);
    //left cheek
    ellipse(canvasCenter - earX, cheekY, leftCheekWidth, leftCheekHeight);
    //right cheek
    ellipse(canvasCenter + earX, cheekY, rightCheekWidth, leftCheekHeight);
    //snout
    ellipse(canvasCenter, cheekY, faceWidth * 0.35, faceHeight * 0.45);

    fill(81, 80, 72);
    //left eye
    ellipse(canvasCenter - eyeX, faceY - eyeY, eyeWidth, eyeHeight);
    //right eye
    ellipse(canvasCenter + eyeX, faceY - eyeY, eyeWidth, eyeHeight);

    noFill();
    stroke(100);
    strokeWeight(2);
    //left mouth
    arc(canvasCenter - mouthX, mouthY, 20, 40, 0, leftMouthStop);
    //right mouth
    arc(canvasCenter + mouthX, mouthY, 20, 40, rightMouthStart, 3.14);

    fill(218, 205, 141);
    stroke(210, 198, 138);
    //left hand
    arc(canvasCenter - handX, bodyCenterY, 20, 60, 0, 3.49);
    //right hand
    arc(canvasCenter + handX, bodyCenterY, 20, 60, 5.93, 3.14);

    noStroke();
    fill(141, 136, 102);
    //brown nose
    ellipse(canvasCenter, faceY + eyeY, noseWidth, noseHeight);

    fill(225, 223, 208);
    //white nose
    ellipse(canvasCenter - mouthX, noseY, mouthX, noseHeight * 0.25);

    fill(235, 192, 216);
    //left blush
    ellipse(canvasCenter - blushX, faceY + eyeY, leftBlushX, leftBlushY);
    //right blush
    ellipse(canvasCenter + blushX, faceY + eyeY, rightBlushX, rightBlushY);
}

function mousePressed() {
    leftCheekWidth = random (85, 100);
    leftCheekHeight = random (60, 110);
    rightCheekWidth = random (85, 100);
    rightCheekHeight = random (60, 110);
    eyeWidth = random (10, 20);
    eyeHeight = random (15, 25);
    leftEarHeight = random (25, 50);
    rightEarHeight = random (25, 50);
    bodyWidth = random (230, 280);
    leftMouthStop = random (1.5, 2);
    rightMouthStart = random (1, 1.5);
}

Project-02: Variable Faces

project-02-variableFaces-lkenny 
// Lauren Kenny (lkenny)
// Project 2 - Variable Faces
// Section A

var r = 220;
var g = 220;
var b = 220;
var faceWidth  = 100;
var faceHeight  = 100;
var leftEyeSize = 10;
var rightEyeSize = 10;

function setup() {
    createCanvas(640, 480);
    r = random(256);
    g = random(256);
    b = random(256);
}

function draw() {
    background(r, g, b);
    //ears
    fill(r+50, g+50, b+50);
    stroke(r-50, g-50, b-50);
    ellipse(((width/2)-(faceWidth/2)), (height/2), faceWidth/6, faceHeight/6);
    ellipse(((width/2)+(faceWidth/2)), (height/2), faceWidth/6, faceHeight/6);
    //face
    fill(r+50, g+50, b+50);
    stroke(r-50, g-50, b-50);
    strokeWeight(2);
    ellipse(width/2, height/2, faceWidth, faceHeight);
    //eyes
    ellipse(width/2-20, height/2-20, leftEyeSize, leftEyeSize);
    ellipse(width/2+20, height/2-20, rightEyeSize, rightEyeSize);
    //pupils
    fill(r-50, g-50, b-50);
    noStroke();
    ellipse(width/2-20, height/2-20, leftEyeSize/5, leftEyeSize/5);
    ellipse(width/2+20, height/2-20, rightEyeSize/5, rightEyeSize/5);
    //body
    fill(r+50, g+50, b+50,)
    stroke(r-50, g-50, b-50);
    rect((width/2)-(faceWidth/2), (height/2)+(faceHeight/2)+15, faceWidth, ((height)-(faceHeight)-15), 50, 50);
    //lips
    fill(r+75, 20, 20);
    noStroke();
    arc((width/2-(faceWidth/10)/3), height/2+25, faceWidth/8, faceHeight/10, PI, TWO_PI);
    arc((width/2+(faceWidth/10)/3), height/2+25, faceWidth/8, faceHeight/10, PI, TWO_PI);
    fill(r+95, 50, 50);
    arc((width/2), (height/2+25), faceWidth/6, faceHeight/12, 0, PI);
    //nose
    noFill();
    stroke(r-50, g-50, b-50);
    arc(width/2, height/2, faceWidth/6, 10, 0, PI, OPEN);
}

function mousePressed(){
    r = random(5, 256);
    g = random(5, 256);
    b = random(5, 256);
    faceWidth = random(75, 165);
    faceHeight = random(75, 200);
    leftEyeSize = random(5, 30);
    rightEyeSize = random(5, 30);
}