Category: Section D

hyt-Looking-Outwards-10: Chris Sugrue

Chris Sugrue is an audiovisual artist, experimental designer, programmer and educator. Coincidentally, the eye-tracking assignment that we did last week was in fact developed by her as well — an augmented smart device that allows drawing and writing through eye movements.

One of my favorite artworks of hers is Delicate Boundaries (2007), an interactive installation that dissolves the boundary between digital flat screens and physical space, specifically using human body as a “medium” to explore our relationship between these spaces. She created projections of tiny bugs that are able to climb from the screens onto your arms and hands. In a way, the illusory projection confuses our sense of virtuality and reality.

From a technical perspective, the project was written in openFrameworks on C++ platform, as well as incorporating the use of digital projector, video camera, and infrared lightings in order to detect human movements. I think these interactive installations are very intriguing and informative and I hope to reference these artworks into my own practice.

Press converage of the artist and project: https://news.gestalten.com/news/delicate-boundaries

More on Chris Sugrue’s website: http://csugrue.com/

creyes1-LookingOutwards-10


Video showing the navigation of the Friends in Space website

Created by Giorgia Lupi and Accurat studio, an information design firm, Friends in Space is an experimental digital social platform built to connect Italian astronaut Samantha Cristoforetti on the International Space Station with the world below her.


Sample view of the Friends in Space website, showing the user’s position and Cristoforetti’s orbit

From November 2014 to June 2015, with the help of data collection and processing, the site maps out the user’s location relative to Cristoforetti’s location on the I.S.S., allowing the two individuals to say hello should one be right above the other, as well as allowing users to send greetings to fellow stargazers. It’s a really heartfelt and charming way to use data visualization, and the project enables a kind of emotional bond between Cristoforetti and the people she passes by – users are able to plan out their calendars to make sure they don’t miss the next time Cristoforetti will pass over them, and are able to view all of their datapoints regarding their interactions.


Giorgia Lupi

Giorgia Lupi herself is an Italian information designer residing in New York City, and the co-founder and design director at Accurat studio, who is most known for her work in the collaboration Dear Data, a continuous exchange of hand-drawn data visualizations with Stefanie Posavic. Lupi received her Masters of Architecture at Ferrara Architecture Faculty in Ferrara, Italy, and earned a PhD in Design at Politecnico di Milano.

The Friends in Space project can be found on Behance, and more information about Lupi and Accurat can be found on their website, Behance, and their respective Medium blogs.

ghou-Project-10-Landscape

sketch

//Grace Wanying Hou
//15-104 Section D
//ghou@andrew.cmu.edu
//Project 10


//global variables
var frames = [];
var sm1 = 0.0003;
var sm2 = 0.00035;
var sm3 = 0.0005;
var detail1 = 0.03;
var detail2 = 0.015;
var detail3 = 0.01;

var birds = [];

function preload(){
//AW MY CUTE BIRDS 😀
    var filenames = [];
    filenames[0] = "https://i.imgur.com/TMM2wDR.png";
    filenames[1] = "https://i.imgur.com/yl73pp4.png";
    filenames[2] = "https://i.imgur.com/XihpVMA.png";
    filenames[3] = "https://i.imgur.com/yl73pp4.png";
    filenames[4] = "https://i.imgur.com/TMM2wDR.png";
    filenames[5] = "https://i.imgur.com/OY3iZ36.png";
    filenames[6] = "https://i.imgur.com/nGeaANh.png";
    filenames[7] = "https://i.imgur.com/OY3iZ36.png";
    
    for (i=0; i<filenames.length; i++){
        frames[i] = loadImage(filenames[i]);
    }
}


function setup() {
    createCanvas(250,400);
    frameRate(10);
    //there should be some birds on screen when the sketch is first opened
    for (var i=0; i<5; i++){
        var randoPosition = random(width+100);
        birds[i] = makeBird(randoPosition);
    }
    

}
 
function draw() {
    //loading the functions
    makeBackground();
    maybeAddNewBird(); 
    makeMountains();
    updateDisplayBirds();
    
}


function makeBackground(){//making a gradient for the background
    strokeWeight(1);
    for (var i=0;i<height; i++){
        stroke(255-i/8);
        line(0, i, width, i);
    }
}
function makeMountains(){
    noStroke();
    
    //back mountain
    fill(210);
    beginShape(); 
    for (var x1 = 0; x1 < width; x1++) {
        var t1 = (x1 * detail1) + (millis() * sm1);
        var y1 = map(noise(t1), 0,1, 0, height);
        vertex(x1,y1-80); 
    }
    vertex(width,height);
    vertex(0,height);
    endShape();
    
    //middle mountain
    fill(190);
    beginShape(); 
    for (var x2 = 0; x2 < width; x2++) {
        var t2 = (x2 * detail2) + (millis() * sm2);
        var y2 = map(noise(t2), 0,1, 0, height);
        vertex(x2,y2+80); 
    }
    vertex(width,height);
    vertex(0,height);
    endShape();
        
    //front mountain
    fill(170);
    beginShape(); 
    for (var x3 = 0; x3 < width; x3++) {
        var t3 = (x3 * detail3) + (millis() * sm3);
        var y3 = map(noise(t3), 0,1, 0, height);
        vertex(x3,y3+150); 
    }
    vertex(width,height);
    vertex(0,height);
    endShape();
}

function updateDisplayBirds(){//keep the birds in display
    for (var i=0; i<birds.length; i++){
        birds[i].move();
        birds[i].display();
    }
}

function maybeAddNewBird(){//low chance a new bird will be added each frame
    if (random(1) < 0.015){
        birds.push(makeBird(width+100));
    }
}
function birdMove(){//updating the bird speed
    this.x += this.speed;
}

function displayBird(){ //drawing the birds
    push();
    fill(255,255,255,this.trans);
    noStroke();
    translate(this.x,this.floatHeight);
    for (var i=0; i<this.size; i++){
        tint(255, this.trans+i*20);//a group of birds will have different transparencies
        var fc = frameCount % 5; //animating the birds
        image(frames[fc+i],this.x-this.disX*i,0-this.disY*i);// the birds will flap their wings staggered
    }
    pop();
}

function makeBird(birthplace){ //making the birds
    var bird = {x: birthplace,
                 disX: random(10,50),
                 disY: random(30),
                 size: floor(random(1,4)),
                 trans: random(30,150),
                 speed: random(-4,-2),
                 floatHeight: random(40,150),
                 move: birdMove,
                 display: displayBird,
                }
    return bird;
}

I went for a monotoned landscape for this week’s project inspired by Pittsburgh’s insanely gloomy weather the past two weeks. I created the three layers of mountains using the noise() function provided to us and altering the colour, speed, and detail to create the layered effect. I used Javascript Objects to control my birds; they are frames of individual images Photoshopped and uploaded onto imgur.com. I also tried to make clouds using ellipse() functions and stored objects but it did not give me the desired effect so I decided to take them out.

daphnel-LookingOutwards-10

Notes on Blindness is an incredibly fascinating and interactive documentary that follows the story of a man named John Hull, who lost his sight back in 1993. After losing sight, John started documenting his new world through audio recordings and these recordings were used to make Notes on Blindness, which uses a mix of storytelling and VR to replicate John’s experiences. Béatrice Lartigue was the animation and art director for this production that won Best Experimental Experience at the Tribeca Film Festival. She is a visual artist based in Paris and studies things like the invisible relationships between time, space and images. She works a lot with immersive experience and physical interactive installations. I find it amazing how she was able to animate a supposedly world of darkness through some audio recordings. Each moment and aspect of the audio recorded scenes were brilliantly constructed and although monotone in color, was still beautiful.

A scene in the documentary

jennyzha – Looking Outwards 10

Vera-Maria Glahn is a managing director and partner at FIELD, “create[ing] expressive and dynamic artworks for digital platforms: audio-visual installations, experiences for web and mobile, and shareable digital artefacts.” Glahn received her undergraduate education from the Gymnasium Theodorianum for Abitur, Arts, German, English, and Philosophy, and her Masters in Visual Communication from Kunsthochschule Kassel.

Barricade SS15: ssbarricade8 by FIELD.IO

As a member of FIELD, Glahn as worked on many astonishing projects, such as the Adidas by Stella McCartney: Barricade SS15 campaign. This particular project caught my eye because, as a business major with a concentration in Marketing, I found these works particularly eye-catching, effective, and beautiful.Barricade SS15: ssbarricade5 16x9 by FIELD.IOBarricade SS15: ssbarricade4 16x9 by FIELD.IO

 

Glahn uses “dynamic flow fields precisely mapped into the scene, emphasize Caroline Wozniacki’s powerful moves, creating a visual balance of technical precision and fluid elegance. The print and motion graphics launched in two sets, timed with the Australian Open and the French Open.” The outcome is truly the perfect balance between technical precision and fluid elegance. It promotes the sheer power of the players, the velocity of the ball, all while, at the same time, emphasizing the feminine qualities of the women in the most visually eloquent way.

Barricade SS15: ssbarricade3 by FIELD.IO

ghou-lookingoutwards-10

Landscape Abbreviated

This installation is a mechanic garden that forms a kinetic maze including modular pieces and rotating planters. the planters are made up with moss collected from the sides of buildings. The artist, Nova Jiang, wanted to create a piece that makes the space and time dynamics unpredictable. The planters are controlled by a computer software that generates new maze patterns based on mathematics, making the audience experience the space in different ways as they walk through it to interact with the piece.

This piece is amazing as it touches on not only technology but also art, 3D installation, and architectural landscape design. I find it very intriguing in the way she organizes space that engages the audience using a computer algorithm.

Nova Jiang is a Chinese artist based in Los Angeles from Auckland, New Zealand. She creates immersive, open-systems in her art work that encourages creative participation from her audience. She obtained her MFA in Media Art from UCLA.

 

yunzhous-LookingOutward-09

Post: Isabella Ouyang, Looking Outwards 06

For looking outward 09, I chose Takashi Murakami’s artwork because his work shows me good art doesn’t need too much complexity. When I think about computer-generated art I always think of complicated shapes, colors, visual effect, etc. However, as Isabella says in her post: “after scaling, coloring, placing “randomly”, it can create a sense of depth out of the superflat drawing”, even simple single prototype (the flower) can make appealing effect.

Also, the “randomness” used in the art is not completely random. Takashi Murakami must have constrained the size of the flowers, saturation of the color and composition deliberately. For example, there are always some small to medium sized white flower in between colorful flowers to balance out the various color and create harmony. I think that’s very important.

(Takashi Murakami, Flowers, flowers, flowers, 2010)

 

yunzhous-project-09

sketch

var dx = 2;
var dy = 2;
var dx1 = 2;
var dy1 = 2;
var dx2 = 2;
var dy2 = 2;
var dx3 = 2;
var dy3 = 2;
var dx4 = 2;
var dy4 = 2;
var px1;
var py1;
var py2;
var px2;
var py3;
var px3;
var py4;
var px4;
var py5;
var px5;
var py6;
var px6;
var py7;
var px7;
var py8;
var px8;

function preload(){
    var portraitURL = "https://i.imgur.com/voTtRT8.jpg";
    underlyingImage = loadImage(portraitURL);//load image
}
function setup() {
    createCanvas(480, 480);
    background(220);
    underlyingImage.loadPixels();
    frameRate(20);
}

function draw() {

    //draw balls in eight directions
    makeBall1();
    makeBall2();
    makeBall3();
    makeBall4();
    makeBall5();
    makeBall6();
    makeBall7();
    makeBall8();
}

function mousePressed() {
    //update the loaction to draw balls
    px1 = mouseX;
    py1 = mouseY;
    px2 = mouseX;
    py2 = mouseY;
    px3 = mouseX;
    py3 = mouseY;
    px4 = mouseX;
    py4 = mouseY;
    px5 = mouseX;
    py5 = mouseY;
    px6 = mouseX;
    py6 = mouseY;
    px7 = mouseX;
    py7 = mouseY;
    px8 = mouseX;
    py8 = mouseY;

}

function makeBall1(){

    var ix = constrain(px1, 0, width-1);
    var iy = constrain(py1, 0, height-1);
    var theColorAtLocationXY = underlyingImage.get(ix, iy);//get the color at that pixel
    //keeping drawing balls along its motion
    px1 += dx1;
    py1 += dy1;
    noStroke();
    fill(theColorAtLocationXY);
    ellipse(px1, py1, 6, 6);
    if (px1 >= width || px1 <= 0) {//bounces off right and left
        dx1 = -dx1;
    }  
    if (py1 >= height || py1 <= 0) {//bounces off top and bottom
        dy1 = -dy1;        
    } 
}

function makeBall2(){
    var ix = constrain(px2, 0, width-1);
    var iy = constrain(py2, 0, height-1);
    var theColorAtLocationXY = underlyingImage.get(ix, iy);
    px2 -= dx2;
    py2 -= dy2;
    noStroke();
    fill(theColorAtLocationXY);
    ellipse(px2, py2, 6, 6);
    if (px2 >= width || px2 <= 0) {//bounces off right and left
        dx2 = -dx2;
    }  
    if (py2 >= height || py2 <= 0) {//bounces off top and bottom
        dy2 = -dy2;        
    } 
}

function makeBall3(){
    var ix = constrain(px3, 0, width-1);
    var iy = constrain(py3, 0, height-1);
    var theColorAtLocationXY = underlyingImage.get(ix, iy);
    px3 += dx3;
    py3 -= dy3;
    noStroke();
    fill(theColorAtLocationXY);
    ellipse(px3, py3, 6, 6);
    if (px3 >= width || px3 <= 0) {//bounces off right and left
        dx3 = -dx3;
    }  
    if (py3 >= height || py3 <= 0) {//bounces off top and bottom
        dy3 = -dy3;        
    } 
}

function makeBall4(){
    var ix = constrain(px4, 0, width-1);
    var iy = constrain(py4, 0, height-1);
    var theColorAtLocationXY = underlyingImage.get(ix, iy);
    px4 -= dx4;
    py4 += dy4;
    noStroke();
    fill(theColorAtLocationXY);
    ellipse(px4, py4, 6, 6);
    if (px4 >= width || px4 <= 0) {//bounces off right and left
        dx4 = -dx4;
    }  
    if (py4 >= height || py4 <= 0) {//bounces off top and bottom
        dy4 = -dy4;        
    } 
}

function makeBall5(){
    var ix = constrain(px5, 0, width-1);
    var iy = constrain(py5, 0, height-1);
    var theColorAtLocationXY = underlyingImage.get(ix, iy);
    px5 += dx;
    noStroke();
    fill(theColorAtLocationXY);
    ellipse(px5, py5, 6, 6);
}

function makeBall6(){
    var ix = constrain(px6, 0, width-1);
    var iy = constrain(py6, 0, height-1);
    var theColorAtLocationXY = underlyingImage.get(ix, iy);
    px6 -= dx;
    noStroke();
    fill(theColorAtLocationXY);
    ellipse(px6, py6, 6, 6);
}

function makeBall7(){
    var ix = constrain(px7, 0, width-1);
    var iy = constrain(py7, 0, height-1);
    var theColorAtLocationXY = underlyingImage.get(ix, iy);
    py7 -= dy;
    noStroke();
    fill(theColorAtLocationXY);
    ellipse(px7, py7, 6, 6);
}

function makeBall8(){
    var ix = constrain(px8, 0, width-1);
    var iy = constrain(py8, 0, height-1);
    var theColorAtLocationXY = underlyingImage.get(ix, iy);
    py8 += dy;
    noStroke();
    fill(theColorAtLocationXY);
    ellipse(px8, py8, 6, 6);
}

For this project, I wanted to control the motion of the paint brush(where the points go). I thought of the motion of fireworks and decided to go with that. A firework would be made each time the user clicks on the screen. To make the drawing process easier, I made the balls bounce off the four edges of the canvas.

NatalieKS-LookingOutwards-10

This is a video of the process of creating NEUROTiQ.

~~~

NEUROTiQ is a “brain animating” headpiece created by SENSOREE and designed by Kristin Neidlinger (augmented fashion designer and founder of SENSOREE). This headpiece is a knit fabric structure that is embedded with 3D printed neuron brain sensors (essentially EEG sensors), and uses those sensors to display the state of the brain through colored lights. Each of the colors represent a different emotion, and they are displayed in tandem with the brain waves of the wearer. This design premiered NYFW in 2014 at the 3D Print Show. This project is especially cool because it comes futuristic wearable fashion with technology, integrating the two seamlessly to create a beautiful piece of art. No only does it combine fashion with computer science, but also with cognitive psychology and human emotion. It’s a really unique piece, and presents a really exciting direction for future combinations of technology and fashion.

The designer, Kristin Niedlinger, is a future concepts designer. She has a background in dance, new media, and in physical therapy as a Dance Medicine specialist, and studied at California College of the Arts. She created SENSOREE as Therapeutic Biomedia, to create wearable pieces to augment “Sensory Processing Disorder.” By taking human experiences of this disorder and combing technology and fashion, she highlights a state of mind not usually seen in mainstream media.

NatalieKS-Project-09

sketchnat

//Natalie Schmidt
//nkschmid@andrew.cmu.edu
//Section D
//Project-09

var backgroundImage;

//preload the underlying image
function preload() {
    var Natalie = ["https://i.imgur.com/psHZ5r9.jpg?1"];
    backgroundImage = loadImage(Natalie);
}

function setup() {
    createCanvas(480, 480);
    background(246, 234, 188);
    //load the pixels of the image
    backgroundImage.loadPixels();
    frameRate(15);
}

function draw() {
//based off of example code
    var px = random(width);
    var py = random(height);
    var ix = constrain(floor(px), 0, width - 1);
    var iy = constrain(floor(py), 0, height - 1);
    //vary the transparecny based on mouseX position
    var transparency = map(mouseX, width/3, width - width/3, 40, 70);
    //egt the color of the pixels, and make them semi-transparent
    var imageColor = [red(backgroundImage.get(ix, iy)),
        green(backgroundImage.get(ix, iy)),
        blue(backgroundImage.get(ix, iy)), transparency];
//draw the suns
    noStroke();
    fill(imageColor);
    sun(px, py);
}

function sun(x, y) {
    ellipseMode(CENTER);
    ellipse(x, y, 15, 15);
    // bottom middle
    triangle(x - 3, y + 15/2 + 2, x, y + 15/2 + 5,
        x + 3, y + 15/2 + 2);
    //top middle
    triangle(x - 3, y - 15/2 - 2, x , y - 15/2 - 5,
        x + 3, y - 15/2 - 2);
    //left middle
    triangle(x - 15/2 - 2, y - 3, x - 15/2 - 5, y,
        x - 15/2 - 2, y + 3);
    //right middle
    triangle(x + 15/2 + 2, y - 3, x + 15/2 + 5, y,
        x + 15/2 + 2, y + 3);
}

Since the original photo had a lot of sunlight and light glares in it, I wanted to use a sun to help draw the image. In order to give it a little bit more dimension, I varied the transparency of the sun depending on the position of the mouse. I feel like the varying transparency also added a really nice softness ad warmth to the image, just like golden hour sunlight. I really like pointillism as an art style, so it was fun to try and re-create it for a self-portrait.

The Process:


Here’s the original: