Author: kevin

Kevin Riordan Looking Outwards-07

For Looking Outwards this week, I chose to do the project This Exquisite Forest, which is a project created by Aaron Koblin and Chris Milk between 2012 and 2014.

This Exquisite Forest Introduction Video.

I admire this project because of how community driven it is. The creators made the framework, but then as shown in the pictures below, the community was in charge of all of the actual content of the ‘forest’.  The artist’s sensibilities are actually barely manifested in the final form of the project, as it is community driven for what animations are used. The actual form of the trees is controlled by the creators, however, and is very clean and minimalist. The overall structure was also created by them as well, and I admire how when you click on a leaf at the end of a tree, you can see the entire ‘story’ that it took to get there. As shown below in the first picture, each individual tree’s community creator has the option of adding as detailed of instructions as they want.

An Individual Tree’s instructions
Interface for adding to a segment of a tree.

Kevin Riordan Looking Outwards-06-Section C

Abstraction. 2005 by Bogdan Soban

For this week’s looking outwards I looked at a project by Bogdan Soban, who uses random generative processes to create artwork. One example is Abstraction, done in 2005 by this random algorithm. I admire how every piece he makes with this process ends up looking completely different, in every way possible. The style and color palette are unique to each art piece. He uses Visual Basic to create the art, and uses a random number generator to calculate the seed start time for the generative process. I admire the algorithms he has created more than this specific piece, and am using it only as an example. He has created many different programs that create different style pieces, such as CREATOR, DISCOVERER, COLLAGE, and more. He even released these programs for free on his site, and below are two images showing the interfaces for two of these programs.

Interface for CREATOR
Interface for DISCOVERER

Kevin Riordan Project-06-Abstract-Clock-Section C

kzr clock

/*Kevin Riordan
Section C
kzr@andrew.cmu.edu
Project_06_C*/
var prevSec;
var millisRolloverTime;
function setup() {
    createCanvas(480,480);
    millisRolloverTime = 0;
}

function draw() {
    background(247,202,201);
    var hours = hour();
    var minutes = minute();
    var seconds = second();
    angleMode(DEGREES);
    //making seconds smooth
    if (prevSec != seconds) {
        millisRolloverTime = millis();
    }
    prevSec = seconds;
    var mills = floor(millis() - millisRolloverTime);
    var secondsFrac = seconds + (mills / 1000);
    //making a 12 hour clock instead of a 24 hour clock
    if (hours >= 12) {
        hours = hours % 12;
    }
    //abstract hours
    push();
    translate(width/2,height/2);
    rotate(-90);
    fill(200,120,120,80);
    noStroke();
    //making arcs for the hour triangles; k=0 corresponds to the exact hour (midpoint of group of arcs)
    for (var k = 2; k >= 0; k -= 0.25) {
        fill(220 - (30 * k),120,120,80);
        arc(0,0,width * 1.5,height * 1.5,30 * (hours - k),30 * (hours + k));
    }
    pop();
    //abstract minutes
    var minutesMapped = map(minutes,0,59,0,width);
    var minutesColor = map(minutes,0,59,0,255);
    var columnWidth = width/61;
    var changeHeight = 0;
    fill(minutesColor - 50,100,minutesColor,25);
    noStroke();
    //left side of minutes pyramid
    for(var columns = -1; columns < 30; columns++) {
        push();
        translate(0,height);
        rect(columns * columnWidth,0,columnWidth,-changeHeight);
        pop();
        changeHeight+=minutesMapped/30;
    }
    //middle bar, length corresponds to minutes amount
    fill(minutesColor,150,minutesColor,90);
    rect(width/2 - columnWidth/2,height,columnWidth,-minutesMapped);
    //right side of minutes pyramid
    fill(minutesColor - 50,100,minutesColor - 30,25);
    for(var columns = 31; columns < 61; columns++) {
        changeHeight-=minutesMapped/30;
        push();
        translate(0,height);
        rect(columns * columnWidth,0,columnWidth,-changeHeight);
        pop();
    }
    //abstract seconds
    var secondsFracMapped = map(secondsFrac,0,59,0,width/2 - 15);
    var minutesMapped = map(minutes,0,59,0,width/2);
    //goes outwards from center at 0 seconds to the edge at 60 seconds
    if (minutes%2 == 0) {
    for(j = 0; j <= 360; j += 10) {
        var jColor = j;
        jColor = constrain(jColor,50,255);
        for(i = 0; i <= 360; i += 10) {
            push();
            translate(width/2,height/2);
            rotate(i);
            fill(jColor);
            noStroke();
            ellipse(j,-secondsFracMapped,4,4);
            rotate(i / 2);
            fill(100,60,60,25);
            rect(j,-secondsFracMapped / 2,3,3 + i);
            pop();
        }
    }
    }
    //odd minutes go into the center from edge at 0 seconds to center at 60.
    else {
    for(j = 0; j <= 360; j += 10) {
        var jColor = j;
        jColor = constrain(jColor,50,255);
        for(i = 360; i >= 0; i -= 10) {
            push();
            translate(width/2,height/2);
            rotate(i);
            fill(jColor);
            noStroke();
            ellipse(j,(width/2) - secondsFracMapped,4,4);
            rotate(i / 2);
            fill(100,60,60,25);
            rect(j,-secondsFracMapped / 2,3,3 + i);
            pop();
        }
    }
    }
}

I started with a very badly drawn sketch of what I wanted to do.

initial sketch at 0 seconds, and at 59/60 seconds

This project made me think about timing a lot. I started by doing the seconds, and used the example code to make it smooth using milliseconds rollover time. The seconds go out for even minutes, and in for odd minutes. I could not get the transition from going in to going out exactly right (as well as the transition from out to in), but I am okay with how it turned out. The minutes are represented by a pyramid at the bottom that grows and changes color as the minutes increase. The hours are represented in a fairly standard way, with a bunch of arcs that converge into a line that represents the hour hand on a traditional clock. This project made me think about how much stuff I can change over time, and I learned about how to change colors over a gradient as well.

Kevin Riordan Looking Outwards-05-Section C

Troglodita Demonstration Video

For this week’s Looking Outwards, I chose to look at a 3D modeling work done by Sergi Caballer. This project was done in 2012 for The Spa Studios, and was made entirely in Python and Maya. I admire how much control over the character the user has, as shown in the demonstration, and how much change there can be in the facial structure. The character’s body and face can be changed to any expression by playing around with the program, which I also admire. The facial rig was created with a joint-based system over a coordinate plane, which is how so many different details can be moved around. Below are some individual elements and closeups of the rig, showing how much movement is possible in the body.

Arm and Leg of Troglodita
Arm movement of Troglodita

Kevin Riordan Project-05-Wallpaper-Section C

kzr wallpaper

/*Kevin Riordan
Section C
kzr@andrew.cmu.edu
project_05*/
function setup() {
    createCanvas(600,400);
    background(139,210,247);
    var yStart=50;
    var xStart=50;
    var height=Math.sqrt(3)/2; //making hexagon shaped grid
    for (var rows=-1; rows<7; rows++) {
        if(rows%2==0) { //for even numbered rows
            for (var columns=0; columns<10; columns++) {
                var yPos=yStart+rows*80*height;
                var xPos=xStart+columns*80;
                //bunny
                //left ear
                noStroke();
                fill(255);
                arc(xPos-15,yPos,10,80,PI,2*PI);
                fill(233,138,159);
                arc(xPos-15,yPos,6,65,PI,2*PI);
                //right ear
                fill(255);
                arc(xPos+15,yPos,10,80,PI,2*PI);
                fill(233,138,159);
                arc(xPos+15,yPos,6,65,PI,2*PI);
                //head
                fill(255);
                ellipse(xPos,yPos,50,40);
                //nose
                fill(0);
                arc(xPos,yPos,8,8,0,PI);
                fill(233,138,159);
                triangle(xPos-3,yPos,xPos+3,yPos,xPos,yPos+4);
                //mouth
                stroke(0);
                line(xPos,yPos+4,xPos,yPos+8);
                line(xPos-3,yPos+11,xPos,yPos+8);
                line(xPos,yPos+8,xPos+3,yPos+11);
                //left eye
                noStroke();
                fill(0);
                ellipse(xPos-15,yPos-5,4,4);
                //right eye
                ellipse(xPos+15,yPos-5,4,4);
                //carrot
                //green parts
                fill(54,116,54);
                triangle(xPos-40,yPos+5,xPos-49,yPos-35,xPos-38,yPos-29);
                triangle(xPos-40,yPos+5,xPos-35,yPos-31,xPos-39,yPos-26);
                fill(89,169,61);
                triangle(xPos-40,yPos+5,xPos-48,yPos-20,xPos-38,yPos-15);
                triangle(xPos-40,yPos+5,xPos-34,yPos-21,xPos-39,yPos-14);
                //orange part
                fill(229,120,56);
                arc(xPos-40,yPos+5,20,4,PI,2*PI);
                triangle(xPos-30,yPos+5,xPos-50,yPos+5,xPos-40,yPos+40);
            }
        }
        else { //for odd numbered rows
            for (var columns=-1; columns<11; columns++) {
                var yPos=yStart+rows*80*height;
                var xPos=xStart+40+columns*80;
                //bunny
                //left ear
                noStroke();
                fill(255);
                arc(xPos-15,yPos,10,80,PI,2*PI);
                fill(233,138,159);
                arc(xPos-15,yPos,6,65,PI,2*PI);
                //right ear
                fill(255);
                arc(xPos+15,yPos,10,80,PI,2*PI);
                fill(233,138,159);
                arc(xPos+15,yPos,6,65,PI,2*PI);
                //head
                fill(255);
                ellipse(xPos,yPos,50,40);
                //nose
                fill(0);
                arc(xPos,yPos,8,8,0,PI);
                fill(233,138,159);
                triangle(xPos-3,yPos,xPos+3,yPos,xPos,yPos+4);
                //mouth
                stroke(0);
                line(xPos,yPos+4,xPos,yPos+8);
                line(xPos-3,yPos+11,xPos,yPos+8);
                line(xPos,yPos+8,xPos+3,yPos+11);
                //left eye
                noStroke();
                fill(0);
                ellipse(xPos-15,yPos-5,4,4);
                //right eye
                ellipse(xPos+15,yPos-5,4,4);
                //carrot
                //green parts
                fill(54,116,54);
                triangle(xPos-40,yPos+5,xPos-49,yPos-35,xPos-38,yPos-29);
                triangle(xPos-40,yPos+5,xPos-35,yPos-31,xPos-39,yPos-26);
                fill(89,169,61);
                triangle(xPos-40,yPos+5,xPos-48,yPos-20,xPos-38,yPos-15);
                triangle(xPos-40,yPos+5,xPos-34,yPos-21,xPos-39,yPos-14);
                //orange part
                fill(229,120,56);
                arc(xPos-40,yPos+5,20,4,PI,2*PI);
                triangle(xPos-30,yPos+5,xPos-50,yPos+5,xPos-40,yPos+40);
            }
        }
    }
    noLoop();
}
function draw() {
}

I started by sketching out my idea of doing alternating bunnies and carrots.

To make this project I started with the hexagonal grid template, and then made one bunny and one carrot, and then played around with the variables to put them into the right spot so that they would be translated the right way. This project made me more comfortable with nested for loops, and how to make copies of pictures on varying grids.

Kevin Riordan Project-04-String-Art-Section C

kzr-project-04

/*Kevin Riordan
Section C
kzr@andrew.cmu.edu
project_04*/
function setup() {
    createCanvas(400,300);
    background(255);
}

function draw() {
    var x1;
    var x2;
    var y1;
    var y2;
    //criss cross and grid lines
    strokeWeight(0.1);
    for (var i=0; i<=800; i+=10) {
        stroke(200);
        line(0,i,i,0);
        stroke(200);
        line(0,height-i,i,height);
        stroke(220);
        line(i,0,i,height);
        line(0,i,width,i);
    }
    stroke(0);
    //bottom left
    x1=0;
    x2=0;
    y1=0;
    y2=300;
    strokeWeight(0.2);
    for (var length1=0; length1<=1; length1+=0.02) {
        x2=lerp(0,400,length1);
        y1=lerp(0,300,length1);
        line(x1,y1,x2,y2);
    }
    //top left
    for (var length2=0; length2<=1; length2+=0.02) {
        x2=lerp(0,400,1-length2);
        y1=lerp(0,300,length2);
        line(x1,y1,x2,height-y2);
    }
    //bottom right
    for (var length3=0; length3<=1; length3+=0.02) {
        x1=lerp(0,400,1-length3);
        y2=lerp(0,300,length3);
        line(x1,y1,width-x2,y2);
    }
    //top right
    x1=0;
    y1=0;
    x2=400;
    y2=0;
    for (var length4=0; length4<=1; length4+=0.02) {
        x1=lerp(0,400,length4);
        y2=lerp(0,300,length4);
        line(x1,y1,x2,y2);
    }
    //setting variables back to normal
    x1=0;
    y1=0;
    x2=0;
    y2=0;
    for (var lengthC=0; lengthC<=1; lengthC+=0.025) {
        x1=lerp(0,200,lengthC);
        y2=lerp(0,150,lengthC);
        stroke(25);
        line(2*x1-width/2,height/2,width/2,height/2-(y2*2));//top left
        line(width/2,(y2*2)-height/2,2*x1+width/2,height/2);//top right
        line(2*x1-width/2,height/2,width/2,height/2+(y2*2));//bottom left
        line(width/2,1.5*height-(y2*2),2*x1+width/2,height/2);//bottom right
    }
    //inside curves setting variables back to normal
    x1=0;
    y1=0;
    x2=0;
    y2=0;
    strokeWeight(0.3);
    //curves go in a clockwise direction around
    for (var lengthIm=0; lengthIm<=1; lengthIm+=0.03) {
        x1=lerp(0,200,lengthIm);
        y2=lerp(0,150,lengthIm);
        //dark gray lines
        stroke(50);
        line(x1,y1,width/2-x2,y2); //top left quadrant upper curve
        line(width/2,height/2-y2,x1+width/2,y1); //top right quadrant upper curve
        line(width/2+x1,height/2,width,height/2-y2); //top right quadrant lower curve
        line(width/2+x1,height/2,width,height/2+y2); //bottom right quadrant upper curve
        line(width/2,height/2+y2,width/2+x1,height); //bottom right quadrant lower curve
        line(x1,height,width/2,height-y2); //bottom left quadrant lower curve
        line(0,height-y2,x1,height/2); //bottom left quadrant upper curve
        line(0,y2,x1,height/2); //top left quadrant lower curve
    }
    x1=0;
    y1=0;
    x2=0;
    y2=0;
    strokeWeight(0.4);
    for (var lengthIn=0; lengthIn<=1; lengthIn+=0.03) {
        x1=lerp(0,200,lengthIn);
        y2=lerp(0,150,lengthIn);
        //doing lines going the other way now on the outside
        stroke(100);
        line(0,height/2-y2,x1,0); //top left
        line(width/2+x1,0,width,y2); //top right
        line(width/2+x1,height,width,height-y2); //bottom right
        line(0,height/2+y2,x1,height); //bottom left
    }
    x1=0;
    y1=0;
    x2=0;
    y2=0;
    strokeWeight(0.2);
    for (var lengthIo=0; lengthIo<=1; lengthIo+=0.03) {
        x1=lerp(0,200,lengthIo);
        y2=lerp(0,150,lengthIo);
        //doing even lighter lines in the center now
        stroke(150);
        line(x1,height/2,width/2,height/2-y2); //center left
        line(width/2,y2,width/2+x1,height/2); //center right
        line(width/2,height-y2,width/2+x1,height/2); //bottom right
        line(x1,height/2,width/2,height/2+y2); //bottom left
    }
}

I started by doing each group of lines in its own for loop, and then resetting the variables after each loop. Once I finished the first four outside line curves, I realized I could just put the rest of the smaller curves inside one for loop, so I did that at the end. But that didn’t make it layer right, so I split the big loop up into three for loops to layer each differently colored group correctly. Overall, I got comfortable with for loops and the lerp function, which I did not understand at all before this project.

Kevin Riordan-Looking Outwards-04-Section C

Setup of Cycling Wheel performance in Taipei

For this week’s Looking Outwards, I chose to write about the Cycling Wheel, an installation/performance done in 2017, in Nuit Blanche Taipei. The creators Keith Lam, Seth Hon, and Alex Lai based their idea on Marcel Duchamp’s bicycle wheel sculpture, which is an upside down bicycle wheel mounted on a stool. The sounds are created by turning bicycle wheels that are lit up, and connected with strings as shown in the picture above. The sound produced is very similar to festival or techno music, but it is kind of hard to tell how the sound changes by turning the wheels in the performance, probably because there were three people controlling individual aspects of the overall sound. I could not find much about the algorithm to turn the wheel spinning into sound, but a custom made software was created using Processing, to control the light beams, led strips, and music. A picture of the interface is included, and I really admire how clean the interface looks, and how much work went into making such a unique project.

Interface for the Cycling Wheel performance

Kevin Riordan-Looking Outwards-03

La Cage aux Folles, on display in Los Angeles since 2014.

This project is called “La Cage Aux Folles”, and was made by Warren Techentin Architecture (WTARCH) and placed in the courtyard gallery of Materials and Applications in Los Angeles, California. It was made in 2014, and was designed to be like a combination between a Mongolian yurt and a cage. It uses generative algorithms with linear elements and parametric surfaces to figure out where to bend the pipes, which create an extremely stable structure. I looked for what exactly generative algorithms were, but could not find much information. The creator’s artistic sensibilities are present in the final form, as flow was a major consideration when designing the structure, and it is very appealing to look at. I admire how foreign it looks, and how it’s use is for habituation but looks like a sculpture, not like something meant to withstand any force. The fact it is so strong is remarkable, and I think digital fabrication is what allowed something so pretty to also be so structurally sound.

Aerial view, showing how a person can easily rest on the top.

Kevin Riordan Project-03-Dynamic-Drawing

kzr-project-03

/*Kevin Riordan
Section C
kzr@andrew.cmu.edu
project_03*/
var lineX=0;
var lineY=0;
var colorX=0;
var colorY=0;
var colorR=0;

function setup() {
    createCanvas(640,480);
}

function draw() {
    background(0);
    //gridlines
    for(var c=0; c<=640; c+=20) {
        strokeWeight(0.3);
        stroke(200);
        line(c,0,c,480);
        line(0,c,640,c);
    }
    //lines coming in from the edges from top and bottom
    for (lineX=0; lineX<=640; lineX+=60) {
        //varying the color based on where mouse is
        colorX=mouseX;
        colorX=constrain(mouseX,0,255);
        colorY=mouseY;
        colorY=constrain(mouseY,0,255);
        stroke(lineX/4,colorX,colorY);
        line(lineX,0,mouseX,mouseY);
        line(640-lineX,640,mouseX,mouseY);
    }
    //lines coming in from the edges from left and right
    for (lineY=0; lineY<=640; lineY+=60) {
        //varying the color based on where mouse is
        colorX=mouseX;
        colorX=constrain(mouseX,0,255);
        colorY=mouseY;
        colorY=constrain(mouseY,0,255);
        stroke(lineY/4,colorX,colorY);
        line(0,lineY,mouseX,mouseY);
        line(640,640-lineY,mouseX,mouseY);
    };
    //lines going out from center to positions around the mouse
    for (var a=50; a<=650; a+=50) {
        //varying the color based on where mouse is
        colorR=(mouseX+mouseY)/2;
        colorR=constrain(colorR,0,255);
        colorX=255-mouseX;
        colorX=constrain(mouseX,0,255);
        colorY=255-mouseY;
        colorY=constrain(mouseY,0,255);
        stroke(colorR,colorX,colorY);
        line(width/2,height/2,mouseX+a,mouseY-a);
        line(width/2,height/2,mouseX-a,mouseY-a);
        line(width/2,height/2,mouseX+a,mouseY+a);
        line(width/2,height/2,mouseX-a,mouseY+a);
    }
    //large circle made up of smaller circles at certain increments
    for(var b=0; b<=360; b+=5) {
        colorX=(mouseX+mouseY)/2;
        colorX=constrain(colorX,0,255);
        fill(0,colorX,colorX);
        push();
        translate(width/2,height/2);
        rotate(radians(b));
        //loop used for incrementing the larger circles
        for (var g=1; g<=40; g++) {
            ellipse(mouseX*g,mouseY*g,5*(g/2),5*(g/2));
            ellipse(mouseX/g,mouseY/g,5/g,5/g);
        }
        pop();
        //triangular grid-like lines around circles
        push();
        translate(width/2,height/2);
        rotate(radians(b*2));
        for (var h = 1; h<=40; h++) {
            triangle((mouseX+b)/h,(mouseY-b)/h,mouseX/h,mouseY/h,(mouseX-b)/h,(mouseY+b)/h);
            triangle((mouseX+b)*h,(mouseY-b)*h,mouseX*h,mouseY*h,(mouseX-b)*h,(mouseY+b)*h);
        }
        pop();
    }
    //rectangles in background over gridlines
    for(var d=20;d<=640;d+=40) {
        //two different loops because I wanted to adjust color and placement, probably unneccessary
        for(var e=0;e<=640;e+=40) {
            fill(0,colorX-20,colorY-20,40);
            rect(d,e,20,20);
            fill(colorX-30,colorY-30,colorX-50,10);
            rect(d+10,e,mouseX/10,mouseY/10);
        }
        for(var f=0;f<=640;f+=40) {
            fill(colorX-40,colorY-40,0,50);
            rect(d+10,f-10,20,20);
            fill(colorY-40,0,colorY-40,60);
            rect(d+30,f-10,20,20);
        }
    }
}

I started by making the gridlines, and then started using loops to put in shapes, changing the color and position based on where the mouse was. I originally made it 800×800, but changed it to 640×480 at the end.

Kevin Riordan Looking Outwards-02-Section C

This video is called Fractal Meditation, and was made by William Rood using algorithms in I think 2017, based on when it was published. The creator used 3d Mandelbrot sets to create the fractals, and the only thing I know about the algorithm is that it uses spherical coordinates. I suppose the movement and generation is related to the music that plays, as the colors and what appears seem to be somewhat influenced by the sound. I admire how long the video is, and how unique every single part actually is. Nothing ever actually repeats, even though everything changes so gradually. I think usually when something is this long, parts repeat especially when the sound is so constant, because this video is meant to be meditative. However, because of whatever algorithm is used, everything is so complex and unique that I do not think it would repeat even if the video was an hour long, which I admire alot.