Author: mmirho@andrew.cmu.edu

mmirho – Looking Outwards 7

Shape in Scapes – Transporting architecture into audio-video performance

“Shape in Scapes – Transporting architecture into audio-video performance”

Created by Studio Antimateria and POLITECNICO di PIACENZA’s students.

The algorithms used in this program, especially seen in this first picture, were generated through a simple program I could design, with many points reflecting off walls and flowing together as a liquid. The rest of the animations were mostly designed specifically for the surface and created an incredible light show on the model and topography.

Here’s an example of a more designed formation from the project.

This work shows a large scale model of a sprawled town. The lights are what makes it significant, as they represent data points and patterns in the structure of the three models, and how they form spaces and direction.

This surface of light, although I’m unaware of the technology used to create it, had simple computationally generative design behind it, and lots of directly artistic, human-created design.

I really enjoy this project because it expresses a common architectural structure in a brilliantly flashy, even more artistic way. The initial idea of the project definitely reflects the artist’s sensibilities, as it was designed to do so, directly by the artist, of course. Little computation was used, so little randomness and unpredictability occurred. However, as a result, the entire project felt a lot less natural.

mmirho – Project 07 – Curves

I fiddled with the math for a while, trying to identify a form I liked and eventually settled on a sort of an hourglass figure.

I connected lines from every point on the hourglass to the center of the figure to create a visually central effect, and then varied the rotation of the figure and the size of the figure on the X and Y coordinates of the mouse.

I then looped the figure to splay out at different speeds when rotating, to layer the image on top of itself in a simple and satisfying way. If you drag the rotation around enough, it starts to look like a clover!

The rotating pairs of cloverleafs also create an even more central effect on the overall image.

sketch

function setup() {
    createCanvas(480, 480);
    frameRate(30);    
}

function draw() {
    
    stroke(100,200,100);

    background(210, 210, 255);
    fill(50, 100, 50, 70);

    for (var q = 500 ; q > 200 ; q -= 50) {

        push();
        translate(width/2, height/2);
        //Puts the hourglasses at the center of the canvas

        rotate(mouseY/q);
        //Rotates the individual hourglasses at a contantly
        //Increasing rate, so they seperate from each other

        hourglass();
        //Draws the hourglass
        pop();
    }
}

function hourglass() {

    beginShape();
    for (var i = 0; i < mouseX; i++) {

        var t = map(i, 0, mouseX/1.5, 0, TWO_PI);
        var a = i*4;

        var x = (a*sin(t)*cos(t))/t;
        var y = (a*sin(sin(t)))/t;
        //The mathematical equation needed to create the
        //reversing hourglass curve

        vertex(x,y);
        line(x,y,0,0);
        //Draws a line from the center of the figure to
        //Every point on the curve, creating a web-ish
        //effect that draws your eyes to the middle
        
        
    }
    endShape(CLOSE);
}

mmirho – Looking Outwards – Random

There wasn’t much on the internet about this image, it was simply referenced in a few places as being random art, but it really stuck out to me.

I could have created this myself, it’s simply a circle spread across three rings, with color changing slightly each ring. Then, the ring set is spanned across a random pattern, yet even with such simple rules, the result is incredibly satisfying.

There was no found author, and it’s likely a student like myself made it.

I’m inspired by this to try random stuff with JavaScript, to make up a set of simple rules and let the computation do the rest. If something even remotely as intricate as this results, I’ll be beyond happy.

I think the appealing part of the image is not only the beautiful color variation but the blur of circles. At first glance, you appear to be able to discern the location of every ring and see the full structure of every circle. However, if you start to push your vision back, everything becomes indiscernible. It feels good to look at, and the code behind it is very simple.

mmirho – Project 6 – Blood clock

The goal of this was to create something ominous, slightly spooky, but very easy to tell the general time of day.

I really enjoyed how satisfying the millisecond smooth movement was, so it made sense to make it relate to some liquid.

sketch

var prevSec;
var millisRolloverTime;

function setup() {
    createCanvas(480, 480);
    millisRolloverTime = 0;
}


function draw() {
    background(240);
    
    // Fetch the current time
    var H = hour();
    var M = minute();
    var S = second();
    
    // Reckon the current millisecond, 
    // particularly if the second has rolled over.
    // Note that this is more correct than using millis()%1000;
    if (prevSec != S) {
        millisRolloverTime = millis();
    }
    prevSec = S;
    var mils = floor(millis() - millisRolloverTime);
    
    //fill(128,100,100);
    //text("Hour: "   + H, 10, 22);
    //text("Minute: " + M, 10, 42);
    //text("Second: " + S, 10, 62);
    //text("Millis: " + mils, 10, 82);
    
    var hourBarWidth   = map(H, 0, 23, 0, width-75);
    var minuteBarWidth = map(M, 0, 59, 0, width-75);
    var secondBarWidth = map(S, 0, 59, 0, width-75);
    
    // Make a bar which *smoothly* interpolates across 1 minute.
    // We calculate a version that goes from 0...60, 
    // but with a fractional remainder:
    var secondsWithFraction   = S + (mils / 1000.0);
    var secondsWithNoFraction = S;
    var secondBarWidthChunky  = map(secondsWithNoFraction, 0, 60, 0, height-75);
    var secondBarWidthSmooth  = map(secondsWithFraction,   0, 60, 0, height-75);
    
    noStroke();

    fill(140, 0, 0);

    //This block makes the red pool at the top
    //And connects it smoothly to the drips
    fill(140, 0, 0);
    rect(0,0,width,100);
    fill(240);
    ellipse(230,105,182,60);
    ellipse(414,105,160,60);
    ellipse(95, 105, 62, 30);
    ellipse(0, 105, 100, 50);
    fill(140, 0, 0);
    

    rect(50, 75, 15, hourBarWidth);
    ellipse(57.5, hourBarWidth + 75, 15, 35);
    //Far left, slowest blood drip

    rect(125, 75, 15, minuteBarWidth);
    ellipse(132.5, minuteBarWidth + 75, 15, 35);
    //Middle, slow blood drip

    rect(320, 75, 15, secondBarWidthSmooth);
    ellipse(327.5, secondBarWidthSmooth + 75, 15, 35);
    //Far right, fastest drip

    text("H", 50, height-10);
    text("M", 125, height-10);
    text("S", 320, height-10);
    //Labels the bloog drips

}

mmirho – Looking Outwards 5 – 3D Art

I’m very interested in the concept of rendering 3D water.

This is present in video games, yes, but I see it as a blockade in most 3D generation. It’s been a problem ever since 3D graphics were conceptualized; making rendered water realistic. I’ve seen only a few examples of legitimately fluid water, and here’s one such example.

The reason it’s so difficult is it required physics engines to calculate the positions of each piece and make the whole flow of the 3D water natural.

Unfortunately, liquids have so many individual points within them, that it’s nearly impossible to calculate them all.

I’m unaware of what artists dabble in this type of art, but I know it requires teams or animators and programmers to get even remotely right.

I think the processing engines we are creating now will be able to handle such types of programs, and 3D generation, in general, will improve.

mmirho – Project 5 – Wallpaper

Leaves!

I spent most of my time getting the construction of the leaf right, but after that, it was just making a simple alternating grid of them, like we’ve done in class before.

sketch

//Maxwell Mirho
//Section A
//mmirho@andrew.cmu.edu
//Project 5

function setup() {
    createCanvas(400, 400);
    background(10, 170, 260);
}

function drawLeaf(tipX, tipY) {

    fill(150,250,150);

    fill(10, 170, 260);
    arc(tipX + 30, tipY + 95, 60, 60, 1.5708 + 0.2, 3.14159, OPEN);
    fill(150, 250, 150);
    //Stem

    //Leaf tip
    triangle(tipX, tipY, tipX + 30, tipY + 70, tipX - 30, tipY + 70);

    //Leaf butt
    arc(tipX, tipY + 75, 60, 55, -0.3, 3.14159 + 0.3, OPEN);

    stroke(100,200,100);

    //1st (Top) leaf contour)
    arc(tipX, tipY + 51, 60, 60, 0.83, 2.3, OPEN);

    //2nd
    arc(tipX, tipY + 40, 50, 50, 0.83, 2.3, OPEN);

    //3rd
    arc(tipX, tipY + 29, 40, 40, 0.83, 2.3, OPEN);

    line(tipX, tipY + 88, tipX, tipY + 20);
    line(tipX - 1, tipY + 88, tipX - 1, tipY + 20);
    stroke(0);
    //Center leaf contour
    
}

function draw() {
    
    for (var x = 0 ; x < 6 ; x += 1) {
        for (var y = 0 ; y < 6 ; y += 1) {
            //Creates a grid

            push();
            translate(x*100, y*100);
            //Move the tip of the leaf to the grid

            if ((y%2) == 0) {
                rotate(-0.5);
            } else {
                rotate(0.5);
            }
            //Twists the leaf the opposite way if the row is an even number
            
            drawLeaf(0,0);
            //Draws an entire leaf!
            pop();

        }

    }
}

mmirho – Looking Outwards 4

France Cadet – Spina Family: Hunting Tophies, Robotic Sculpture 2008

This project is simple in design and simple in action.

Each little “Tail” on the mount moves to music on its own independent basis, but when each of them moves together, or in a pattern, the result is beautiful to watch.

I admire the simplicity of this project, and I think the computation behind it isn’t very serious. If a certain frequency of sound is played, a certain tail reacts, and this creates a wonderfully mesmerizing effect. I especially respect projects that focus on being creative with simplicity, instead of trying hard to be really complicated. The value is in the creativity, not the computational difficulty.

I believe the artist’s purpose and goal with this piece were to potentially make a statement on hunting and mounting, but also to show the power of small independent movements together as one.

mmirho – Project 4 – Line Art

After constructing a loop template for myself, the rest of the process was simple figuring out how each end of the line moves: Left, right, up or down.

When it came to the curves inside the middle box, I had to change the structure a little, but it was still relatively the same.

It was interesting trying to find a balance between the number of loop iterations and the distance the lines move each iteration, it creates different densities.

sketch

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

function draw() {
    background(200);

    //Top Left
    x1 = 0;
    y1 = height/2;
    //These two set up the location of the first coordinate
    //of the line

    x2 = 0;
    y2 = 0;
    //These two set up the second coordinate
    //And by setting the coordinates as variables, I can
    //manipulate them in the loop to move the line

    fill(0);

    for (loop = 0 ; loop < 12 ; loop += 1) {
        //This loop moves a simple variable loop
        //along a series of steps, and then the actual
        //changing line-effecting variables change
        //within the loop

        line(x1, y1, x2, y2);
        //The actual line, composed of variables

        x1 += 0;
        y1 -= height/20;
        //Controls the movement of the first coordinate

        x2 += width/20;
        y2 -= 0;
        //Controls the movement of the second

        //These coordinate movement controls vary depending
        //on the corner the curve is created in, because each
        //coordinate needs to move a different direction
    }
    noLoop();
    //Cuts off the loop

    //This formula is used over and over again
    //for all four outside curves and the two inside curves


    //Top Right
    x1 = width;
    y1 = height/2;
    x2 = width;
    y2 = 0;

    for (loop = 0 ; loop < 12 ; loop += 1) {
        line(x1, y1, x2, y2);
        x1 += 0;
        y1 -= height/20;
        x2 -= width/20;
        y2 -= 0;
    }
    noLoop();


    //Bottom Left
    x1 = 0;
    y1 = height/2;
    x2 = 0;
    y2 = height;

    for (loop = 0 ; loop < 12 ; loop += 1) {
        line(x1, y1, x2, y2);
        x1 += 0;
        y1 += height/20;
        x2 += width/20;
        y2 -= 0;
    }
    noLoop();


    //Bottom Right
    x1 = width;
    y1 = height/2;
    x2 = width;
    y2 = height;

    for (loop = 0 ; loop < 12 ; loop += 1) {
        line(x1, y1, x2, y2);
        x1 += 0;
        y1 += height/20;
        x2 -= width/20;
        y2 -= 0;
    }
    noLoop();
    
    rectMode(CENTER);
    rect(width/2, height/2, height/2, height/2);
    stroke(200);

    //Middle Box top left
    x1 = width/2 - height/4;
    y1 = 3*height/4;
    x2 = width/2 - height/4;
    y2 = height/4;

    for (loop = 0 ; loop < 21 ; loop += 1) {
        line(x1, y1, x2, y2);
        x1 += 0;
        y1 -= height/40;
        x2 += height/40;
        y2 -= 0;
    }
    noLoop();


    //Middle Box bottom right
    x1 = width/2 + height/4;
    y1 = height/4;
    x2 = width/2 + height/4;
    y2 = 3*height/4;

    for (loop = 0 ; loop < 21 ; loop += 1) {
        line(x1, y1, x2, y2);
        x1 += 0;
        y1 += height/40;
        x2 -= height/40;
        y2 -= 0;
    }
    noLoop();
    
    noStroke();
    fill(255,235,0);
    ellipse(width/2, height/2, height/7, height/7);
    //I tried to make a creepy-ish eye here
}

mmirho – Looking outwards 03 – Computational Fabrication

This project is called the “Silk Pavillion”.

It was constructed, frame wise, with a CNC mill, and then spun using a threading device based off an algorithm. I don’t know the algorithm type that generated the organization of the thread, but I do know it’s designed to create an even spread and to form even, circular holes in the structure of each frame.

I think this is an incredible use of parametric design because it uses an extremely nature-based construction process. The designers used 6500 silkworms to construct the finer layer of the pavilion and created something incredible.

I think the artist’s sensibilities were based off two things: The algorithm, and nature. Neither can be fully predicted with the human mind and so the artist understood fully that the final product would be completely unpredictable to every fine detail. He did understand the type of structure that would result, as well as the texture and feel it would create because he still designed the overall structure.

I think sometimes, parametric design lacks a natural, human element to it, but this project incorporated nature in such a direct way that it avoided that common pitfall.

 

mmirho – Project 3 – Dynamic Drawing

Move your mouse over the image from the top left corner to the bottom right corner. If you move just outside the bottom right corner, something colorful will happen!

I apologize for not using the 640 x 480 canvas size, that caused my program not to work last time I posted.

My program changes color, and fades into the background,
The lines (Which are rectangles) change size and end-location,
The squares rotate with the mouse location.

I hope I satisfied all the requirements! 🙂

sketch


//variable created to the size of the canvas
//(I used numbers here because width/height
//can't be input into global variables, I think
var blockW = 480/6;
var blockH = 480/6;

//The different fade variables I created
//to make each rotating square fade into
//the background seperately from each other
var fade = 255;
var fade1 = 255;
var fade2 = 255;
var fade3 = 255;
var fade4 = 255;
var fade5 = 255;
var angle = 0;
var side = 0;
var red = 255;
var blue = 255;

function setup() {
    createCanvas(480, 480);
}
 
function draw() {
    background(0); //black background
    noStroke();


    //The lines are now strobe-party-effected ONLY
    //when the mouse is beyond the bottom right edge 
    //of the canvas
    if ((mouseX > 6*blockW) & (mouseY > 6*blockH)) {
        fill(random(0,255), random(0,255), random(0,255));
    } else {
        fill(255);
    }

    //These are all the vertical lines
    rect(blockW, 0, 5, 2*mouseY);
    rect(2*blockW, 0, 5, 2*mouseY);
    rect(3*blockW, 0, 5, 2*mouseY);
    rect(4*blockW, 0, 5, 2*mouseY);
    rect(5*blockW, 0, 5, 2*mouseY);

    //These are all the horizontal lines
    rect(0, blockH, 2*mouseX, 5);
    rect(0, 2*blockH, 2*mouseX, 5);
    rect(0, 3*blockH, 2*mouseX, 5);
    rect(0, 4*blockH, 2*mouseX, 5);
    rect(0, 5*blockH, 2*mouseX, 5);

    rectMode(CENTER);
    side = min(blockH/2, blockW/2);
    //The side of the rotating squares is based off the
    //length of the smallest


    //This is the rotating square in box 1x1
    if ((mouseX > blockW) & (mouseY > blockH)) {
        fill(fade); 
        push();
        rectMode(CENTER);
        translate(blockW/2, blockH/2);
        rotate(radians(angle));
        angle = (mouseY + mouseX)/2;
        rect(0, 0, side, side);
        pop();
        fade -= 1;
    } else {
        fade = 255;
    }

    //This is the rotating square in box 2x2
    if ((mouseX > 2*blockW) & (mouseY > 2*blockH)) {
        fill(fade1); 
        push();
        rectMode(CENTER);
        translate(3*blockW/2, 3*blockH/2);
        rotate(radians(angle));
        angle = (mouseY + mouseX)/2;
        rect(0, 0, side, side);
        pop(); 
        fade1 -= 1;
    } else {
        fade1 = 255;
    }


    //This is the rotating square in box 3x3
    if ((mouseX > 3*blockW) & (mouseY > 3*blockH)) {
        fill(fade2); 
        push();
        rectMode(CENTER);
        translate(5*blockW/2, 5*blockH/2);
        rotate(radians(angle));
        angle = (mouseY + mouseX)/2;
        rect(0, 0, side, side);
        pop(); 
        fade2 -= 1;
    } else {
        fade2 = 255;
    }


    //This is the rotating square in box 4x4
    if ((mouseX > 4*blockW) & (mouseY > 4*blockH)) {
        fill(fade3); 
        push();
        rectMode(CENTER);
        translate(7*blockW/2, 7*blockH/2);
        rotate(radians(angle));
        angle = (mouseY + mouseX)/2;
        rect(0, 0, side, side);
        pop(); 
        fade3 -= 1;
    } else {
        fade3 = 255;
    }


    //This is the rotating square in box 5x5
    if ((mouseX > 5*blockW) & (mouseY > 5*blockH)) {
        fill(fade4); 
        push();
        rectMode(CENTER);
        translate(9*blockW/2, 9*blockH/2);
        rotate(radians(angle));
        angle = (mouseY + mouseX)/2;
        rect(0, 0, side, side);
        pop(); 
        fade4 -= 1;
    } else {
        fade4 = 255;
    }


    //This is the rotating square in box 6x6
    if ((mouseX > 6*blockW) & (mouseY > 6*blockH)) {
        fill(fade5); 
        push();
        rectMode(CENTER);
        translate(11*blockW/2, 11*blockH/2);
        rotate(radians(angle));
        angle = (mouseY + mouseX)/2;
        rect(0, 0, side, side);
        pop(); 
        fade5 -= 1;
    } else {
        fade5 = 255;
    }

    //The red square in the cell 2x5
    if ((mouseX > 2*blockW) & (mouseY > 5*blockH)) {
        fill(red, 0, 0); 
        push();
        rectMode(CENTER);
        translate(3*blockW/2, 9*blockH/2);
        rotate(radians(angle));
        angle = (mouseY + mouseX)/2;
        rect(0, 0, side, side);
        pop(); 
        red -= 1;
    } else {
        red = 255;
    }

    //The blue square in the cell 5x2
    if ((mouseX > 5*blockW) & (mouseY > 2*blockH)) {
        fill(0, 0, blue); 
        push();
        rectMode(CENTER);
        translate(9*blockW/2, 3*blockH/2);
        rotate(radians(angle));
        angle = (mouseY + mouseX)/2;
        rect(0, 0, side, side);
        pop(); 
        blue -= 1;
    } else {
        blue = 255;
    }
}