October 2018 – Page 15 – [OLD FALL 2018] 15-104 • Introduction to Computing for Creative Practice

Looking Outwards 09 – John Legelis

While browsing previous week’s looking outwards responses, I stumbled upon Jessica’s article from Week 7 on data visualizations. She chose to write about a New York Times Graph that displays how different demographics spend their time throughout the day.

A still photo of the interactive New York Times graph representing how time is spent by different demographics

I agree that the creator’s artistic touch was manifested in the composition and intrinsic complexity of the data being represented. Though the graph doesn’t look extraordinarily eye catching, the data it represents is fascinating and the way it has been organized makes it intuitive to understand. It is difficult to have the results displayed in a data visualization obvious at first glance. As more facets are added to the data, the more information and variables must be squished into one visual, and things can get messy. The creator of this visualization elegantly combined a huge amount of data in a way that can be understood immediately.

Erin Fuller Project-09-Portrait

//Erin Fuller
//SectionA
//efuller@andrew.cmu.edu
//Project 09

var img;

function preload() {
    img = loadImage("https://i.imgur.com/4QKnX6El.jpg"); //imgur image link
}

function setup() {
    createCanvas(480, 480);
    noStroke();
    background(0);
    img.loadPixels();
}

function draw() {
    var imgW = img.width; 
    var imgH = img.height;

    for (var i = 0; i < imgW; i++) { //searches x pixels
        for (var j = 0; j < imgH; j++){ //searches y pixels
            var c = img.get(i, j); //gets colors for all pixels
            var val = brightness(c); //gets brightness from colors
            var s = map(val, 0, 255, 0, 20); //maps brightness to circle size
            
            var pix = img.get(i, j); // gets color at each pixel
            fill(pix); //colors pixels
            
            if (i%12 === 0 & j%12 === 0) {
                ellipse(i, j, s, s); //draws ellipse at every 12th pixel
            } 
        }
    }
}

I used a picture of my friend Mae (original photo shown below) as a base for my computational portrait. To create the resulting computational image, I pointillized the photo by drawing the circles every 12 pixels (in both x and y-direction). Each circle uses the color of the pixel at the center of each ellipse, but the size is determined by the brightness of the pixel. Therefore, as you can see she is wearing a black shirt, so those circles are much smaller than her face.

With a better photo, a more frontal headshot photo, I think the generated image may have a more successful result.

Julie Choi – Looking Outwards – 09

This project was shed light on Sophia Kim’s Looking Outwards for Week 3.

Hyper-Toroidal Deep Surface, Sean Ahlquist, Prof. Achim Menges, Boyan Mihaylov, Viktoriya Nicolova, from seminar Deep Surface Morphologies.

This is one of the many pieces of artworks by Sean Ahlquist who is an expert architecture professor within the fields of interactive systems and computational media at the University of Michigan. This initially caught my eyes because of the intricate details of form within the art piece. I learned that this piece was created through a Java-based framework to represent multiple membrane systems that represent the delicacy in our human body. I also enjoyed Sophia’s personal view on this project how it reminded her of knowledge of DNA molecules that she learned in high school. I would have also really enjoyed her take on analyzing the specific process of this sculpture and what the artist’s intentions were when developing the project.

Judy Li-Project-09-Portrait

judyli: Portrait Project 09

/*
Judy Li
Section A
judyli@andrew.cmu.edu
Project-09
*/

var friendsImage;

function preload() {
    var myImageURL = "https://i.imgur.com/1nenA0cl.jpg";
    friendsImage = loadImage(myImageURL);
}

function setup() {
    createCanvas(480, 480);
    background(0);
    friendsImage.loadPixels();
    frameRate(100);
}

function draw() {
    var px = random(width);
    var py = random(height);
    var ix = constrain(floor(px), 0, width-1);
    var iy = constrain(floor(py), 0, height-1);
    var theColorAtLocationXY = friendsImage.get(ix, iy);

    noStroke();
    fill(theColorAtLocationXY);
    push();
    scale(random(.25, 3));
    ellipse(px, py, 6, 6);
    pop();

    noStroke();
    var sizeP = random(5, 10);
    var theColorAtTheMouse = friendsImage.get(mouseX, mouseY);
    fill(theColorAtTheMouse);
    ellipse(mouseX, mouseY, sizeP);
}

For this project, I wanted to create a portrait of my friend that showcases our fun and bubbly excursion in the Nolita area of New York. Because the background is full of color and is very vibrant, I wanted the computational background to resemble that as well. I added in the function of the mouse so that the user and control the parts he/she want to make prominent, such as the background text and the person herself!

Computationally made with the use of a mouse

Looking Outwards – 09

A digitally designed, 3D printed human carapace, by Fitchwork, threeAsfour, and Stratasys, 2016

For this week, I looked over Veronica Wang’s Looking Outward posts. I found this particular work interesting because I have been fascinated by designers that focus their works on digital fabrication and computation.

Veronica wrote in her post:

I am inspired by Travis Fitch’s art pieces that are generated from minimal surface geometries. I was introduced to his work by one of his former thesis advisors on minimal surface design and the process. He used Rhino modeling as well as a custom Grasshopper script to create a minimal surface module, with inputs being curves or meshes. I have also tried playing with similar scripts and using components such as ‘mesh relaxation’, ‘exoskeleton’, and ‘iso surface’. His wearable pieces were taking 3D printed rigid modules and connecting them to create a flexible piece of ‘fabric’. There are also many different materials in his products, including porcelain, metal, and nylon.

I agree with Veronica on how this work can inspire others. I feel that designing clothes or a fashion line based on a digitally fabricated medium is still relatively new and I believe that pursuing this sort of work can open up new doors towards the fashion/costume design scene. A lot of my friends majoring in art also told me how great it would be if some of us could trade skills so that they could be able to do more unique projects and I agreed with them. With the introduction of computational software, other artists/designers can incorporate that into their work to create something new and the outcomes could be amazing!

Connor McGaffin – Looking Outwards – 09

This post is in response to Mimi Jiao’s looking outwards post from week three, which can be found here.

Andrew Kudless is an architect and professor who leads Matsys, a studio based in Oakland, California which does work at the intersection of form, growth, and material systems. Material systems, the central motif of the studio, refers to the interactions of a material’s biologic, geologic, and synthetic qualities.

P_Wall (2013) FRAC Centre, Orleans, France concrete cast into preformed panels secured on steel frame

I was drawn to the piece “P_Wall” in for the same reasons Mimi was. I feel a personal connection to the piece and a desire to interact with it through touch.

Mimi proposed the idea of an extension of this piece through the installation of a more interactive iteration. I am interested in this idea because of the indirect dialogue the piece would conduct amongst those who have engaged with the form.

After further research into the fabrication process for “P_Wall” I have found that although Matsys renders a the panel forms digitally, they also embrace the inaccuracies in how the concrete slurry settles into approximate equilibrium.

view of concrete settling into the fabric stretched over a wooden frame, manipulated by wooden dowels, to create a panel of P_Wall (source)

Mimi touched upon the connotations in the final organic form resembling that of a tree. I agree that the wall feels very natural, although I initially felt that the wall looked like a collection of torsos smoothly cropped out of context. The folds resemble that of a sitting or turning person.

This impression is in sharp contrast to the inflation test Matsys used in modeling a sister piece to P_Wall, titled Sevenstar (2011). The initial form of this piece reminds me of a tessellation of lounge cushions, inviting me to sit. As the render progresses, it comes to live and begins to warp in a breathing motion. The rendering process is mesmerizingly beautiful, placing me as a spectator to an abstract materialization of life.

source

Eliza Pratt – Project 09

sketch

/*
Eliza Pratt
Section E
elpratt@andrew.cmu.edu
Project - 09
*/

var pic;
var dev = 50; //starting deviation for coordinate positon

//array of letters to be drawn
var letter = ["A", "B", "C", "D", "E", "F", "G", "H", "I", 
                "J", "K", "L", "M", "N", "O", "P",  "Q", 
                "R", "S", "T", "U", "V", "W", "X", "Y", "Z"];

//loads image
function preload() {
    var friends = "https://i.imgur.com/7k2A67W.jpg";
    pic = loadImage(friends);
}

function setup() {
    createCanvas(360, 480);
    background(235, 184, 16);
    imageMode(CENTER);
    pic.loadPixels();

}

function draw() {

    //selects a random size
    var r = random(6, 10);

    //selects a random angle 
    var angle = random(360);

    //incrementally increases the deviation of coordinates 
    //after a certain number of frames
    if (frameCount > 600) dev = 100;
    else if (frameCount > 1000) dev = 240;

    //randomly assigns position
    var px = randomGaussian(width / 2, dev);
    var py = randomGaussian(height / 2, dev);

    //contrains random values to the canvas
    var picX = constrain(floor(px), 0, width);
    var picY = constrain(floor(py), 0, height);

    //retrieves color from pixel at random coordinate
    var col = pic.get(picX, picY);


    strokeWeight(2);
    stroke(col);
    noFill();
    textSize(r);

    //retrieves a random index for the letter array
    var i = floor(random(25));

    //draws and rotates letter
    push();
    translate(px, py);
    rotate(radians(angle));
    text(letter[i], 0, 0);
    pop();

}

This project was a lot of fun, and I think really helped me understand more about coding with images! I spent a lot of time experimenting with different ways to project the image – vertical lines, spirals, etc. I decided on letters because I thought it would be cool to have a variety of complex shapes to compose a single image. This is an image of my friend Dani that I took last year.

Rendering:

Emily Zhou –– Portrait

click the pickle to begin.

var img;
var pickle;
var pickleX;
var pickleY;
var runDraw = false;

function preload() {
    img = loadImage("https://i.imgur.com/ZZ3qlai.jpg");
    pickle = loadImage("https://i.imgur.com/EHVwUGX.png");
}

function setup() {
    createCanvas(480, 320);
    imageMode(CENTER);
    strokeWeight(5);
    background(255);
    img.loadPixels();

    pickleX = width / 2;
    pickleY = height / 2;
    image(pickle, pickleX, pickleY);
}

function draw() {
    if (runDraw) {
        var x = floor(random(img.width));
        var y = floor(random(img.height));
        var col = img.get(x, y);
        fill(col, 128);
        text("pickle", x, y);
    }
}

function mousePressed() {
    if (dist(mouseX, mouseY, pickleX, pickleY) < 50) {
        background(255);
        runDraw = true;
    }
}

The original photo shows my friend Sebastian standing in front of the pickle shelf at Giant Eagle. I went off the pickle theme and implemented a pickle button to begin the rendering of the image in text “pickle”. Lot of pickles.

Lan Wei-LookingOutwards-09

The works are shown in the exhibition ‘Textile Morphologies'(2013) showcasing the doctoral work of Sean Ahlquist. And the original post is from Sophia Kim in Section C. I agree with her the impression of molecules and I did more background research after reading her post.

At first, what fascinates me of the project was the designer making use of the inner tension between objects to create forms. I felt the technological as well as the aesthetic thinkings behind the artwork. After further research, I’m even more interested because of the spatial potention of it. What presented in the exhibition was actually prototypes of tactile interfaces and environments for developing motor skills and social interaction in children with autism. I regarded the work as ‘art’ at the first glance but suddenly the scientific thinkings and profund meaning behind unveil before my eyes. I think computational tools play very important roles in the design process in analyzing the relationship between the form and effects on human such as visuality and touchability and also the integration of the forms and other technologies such as projection.

The project

Textile Morphologies

LookingOutwards-03 Sophia Kim-Sec C

Sophia Kim – Looking Outwards 09 – Sec C

Different examples of what the MIT media lab produced using their voxel-based 3D printing. (Created in June of 2018)

Looking at Julie Choi’s Looking Outwards-03, I was instantly drawn to the vibrant, accent colors within the clear, gel-like material. I like to study projects that fuse science with art/design, because with visual representations, the common person is able to appreciate something that is very complex like the human brain. I really appreciate how these pieces were visualized not on a sheet of paper, but rather printed in layers to create 3D forms. I especially like the 3D printed brain, because using various colors, it represents the different elements of the brain like neurons. Also, I believe it addresses the interaction between the right side of the brain, creativity, and the left side of the brain, logic/thought.

https://www.fastcompany.com/90174994/the-gorgeous-future-of-3d-printing