JJ – Page 2 – [OLD FALL 2018] 15-104 • Introduction to Computing for Creative Practice

John Legelis – Project 07: Composition with Curves

// John Legelis
// Section D


//Define canvas width and height
cwidth = 480
cheight = 480

function setup() {
    createCanvas(cwidth, cheight);
    background(0);

    textSize(40);
    fill(255)
    textFont('Helvetica');
    text('mouse over', 120, 240);
}

//Initialize number of points drawn in graph
var npoints = 60
var step = 2 * Math.PI / npoints
//Radius of outer circle
var bigR 
//Radius of inner circle
var r
// offset the graph so it is drawn about the center
var offsetx = cwidth/2
var offsety = cheight/2 
//color variable
var cw


function hypX (t) {
    //Big and little circle radius mapped to x,y mouse and constrained to canvas
    bigR = map(constrain(mouseX, 0, cwidth),0, 1000, 0, 400)
    r = map(constrain(mouseY, 0, cheight), 0, 700, 0, 400)
    var x = ((bigR - r) * cos(t) + r * cos((bigR - r)/r * t) + offsetx)
    return x
}

function hypY (t) {
    //Big and little circle radius mapped to x,y mouse and constrained to canvas
    bigR = map(constrain(mouseX, 0, cwidth),0, 1000, 0, 400)
    r = map(constrain(mouseY, 0, cheight), 0, 700, 0, 400)
    var y = ((bigR - r) * sin(t) + r * cos((bigR - r)/r * t) + offsety)
    return y
}

function draw() {
    //color variable randomized RGB in neon range
    cw = [random(0,200), random(0,200), random(0,200)]


    //for every point in the pattern
    for (theta = 1; theta < 30*PI; theta = theta + 2*PI/npoints) {
        strokeWeight(3)
        stroke(cw)
        // draw a line from the point to the previous point
        line(hypX(theta), hypY(theta), hypX(theta - step), hypY(theta - step))
    }
    // erase everything when mouse mouseIsPressed
    if (mouseIsPressed) {
        background(0)
    }
}

This week’s project was left very open ended, and after some research on Wolfram Alpha World about curves and their mathematical composition, I developed an understanding for how a spirograph creates hypotrochoid shapes by rotating a circle within another circle.

The general formula for the X and Y coordinates of a hypotrochoid curve in reference to theta is:

x (θ) = (R - r)* cos θ + r* cos (θ* (R - r)/ r) y (θ) = (R - r)* sin θ - r* sin (θ*(R - r)/ r)

Where R and r refer to the radii of the outer circle and the inner circle respectively.

In my project I created code that draws a hypothyroid whose R and r vary with mouseX and mouseY respectively. When the mouse is pressed the canvas will erase

Looking Outwards – 07 John Legelis

Ingrid Burrington is an artist/scientist from New York City and the creator of the book Networks of New York . This project involved surveying New York’s infrastructure and researching the different networks that make up all its components. The research was compiled into a book that beautifully displays to the reader the networks that make up New York City.

Manhole Depiction from *Networks of New York*

This manhole drawing is one of many described ports to the physical internet. This particular manhole is part of the Empire City Subway Network.

Ingrid likely discovered all this information by simply observing her surroundings and then inquiring with the right experts to gain further detailed information. I admire this project because of its thoroughness and its unique angle on everyday objects. Ingrid’s obviously technical background applied to the physical world creates an outcome that portrays the ordinary as excitingly interconnected.

Project 06 Abstract Clock John Legelis

sketch

// John Legelis
// Section D


// candle dimensions
var ctop = 90
var xi = 7
var spacing = 40
var wcandle = 25
var hcandle = 150
var radius = 7

// flame dimensions
var flameEh = 20
var flameEw = 10

// holder dimensions
var holderWtop = 30
var holderWmid = 20
var holderHtop = 20
var holderHmid = 40
var holderWbot = 40


// initialize background
function setup() {
    createCanvas(480, 480);
    background(0);
}


function draw() {
    background(0)

    //assign variables to current time in hours and minutes
    var hsub = hour()
    var msub = minute()
    
    // Hours variable
    var h = ((hsub - 1) % 12) + 1
    var haway = abs(12 - h)
    
    // Minute variable
    var m = msub
    var maway = abs(60 - m)
    // dimensions of curent hour candle in relation to minutes
    var hcandleshort = hcandle * maway/60
    var ctopshort = ctop + hcandle - hcandleshort

    // loop through number of hours
    for(i = 0; i <= haway; i++) {
        
        var cx = xi + spacing * i

        // for hours to come that arent current ours
        if (i < haway){
            fill("yellow")
            rectMode(CORNER)
            rect(cx, ctop, wcandle, hcandle, radius, radius, 0, 0)
            flame(cx + wcandle/2, ctop)
            holder(cx + wcandle/2, ctop + hcandle)
        }
        // for current hour hieght is minute dependant
        else {
            fill("yellow")
            rectMode(CORNER)
            rect(cx, ctopshort, wcandle, hcandleshort, radius, radius, 0, 0)
            flame(cx + wcandle/2, ctopshort)

        }
    }
    // loop through every possible hour and draw candlestick and number
    for (i = 0; i < 12; i++){
        var cx = xi + spacing * i
        holder(cx + wcandle/2, ctop + hcandle)

        fill(255)
        textAlign(CENTER)
        textSize(20);
        text(abs(12-i), (xi + wcandle/2 + (spacing * i)), ctop + hcandle + 50)

    }

    //update every 1 second
    frameRate(1)
}


// draw flame with bottom center at x, y
function flame(x,y) {
    var h = random(5,62)
    var s = random(0,92)
    colorMode(HSB)
    fill(h,s,100)
    ellipseMode(CENTER)
    ellipse(x, y - flameEh/2, flameEw, flameEh)
}

// draw holder with top center at x, y
function holder(x,y){
    colorMode(RGB)
    fill(244,0,0)
    rectMode(CORNER)
    rect(x - holderWtop/2, y, holderWtop, holderHtop, radius)
    rect(x - holderWmid/2, y + holderHtop, holderWmid, holderHmid)
    rect(x - holderWbot/2, y+ holderHtop + holderHmid, holderWbot, holderHtop, radius)
}

This project made me think about ancient ways of keeping track of time. One of which was by candle. I chose to recreate this in a intuitive way while also making the candles seem lifelike. The hour is represented by the rightmost lit candle, and the minutes are represented by how far down the current hour candle has burned. The further into the hour it gets, the more burned down the candle becomes. The flames flicker every second.

Looking Outwards 06 – John Legelis

Kenneth Martin‘s Chance and Order series, created in 1971-2, is a well known piece of art that implements stochastic synthesis in its composition. Though the whole piece is not completely random, the structure of what is on the canvas was determined in a random way. The artist described the process he used to create the process as follows. First, he drew a square grid of lines and labeled the intersections of these lines with unique numbers. Then, he wrote each intersection’s number on a card and drew pairs of cards at random. He then drew a line on the graph connecting the locations of the two drawn points.

I like this piece of art because of how it combines randomness with stylized choice. The line structure is random but the color and repetition of lines is chosen by the artist. As a result this piece is not entirely random but lies somewhere in between.

Project – 05 – Wallpaper

sketch

function setup() {
    createCanvas(400, 600);
    background(0);

}
var squareSize = 80

var bSO = squareSize * (1/8)
var wLO = squareSize * (3/8)
var cr = squareSize * (2/10)
var obl = 5

function TSquare(x,y,w,h) {
    // Red Squares background of grid
    fill(148,3,3)
    stroke(0)
    strokeWeight(4)
    rect(x,y,w,h)

    // White line back 
    stroke(255)
    strokeWeight(5)
    line(x-obl, y-obl, x+w, y+h)

    // Blue square rounded corner transparent
    noStroke()
    fill(0, 0, 100, 200)
    //tint(255,127)
    rect(x+ bSO, y + bSO, w-(2 * bSO), h-(2 * bSO), cr, 0, cr, 0)

    // White line foreground   
    stroke(255)
    strokeWeight(5)
    line(x+30, y+30, x+w-30, y+h-30)

    //foreground black grid
    noFill()
    stroke(0)
    strokeWeight(4)
    //rect(x,y,w,h)

}

function draw() {
    for(xi=0; xi<width; xi = xi + squareSize){
        for(yj=0; yj<height; yj = yj + squareSize){
           
           TSquare(xi, yj, squareSize, squareSize)
        }
    } 

}

My inspiration for the start of this project was a plaid pattern. As I set out to attempt to recreate it, I made an error that ended up creating a very interesting novel pattern. I then riffed off of this new creation messing around with the alpha function which controls transparency. The pattern is a square of width and height 80 pixels iterated over x and y using for loops.

Looking Outwards 5 – 3D Computer Graphics

Star Wars: Rogue One, the second of the recent Star Wars spin offs, was a great success in the box office. This movie, unlike the other recent Star Wars remake, had a more difficult chronological placement. As a result, the writers of the film brought back many characters from a movie that was made in 1977. Due to the large span of time that has passed, one of the supporting actors, Peter Cushing, had passed away in the meantime. Instead of writing his character out of the new movie, the writers decided to ambitiously include the character Cushing played by recreating him through computer generation. Motion Capture Technology is a method of computer animation that involves using a real life actor whose motion in a role is recorded with intricate detail and then mapped to a CGI model that perfectly mimics the actor. The computer generated model of Cushing was rendered based on a plaster cast of his face that had been made in the 80s. The mapping onto this rendering was created by the actor wearing a mask with dots which move with his facial expressions and then replicating these same dot’s movements on the computer model. The effect is a flawlessly animated replication of a dead actor, the first time such a stunt has been pulled off.

John Legelis Project-04 String Art

sketch

// John Legelis

function setup() {
    createCanvas(400, 300);
    background(0);
}

function draw() {

    // Set size of square 
    var size
    size = 100

    // Itterate rows and columns of squares
    for(s = 0; s < (width/size); s++) {
        for(d = 0; d < (height/size); d++) {
            // Width and height of the square are the same making it an actual square
            square(s*size, d*size, size, size)
        }
    }    
}


// Stop changing colors when mouse is held down
function mousePressed() {
    noLoop()
}

// Resume changing colors when mouse is released
function mouseReleased() {
    loop()
}

// Function that draws line square given top left x,y and width,height
function square(lx, ty, w, h) {
    
    // Insert parameters into variables
    var width
    width = w
    var height
    height = h

    var leftX
    leftX = lx
    var rightX
    rightX = leftX + width
    var topY
    topY = ty
    var bottomY
    bottomY = topY + height

    // Loop through to make lines
    for (i = 0; i <= width; i = i + 5) {

        //Line-1 X,Y coordinates for beginning and end
        var l1xb
        l1xb = leftX
        var l1yb
        l1yb = topY + i  
        var l1xe
        l1xe = leftX + i
        var l1ye
        l1ye = bottomY

        //Line-2 X,Y coordinates for beginning and end
        var l2xb
        l2xb = leftX + i
        var l2yb
        l2yb = bottomY  
        var l2xe
        l2xe = rightX
        var l2ye
        l2ye = bottomY - i

        //Line-3 X,Y coordinates for beginning and end
        var l3xb
        l3xb = rightX
        var l3yb
        l3yb = bottomY - i  
        var l3xe
        l3xe = rightX - i
        var l3ye
        l3ye = topY

        //Line-4 X,Y coordinates for beginning and end
        var l4xb
        l4xb = leftX
        var l4yb
        l4yb = topY + i  
        var l4xe
        l4xe = rightX - i
        var l4ye
        l4ye = topY

        //draw lines with random greyscale color from black to white 
        stroke(random(0,255))
        
        line(l1xb, l1yb, l1xe, l1ye)
        line(l2xb, l2yb, l2xe, l2ye)
        line(l3xb, l3yb, l3xe, l3ye)
        line(l4xb, l4yb, l4xe, l4ye)
    }

}

[Note: original submission was either sketch-347.js or sketch-342.js. I swapped in sketch-364.js with minor edits to work around a pt-embed limitation. -RBD]

I found this project rather intuitive and easy to implement using a for loop which iterated x and y values incrementally for the endpoints of the lines. I liked the textured effect the randomized line shading created. The lines stop changing colors when the mouse is pressed amd resume when released.

JJ Legelis – Looking Outwards 04: Sound Art

Destin Sandlin, well known for his Smarter Everyday youtube series, is also the creator of a video series titled The Sound Traveler. This series combines point of view (POV) video, with binaurally recorded audio to create an immersive experience. The videos produced in this manner stand out from other typical POV videos in one key way, the sound. In most videos the listener can hear the audio coming from the center or to some degree of left/right. But the special way the audio is recorded in Destin’s videos allows the listener to hear sounds as coming from all axis, front, behind, and even above and below. This slight change causes the entire range of hearing ability to be utilized, causing a feeling of sincere immersion.

The videos are recorded using an odd microphone setup that causes the sound to interact with an artificial ear before it hits the microphone, allowing the small nuances of the (fake) human ear and ear canal to augment the sound in the same way a real ear would.

Video from The Sound Traveler Exemplifying Binaural Recording

John Legelis – Project-03: Dynamic Drawing

houndstooth

// John Legelis
// Section D
// jlegelis@andrew.cmu.edu
// Project-03

// Canvas dimensions
var w
w = 480
var h
h = 640

// Houndstooth color variables
var dark
dark = 0
var light
light = 255

// Houndstooth square dimensions
var hsW
hsW = 70
var hsH
hsH = 70

// Create Canvas
function setup() {
    createCanvas(w, h);
    background(255);
}

function draw() {
    // Vary color based on mouse Y coordinate
    // Middle of canvas Y = all grey
    dark  = min(mouseY/h * 255, 255)

    // Rotate pattern based on mouse X coordinate
    rotate(mouseX/w * PI/2)

    // Translate pattern based on mouse Y coordinate
    translate(0, (mouseY/w * 100))

    // Draw rows and colomns of houndstooth squares
    //draw houndstooth pattern much larger than canvas so rotation doesnt make pattern leave
    for(hsY = hsH/2 - 2000; hsY < 2000; hsY = (hsY + hsH)) {
        for(hsX = hsW/2 - 2000; hsX < 2000; hsX = (hsX + hsW)) {
    
            hTooth(hsX, hsY)
        }
    }
    console.log(mouseX)
}

// When mouse is pressed down the color of the top left quadrant changes from standard to a greyscale value based on mouse X
function colordark() {
    if (mouseIsPressed){
        return( (min(255,(max(100, mouseY)))) )
    }
    else {
        return(dark)
    }
}


// function that takes Center X and Center Y and draws one houndstooth square
function hTooth(cX, cY) {

//TOP LEFT QUADRANT--------------------------------------------------------------
    // Larger section of pattern
    fill(colordark());
    noStroke();
    beginShape();
    vertex((cX - (36/36 *hsW/2)), (cY - (36/36 *hsH/2))); // 1
    vertex((cX - ( 0/36 *hsW/2)), (cY - (36/36 *hsH/2))); // 2
    vertex((cX - ( 0/36 *hsW/2)), (cY - (28/36 *hsH/2))); // 3
    vertex((cX - ( 8/36 *hsW/2)), (cY - (22/36 *hsH/2))); // 4
    vertex((cX - ( 8/36 *hsW/2)), (cY - ( 0/36 *hsH/2))); // 5
    vertex((cX - (18/36 *hsW/2)), (cY - (10/36 *hsH/2))); // 6
    vertex((cX - (28/36 *hsW/2)), (cY - ( 0/36 *hsH/2))); // 7
    vertex((cX - (28/36 *hsW/2)), (cY - (22/36 *hsH/2))); // 8
    vertex((cX - (36/36 *hsW/2)), (cY - (28/36 *hsH/2))); // 9
    vertex((cX - (36/36 *hsW/2)), (cY - (36/36 *hsH/2))); // 1
    endShape(CLOSE);

    // Smaller section of pattern
    fill(light)
    noStroke()
    beginShape();
    vertex((cX - ( 0/36 *hsW/2)), (cY - (28/36 *hsH/2))); // 1
    vertex((cX - ( 8/36 *hsW/2)), (cY - (22/36 *hsH/2))); // 2
    vertex((cX - ( 8/36 *hsW/2)), (cY - ( 0/36 *hsH/2))); // 3
    vertex((cX - (18/36 *hsW/2)), (cY - (10/36 *hsH/2))); // 4
    vertex((cX - (28/36 *hsW/2)), (cY - ( 0/36 *hsH/2))); // 5
    vertex((cX - (28/36 *hsW/2)), (cY - (22/36 *hsH/2))); // 6
    vertex((cX - (36/36 *hsW/2)), (cY - (28/36 *hsH/2))); // 7
    vertex((cX - (36/36 *hsW/2)), (cY - ( 0/36 *hsH/2))); // 8
    vertex((cX - ( 0/36 *hsW/2)), (cY - ( 0/36 *hsH/2))); // 9
    vertex((cX - ( 0/36 *hsW/2)), (cY - (28/36 *hsH/2))); // 10
    endShape(CLOSE);

// BOTTOM LEFT QUADRANT ------------------------------------------------------------

    // Larger section of pattern
    fill(light);
    noStroke();
    beginShape();
    vertex((cX - (36/36 *hsW/2)), (hsH/2 + (cY - (36/36 *hsH/2)))); // 1
    vertex((cX - ( 0/36 *hsW/2)), (hsH/2 + (cY - (36/36 *hsH/2)))); // 2
    vertex((cX - ( 0/36 *hsW/2)), (hsH/2 + (cY - (28/36 *hsH/2)))); // 3
    vertex((cX - ( 8/36 *hsW/2)), (hsH/2 + (cY - (22/36 *hsH/2)))); // 4
    vertex((cX - ( 8/36 *hsW/2)), (hsH/2 + (cY - ( 0/36 *hsH/2)))); // 5
    vertex((cX - (18/36 *hsW/2)), (hsH/2 + (cY - (10/36 *hsH/2)))); // 6
    vertex((cX - (28/36 *hsW/2)), (hsH/2 + (cY - ( 0/36 *hsH/2)))); // 7
    vertex((cX - (28/36 *hsW/2)), (hsH/2 + (cY - (22/36 *hsH/2)))); // 8
    vertex((cX - (36/36 *hsW/2)), (hsH/2 + (cY - (28/36 *hsH/2)))); // 9
    vertex((cX - (36/36 *hsW/2)), (hsH/2 + (cY - (36/36 *hsH/2)))); // 1
    endShape(CLOSE);

    // Smaller section of pattern
    fill(dark)
    noStroke()
    beginShape();
    vertex((cX - ( 0/36 *hsW/2)), (hsH/2 + (cY - (28/36 *hsH/2)))); // 1
    vertex((cX - ( 8/36 *hsW/2)), (hsH/2 + (cY - (22/36 *hsH/2)))); // 2
    vertex((cX - ( 8/36 *hsW/2)), (hsH/2 + (cY - ( 0/36 *hsH/2)))); // 3
    vertex((cX - (18/36 *hsW/2)), (hsH/2 + (cY - (10/36 *hsH/2)))); // 4
    vertex((cX - (28/36 *hsW/2)), (hsH/2 + (cY - ( 0/36 *hsH/2)))); // 5
    vertex((cX - (28/36 *hsW/2)), (hsH/2 + (cY - (22/36 *hsH/2)))); // 6
    vertex((cX - (36/36 *hsW/2)), (hsH/2 + (cY - (28/36 *hsH/2)))); // 7
    vertex((cX - (36/36 *hsW/2)), (hsH/2 + (cY - ( 0/36 *hsH/2)))); // 8
    vertex((cX - ( 0/36 *hsW/2)), (hsH/2 + (cY - ( 0/36 *hsH/2)))); // 9
    vertex((cX - ( 0/36 *hsW/2)), (hsH/2 + (cY - (28/36 *hsH/2)))); // 10
    endShape(CLOSE);

// TOP RIGHT QUADRANT
    // Larger section of pattern
    fill(light);
    noStroke();
    beginShape();
    vertex((hsW/2 + (cX - (36/36 *hsW/2))), (cY - (36/36 *hsH/2))); // 1
    vertex((hsW/2 + (cX - ( 0/36 *hsW/2))), (cY - (36/36 *hsH/2))); // 2
    vertex((hsW/2 + (cX - ( 0/36 *hsW/2))), (cY - (28/36 *hsH/2))); // 3
    vertex((hsW/2 + (cX - ( 8/36 *hsW/2))), (cY - (22/36 *hsH/2))); // 4
    vertex((hsW/2 + (cX - ( 8/36 *hsW/2))), (cY - ( 0/36 *hsH/2))); // 5
    vertex((hsW/2 + (cX - (18/36 *hsW/2))), (cY - (10/36 *hsH/2))); // 6
    vertex((hsW/2 + (cX - (28/36 *hsW/2))), (cY - ( 0/36 *hsH/2))); // 7
    vertex((hsW/2 + (cX - (28/36 *hsW/2))), (cY - (22/36 *hsH/2))); // 8
    vertex((hsW/2 + (cX - (36/36 *hsW/2))), (cY - (28/36 *hsH/2))); // 9
    vertex((hsW/2 + (cX - (36/36 *hsW/2))), (cY - (36/36 *hsH/2))); // 1
    endShape(CLOSE);

    // Smaller section of pattern
 
    fill(dark)
    noStroke()
    beginShape();
    vertex((hsW/2 + (cX - ( 0/36 *hsW/2))), (cY - (28/36 *hsH/2))); // 1
    vertex((hsW/2 + (cX - ( 8/36 *hsW/2))), (cY - (22/36 *hsH/2))); // 2
    vertex((hsW/2 + (cX - ( 8/36 *hsW/2))), (cY - ( 0/36 *hsH/2))); // 3
    vertex((hsW/2 + (cX - (18/36 *hsW/2))), (cY - (10/36 *hsH/2))); // 4
    vertex((hsW/2 + (cX - (28/36 *hsW/2))), (cY - ( 0/36 *hsH/2))); // 5
    vertex((hsW/2 + (cX - (28/36 *hsW/2))), (cY - (22/36 *hsH/2))); // 6
    vertex((hsW/2 + (cX - (36/36 *hsW/2))), (cY - (28/36 *hsH/2))); // 7
    vertex((hsW/2 + (cX - (36/36 *hsW/2))), (cY - ( 0/36 *hsH/2))); // 8
    vertex((hsW/2 + (cX - ( 0/36 *hsW/2))), (cY - ( 0/36 *hsH/2))); // 9
    vertex((hsW/2 + (cX - ( 0/36 *hsW/2))), (cY - (28/36 *hsH/2))); // 10
    endShape(CLOSE);

// BOTTOM RIGHT QUADRANT-------------------------------------------------------

    // Larger section of pattern
    fill(dark);
    noStroke();
    beginShape();
    vertex((hsW/2 + (cX - (36/36 *hsW/2))), (hsH/2 + (cY - (36/36 *hsH/2)))); // 1
    vertex((hsW/2 + (cX - ( 0/36 *hsW/2))), (hsH/2 + (cY - (36/36 *hsH/2)))); // 2
    vertex((hsW/2 + (cX - ( 0/36 *hsW/2))), (hsH/2 + (cY - (28/36 *hsH/2)))); // 3
    vertex((hsW/2 + (cX - ( 8/36 *hsW/2))), (hsH/2 + (cY - (22/36 *hsH/2)))); // 4
    vertex((hsW/2 + (cX - ( 8/36 *hsW/2))), (hsH/2 + (cY - ( 0/36 *hsH/2)))); // 5
    vertex((hsW/2 + (cX - (18/36 *hsW/2))), (hsH/2 + (cY - (10/36 *hsH/2)))); // 6
    vertex((hsW/2 + (cX - (28/36 *hsW/2))), (hsH/2 + (cY - ( 0/36 *hsH/2)))); // 7
    vertex((hsW/2 + (cX - (28/36 *hsW/2))), (hsH/2 + (cY - (22/36 *hsH/2)))); // 8
    vertex((hsW/2 + (cX - (36/36 *hsW/2))), (hsH/2 + (cY - (28/36 *hsH/2)))); // 9
    vertex((hsW/2 + (cX - (36/36 *hsW/2))), (hsH/2 + (cY - (36/36 *hsH/2)))); // 1
    endShape(CLOSE);

    // Smaller section of pattern
    fill(light)
    noStroke()
    beginShape();
    vertex((hsW/2 + (cX - ( 0/36 *hsW/2))), (hsH/2 + (cY - (28/36 *hsH/2)))); // 1
    vertex((hsW/2 + (cX - ( 8/36 *hsW/2))), (hsH/2 + (cY - (22/36 *hsH/2)))); // 2
    vertex((hsW/2 + (cX - ( 8/36 *hsW/2))), (hsH/2 + (cY - ( 0/36 *hsH/2)))); // 3
    vertex((hsW/2 + (cX - (18/36 *hsW/2))), (hsH/2 + (cY - (10/36 *hsH/2)))); // 4
    vertex((hsW/2 + (cX - (28/36 *hsW/2))), (hsH/2 + (cY - ( 0/36 *hsH/2)))); // 5
    vertex((hsW/2 + (cX - (28/36 *hsW/2))), (hsH/2 + (cY - (22/36 *hsH/2)))); // 6
    vertex((hsW/2 + (cX - (36/36 *hsW/2))), (hsH/2 + (cY - (28/36 *hsH/2)))); // 7
    vertex((hsW/2 + (cX - (36/36 *hsW/2))), (hsH/2 + (cY - ( 0/36 *hsH/2)))); // 8
    vertex((hsW/2 + (cX - ( 0/36 *hsW/2))), (hsH/2 + (cY - ( 0/36 *hsH/2)))); // 9
    vertex((hsW/2 + (cX - ( 0/36 *hsW/2))), (hsH/2 + (cY - (28/36 *hsH/2)))); // 10
    endShape(CLOSE);
}

This project was open ended in a creative sense and after looking at a few examples, I was drawn to the idea of varying a pattern. One of my favorite patterns is houndstooth as it uses negative and positive space interchangeably. I broke the pattern into the smallest replicable modules and then iterated it onto the canvas in rows and columns. I then added user inputs to vary the gradient, rotation, translation by mouse position, and click to toggle the color of a segment of the pattern.

John Legelis – Looking Outwards 3 – Computational Fabrication

Meta-Mesh is a project that employes a biomimetics design philosophy (meaning to mimic nature) to create body armor that functions in a similar way to the exoskeleton of an ancient fish. The implementation of this project is cutting edge and uses state of the art tools such as additive manufacturing and algorithmic computational fabrication to execute the desired manufacturing process.

The design process, stems from fish scale armor

Due to this project’s copycat nature, the creator’s artistic touch is simply an effort to mimic the original artistic touch of nature. The algorithms that synthesize this project are likely complex, but due to the finite number of “links” in the armor, the bits can be treated as module. This allows finite element analysis (FEA) to be very useful in digital trial and error before the forms are even physicalized.