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

Crystal Xue-LookingOutwards-09

Fallon Creech’s LookingOutwards-05 is particularly interesting to me when I was looking through some of my peer’s posts. The generative artist Thomas Lin Pedersen created this series of art pieces by programming and using visualization techniques.

He believes “the process of generative art is dual,” meaning both system development and visualization method are required. I think that computational generative art is about developing a system that assists the delivery of an idea and its artistic value. I understand the artist thinks that the techniques should be focused less than the art itself. However, even without programming code being shared, I would love to see the generative progress of the artwork, and how the piece comes up together.

*“genesis338” belongs to Pedersen’s Generative Art collection.*

*“genesis4321” belongs to Pedersen’s Generative Art collection.*

Alec Albright – Looking Outwards – 09

Inside look of the Carbon x Adidas collaboration

The Looking Outwards post that I found particularly interesting was Stefanie Suk’s Looking Outwards 03, in which she discussed Adidas’s recent initiative to create 3D printed shoes. This project has consisted of a partnership between Adidas and Carbon, and the above shoe is one of the first to be created through their method of Digital Light Synthesis.

I agree with Stefanie in the way that this project is admirable because its impact on the sustainability of the shoe manufacturing industry. The method that Adidas and Carbon are using to create these shoes is very environmentally friendly and minimizes waste. I would also add that the creation of 3D printed shoes is a progressive direction for the general clothing manufacturing industry, entering into a space with an abundance of potential. This is a groundbreaking project with a very positive upside.

Xu Xu – Project 09 – Computational Portrait

sketch

//Claire Xu
//xux1@andrew.cmu.edu
//Section B
//Project-09
var cX = 250;
var cY = 250;
var vX = 3;
var vY = 5;

var currentImage;

function preload(){
	var myImage = "https://i.imgur.com/Bo3UtYO.jpg";
	currentImage = loadImage(myImage);

}

function setup(){
	createCanvas(500,500);
	background(0);
	currentImage.loadPixels();
	frameRate(50);
}

function draw(){
	var ix = constrain(floor(cX), 0, width);
	var iy = constrain(floor(cY), 0, height);
	var xyColor = currentImage.get(ix, iy);



	if(cX >= width || cX <= 0){
		vX = -vX;
	}

	if(cY >= height || cY <= 0){
		vY = -vY;
	}

	cX += vX;
	cY += vY;

	noStroke();
	fill(xyColor);
	circle(cX, cY, random(5,20));

	var xyColorMouse = currentImage.get(mouseX, mouseY);
	if(mouseIsPressed){
		noStroke();
		fill(xyColorMouse);
		circle(mouseX, mouseY, random(5,10));
	}
}

For this project I used the cosplay image of my friend, and I wanted the circles to appear in lines rather than random dots, so it looks like something is actually “printing” the image. The circles being printed tend to be larger, and the circles drawn by the mouse are smaller so more details of the photo can be observed manually.

Few seconds after program has run
Few minutes after program has run (without manual modifications)
Few minutes after program has run (details added through mouse press)

Xiaoyu Kang – Project 09 – Computational Portrait

sketch

//Xiaoyu Kang
//xkang@andrew.cmu.edu
//Section B
//Project-09

var baseImage;

function preload() {
	//loadimage
    var imageURL = "https://i.imgur.com/WFLOSwy.jpg";
    baseImage = loadImage(imageURL);
}

function setup() {
    createCanvas(500, 320);
    background(0);
    baseImage.loadPixels();
    frameRate(150);
}

function draw() {
	//define location
    var x = random(width);
    var y = random(height);
    //define color
    var ix = constrain(floor(x), 0, width - 0.1);
    var iy = constrain(floor(y), 0, height - 0.1);
    var ColorXY = baseImage.get(ix, iy);

    //draw circle
    noStroke();
    fill(ColorXY);
    ellipse(x, y, 6, 6);

    //draw square
    noStroke();
    fill(ColorXY);
    rect(x + random (-2, 2), y + random (-2, 2), 3, 3);

    //draw bigger circle when mouse is pressed
    var ColorMouse = baseImage.get(mouseX, mouseY);
    if (mouseIsPressed){
        fill(ColorMouse);
        ellipse(mouseX, mouseY, 10, 10);
	}
}

For this project, I used my friend Claire’s photo to generate the portrait. I used an combination of circle and suqare shapes appearing at random location to create the final image. I also wrote the code that when the mouse clicks, a bigger circle appears at the mouse location.

Sewon Park – PO – 9

sketch

//Sewon Park
//sewonp@andrew.cmu.edu
//Section B
//Project 9

var Hyun;

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

function setup() {
    createCanvas(480, 480); //Converted the picture size to 480 by 480
    background(0);
    Hyun.loadPixels();
    frameRate(100000000000000000); //Increased frame rate so picture renders faster
}

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

    noStroke();
    fill(theColorAtLocationXY);
    ellipse(px+5, py, 4, 4); //Mickey Mouse left ear
    ellipse(px, py+6, 10, 10); //Mickey Mouse Head
    ellipse(px-5,py,4,4); //Mickey Mouse right ear

    var theColorAtTheMouse = Hyun.get(mouseX, mouseY);
    stroke(theColorAtTheMouse);
    rect(pmouseX, pmouseY, 1, 1);
}

For this project, I used a picture of my good friend Hyun Kang. He really likes Disney movies and Mickey Mouse so i made the recurring shape as the classic Disney logo.

Xu Xu – Looking Outwards – 09

For this looking outwards post, I decided to focus on Looking Outwards 06 by Nadia Susanto, which focuses on the Silk Pavilion created by the Mediated Matter Group at the MIT Media Lab. This project explores the relationship between digital and biological fabrication, and uses a collaboration of an algorithm-generated base structure and silkworms to create a layered structure, in order to determine the shape and material optimization of fiber-based surface structures.

I agree with Nadia’s statement of how the combination of real-life insects and computation perform art, rather than purely using computers to randomly generate shapes. The thought of learning from silkworms, adapting the methods to computational design, and re-using silkworms to complete the final pavilion is a really interesting approach to me. However, when I first read Nadia’s post, I wondered why the two “printing” methods were combined, because it seemed quite redundant. After reading the MIT Media Lab’s website on the Silk Pavilion and watching the video, I discovered that the process of having silkworms generating structure was also a research on how the environment would affect the mapping of silkworms, which could be manipulated to create an ideal pavilion structure:

“Affected by spatial and environmental conditions, including geometrical density as well as variation in natural light and heat, the silkworms were found to migrate to darker and denser areas. Desired light effects informed variations in material organization across the surface area of the structure. A season-specific sun path diagram mapping solar trajectories in space dictated the location, size, and density of apertures within the structure in order to lock in rays of natural light entering the pavilion from south and east elevations.”
Mediated Matter, MIT Media Lab

Ankitha Vasudev – Looking Outwards – 11

Reactive Canopy is a project by Caitlin Morris, made in 2011. Caitlin Morris is a designer, researcher and educator who uses various software and digital fabrication techniques to create projects relating to the theme of perception and the human-environment relationship. She is currently a research assistant at the MIT Media Lab and has previously taught at NYU and Parsons. As a student she studied Design and Technology, Architectural Building Sciences and Cognitive Psychology.

Reactive Canopy interests me because it combines traditional architectural modelling using Rhino with algorithmic computer vision using openFrameworks (and Grasshopper – parametric design).

Process of creating **Reactive Canopy** using grasshopper, openFrameworks and Rhino

This project consists of a canopy (modeled in Rhino and Grasshopper) situated overhead that people pass under as they walk past. Cameras track motion below the canopy that causes the apertures of the canopy to open, which creates areas of light on those passing by. The motion data of pedestrians is collected using openFrameworks and passed onto Rhino and Grasshopper.

Demonstration of Reactive Canopy

Click here to watch a video that shows how amount of motion from frame to frame in openFrameworks is translated to aperture size in a Grasshopper model.

Xiaoyu Kang – Looking Outwards – 09

For this assignment, I looked at Xu Xu’s looking outward 05: 3D computer graphics. She looked at the work of Alexey Kashpersky, who is a 3D digital artist. Kashpersky’s work mostly focused on CG art and 3D modeling and printing.

For this particular project, by modeling a series of virus, he attempted to raise people’s awareness through his artwork. He created a beautiful model of Hepatitis C to remind people the deadliness of virus despite their visually pleasing appearance. Through his artwork, he tried to make people be aware of the danger of HCV infection and bloodborne pathogens.

In Xu’s looking outward, she stated how she really appritiate the cleaness of Kashpersky’s model and how she thinks the VR technology really helps to create a sense of realism. I agree with her that the artist is admirable in putting a lot of effort into makeing the model perfect. The result product definitly captures people’s attentation. But I also think the artist’s intention of wanting to help people with his artwork is admirable and how he actually achieved his goal of creating awareness through his work.

Xu Xu’s original post: https://courses.ideate.cmu.edu/15-104/f2019/2019/09/24/xu-xu-looking-outwards-05/

Project website: https://kashpersky.com/hepatitis-c-virus

Emma NM-LO-11

Caroline Sinders Nudge

Caroline Sinders created a prototype of a wearable watch that told time in terms of user’s schedule. She uses Python, Google Calendar API, Arduino, LEDs, Illustrator to create this prototype. I like that it is a new way of thinking about time and the idea makes sense to me. We typically only want to know the time in reference to an event, so this watch will tell us how much time we have left until that event. I would be curious to try this way of telling time out and see how it works for me.

Caroline Sinders is in her own words a “machine learning designer/user researcher, artist, and digital anthropologist.” She is interested in natural language processing and how it intersects with artificial intelligence, abuse, online harassment, and politics in digital, conversational spaces. She founded Convocation Design + Research agency. Here they focus on the intersections of machine learning, user research, designing for public good, and solving difficult communication problems.

Ankitha Vasudev – Project 09 – Computational Portrait

sketch

// Ankitha Vasudev
// ankithav@andrew.cmu.edu
// Section B
// Project 09

var portrait;

// load image of friend
function preload() {
	var ImageURL = "https://i.imgur.com/vtBUV2J.jpg";
	portrait = loadImage(ImageURL);
}

function setup() {
	createCanvas(450, 437);
	background(0);
	frameRate(1000);
	portrait.loadPixels();
}

function draw() {
	var x = random(width);
	var y = random(height);
	var px = constrain(floor(x), 0, width);
	var py = constrain(floor(y), 0, height);
	var size = random(1, 30);
	var colorxy = portrait.get(px, py);
	var colmouse = portrait.get(mouseX, mouseY);
    
    //circles controlled by mouse
    fill(colmouse);
    ellipse(mouseX, mouseY, 10);
    
    //text "J" to fill canvas
    noStroke();
    fill(colorxy);
    textSize(size);
    textFont('Arial');
    text("J", x, y);
}

This project was fun to do because I liked playing with different shapes and text and watching the pixels create the image. I chose a picture that I took of my friend a few months ago. I like this image because of how colorful it is. The images below show different stages of progress during this project.

“J”
“Jason”

Progress (after 1-2 minutes)
After 5-10 minutes