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

JasonZhu-LookingOutwards-09

This week, I reviewed Rachel Lee’s Week 3 Assignment, Mushtari. A collaborative work by MIT Media Labs and Stratasys, Mushtari is a wearable that mimics biological growth patterns. I thought the project was both insightful and intriguing. I agree with much of Rachel’s commentary. I think she hit the nail on the head when she said that living Mushtari allows for “existing biological structures to take place naturally and respects its processes. Adding to that thought, I think the piece brings much attention to not only the natural elements that permeate our daily lives, but the elements that are unseen. In taking such a unique approach, I think the piece really distinguishes itself from similar projects at a micro scale. The one part of Rachel’s commentary that I took issue with is when she discusses how the project harnesses biological processes and adapts them for greater human use in a non destructive way. While the same thoughts are reiterated in the official MIT posting, I do not see eye to eye on the non destructive aspect of the project.

Video of the project by MIT Media Labs

Closeup of some of the elements in the wearable from Living Mushtari

Yoo Jin Shin-Project-09-Portrait

Project-09

// Yoo Jin Shin
// Section D
// yoojins@andrew.cmu.edu
// Project-09-Portrait

var underlyingImage;

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

function setup() {
    createCanvas(480, 416);
    background(255);
    underlyingImage.loadPixels();
    frameRate(500);
}

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 = underlyingImage.get(ix, iy);

    // drawing rectangles
    noStroke();
    fill(theColorAtLocationXY, random(0, 255));
    rect(px, py, random(5, 20), random(5, 20));

    // writing Bells
    noStroke();
    fill(theColorAtLocationXY);
    textFont('Helvetica');
    textSize(5);
    text("BELLS", px, py);
}

// resets with blank canvas once mouse pressed
function mousePressed() {
    clear();
}

For this project, I used a photo of my friend, Bella. I think this was especially fun and meaningful because it felt as if the final product had a specific recipient. I initially had larger end bounds for the dimensions of the rectangles, but realized that if the rectangles are too big, the end stage seems a bit too abstract to the point that you can hardly recognize the person.

Rjpark – Looking Outwards 09

3D Printed Flexible Shoes

My peer’s looking outwards was about 3D printing, specifically 3D printing flexible shoes. My peer stated that he thinks it’s interesting how practical 3D printing has become and how it could help create other useful every day life things in the future. I agree with my peer in that it is amazing how 3D printing has turned into a process for the creation of even the simplest, most practical objects. In addition, it could possibly replace other methods of creating useful products we use in our daily lives and be more efficient/save raw material utilization.

But, even though it seems like 3D printing’s becoming more popular and being used more often, I wonder if it’s worth to use it to create practical daily life objects. When I watched the video about the shoes (link below), I saw that the shoes weren’t exactly fulfilling its purpose properly. They seemed to be made of material that’s either too hard or too flexible, making them too rigid/uncomfortable or not sturdy enough. It made me think about whether it’s worth it to use 3D printing for a product this practical, when it can’t do its job as well as the shoes we have now. The only time I think 3D printing practical objects might really be useful for is when we’re trying to create products of minimal productivity for people who can’t afford the best version of that object, similar to one laptop per child. As a result, I think it really depends on efficiency of 3D printing practical objects, the audience its targeted at, and how much better the 3D printed object is from the current one.

Peer’s Looking Outward

3D Printed Shoes Link

Portrait 9 rrandell

sketch

/* Rani Randell
rrandell@andrew.cmu.edu
Section A
Project 9 */

var underImage;

function preload() {
    var ImageURL = "https://i.imgur.com/lmhDtNm.jpg?3";
    underImage = loadImage(ImageURL);
}

function setup() {
    createCanvas(480, 480);
    background(0);
    underImage.loadPixels();
    frameRate(1000);
}

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 = underImage.get(ix, iy);

    noStroke();
    fill(theColorAtLocationXY);
    //text('bff', px, py); part of my experimentation
    
    rect(px, py, 5, 5); 
    ellipse(px, py, 10, 10);
    //ellipse(px + 6, py, 5, 5)
}

Although Georges Seurat’s paintings were not provided as examples for this project I immediately thought of his work, that I am sure is familiar to many of you. I was really inspired by the painterly quality of his work and tried to include that in my portrait using teardrop shapes to stimulate paint blobs. I included one of Seurat’s paintings below:

This is the original underlying picture

This image was me playing around with shapes

Catherine Coyle Project 9

sketch

// Catherine Coyle
// ccoyle@andrew.cmu.edu
// section C
// project 9

var img;
var currColor;
var ix;
var iy;
var seenColors = [];

// basic image loading code

function preload() {
    var imgurl = 'https://i.imgur.com/2TSW1Hy.png';
    img = loadImage(imgurl)

}

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

function draw() {
    // this basic pixel grabbing format was taken from the example on the website
    var px = random(width);
    var py = random(height);
    ix = constrain(floor(px), 0, width-1);
    iy = constrain(floor(py), 0, height-1);
    currColor = img.get(ix, iy);
    // will draw the shape/pixel with the right color
    stroke(currColor);
    drawShape(px, py);
}

// drawing the pixel at given location
function drawShape(x, y) {
    var donutSize = calcSize();
    strokeWeight(donutSize);
    noFill();
    ellipse(x, y, donutSize * 2, donutSize * 2);

}


// the size of the donuts is based on the frequency of
// pixels w the same color
function calcSize() {
      var currColorBr = floor(brightness(currColor));
      seenColors.push(currColorBr);
      return constrain(countElements(currColorBr), 0, 20);
}


// idk if theres a java function that counts elements but
// i couldnt find one when i looked so i wrote one
function countElements(element) {
    var c = 0;
    for(var i = 0; i < seenColors.length; i++) {
        if (seenColors[i] == element) {
            c++;
        }
    }
    // mod 10 to make them not get too big
    return c % 10;
}

I thought this was a cool project! I chose my close friend Melissa as the subject because I think this is a really pretty picture of her that I took over the summer. She really likes donuts so I decided to make the ‘pixels’ all donut shaped. It felt too simple just doing that though so I wanted to add another aspect to it. I decided to have the sizes of the donuts be based on the frequency of the brightness of the pixels. It took a while because I found out that javascript doesn’t really have dictionaries which was disappointing so I just stored all the information in a list and wrote functions to count the frequency.

I am happy with how it turned out in the end!

Early design I was just figuring out how to make it work

Original picture of Melissa! I had to crop and resize the one used for the project

Rjpark – Project 08 – Computational Portrait

computationalportrait

var image;

function preload() {
	// directly loading image through website (no URL variable)
    image = loadImage("https://scontent.fagc2-1.fna.fbcdn.net/v/t31.0-8/c87.61.576.576/p720x720/27788553_1801115783266418_6212879640355992453_o.jpg?_nc_cat=110&_nc_ht=scontent.fagc2-1.fna&oh=cc9c38dd3d5a14dcb13a012cd0973bd2&oe=5C7EA0C1");
}

function setup() {
    createCanvas(480, 480);
    background(0);

    image.loadPixels();
    // makes the pixels load faster
    frameRate(500000000000000);
}

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 color = image.get(ix, iy);

    noStroke();
    fill(color);
    // pixels are smaller to make the portrait more detailed
    rect(px, py, 3, 3);
}

At first, I had trouble finding a photo that would fit well into the 480 by 480 canvas so I had to look through multiple photos on different websites to find a photo that would be the perfect size. However, once I found that photo, it was easy to make a computational portrait out of it. I used 3 by 3 rectangles as my surface treatment. Because I made my rectangles so small, I had to increase frame rate to 500 trillion for the portrait to be drawn faster. The final result is below!!

project 9

sketch.js

/*
Arden Wolf
ardenw@andrew.cmu.edu
Section B
project 09

*/


var underlyingImage;

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

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

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 = underlyingImage.get(ix, iy);
    var size = random(7,20);
    var pie = random(HALF_PI, QUARTER_PI, TWO_PI,PI)

    noStroke();
    fill(theColorAtLocationXY);
    //ellipse(px, py, size, size);
    arc(px, py, size, size, size, pie);




    var theColorAtTheMouse = underlyingImage.get(mouseX, mouseY);
    fill(theColorAtTheMouse);
    arc(pmouseX, pmouseY, size, size, size, pie);
}

I randomized the size and the arc degrees as the shapes that make up the image and also made the color at mouse the same shapes so that the viewer can interact and contribute to the creation of the image.

Sharon Yang Looking Outwards 09

Among the looking outwards projects by peers, I find Kevin (Riordan)’s Week 5 post very fascinating. I agree with Kevin on that I find the project amazing as it makes a highly intricate art work of very high quality, comparable to those in animated movies with two commonly used tools, python and maya. It is admirable how Caballer has developed the project in a way that allows to control extreme details. The project is able to demonstrate various facial and body structures, enabling expressions to be displayed. The body structure reflects the real structure of an animal; each eyeball, each eyelid, and each individual muscle on the eye are all separated, allowing the movements to be autonomous. These movements are delicately manipulated to show hundreds of different expressions and to display natural speech. The algorithm of allowing such details to be shown is joint-based system over a coordinate plane, which is a relatively simple algorithm for such a sophisticated work.

3D Troglodita Rig project by Sergi Caballer in 2012

Link to the original work: http://www.cgmeetup.net/home/troglodita-rig-demo-by-sergi-caballer/

Link to Kevin’s post: https://courses.ideate.cmu.edu/15-104/f2018/2018/09/27/kevin-riordan-looking-outwards-05-section-c/

Xiaoying Meng – Looking Outwards 09

I am looking at Lan Wei’s Looking Outwards 4 Sound Art. It is about FUSE*FACTORY’s installation Multiverse. I do agree with Lan Wei that the visual and sound effects working together, making the piece very powerful. I think other than making people “think about life and the universe using their own imagination”, the piece also creates a contrast between the massive universe and the tiny existence that we are. I would argue that the piece almost requires the viewer to be alone with no one else present. FUSE*FACTORY mentioned that the sound is also generated by a digital system. Both the sound and visuals are real-time, nonrepeating, just like the universe. One can argue that the randomness in this piece perfectly represents the multiverse. The sound effect in this piece makes it more engaging and powerful.

Han Yu Project 09 Portrait

sketch

// Han Yu
// Section D
// hyu1@andrew.cmu.edu
// Project 09 Portrait

var poolpic; //image variable
var pattern=["♛","♨","☆","♞","✌︎","🀧"]; //stores patterns to be drawn later

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

function setup() {
    createCanvas(600,400);
    background(95,171,188);
    poolpic.loadPixels();    
}

function draw() {
    scale(0.333,0.333); //makes the original image smaller

    //location and color variable of each pattern
    var x = random(width*3);
    var y = random(height*3);
    var c = poolpic.get(x, y);
    var randomly = floor(random(0,5.9)); //pattern to be drawn
    var p = pattern[randomly];  //randmly picks an item from pattern

    noStroke();
    fill(c);
    textSize(random(30,80));
    text(p, x, y);
}

In this project I used a picture of my bf. I was inspired by cool symbols and characters used in other people’s projects so I decided to use an array of symbols that describes my bf in my project.