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

Kyle Leve-Project-09-Portrait-Section A

// Kyle Leve
// kleve@andrew.cmu.edu
// Section A
// Project-09-Portrait

var img;

function preload() {
	var myImage = "https://i.imgur.com/lsBIvvW.jpg"; // Variable for image
	img = loadImage(myImage); // Loads image
}

function setup() {
    createCanvas(480, 480);
    background(220);
    img.loadPixels(); // Calls image
    imageMode(CENTER);
    frameRate(500);
}

function draw() {
	var x = constrain(floor(random(width)), 0, width-1); // Randomizes x position of pixels
	var y = constrain(floor(random(height)), 0, height-1); // Randomizes y position of pixels

    noStroke();
	var clr = img.get(x, y); // Gets colors from image for pixels
	fill(clr);
	rect(x, y, 10, 10); // Draws image using rectangles
}

I found this project to be really fun because it allowed me to apply something from my life into my code. The image that is being created is of my friend Sara in hot dog costume while we were taking a trip to target. The one problem I faced was originally the image was too big so only a quarter of the image was being displayed. However, I went back to the image and edited it to a smaller size and that fixed the issue.

Original image

Nearly completed replication

Audrey Zheng – Looking Outwards – 09

Yiran Xuan’s Looking Outwards 08 caught my attention because Yiran wrote about Darius Kazemi, who programs “Meme machines”. As a meme lover myself, I was surprised that there is a formula to be followed in the creation of memes. Memes have always felt so surreal and witty that only people would be able to come up and relate to them because of their shared experiences. I was confused by exactly how ConceptNet works: “ConceptNet, a program that links words with each other by their meaning.”, so I did more research. ConceptNet is a freely-available semantic network, designed to help computers understand the meanings of words that people use.ConceptNet originated from the crowdsourcing project Open Mind Common Sense, which was launched in 1999 at the MIT Media Lab. It has since grown to include knowledge from other crowdsourced resources, expert-created resources, and games with a purpose, according to ConceptNet.io. It makes more sense that using crowdsourced relations some of the Meme machine jokes are funny due to their vague nature that’s often open to interpretation.

Read about Darius Kazemi here.

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.

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!

Jamie Dorst Project 09 Portrait

sketch

/*
Jamie Dorst
jdorst@andrew.cmu.edu
Project 09
Section A
*/

var underlyingImage;

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

function setup() {
    createCanvas(360, 480);
    background(0);
    underlyingImage.loadPixels();
    frameRate(30);
}

function draw() {
    // variables
    // first line coordinates
    var x1 = random(width);
    var y1 = random(height);
    // make line stroke bigger further from the face (slightly above center)
    var distBtwn = dist(width / 2, (height / 2) - 100, x1, y1);
    var sw = map(distBtwn, 0, 350, 2, 10);
    // picture colors
    var ix = constrain(floor(x1), 0, width-1);
    var iy = constrain(floor(y1), 0, height-1);
    var theColorAtLocationXY = underlyingImage.get(ix, iy);
    // second line coordinates
    // make lines shorter closer to the center
    var xy = map(distBtwn, 0, 350, 5, 30);
    var x2 = x1 + xy * random(-2, 2);
    var y2 = y1 + xy * random(-2, 2);
    // randomize stroke caps
    var num = random(2);
    var sCap;

    // assign stroke values
    if (floor(num) === 0) {
        sCap = SQUARE;
    } else if (floor(num) === 1) {
        sCap = ROUND;
    }
    strokeCap(sCap);
    strokeWeight(sw);
    stroke(theColorAtLocationXY);
    // draw lines
    line(x1, y1, x2, y2);
}

For this project, I was inspired by the idea of a painting. I decided to make it draw using lines, and I had it randomly select a stroke cap to emulate even more a random brush stroke. I also made it so that closer to the face, the strokes are shorter and thinner, so that more detail can be achieved. Toward the outside of the canvas, the strokes get longer and thicker. Overall I thought this project was pretty fun to do and try out with different photographs.

A screenshot of the (possible) finished product

Jamie Dorst Looking Outward 09

As I was browsing past Looking Outward posts, this one by Liz Maday about the 9/11 memorial caught my eye. I had no idea that the names on the memorial were organized in such a thoughtful and calculated way. The project was done by Jer Thorp, and he created an algorithm that would cluster names based on adjacency and relationships.

A visualization of the clustering algorithm

Liz mentioned that she thought “this is an amazing example of how a program is able to reflect very human emotions and intentions while also utilizing a precision and complexity that is above human ability,” and I completely agree. I think it’s amazing that we are able to use technology to determine such personal connections, and create something so meaningful. Before seeing this project, I never imagined that something like this was possible–I never thought relationships between humans could be computed in any way.

Curran Zhang- Looking Outwards- 9

For this week’s Looking Outwards, I found an interesting art piece founded by Shirley Chen. Created by Refik Anadol Studio, the project is called “Melted Memories”.

The main concept of the art piece was to use cognitive controls to create an artwork from our memories. By collecting brain waves and extracting the data, abstract and organic pieces of art are created. This method allows people to have a physical representation of something that is intangible. The memory used to create the art piece was to be a piece of memory from childhood. This would allow different users to have a specific piece of art that is distinct.

Depiction of One Memory From an Individual

I agree with Shirley that this art piece is an amazing piece to help illustrate something that is non-tangible. By doing so, the usage of different computational methods can help enhance this field of art expression.

Melting Memories – Drawing neural mechanisms of cognitive control

Kyle Leve-LO-Week-09

A previous report that I looked at that I found interesting was Sara Frankel’s Week 3 Looking Outwards about the first 3D printed violin. As she said, “This project harmonizes the art of code and music together.” I found it amazing that someone was able to play something made by a machine with just as much emotion and expression as a man-made instrument. However, I also noticed some different aspects in the tone of the 3D-printed violin that makes it have its own unique sound. I noticed there were even instances where I thought a guitar was playing! Many different algorithms were put into the fabrication of this instrument, and the machine had to be programmed to act like a human was making the instrument. I find this project very inspirational because it demonstrates the many different mediums of music, and that music can be played in many different fashions.

The world’s first 3D printed violin (from Sara’s Looking Outwards)

Jonathan Liang – Looking Outwards – 09

Coral Cities is a project by Craig Taylor that visualizes cities in a unique way. Cities are usually mapped by their buildings, streets, and popular nodes; however, Taylor wanted to show how liveable a city is. He used raw data (such as crime rate, education, political stability, traffic, etc.) to generate a geo-spatial analysis of cities today, visualized as these coral structures.

This post by fellow architecture student Curran Zhang really stood out to me because of the emphasis in our field for mapping. We have been taught to try to find unique ways to map raw data, and Craig Taylor’s Coral Cities really offers a unique representation that could be interpreted in many different ways.

https://towardsdatascience.com/coral-cities-an-ito-design-lab-concept-c01a3f4a2722