Author: ssontag@andrew.cmu.edu

LookingOutwards-09-ssontag

In my peer, Sara Jahanian’s, most recent Looking Outwards she looked into the work of Jake Barton. Personally I found his work and her post about his work very compelling. She wrote about her appreciation of his work as work that is breaking ground by bringing together a diverse groups of creators to produce experiences like none other. His firm Local Projects specializes in storytelling through an interactive space. This is actually a field of work that I am extremely interested in pursuing. Using my space making skills learnt in Architecture school and a growing background in coding and hopefully human computer interaction, I will one day make spaces as dynamic and impact full as the his work called “A Museum of Collective Memory.” This space is a memorial for those who experienced the tragedy of Sept 11.

Here is Their Website.

Here is  a Video about the Project

Project- 09- ssontag

Cross Hairs

var baseImage;

//pre load my underlying image
function preload() {
    var imgurLink = "https://i.imgur.com/jjMBr8v.jpg";
    baseImage = loadImage(imgurLink);
}

function setup() {
    createCanvas(480, 480);
    background(0);
//load the pixels of the image so they can be referenced later
    baseImage.loadPixels();
    frameRate(15);
}

function draw() {

//randomly select a pixel on the canvas
    var px = random(width);
    var py = random(height);
    var ix = constrain(floor(px), 0, width-1);
    var iy = constrain(floor(py), 0, height-1);
//loads the color from the base image so the cross hairs coordinate with the colors of the base image
    var theColorAtLocationXY = baseImage.get(ix, iy);
//randomly generate points for the lines to make cross hairs
    var rX = random(1,8);
    var rY = random(1,8);

    noStroke();
    fill(theColorAtLocationXY);
    stroke(theColorAtLocationXY);

//create cross hairs
    line(px, py, px + rX, py + rX);
    line(px + rY, py, px + rX - rY, py + rX);

}

For this Project I decided I did not want to make shapes like ellipses or rectangles, but I wanted to use line work. Instead of just randomly placed lines I decided to make randomly generated cross hairs to add another layer to the sketch.

LookingOutwards 08-ssontag

Currently the Senior Curator of the Department of Architecture and Design as well as the Director of R&D at The Museum of Modern Art, Italian born design visionary has curated multiple exhibitions emphasizing the connection between design and innovation. Antonelli received a laurea degree in architecture from the Politecnico di Milano university in 1990 and eventually went on to lecture at several institutions including the University of California, Los Angeles and Harvard University. Although having never worked as an architect, Antonelli’s focus on maximizing functionality through design resonates with the mindset I have as I pursue a degree in architecture. Her exhibition “Safe: Design Takes Risk”, utilizes aspects of design that are both creative and functional. Consisting of conceptual models of automobiles, articles of clothing, and other everyday objects, the exhibition truly brings to the light the direct relationship between the way an object is designed and it’s efficiency.

Looking Outwards-07-ssontag-Selfiecity

This work by Moritz Stefaner compiled 3200 selfies taken by people from around the world to analyze the selfie phenomenon of our generation. They “Rich media visualizations (imageplots) assemble thousands of photos to reveal interesting patterns.” There are many parts of this project that analyze different aspects of each selfie and how each selfie was taken. Some of these demographics include, place taken, age of the selfie takers, and gender of the selfie takers. They also analyzed each photo to see how the photo was taken. Whether the person is looking up, down, left or right. It also analyzed their emotions, the tilt of their head, how open their mouth was, and whether or not they are wearing glasses. All of this information was then stored and graphically represented beautifully with sheets of infographics.

The Documentation

Here is a video that compiled their work.

Project – 06 – ssontag – Binary Clock

I got the idea for this project from my friend who has a binary clock next to his bed, earlier this year he explained to me how to read the clock using binary, but i had no idea how it actually worked. By using my knowledge of how to read the clock i was able to reverse engineer the code to create my own!

Here is my logic behind the Clock!

sketch

function setup() {
    createCanvas(200, 100);
    background(200);
}

function draw() {
//these variables take each digits place of the hour, min, and sec and translate them into
//binary, these variables will give an output of 1 or zero 
    var hr1 = floor(hour() / 10);
    var hr2 = hour() % 10;
    var min1 = floor(minute() / 10);
    var min2 = minute() % 10;
    var sec1 = floor(second() / 10);
    var sec2 = second() % 10;

//this creates an array of these points so i can use a for loops to iterate over each variable
    var timeArray = [hr1, hr2, min1, min2, sec1, sec2]
    var nTimeArray = timeArray.length;

//this for loop will iterate over each variable to give the binary values of each circle in
//each column, then using if statements to set the fill to green only if the binary value is 1
    for(var i = 0; i < nTimeArray; i++) {
        var x = timeArray[i];

        var a = floor(x / 8);
        var b = floor((x - 8 * a) / 4);
        var c = floor((x - 8 * a - 4 * b) / 2);
        var d = x % 2;

        
        

        if(a == 1) {
            fill(0, 255, 0);

        } else {
            fill(250);
        }

        ellipse(25 + 30 * i, 20, 10, 10);

        if(b == 1) {
            fill(0, 255, 0);

        } else {
            fill(250);
        }
        ellipse(25 + 30 * i, 40, 10, 10);

        if(c == 1) {
            fill(0, 255, 0);

        } else {
            fill(250);
        }
        ellipse(25 + 30 * i, 60, 10, 10);

        if(d == 1) {
            fill(0, 255, 0);

        } else {
            fill(250);
        }
        ellipse(25 + 30 * i, 80, 10, 10);

    }

}

Looking Outwards 06 – ssontag – Conway’s Game of Life

The other day my friend was telling me about Conway’s Game of Life, it is a celluar autmaton and was created by mathematician John Horton. This i a pseudo random program that uses a set of rules to create a different situation based on the starting position determined by the user. As soon as the starting condition is determined, the rules play out. The program will run as long as none of the shapes die. They die if they are completely surrounded and cannot grow based on the rules. I appreciate this a lot because it was not originally created to be art, but since it’s creation many people have analyzed the rules and created some very graphically interesting animations.

Here is an example called Gosper’s glider gun.

ssontag – Project – 05 – Wallpaper

For this project i wanted to be reminiscent about the striped blue and grey wallpaper i had in my childhood bedroom. I also decided i wanted to add some of the line work style that i have developed in architecture school.

sketch

;function setup() {
//variables to set up ordered spacing within the for loop
    var sY = 40;
    var sX = 20;

    var rX = 20;

    createCanvas(380, 380);
    background(210);
//a for loop that sets up the background bars of blue and grey iterating across the x axis
   for(var i = 0; i < 20; i++) {
        noStroke();
//modulus so there is an alternating pattern between even and odd
        if ((i % 2) == 0) {
            fill(70, 130, 180);
//an else statment that sets the fill as grey for every other
        } else {
            fill(210);
        }
        rect(i * rX, 0, rX, 400);
    }
//a for loop that wil set up the grid for th repeating pattern in the x direction 
    for(var x = 0; x < 20; x++) {
// an if statement and a for loop that makes the bezier curves and some ellipse's using modulus to
//make it occur every other row
        if ((x % 2) == 0) {
            for(var y = 0; y < 10; y++) {
                noFill();
                stroke(1);
                bezier(x * rX + sX, y * sY, x * rX, y * sY, x * rX + sX, y * sY + 20, 
                    x * rX + sX - 10, y * sY + 20);
                bezier(x * rX + sX - 10, y * sY + 20, x * rX, y * sY + 20, x * rX + sX,
                    y * sY + 40, x * rX, y * sY + 40);
                ellipse(x * rX + 10, y * sY + 20, 20, 20);
            }
        } else {
//an else statement that sest the lines and ellipses for the grey rows
            for(var y = 0; y < 10; y++) {
                line(x * rX + sX, y * sY, x * rX, y * sY);
                ellipse(x * rX + 10, y* sY, 35, 35);
            }
        }
    }
    noLoop();
//keeps the drawing from animating, it will draw itself once like a wallpaper
}

function draw() {

}

Architectural Digital Renderings – Looking Outwards 5

In the field of Architecture renderings of buildings have always been used to sell ideas. In order to win competitions or get clients, firms must produce a compelling case for their ideas. But, most people that aren’t architects cannot conceptualize space in plan, section, and elevation, so architects must make renderings in perspective of their ideas. Each rendering is a work of art so I couldn’t pick just one. Instead I will share my discovery of a firm called Studio Cyrille Thomas that works only as a rendering firm.

With their team of architects, artists, and experts in digital rendering. They create works of art with 3D modeling software such as Rhino, SketchUp, and Revit alongside Vray (a rendering software) and photoshop for architecture firms that need to sell their ideas to clients. I believe their rendering work is some of the most compelling because of their ability to capture the atmosphere that aligns with the architect’s concept behind each space. Anyone can learn to use these software to create a realistic looking image, but not many people can create a work of art that truly captures the feeling of being in a wonderfully designed space.

Studio Cyrille Thomas’ Website

ssontag-LookingOutwards-04

I appreciate this project because of it’s use of natural aspects in a computer aided art installation. This project uses light sensors to influence the ambient noise played through the speakers. Depending on the light levels collected from the sensors it creates a complex soundscape. This is something that is inspiring to me because it is an example of using contextual elements to influence the environment people experience. I could see this becoming something more interactive using other sensors that are based on the people and the noises already within the room. I could see this becoming a very uncomfortable room that changes as people move through it.

ssontag-Project-04

For this project i struggled with creating something visually exceptional because of my limited knowledge of how to use for loops to create interesting visuals. So i added a animation aspect using the position of the mouse to determine the visuals.

sketch


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

function draw() {
    background(210);
//i used a for loop to iterate the value of i so i could create a
//curve made from lines that have an incremental value based on i
    for (var i = 0; i <= 300; i += 20) {
//using the x value of x i made two sets of lines that are connected at the x value of the mouse
// by making two sets the curves can be moved from the left side to the right side of the canvas
        stroke(0, 128, 128);
        line(i, 0, mouseX, height - i);
        line(i, 300, mouseX, i);

        stroke(0, 0, 128);
        line(width - i, 0, mouseX, height - i);
        line(width - i, 300, mouseX, i);

//using the y value of y i made two sets of lines that are connected at the y value of the mouse
// by making two sets the curves can be moved from the top to the bottom of the canvas
        stroke(128, 128, 0);
        line(0, height - i, width- i, mouseY);
        line(400, height - i, i, mouseY);

        stroke(0, 128, 0);
        line(0, i, width - i, mouseY);
        line(400, i, i, mouseY);
    }
}