Author: John Henley

Project 04: String Art

sketch

// John Henley; jhenley; 15-104 section D

// Initiate variables
var dx1;
var dy1;
var dx2;
var dy2;
var dx3;
var dy3;
var dx4;
var dy4;
var numLines = 50;

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

function draw() {
    // Set colors
    background(0);
    stroke(255, 255, 255);

    // First set (bottom left)
    dx1 = 0/numLines;
    dy1 = (-mouseY)/numLines;
    dx2 = mouseX/numLines;
    dy2 = 0/numLines;
    var x1 = 0;
    var y1 = 400;
    var x2 = 400;
    var y2 = 0;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }

    // Second set (top right)
    dx3 = 400/numLines;
    dy3 = mouseY/numLines;
    dx4 = mouseX/numLines;
    dy4 = 400/numLines;
    var x3 = 0;
    var y3 = 0;
    var x4 = 400;
    var y4 = 400;
    for (var i = 0; i <= numLines; i += 1) {
        line(x3, y3, x4, y4);
        x3 += dx3;
        y3 += dy3;
        x4 += dx4;
        y4 += dy4;
    }
    line(0, 0, 400, mouseY);

    // Third set (middle)
    dx3 = 400/numLines;
    dy3 = mouseY/numLines;
    dx4 = mouseX/numLines;
    dy4 = 400/numLines;
    var x3 = 0;
    var y3 = 0;
    var x4 = 400;
    var y4 = 400;
    for (var i = 0; i <= numLines; i += 1) {
        line(x3, y3, x4, y4);
        x3 += dx3;
        y3 += dy3;
        x4 += dx4;
        y4 += dy4;
    }

    dx3 = mouseX/numLines;
    dy3 = 100/numLines;
    dx4 = 100/numLines;
    dy4 = 0/numLines;
    var x3 = 50;
    var y3 = 400;
    var x4 = 350;
    var y4 = 0;
    for (var i = 0; i <= numLines; i += 1) {
        line(x3, y3, x4, y4);
        x3 -= dx3;
        y3 += dy3;
        x4 -= dx4;
        y4 -= dy4;
    }

}

I wanted to make an interactive piece with lines that crossed and span the canvas, transforming based on the position of the mouse.

LO4: Sound Art

I examined a project by the experience designer Mileece. Called Sonic Art, Mileece attaches an electrode to the leaves of plants, which conducts the electro emissions naturally coming out of the plant. The electrode connects to an amplifier and then to a computer, which analyzes the emissions and transforms it into music. Mileece describes herself as simply a “facilitator” in the project, rather than an artist herself, transforming the natural electrical rhythms of plants into music. I admire the concept of bridging the perceived gap between humans and the natural world; after all, humans are animals first and foremost.
This project connects humans with the world’s flora. In addition, the project brings a relaxing and transformative experience in the world of environmental design.

Mileece, sonic art, 2014. https://www.youtube.com/watch?v=wYU18eiiFt4

Project 03: Dynamic Drawing

sketch
// John Henley; 15-104 section D

function setup() {
    createCanvas(500, 500);
}

function draw() {
    background(0);
    strokeWeight(2);
    noFill();
    
    // top-originating lines
    stroke(mouseX/10, 175, mouseY/10);
    curve(width, height, mouseY/10, 0, 500, mouseY, 0, mouseY);
    stroke(mouseX/9, 175, mouseY/9);    
    curve(width, height, mouseY/9, 0, 500, mouseY, 0, mouseY);
    stroke(mouseX/8, 175, mouseY/8);    
    curve(width, height, mouseY/8, 0, 500, mouseY, 0, mouseY);
    stroke(mouseX/7, 175, mouseY/7);    
    curve(width, height, mouseY/7, 0, 500, mouseY, 0, mouseY);
    stroke(mouseX/6, 175, mouseY/6);    
    curve(width, height, mouseY/6, 0, 500, mouseY, 0, mouseY);
    stroke(mouseX/5, 175, mouseY/5);    
    curve(width, height, mouseY/5, 0, 500, mouseY, 0, mouseY);
    stroke(mouseX/4, 175, mouseY/4);    
    curve(width, height, mouseY/4, 0, 500, mouseY, 0, mouseY);
    stroke(mouseX/3, 175, mouseY/3);    
    curve(width, height, mouseY/3, 0, 500, mouseY, 0, mouseY);
    stroke(mouseX/2, 175, mouseY/2);    
    curve(width, height, mouseY/2, 0, 500, mouseY, 0, mouseY);
    stroke(mouseX/1.5, 175, mouseY/1.5);    
    curve(width, height, mouseY/1.5, 0, 500, mouseY, 0, mouseY);
    stroke(mouseX/1.25, 175, mouseY/1.25);    
    curve(width, height, mouseY/1.25, 0, 500, mouseY, 0, mouseY);
    stroke(mouseX, 175, mouseY);    
    curve(width, height, mouseY, 0, 500, mouseY, 0, mouseY);

    // right-originating lines
    stroke(mouseX/10, mouseY/10, 175);
    curve(width, 0, width, height/10, mouseX, 500, 0, mouseY);
    stroke(mouseX/9, mouseY/9, 175);
    curve(width, 0, width, height/9, mouseX, 500, 0, mouseY);
    stroke(mouseX/8, mouseY/8, 175);
    curve(width, 0, width, height/8, mouseX, 500, 0, mouseY);
    stroke(mouseX/7, mouseY/7, 175);
    curve(width, 0, width, height/7, mouseX, 500, 0, mouseY);
    stroke(mouseX/6, mouseY/6, 175);
    curve(width, 0, width, height/6, mouseX, 500, 0, mouseY);
    stroke(mouseX/5, mouseY/5, 175);
    curve(width, 0, width, height/5, mouseX, 500, 0, mouseY);
    stroke(mouseX/4, mouseY/4, 175);
    curve(width, 0, width, height/4, mouseX, 500, 0, mouseY);
    stroke(mouseX/3, mouseY/3, 175);
    curve(width, 0, width, height/3, mouseX, 500, 0, mouseY);
    stroke(mouseX/2, mouseY/2, 175);
    curve(width, 0, width, height/2, mouseX, 500, 0, mouseY);
    stroke(mouseX/1.5, mouseY/1.5, 175);
    curve(width, 0, width, height/1.5, mouseX, 500, 0, mouseY);
    stroke(mouseX/1.25, mouseY/1.25, 175);
    curve(width, 0, width, height/1.25, mouseX, 500, 0, mouseY);

    // left-originating lines
    stroke(175, mouseY/10, mouseX/10);
    curve(0, height, 0, height/10, width, mouseX, mouseY, mouseY);
    stroke(175, mouseY/9, mouseX/9);
    curve(0, height, 0, height/9, width, mouseX, mouseY, mouseY);
    stroke(175, mouseY/8, mouseX/8);
    curve(0, height, 0, height/8, width, mouseX, mouseY, mouseY);
    stroke(175, mouseY/7, mouseX/7);    
    curve(0, height, 0, height/7, width, mouseX, mouseY, mouseY);
    stroke(175, mouseY/6, mouseX/6);    
    curve(0, height, 0, height/6, width, mouseX, mouseY, mouseY);
    stroke(175, mouseY/5, mouseX/5);    
    curve(0, height, 0, height/5, width, mouseX, mouseY, mouseY);
    stroke(175, mouseY/4, mouseX/4);    
    curve(0, height, 0, height/4, width, mouseX, mouseY, mouseY);
    stroke(175, mouseY/3, mouseX/3);    
    curve(0, height, 0, height/3, width, mouseX, mouseY, mouseY);
    stroke(175, mouseY/2, mouseX/2);    
    curve(0, height, 0, height/2, width, mouseX, mouseY, mouseY);
    stroke(175, mouseY/1.5, mouseX/1.5);    
    curve(0, height, 0, height/1.5, width, mouseX, mouseY, mouseY);
    stroke(175, mouseY/1.25, mouseX/1.25);    
    curve(0, height, 0, height/1.25, width, mouseX, mouseY, mouseY);
}

LO3: 3D Generative Designs

John Henley; 15-104 section D.

One of my biggest areas of interest in the world industrial design is biophilic design, or designs based off the natural world. A project that combines both generative design and biophilic design that I admire is the Airbus A320 bionic-partition. In 2016, Airbus developed algorithms based on the growth patterns of slime mold to create a new partition dividing the galley from the passenger cabin. The design mimics the single-cell organism’s organic cellular growing structure to create a material that is significantly lighter weight than the previous design. This new design reduces the weight by 55% due to the use of empty spaces evident between cells. In turn, because the aircraft is significantly lighter weight, Airbus claims it can save 465,000 metric tons of CO2 emissions per year. This new design approach is the future–using organic, biophilic-inspired designs in tandem with computer generated production to make the artificial world more efficient and sustainable.

The future by Airbus - The Airbus Concept Cabin Xray: Airbus predicts that the aircraft in 2050 will have a bionic structure that mimics bird bones to allow for lighter weight structure and open panoramic views. (14 June 2011)
Airbus bionic 3D printing, March 2016, Airbus SE.

Link to work: Pioneering bionic 3D printing – Company – Airbus

Project 02: Variable Faces

John Henley; 15-104 section D

sketch

//John Henley; 15-104 section D

var headWidth = 150; //head variables
var headHeight = 160;
var headRound = 50;
var headColorRed = 141;
var headColorGreen = 227;
var headColorBlue = 204;

var hairHeight = 120 //hair variables
var hairColorRed = 12;
var hairColorGreen = 8;
var hairColorBlue = 10;

var eyeWidth = 20; //eye variables
var eyeGap = 25;
var eyeHeight = headHeight / 5;

var mouthWidth = 50; //mouth variables
var mouthHeight = 40;

var backgroundValue = 150; //canvas variables

function setup() {
    createCanvas(500, 500);
}

function draw() { //draw initial face
    background(backgroundValue);
    rectMode(CENTER);
    noStroke();
    fill(hairColorRed, hairColorGreen, hairColorBlue);
    rect(width / 2, height / 2 - headHeight / 2, headWidth + 30, hairHeight, 20, 20, 10, 10); //hair
    fill(headColorRed, headColorGreen, headColorBlue);
    rect(width / 2, height / 2, headWidth, headHeight, headRound / 2, headRound / 2, headRound, headRound); //head
    fill(0);
    ellipse(width / 2 - eyeGap, height / 2 - eyeHeight, eyeWidth); //left eye
    ellipse(width / 2 + eyeGap, height / 2 - eyeHeight, eyeWidth); // right eye
    fill(255);
    ellipse(width / 2 - eyeGap, height / 2 - eyeHeight, eyeWidth / 1.5); //left highlight
    ellipse(width / 2 + eyeGap, height / 2 - eyeHeight, eyeWidth / 1.5); // right highlight
    stroke(0);
    strokeWeight(5);
    noFill();
    arc(width / 2, height / 2 + eyeGap - 20, mouthWidth, mouthHeight, TWO_PI, PI); //mouth

}

function mousePressed() {
    //randomly adjust variables
    headWidth = random(120, 200);
    headHeight = random(140, 230);
    
    headColorRed = random(128, 255);
    headColorGreen = random(128, 255);
    headColorBlue = random(128, 255);
    hairHeight = random(40, 160);
    hairColorRed = random(0, 127);
    hairColorGreen = random(0, 127);
    hairColorBlue = random(0, 127);

    eyeWidth = random(10, 35);
    eyeGap = random(18, 40);

    mouthWidth = random(40, 60);
    mouthHeight = random(20, 50);

    backgroundValue = random(10, 245);
}

LO2: Generative Art

John Henley; 15-104 section D

https://www.michael-hansmeyer.com/muqarnas

I examined Muqurnas by the computational architect Michael Hansmeyer. Murquanas are complex ornamental ceiling vaultings that provide an expansive and vast vaulted experience for viewers to explore above them. I find these renderings to be simply beautiful–they add an element of design surprise in the form of grandiose and nearly magical experiental environment design. Hansmeyer explains how his works combine “architecture, mathematics, and art to form highly intricate and complex stalactite structures.” He creates his rules for these computational renderings based on size, material, and form of the ceiling under question. Hansmeyer’s portfolio emphasizes the questioning of designing using open-ended algorithms, and this questioning is exhibited in his work. His pieces are expansive and clearly have the quality of intentional randomness, allowing the computer to explore form and beauty in a new way.