Theresa – [OLD SEMESTER] 15-104 • Introduction to Computing for Creative Practice

Looking Outwards 11

Societal Impacts of Digital Art

ImageRoulette, an Artificial Intelligence device for generating labels, has been controversial due to its racial bias. Image Roulette is a classification tool that generates tags or labels based on an image of a person. These tags usually focus on occupation or suggested family roles. However, when several black tried this device out, they found that out of all 2500 tags, they were only labeled as “black”. When photos were varied, the results were the same and there was no further effort made by the software to classify other aspects of a black person’s photo.

Kate Crawford and Trevor Paglen, developers of ImageRoulette, claim that this is exactly what they hope to represent. They believe that they have proved that Artificial Intelligence is also subject to human bias and racism and that these topics will continue to follow us into the future. This project acted more like an art piece than a usable program; as of September 27th, 2019, it has been taken off the internet.

https://www.smithsonianmag.com/smart-news/art-project-exposed-racial-biases-artificial-intelligence-system-180973207/

Looking Outwards 09

Vera-Maria Glahn

Vera-Maria Glahn, manager of FIELD, a studio focused on the development of art and technology represented in innovative formats. The project IBM is especially interesting to me because it is a graphical system that helps one visualize music with dynamic and expressive shapes. Different graphical elements represent different instruments, some including melody, drums, bass, etc.

These shapes are both shaped and behave in a way that is representative of the music and how the instruments interact. This project is almost like a visual music piece or a personification of the instruments. The forms of these instruments were derived through many iterations, including technical mappings to free and organic forms. I think this type of project is extremely captivating because of this process. Through the creative process, the team learned not only how to create expressive art, but also engineered their own unique set of tools and a whole new set of opportunities for creativity.

https://field.io/work/ibm-think-2020

Looking Outwards 08

Eyeo 2018 – Jane Friedhoff

Jane Friedhoff is an intellectual researcher and game developer. She focuses on exploring new mediums and creating new and usual relationships between people.She creates power fantasy games that give power to those who are not powerful. All her games give power to groups that were not typically powerful in power fantasies. Her inspiration came from the era of riot girl and riot girl games which use rules to and mechanics to value what the rest of the world doesn’t. Jane focuses on creating a desired world and internal catharsis or emotional experience rather than education.

She presents in a very engaging and captivating way; she shows her games as images and videos of gameplay while she describes her concepts. Her presentation was interesting to me because after hearing her concept, her games had a new meaning and connected in a storyline that made a lot of sense.

https://janefriedhoff.com/

Looking Outwards 07

Wind Map.

I find this project extremely intriguing because of the many uses it provides that even the creators themselves have not anticipated. The Wind Map, created by Fernanda Viégas and Martin Wattenberg, shows real time wind data that comes from the National Digital Forecast Database. The technique includes using “comet-like trails to show motion”, and is derived from Edmund Halley in 1686. The project itself is entirely implemented in HTML and JavaScript.

The creators intended this project to be an emotional approach and artistic exploration that shows people where and when hurricanes and wind storms happen. I think it is fascinating that such a beautifully crafted project is constantly updating so people can relate and send hopes to areas with dangerous wind activity. The aesthetics of this project are extremely captivating: during times when the wind is calm, the make also looks serene and meditative. However, when there are severe hurricanes, large white strokes illustrate very scary movement that resembles lightning and chaos.

Furthermore, I am more fascinated that people have found unique ways to utilize this map. For example, bird watchers have used it to examine bird migration and cyclist have used it to plan for their trips. The use of a project like this can vary from the research level (ex. Architects studying site conditions), to a local or personal level (ex. Planning for a family trip). This is extremely captivating for me.

Fernanda Viégas

Project 06

Abstract Clock

For my clock, I attempted to represent time using the method of burning candles. As we progress into the hour, the candle will become shorter and shorter until the 59th minute is reached. Then, the candle will reset to the original height. The light stripes in the background represent the hour of day on a 24-hour basis.

sketch

// Theresa Ye
// Section E
// thye@andrew.cmu.edu
// Project-06

var x = [16,16,8,12,14,15,16,16,24,28,16,16];
var y = [0,0,-8,-24,-16,-12,-24,-32,-20,-8,0,0];

function setup() {
    createCanvas(400, 400);
    frameRate(7);
}

function draw() {
    background(179,217,217);

    // make background stripes (light stripes = hour)
    strokeWeight(10);
    stroke(102,179,179);
    for (var i = 1; i < hour(); i++) {
        line(0,i*height/hour(),width,i*height/hour());
    }

    translate(width/2 - 16, 400 - 16);

    //make candle :> (candle burning = minutes)
    fill('yellow');
    stroke(0);
    strokeWeight(2);
    rect(6,0,20,-300 + 5*minute()+ 3)
    ellipse(16,-300 + 5*minute() + 3,20,10);

    //make flame :>
    var npoints = x.length;
    fill('pink');
    beginShape();
    for (var i = 0; i < 12; i++) {
        curveVertex(x[i] + random(-3,3),-300 + 5*minute() + y[i] + random(-3,3));
    }
    endShape(CLOSE);
}

Looking Outwards 06

Randomness.

I find the architect, Michael Hansmeyer’s work to be especially interesting. Hansmeyer is an architect who creates generative design through what he calls “happy accidents” that result from randomness. He uses computer algorithms to generate and fabricate architectural forms that are then 3d-printed. He believes that the combination of randomness, computation, and fabrication allows for inventive ways to convey space and sensations.

“Architecture should surprise, excite and irritate”. The complexity of modern architecture does not long for a meticulous drawing by hand, but rather an abstract, open-minded, computational approach. Hansmeyer’s works are all extremely fine and beautiful, with new and unique objects and ways of assembly. Structures, surfaces, and interactions between them are highly detailed and create extreme visual stimulation.

Project 05

Wallpaper Art – Floral pattern

sketch

// Theresa Ye
// Section E
// thye@andrew.cmu.edu
// Project-05

function setup() {
    createCanvas(400, 600);
    background(215,200,204);
}

function draw() {
     for (var x = 0; x < 450; x += 25) {
        for (var y = 0; y < 650; y += 30) {
            drawLeavesSmall(x,y);
        }
    }
    for (x = 25; x < 390; x += 50) {
        for (y = 25; y < 600; y += 60) {
            stroke(215,200,204)
            fill(176,142,149);
            ellipse(x,y,45)
        }
    }

    for (x = 25; x < 390; x += 50) {
        for (y = 25; y < 600; y += 60) {
            drawLeaves(x,y);
            drawFlower(x,y);
        }
    }
}

function drawFlower (x,y) {
    push();
    translate(x,y);
    scale(0.5)
    fill(188,164,170);
    stroke(215,200,204);
    strokeWeight(0.5);
    beginShape();
    curveVertex(0,0);
    curveVertex(0,0);
    curveVertex(-10,-16);
    curveVertex(-15,-20);
    curveVertex(0,-30);
    curveVertex(25,-24);
    curveVertex(30,-20);
    curveVertex(28,-10);
    curveVertex(0,0);
    curveVertex(0,0);
    endShape();
    fill(161,127,136);
    ellipse(4,-10,18,15);
    fill(188,164,170);
    rotate(radians(120));
    beginShape();
    curveVertex(0,0);
    curveVertex(0,0);
    curveVertex(-10,-16);
    curveVertex(-15,-20);
    curveVertex(0,-30);
    curveVertex(25,-24);
    curveVertex(30,-20);
    curveVertex(28,-10);
    curveVertex(0,0);
    curveVertex(0,0);
    endShape();
    fill(161,127,136);
    ellipse(4,-10,18,15);
    fill(188,164,170);
    rotate(radians(120));
    beginShape();
    curveVertex(0,0);
    curveVertex(0,0);
    curveVertex(-10,-16);
    curveVertex(-15,-20);
    curveVertex(0,-30);
    curveVertex(25,-24);
    curveVertex(30,-20);
    curveVertex(28,-10);
    curveVertex(0,0);
    curveVertex(0,0);
    endShape();
    fill(161,127,136);
    ellipse(4,-10,18,15);
    fill(255);
    stroke(255);
    ellipse(0,0,10);
    pop();
}

function drawLeaves(x,y) {
    push();
    translate(x,y);
    scale(0.5);
    stroke(215,200,204)
    fill(176,142,149);
    ellipse(0,0,45)
    fill(141,99,110);
    beginShape();
    curveVertex(0,0);
    curveVertex(0,0);
    curveVertex(-2,-35);
    curveVertex(-16,-50);
    curveVertex(-30, -55);
    curveVertex(-50,-60);
    curveVertex(-50,-60);
    curveVertex(-40,-28);
    curveVertex(-20,-8);
    curveVertex(0,0);
    curveVertex(0,0);
    endShape();
    rotate(radians(90));
    beginShape();
    curveVertex(0,0);
    curveVertex(0,0);
    curveVertex(-2,-35);
    curveVertex(-16,-50);
    curveVertex(-30, -55);
    curveVertex(-50,-60);
    curveVertex(-50,-60);
    curveVertex(-40,-28);
    curveVertex(-20,-8);
    curveVertex(0,0);
    curveVertex(0,0);
    endShape();
    rotate(radians(145));
    beginShape();
    curveVertex(0,0);
    curveVertex(0,0);
    curveVertex(-2,-35);
    curveVertex(-16,-50);
    curveVertex(-30, -55);
    curveVertex(-50,-60);
    curveVertex(-50,-60);
    curveVertex(-40,-28);
    curveVertex(-20,-8);
    curveVertex(0,0);
    curveVertex(0,0);
    endShape();
    pop();
}

function drawLeavesSmall(x,y) {
    push();
    translate(x,y);
    scale(0.25);
    stroke(215,200,204)
    fill(239,233,235);
    beginShape();
    curveVertex(0,0);
    curveVertex(0,0);
    curveVertex(-2,-35);
    curveVertex(-16,-50);
    curveVertex(-30, -55);
    curveVertex(-50,-60);
    curveVertex(-50,-60);
    curveVertex(-40,-28);
    curveVertex(-20,-8);
    curveVertex(0,0);
    curveVertex(0,0);
    endShape();
    rotate(radians(90));
    beginShape();
    curveVertex(0,0);
    curveVertex(0,0);
    curveVertex(-2,-35);
    curveVertex(-16,-50);
    curveVertex(-30, -55);
    curveVertex(-50,-60);
    curveVertex(-50,-60);
    curveVertex(-40,-28);
    curveVertex(-20,-8);
    curveVertex(0,0);
    curveVertex(0,0);
    endShape();
    rotate(radians(145));
    beginShape();
    curveVertex(0,0);
    curveVertex(0,0);
    curveVertex(-2,-35);
    curveVertex(-16,-50);
    curveVertex(-30, -55);
    curveVertex(-50,-60);
    curveVertex(-50,-60);
    curveVertex(-40,-28);
    curveVertex(-20,-8);
    curveVertex(0,0);
    curveVertex(0,0);
    endShape();
    pop();
}

Looking Outwards -05

3d Computer Graphics

An artist in this field that I admire a lot is Omar Aqil. I first got to know him from his series of 3D recreations of famous Picasso paintings. Omar uses computer-generated imagery to portray three-dimensional aspects of two-dimensional drawings and represent them as renderings or animation. His works are very representative of the original paintings but with an almost cute twist because of the roundness of the three dimensional shapes he uses. I like these projects so much because they just add an extra depth to these familiar paintings and make them fun and interesting. Other than his mimicry series, Omar also has other series of portraits, products, and other sculptures that are dynamic in colour and depth. His renderings often incorporate organic aesthetic elements that contrast the “tech” feel of the piece, making the image look unreal and tangible at the same time.

Omar Aqil

Project 4

String Art!

sketch

var numlines =18;
var dx = (240/2)/numlines;
var dy = (240/2)/numlines;

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

function draw() {
    strokeWeight(0.5);
    var x1 = 30;
    var y1 = 200;
    var x2 = 150;
    var y2 = 200;
    var r = 255;
    var g = 192;
    var b = 203;
    line(30,200,270,200);
    line(150,80,150,320);
    for (var i = 0; i <= numlines; i += 1) {
        r -= i*3;
        g -= i*10;
        b -= i*6;
        stroke(r,g,b);
        line(x1,y1,x2,y2);
        x1 += dx;
        y2 -= dy;
    }
    x1 = 270;
    y1 = 200;
    x2 = 150;
    y2 = 200;
    var r = 255;
    var g = 192;
    var b = 203;
    for (var i = 0; i <= numlines; i += 1) {
        r -= i*3;
        g -= i*10;
        b -= i*6;
        stroke(r,g,b);
        line(x1,y1,x2,y2);
        x1 -= dx;
        y2 -= dy;
    }
    x1 = 30;
    y1 = 200;
    x2 = 150;
    y2 = 200;
    var r = 255;
    var g = 192;
    var b = 203;
    for (var i = 0; i <= numlines; i += 1) {
        r -= i*3;
        g -= i*10;
        b -= i*6;
        stroke(r,g,b);
        line(x1,y1,x2,y2);
        x1 += dx;
        y2 += dy;
    }
    x1 = 270;
    y1 = 200;
    x2 = 150;
    y2 = 200;
    var r = 255;
    var g = 192;
    var b = 203;
    for (var i = 0; i <= numlines; i += 1) {
        r -= i*3;
        g -= i*10;
        b -= i*6;
        stroke(r,g,b);
        line(x1,y1,x2,y2);
        x1 -= dx;
        y2 += dy;
    }
    translate(0,200)
    var x1 = 30;
    var y1 = 200;
    var x2 = 150;
    var y2 = 200;
    var r = 255;
    var g = 192;
    var b = 203;
    line(30,200,270,200);
    line(150,80,150,320);
    for (var i = 0; i <= numlines; i += 1) {
        r -= i*3;
        g -= i*10;
        b -= i*6;
        stroke(r,g,b);
        line(x1,y1,x2,y2);
        x1 += dx;
        y2 -= dy;
    }
    x1 = 270;
    y1 = 200;
    x2 = 150;
    y2 = 200;
    var r = 255;
    var g = 192;
    var b = 203;
    for (var i = 0; i <= numlines; i += 1) {
        r -= i*3;
        g -= i*10;
        b -= i*6;
        stroke(r,g,b);
        line(x1,y1,x2,y2);
        x1 -= dx;
        y2 -= dy;
    }
    x1 = 30;
    y1 = 200;
    x2 = 150;
    y2 = 200;
    var r = 255;
    var g = 192;
    var b = 203;
    for (var i = 0; i <= numlines; i += 1) {
        r -= i*3;
        g -= i*10;
        b -= i*6;
        stroke(r,g,b);
        line(x1,y1,x2,y2);
        x1 += dx;
        y2 += dy;
    }
    x1 = 270;
    y1 = 200;
    x2 = 150;
    y2 = 200;
    var r = 255;
    var g = 192;
    var b = 203;
    for (var i = 0; i <= numlines; i += 1) {
        r -= i*3;
        g -= i*10;
        b -= i*6;
        stroke(r,g,b);
        line(x1,y1,x2,y2);
        x1 -= dx;
        y2 += dy;
    }
    translate(0,-400)
    var x1 = 30;
    var y1 = 200;
    var x2 = 150;
    var y2 = 200;
    var r = 255;
    var g = 192;
    var b = 203;
    line(30,200,270,200);
    line(150,80,150,320);
    for (var i = 0; i <= numlines; i += 1) {
        r -= i*3;
        g -= i*10;
        b -= i*6;
        stroke(r,g,b);
        line(x1,y1,x2,y2);
        x1 += dx;
        y2 -= dy;
    }
    x1 = 270;
    y1 = 200;
    x2 = 150;
    y2 = 200;
    var r = 255;
    var g = 192;
    var b = 203;
    for (var i = 0; i <= numlines; i += 1) {
        r -= i*3;
        g -= i*10;
        b -= i*6;
        stroke(r,g,b);
        line(x1,y1,x2,y2);
        x1 -= dx;
        y2 -= dy;
    }
    x1 = 30;
    y1 = 200;
    x2 = 150;
    y2 = 200;
    var r = 255;
    var g = 192;
    var b = 203;
    for (var i = 0; i <= numlines; i += 1) {
        r -= i*3;
        g -= i*10;
        b -= i*6;
        stroke(r,g,b);
        line(x1,y1,x2,y2);
        x1 += dx;
        y2 += dy;
    }
    x1 = 270;
    y1 = 200;
    x2 = 150;
    y2 = 200;
    var r = 255;
    var g = 192;
    var b = 203;
    for (var i = 0; i <= numlines; i += 1) {
        r -= i*3;
        g -= i*10;
        b -= i*6;
        stroke(r,g,b);
        line(x1,y1,x2,y2);
        x1 -= dx;
        y2 += dy;
    }
}

Looking Outwards – 04

Zimoun – Sound Sculptures

Zimoun’s sound sculptures revolve around using industrial and everyday materials such as cardboard and manipulates them in a mechanical way that when in motion, creates immersive and beautical sounds. His sculptures are typically installation pieces that spin, turn, oscillate ect, to create a depth in the sounds. I admire his works especially because of the materials he uses; Zimoun manages to discover the hidden sounds of everyday objects and exhibits them in a way that produces almost a spatial experience, derived from a series of the same object.

I believe that the motion of the objects are generated by programming the oscillations of the corresponding string or wire, which leads to the oscillation of the object.

The artist, Zimoun has always been interested in both sound art and visual art, which has helped him in his projects; his sound sculptures are both visually and phonetically aesthetic and theses components work together to create the immersive experience.