SectionD – Page 12 – [OLD FALL 2019] 15-104 • Introduction to Computing for Creative Practice

Shannon Ha – Project 09 – Portrait

//Shannon Ha
//Section D
//sha2@andrew.cmu.edu
//Project 09 - Variable Face

//pre load my underlying image
var underlyingImage;
var frameSpeed = 15;
function preload() {
    var myImageURL = "https://i.imgur.com/AAXi1mS.jpg";
    underlyingImage = loadImage(myImageURL);
}

function setup() {
    createCanvas(344, 480);
    background(0);
//load the pixels of the image so they can be referenced later
    underlyingImage.loadPixels();
    framespeed = map(mouseX, 10, width, 2, 150);
    frameRate(frameSpeed);
}

function draw() {
//randomly select a pixel on the canvas
    var randomX = random(width); //x-coordinate
    var randomY = random(height); //y-coordinate
    var ix = constrain(floor(randomX), 0, width-1);
    var iy = constrain(floor(randomY), 0, height-1);
//loads the color from the base image so the rectangles coordinate with the colors of the base image
    var theColorAtLocationXY = underlyingImage.get(ix, iy);

//creates rectangles at different sizes.
    noFill();
    stroke(theColorAtLocationXY);
    strokeWeight(random(1,3));
    rect(randomX, randomY, random(5,20), random(5,20));

//creates circles according to position of mouse.
    var theColorAtTheMouse = underlyingImage.get(mouseX, mouseY);
    strokeWeight(1);
    stroke(theColorAtTheMouse);
    ellipse(pmouseX, pmouseY, 15, 15);
}

Nearly finished render (1 – 1:30 minutes)

For this project, I chose a portrait of my sister to recreate and explored how to randomize the dimensions of of a rectangle to create variable portrait. I tested different shapes both filled and unfilled to see which has a better effect for the end result and I realized that the filled shapes some times makes the face look too blurred out so I used stroke instead to retain some texture in the image and to distinguish facial features better. It was a fun project to do because it was interesting to see how different shapes produce different textures and effects on the image.

Lauren Park – Looking Outwards – 09

This project seems very fascinating in ways that animation and software can be used to make very detailed graphics of the respiratory system.

I agree with Danny that this animation is not a literal representation of the system, but that it abstracts from actual biological processes that happen in our bodies. I feel that the artist, Alexey Kashpersky did not have in mind how accurate this representation was, and that maybe it was not as important as the visual appeal of the inside of the respiratory system and to let the audience know how vast and unique our bodies are by using color and different forms interacting.

The zoom in and out effect throughout this piece really added a flow to this whole experience that made the system feel like viewers are being walked through a story. Because of this, I enjoyed what seemed like a virtual tour of the many wonders that take place in our bodies.

This overall experience also makes me curious about the software used to create this animation and has me realize how much this tool can be useful in our creative practice.

Danny Cho – LookingOutwards-5

Lungs in Silico 2019 – Alexey Kashpersky

Lauren Park – Project 09 – Portrait

sketch

//Lauren Park
//Section D
//ljpark@andrew.cmu.edu
//Assignment-09
var selfportrait;

function preload() {
//load image
  var imageURL = "https://i.imgur.com/Z0Egws0.jpg";
  selfportrait = loadImage(imageURL);
}

function setup() {
  createCanvas(480, 480);
  background(0);
//load pixels at a rate
  frameRate(200);
  selfportrait.loadPixels();  
}

function draw() {
 var px = random(width);
 var py = random(height);
  
 var qx = constrain(floor(px), 0, width);
 var qy = constrain(floor(py), 0, height);
  
 var colorMylocation = selfportrait.get(qx, qy);
 var colorMymouse = selfportrait.get(mouseX, mouseY);
  
//fill and color pixels with text
 strokeWeight(3);
 fill(colorMylocation);
 text("Lauren", px, py);
  
//draw and color ellipse at my mouse location
 fill(colorMymouse);
 noStroke();
 ellipse(pmouseX, pmouseY, 8, 8);
}

For this project, I decided to make a computational self-portrait using my name in text to create and color the image. Adding my name I think adds another personal element that goes along with my self-portrait and I also wanted to incorporate using the mouse to load the pixels, using ellipses, in the picture faster.

Monica Chang – Project – 09 – Portrait

sketch

//Monica Chang
//mjchang@andrew.cmu.edu
//Section D
//Project 09 - Computational Portrait

function preload() {
    var myImageURL = "https://i.imgur.com/3WVgXfE.jpg";
    itMe = loadImage(myImageURL); //uploading my image
}


function setup() {
    createCanvas(360, 480);
    background(0);
    itMe.loadPixels(); //pixelates the image
    frameRate(4000); // rate of generating pixels
}

function draw() {
    var px = random(width);
    var py = random(height);
    var size = random(3, 8);
    var offset = 15;

    var cx = constrain(floor(px), 0, width-1);
    var cy = constrain(floor(py), 0, height-1);
    var imgColor = itMe.get(cx, cy);

    noStroke();
    fill(imgColor);
    ellipse(px, py, size);
    textSize(size);
    textFont("Georgia");
    text("M", px + offset, py);
}

Original Image of myself. Self-Portrait.

I chose to approach this project with a self-portrait.

I think this was one of the easiest but one of the more fun projects we have done this semester. Just like all the other projects, this was very open-ended which allowed me to explore different options comfortably although I struggled to find what else I could do to the image. This also gave me a chance to look at some beautiful photos I had abandoned.

Ian Kaneko – 09 – Portrait

ikaneko Portrait

var img;
var gScale = 0.14; // Scale the image size down
var size = 5; // Size of all the circles and squares

function preload() {
    var portrait = "https://i.imgur.com/xb4QYap.jpg";
    img = loadImage(portrait);
}

function setup() {
    createCanvas(img.width * gScale, img.height * gScale);
    background(255);
    frameRate(60);
    img.loadPixels();

}

function draw() {
    //Draws small circles and squares. The circles are tinted red and the squares are blue

    var cx = random(img.width); 
    var cy = random(img.height);
    var dotColor = img.get(cx, cy);
    var db = brightness(dotColor); // Gets the grayscale value of the pixel

    noStroke();
    fill(db + 150, db + 100, db + 100); // Turns all of the circles a red/brown
    circle(cx * gScale, cy * gScale, size);
    


    var sx = random(img.width);
    var sy = random(img.height);
    var squareColor = img.get(sx, sy);
    var sb = brightness(squareColor);

    fill(sb + 100, sb + 100, sb + 150); // Turns the squares blue
    square(sx * gScale, sy * gScale, size);



    var gx = random((mouseX - 15) / gScale, (mouseX + 15) / gScale); // creates a circle within 30 pixels of the mouse
    var gy = random((mouseY - 15) / gScale, (mouseY + 15) / gScale);
    greenDotColor = img.get(gx, gy);
    var gb = brightness(greenDotColor);

    fill(gb + 100, gb + 150, gb + 100); // Turns these circles green
    circle(gx * gScale, gy * gScale, size);

}

For this project I used a quick picture I took of myself as the base. I played around a bit with what I could do with the colors. Using the brightness feature I basically turned the picture black and white, then added in contrasting colors. Red circles and blue squares will randomly appear to start filling in the picture. Green circles will begin to fill in the picture in an area close to your mouse.

Lanna Lang – Looking Outwards – 11

Addie Wagenknecht’s “Optimization of Parenting, Part 2” // 2012

This project is a robot arm that rocks a baby’s crib when it hears the baby cry or awakes from his/her sleep, simulating a mother’s arm trying to soothe her baby at night. What first drew me to this piece was the fact that it was developed with support by The STUDIO for Creative Inquiry here at CMU while Wagenknecht was doing a residency here. I love the fact that she played with the dichotomy of the baby and its mother but without the intimacy – the exact opposite of how an actual mother would feel towards her newborn. Wagenknecht unraveled the created façade of women and family and the false sense of balance between parenting and career in America.

I think this piece is so effective because the disparity Wagenknecht wanted to convey to her audience is very clear in all the decisions she made to complete this piece. The robotic arm is blatantly industrial, from its structure to its color of factory-like orange to represent the idea of industry – mirroring the precise, reactive nature that parenting demands and suggesting the idea of impossible, flawless perfection that parenting is the opposite from because of human error and learning on the spot.

This project is obviously influenced and inspired by her own experience of being a mother and is critiquing that exact choice. She was also influenced by the observation she had of mothers in society as a whole and the notion of being a mother: she witnessed that mothers were expected to become full-time parents, resulting in female artists losing their creative practice they had spent their entire life building. She wanted to question if the role of the mother could be replaced by technology (as other roles were replaced with – like the vacuum or the refrigerator) without affecting the development of the baby.

Video record of the installation “Optimization of Parenting. Part 2”

Raymond Pai – Looking Outwards – 09

Danny Cho’s Looking Outward 03 looked at Neri Oxman’s ‘Wanderers’. The 2014 project creates very high-quality renderings of computer-generated growth of organic forms. I’m drawn to it because of the unsettling appearance of these forms, which appear infectious and bacterial. I agree with Danny’s assumption that trigonometry is used. More specifically, I understand that realistic video games use extremely high polygon counts and textures, which might explain the high definition of this project. I’m interested in Danny’s suggestion that Cinema 4D was used in this project. If so, it might’ve been a separate plugin that was developed by the artist to manipulate objects in the Cinema 4D software. I relate to Danny’s concern of computational generation not usually appearing very organic, because of the ‘uncanny valley’ of computed organic objects is very unsettling to me. I’m not sure if I’ll ever be okay with computers o

Monica Chang – Looking Outwards – 09

Works Grid

Refik Anadol’s portfolio
http://refikanadol.com/works-grid

For this Looking Outwards post, I was intrigued by one of Kristine Kim’s Looking Outwards post where she looked into the artist, Refik Anadol. Something that really pulls me towards Anadol’s whole portfolio is his ability to create visuals that are able to take the viewers to an alternate universe. Kristine also articulates his ability to play around with the functionalities of that of architectural characteristics which makes sense when his pieces often take the space into account when being presented.

There is one particular piece which Kristine included in her response which was Melting Memories by Anadol which held a concept of materializing memory. It was interesting to see something so fragile and non-tactile like memory was manifested into a visual and perceptive form. With methods like this, Anadol is able to create a new world with digital processed as Kristine also mentions in her response. Anadol’s body of work consists of these ideas of materializing areas/things in the world where one would not really be able to visual or imagine in physical form and he wants to create a path towards a future that connects the digital world with the one that surrounds us already.

Week 9 Looking Outwards

Siwei Xie’s Looking Outwards 06 assignment is about Richter, a German visual artist, who created “4900 Colours: Version II” (2008). The colors used in this series are generated randomly from a palette of 25 colors by a computer program. Xie said: “Creator’s artistic sensibility manifests by how ‘non-random’ the panels look, with some dominated by particular colors which are often placed next to each other. But the whole point of ‘pure’ randomness is that apparent patterns are expected to occur.”

To add on, this reminded me of an interesting thing I learned about how the ‘random’ shuffle function for music is not actually random. When they are actually purely random, people will feel like they can detect patterns in even the smallest coincidences — such as when certain songs or artists come after one another.

To deal with this ‘nonrandom’-feeling randomness, Spotify changed its algorithms to feel more random to humans. Instead of using the Fisher-Yates shuffle, which people complained wasn’t genuinely random, Spotify updated its algorithm to distribute artists and genres more evenly. For example, “if there are four songs by the White Stripes in a playlist … the algorithm will aim to play them at roughly 25% intervals.” I think it’s very interesting how much the human tendency to detect patterns can affect the way we interpret randomness.

Sammie Kim – Project 09 – Portrait

sketch

//Sammie Kim
//Section D
//sammiek@andrew.cmu.edu
//Project 09 - Computational Portrait

var img;
var smallPoint;
var largePoint;
var pointSize;

//preloading image from imgur
function preload() {
    img = loadImage('https://i.imgur.com/yXi77UB.jpg');
}

//setting the speed and size of loading image pixels
function setup() {
    createCanvas(300, 300);
    background(0);
    imageMode(CENTER);
    img.loadPixels();
    frameRate(100);
    noStroke();
    smallPoint = 1;
    largePoint = 10;
}

function draw() {
    var x = floor(random(img.width)); //random x location for ellipse
    var y = floor(random(img.height)); //random y location for ellipse
    var imageColor = img.get(x, y); //picking the x, y coordinates from the image
    fill(imageColor); //fill the ellipses with the color from image
    //let the points get smaller toward the bottom of canvas that has more details
    var pointSize = map(y, 0, height, largePoint, smallPoint);
    ellipse(x, y, pointSize, pointSize);
}

This project was entertaining as I was able to recreate my own portrait by using points. Observing how the points would gradually generate the full photo, I purposely made the bottom half points tiny to better reflect the detailed areas.