Author: Connor

Connor McGaffin – Looking Outwards – 07

Airbnb’s Top 50 Markets / Rachel Binx / March 2011

Rachel Binx is a designer that visualizes information for a wide set of clients. This piece was created for a presentation that Airbnb’s CEO was giving on the cities which are most connected between via the app. The line weight that connects each of these locations is in proportion to the volume of trips booked from one to the other.

I feel drawn to this piece because of its relatively simple structure, but complex inner working of arc “strings”.  Upon initial viewing, I get the idea that Airbnb simply reaches a large quantity of cities, as a very little proportion of viewers are going to count every city around the hub.

However, the design encourages viewers to engage in a more curious way, where they can discover these relationships without them being handed out. This “work” that the viewer does leaves the user with a sense of reward and a hint of ownership over the connections that they’ve inferred from this visualization.

This layers of interaction to this project brings Binx’s creative sensibilities into light. It is clear that Binx has an understanding of how people engage with visualized data, and what really “matters”. Every person in the room isn’t going to care that there are some x-thousand connections between one city and the other, but they may find more value in these inferetial comparisons.

source

Connor McGaffin – Project 07 – Curves

sketch

/*
Connor McGaffin
Section C
cmcgaffi@andrew.cmu.edu
Project-07
*/
var nPoints = 1;
var x;
var y;

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

//--------------------------
function draw() {
    background(250);
    angleMode(DEGREES);

    //top row
    push();
    rotate(1 * mouseX / 2);
    cardioids();
    pop();

    push();
    translate(width / 2, 0);
    rotate(1 * mouseX / 2);
    cardioids();
    pop();

    push();
    translate(width, 0);
    rotate(1 * mouseX / 2);
    cardioids();
    pop();

    //middle row
    push();
    translate(0, height / 2);
    rotate(1 * mouseX / 2);
    cardioids();
    pop();

    push();
    translate(width / 2, height / 2);
    rotate(1 * mouseX / 2);
    cardioids();
    pop();

    push();
    translate(width, height / 2);
    rotate(1 * mouseX / 2);
    cardioids();
    pop();

    // bottom row
    push();
    translate(0, height);
    rotate(1 * mouseX / 2);
    cardioids();
    pop();

    push();
    translate(width / 2, height);
    rotate(1 * mouseX / 2);
    cardioids();
    pop();

    push();
    translate(width, height);
    rotate(1 * mouseX / 2);
    cardioids();
    pop();


}

function cardioids(){

    var mY = constrain(mouseY, width / 4, width / 2) * .4;
    var a = mY;
    
    noStroke(0);

    //horiz axis
    //pink
    beginShape();
    fill('rgba(250, 100, 250, 0.6)');
    for(i = 0; i < 360; i++){
        var t = map(i, 0, nPoints, 0, nPoints);
        x = a * sin(t) * (1 - sin(t));
        y = a * cos(t) * (1 - sin(t));
        vertex(x, y);
    }
    endShape(CLOSE);
    //dark blue
    beginShape();
    fill('rgba(10, 100, 250, 0.6)');
    for(i = 0; i < 360; i++){
        var t = map(i, 0, nPoints, 0, nPoints);
        x = a * sin(t) * (1 - sin(t));
        y = a * cos(t) * (1 - sin(t));
        vertex(-x, -y);
    }
    endShape(CLOSE);

    //vert axis
    //rotate 90
    push();
    rotate(90);
    //light blue
    beginShape();
    fill('rgba(50, 150, 220, 0.6)');
    for(i = 0; i < 360; i++){
        var t = map(i, 0, nPoints, 0, nPoints);
        x = a * sin(t) * (1 - sin(t));
        y = a * cos(t) * (1 - sin(t));
        vertex(x, y);
    }
    endShape(CLOSE);
    //
    beginShape();
    fill('rgba(180, 10, 250, 0.6)');
    for(i = 0; i < 360; i++){
        var t = map(i, 0, nPoints, 0, nPoints);
        x = a * sin(t) * (1 - sin(t));
        y = a * cos(t) * (1 - sin(t));
        vertex(-x, -y);
    }
    endShape(CLOSE);

    //white hub
    //fill(250);
    //ellipse(0, 0, a * .6, a * .6);

    pop();
}

This project was tricky. I definitely would have struggled a lot more if I didn’t have the example code in the project brief, but once I found a curve I was drawn to and started plugging variables in for interaction, the project became a playful process.

I used s series of cardioid curves to create small pinwheel like elements, which I then organized in rows and columns on the screen. Moving the mouse up and down will scale the pinwheels, whereas moving side to side changes its direction.

I hope to revisit this code, because I know that there are ways to display it in a more compact way and achieve similar results. This is one of the few projects thus far that I feel genuinely proud of its final product.

Below are screenshots of earlier iterations, when I was still figuring out color palettes and general composition of my canvas.

Connor McGaffin – Project 06 – Abstract Clock

sketch

/*
Connor McGaffin
Section C
cmcgaffi@andrew.cmu.edu
Project-06
*/


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

//--------------------------
function draw() {
    background(0, 100, 150);
    angleMode(DEGREES);
    noStroke();
    
    // Fetch the current time
    var H = hour();
    var M = minute();
    var S = second();
    
    // Compute the widths of the rectangles
    var mappedH = map(H, 0,23, 0,width);
    var mappedM = map(M, 0,59, 0,width);
    var mappedS = map(S, 0,59, 0,width / 2);
    var rectHeight = height / 3;
    
    var r = 350 //pizza radius

    var x = width / 2;
    var y = height / 2;
    //pepperoni
    var pr = 10 



//background

    //tray
    fill(220);
    ellipse(x, y, r + 35, r + 35);
    fill(195);
    ellipse(x, y, r + 20, r + 20);

    //grease
    strokeWeight(20);
    stroke('rgba(120, 90, 0, 0.3)');
    noFill();
    ellipse(x, y, r - 100, r - 100);
    ellipse(x, y, r - 90, r - 90);
    strokeWeight(10);
    ellipse(x, y, r - 35, r - 35);
    ellipse(x, y, r - 180, r - 180);
    fill('rgba(110, 100, 0, 0.3)');
    ellipse(x, y, 50, 50);

    //text
    noStroke();
    fill(195);
    textAlign(CENTER);
    text("when the moon hits your eye like a...", 107, 20);
    text("...that's amore", width - 45, height - 15);


//HOURS
    //cheese 
    fill(215,205,0);
    arc(x, y, r, r, 0, H * (360 / 24));
    //slices
    for(var i = 0; i < H + 1; i++){
        push();
        translate(x, y);
        rotate(15 * i); // 60 div by 24
        stroke(210, 180, 0);
        strokeWeight(2);
        line(0, 0, r / 2, 0);
        pop();
    }
    //crust
    noFill();
    strokeWeight(9);
    stroke(140,80,0);  
    arc(x, y, r, r, 0, H * (360 / 24));

//MINUTES
    //pepperoni

    for(var i = 0; i < M + 1; i++){
        push();
        translate(x, y);
        noStroke();
        rotate(6 * i); // 60 div by 24
        fill(150,0,0);
        ellipse(0, 202, pr, pr);
        pop(); 
}

//SECONDS
    //olives
    for(var i = 0; i < S + 1; i++){
        push();
        translate(x, y);
        noFill();
        strokeWeight(3);
        stroke(0);
        rotate(6 * i); // 60 div by 24
        ellipse(0, 215, pr - 3, pr - 3);
        pop(); 
}



   

    //fill(100);
    //rect(0, 1*rectHeight, mappedM, rectHeight);
    //fill(150);
    //rect(0, 2*rectHeight, mappedS, rectHeight);
    
    /* Uncomment this block in order to 
    // Display numbers to indicate the time
    fill(255);
    text(H, 9, 0*rectHeight + 19);
    text(M, 9, 1*rectHeight + 19);
    text(S, 9, 2*rectHeight + 19);
    */
}

This post was incredibly satisfying to take in once completed. Beginning this project, I wanted to create a clock that operated with additive pizza slices at its core. When I was younger, I hated when my sister ordered olives because even if it was only on a portion of the pizza, it would cause the whole pie to smell like olives while in the box.

With this as a basic framework, I began to generate a pizza pie with a noticeable lack of olives actually on it. Instead, all of the olives are placed beyond its diameter, as they count the seconds. Pepperoni serves as a geometrically similar mediator for minutes, while the pie slices count the hours of the day.

Beneath the pizza is a ring of grease on the tray–a sign of pizza that is as perfectly unhealthy as it should be.


Connor McGaffin – Looking Outwards – 06

The work of Siebren Versteeg caught my attention this week due to its playful deceit. Versteeg creates work that emulates the style of contemporary abstract artists through writing code which, with a series of randomized variables, creates unique pieces of art. Versteeg explains that although he considers his work randomized, there is still human bias of beauty in his work present in his ensuring that the pieces still looked, “dripped”, and “stuck” like a physical painting.

With this being said, it is evident that Siebren Versteeg used code with variables limited within a certain range. For example, the colors depicted in his work do not mix as they “normally” would digital, for mediums like oil or acrylic behave differently. Versteeg’s artistic sensibility is definitely self-aware, as his work is just as much about the process and product as it is commentary on the art world at large. The lines between human expression and randomized calculations is thoroughly blurred.

source

Connor McGaffin – Project 05 – Wallpaper

sketch

/*
Connor McGaffin
Section C
cmcgaffi@andrew.cmu.edu
Project-05
*/
var ang = 120;

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

    //olive
    for(x=0; x<width; x+=50){
        for(j=0; j<height; j+=50){
            fill(100,70,0);
            ellipse(x+25,j+25,50,50);
        }
    }
    //pits
    for(x=0; x< width+50; x+=50){
        for(y=0; y<height; y+=50){
            stroke(60,0,0);
            strokeWeight(2);
            fill(85,0,0);
            ellipse (x-35, y+15, 15,15);

        }
    }
    //skewers
    for(x=0; x< width; x+=50){
        for(y=0; y<height; y+=50){
            fill(100,0,0);
            stroke(50,0,0);
            strokeWeight(2);
            line(x-7,y-7,x+15,y+15);
        }
    }
    //glass
    for(x=0; x<width; x+=100){
        for(y=0; y<width; y+=100){

            noStroke();
            fill('rgba(250, 250, 250, 0.6)');
            triangle(x+10,y+10,x+80,y+10,x+45,y+35);
            rect(x+42.5,y+33,5,45);
            triangle(x+10,y+10,x+80,y+10,x+45,y+35);
            triangle(x+20,y+83,x+70,y+83,x+45,y+75);
        }
    }
}

I created this pattern after being inspired by the art deco visuals of AMC’s “Mad Men”. I had fun finding a way to visualize the olives while still speaking to the visual aesthetic of the 1960’s era. Initially, I approached the olives in an projected view, but they were indistinguishable from everyday beads. When rotating the olives to a 3/4 view from above, an interesting sense of space is established. The choice to connect all of the olives on the same skewer creates a surreal atmosphere to the environment, which speaks to the inability to place where this pattern is located when viewed on a screen.

I would anticipate that this pattern could potentially be used in a restaurant. It’s fun but also a little gaudy, so it would likely go in there bathroom, rather than the front lobby.

Connor McGaffin – Looking Outwards – 05

“Flume – v” (2016)

Jonathan Zawada is a motion graphics artist who has done work at very corporate and independent levels. Much of his work, similar to other artists featured as “Looking Outwards” suggestions, is based around organic form in the natural world. What sets Zawada’s work apart from others for me though is that the blurring of organic and artificial is very visually apparent. In other works when I’ve referred to this relationship, it has been as organic objects being portrayed through digital coding.

Although I am unfamiliar with the field of 3-D motion graphics, it is evident that there are multiple layers to what is being displayed. In the embedded music video, there were quick cuts between simulations of metallic stem growth and chain link interactions, oftentimes with the two of them physically overlapping in a layer-like nature. From this, I would assume that there were different sequences of code for each of the elements in the video, which are triggered in response to drastic changes in pitch, tempo, or bass.

source

Connor McGaffin – Project 04 – String Art

sketch

/*
Connor McGaffin
Section C
cmcgaffi@andrew.cmu.edu
Project-04
*/

function setup() {
    createCanvas(300,400);
    strokeWeight(2);
    }
function draw(){
    background (220,45,0);
    //sun
    fill(250);
    ellipse(250,250,50,50);
    //farthest web away(in background)
    for (var e = 0; e < width; e += 8) {
        stroke(150,150,150);
        line(-5, e,e*1.5, 0); 
    }
    //draw architectural structure
    for (var a = 0; a < width; a += 5) {
        stroke(0);
        line(0, 0, a, 400);
    }
    for (var b = 0; b < width; b += 9) {
        stroke(150,0,0);
        line(300, 400, b * 1.5, 0);
    //draw top web
    }
    for (var c = 0; c < width; c += 15) {
        stroke(250);
        line(250,75, c * 1.2, 1);
        //draw web moving off screen
        //hinting where spiderman is at
        line(250,75,350,height);
    }
    //draw closest web that goes off screen
    for (var d = 0; d < width; d += 20) {
        stroke(250);
        line(0,d*1.5, d*1.2, height);
    }
    


}

This project was challenging yet rewarding to work through. I wanted to create something abstract, yet still derivative of something else. After playing around with the different line generations I could create, I noticed the spiderweb-like quality to the pattern. Playing off of this, I used functions described in class and in the brief to create an abstracted scene inspired by Spiderman, with lines that suggest him to have just swung off screen.

Connor McGaffin – Looking Outwards – 04


“Deep Web” 2016
Robert Henke

I was initially drawn to this project simply through how surreal the documentation video is. The size of the crowd gathered under the laser show allows for an entirely more immersive experience. Upon reading into how the project was accomplished, and realizing that these glowing orbs of light are simply illuminated balloons being raised up and down my disbelief didn’t falter. Rather than the project losing its sense of wonder, my attention shifted to disbelief at how incredibly simple the physical setup of the show is.

In this moment, I couldn’t fully explain the algorithms behind this project. However, I have suspicions that the variables which control the movement are related to the pitch and tempo of the music being played.

Robert Henke, the project’s creator, expresses his artistic sensibilities in a raw sense through this project. A common motif in his work is the unwritten encouragement of metacognitive thinking. His work explores the intersection of sensory and how people interpret reality. This project’s ability to visualize the invisible is so spectacular and immersive that it is no exception to encouraging a perception of world in a different lens, even if for a moment.

source

Connor McGaffin – Project 03 – Dynamic Drawing

sketch

/*
Connor McGaffin
Section C
cmcgaffi@andrew.cmu.edu
Project-03
*/

var a = 0
var angle = 0

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

//opening elevator door
function mousePressed(){
        a += 20;
}

function draw() {

    //change background color changes upon horizontal movement
    var c = mouseX / 2 * 2
    background(c, c, 100);

    //floors
    rectMode(CORNER);
    fill(240,0,0);
    rect(0,100,width,10);
    rect(0,240,width,10);
    rect(0,380,width,10);
    
    //shaft
    rectMode(CENTER);
    fill(0);
        rect(width / 2, height / 2,100,height)

    //clockwise shaft gears
        fill(80);
        push();
        translate(width / 2,100);
        rotate(radians(angle));
        rectMode(CENTER);
        rect(0,0,40,40);
        pop();

        push();
        translate(width / 2,0);
        rotate(radians(angle));
        rectMode(CENTER);
        rect(0,0,50,50);
        pop();

        angle = angle + 1;


    //elevator moves on vertical inverse
    //cable
    fill(250);
        rect(width / 2, height - 340 - mouseY, 10,height);

    //elevator room
    fill(200,200,255);
    strokeWeight(0);
        //elevator shell
        rect(width / 2,height - mouseY,100, 150);
        //elevator couple
        rect(width / 2, height - 85 - mouseY, 50,30);
    
    //elevator room
    fill(230,100,0);
        rect(width / 2, height - mouseY, 90, 130)


    //elevator door gap
    rectMode(CORNER);
    fill(0);
    rect(width / 2 + 45, height - mouseY - 65, 5, a);


}

In this project, I was inspired by an old iOS game I played as a child called “Tiny Tower” where the primary interface of navigation was via a cross-section of an elevator. In this sketch, I allowed for the inverse control of the elevator through vertical movement of the mouse while it is pressed. Horizontal movement changes the wallpaper color. Clicking on screen opens the door of the elevator. Gears in the elevator shaft run constantly.

Connor McGaffin – Looking Outwards – 03

“Deoptimized Chair” – Daniel Wildrig (2013)                                                                                    an  exploration of generative form in furniture (source)

Daniel Wildrig is a sculptor as well as a fashion and furniture designer whose work explores generative form at the intersection of a geometric and organic qualities. Formerly working alongside Zaha Hadid, Wildrig was heavily involved in the process of creating some of the studio’s most iconic buildings.

Wildrig’s sensibilities are relatively aligned with the work while at Hadid, however on a much smaller scale. The buildings designed at Wildrig’s former studio also shares aesthetic similarities with the natural world.

I am drawn to this particular project because of its seemingly complex solution to the relatively simple design problem of creating an object for resting. I also am engaged by the further juxtaposition of such sharp forms that work to create an artifact for comfort.

I would suppose that the algorithms that led to this final product consist of some sort of base “unit”, likely the dynamic hexagonal shape seen on the outskirts of the chair. There is likely a random generation of these units with a higher assigned density at the structural core of the chair.

(source)