Section C – Page 29 – [OLD FALL 2017] 15-104 • Introduction to Computing for Creative Practice

Laura Rospigliosi (Lrospigl) Looking Outwards 03 (GROMPIES)

The project I found is titled GROMPIES. It was created by a group of students that were experimenting with liquid plaster set in stitched lycra moulds. They made the made the model through a virtually generated model, and transferring the textile through sowing by hand and sowing with a machine following the pattern of the embroidery of the lycra. By puling and stretching the fabric in different ways, and by pouring the plaster onto it, they realized these odd forms.

I assume that the algorithms consisted of some random variables that helped achieve these curvilinear forms.

While the group did use a computer generated model, they took a lot of control once they used the patterns and shapes generated by the forms, to actually make the 3d model by hand.

Tumblr site (in Spanish)

Dezeen Article

Creators: Brendon Carlin – USA; Kyle Chou – Taiwan/Usalluis Enrique Monzo – Spain; Carlos Piles – Spain; Faysal Tabbarah – Syria

rfarn Project-03

For this project, I struggled with figuring out where to start with my coding. The assignment was fairly open and creative, so it was hard to come up with an idea on the spot for what I wanted to do. I played around with stationary shapes and then incorporated some transformations and movement to create a dynamic drawing.

sketch

var w1 = 40;
var h1 = 40;
var w2 = 40;
var h2 = 40;
var w3 = 40;
var h3 = 40;
var w4 = 40;
var h4 = 40;
var R = 105;

function setup() {
    createCanvas(640, 480);
}

function draw() {
    background(R, 98, 109);
    noStroke();
    
    
    if(mouseX < 640  & mouseX > 0){ //changing background color
        R = mouseX * (1/4);
    }

    fill(232, 199, 222); //top circle
    ellipse(width/2, height/4, w1, h1);
    if(mouseX > width/2 - w1/2 & mouseX < width/2 + w1/2 && 
       mouseY > height/4 - h1/2 && mouseY < height/4 + h1/2 && 
       dist(mouseX, mouseY, width/2, height/4) < w1/2) { //when mouse is in border of circle
        w1 += 5;//grows bigger
        h1 += 5;
    } else { if(w1 > 40 & h1 > 40){ //shrinks back down to 40 x 40
        w1 -= 5;
        h1 -= 5;
        }
    }

    fill(217, 189, 197); //right circle
    ellipse(width * (3/4), height/2, w2, h2);
    if(mouseX > width * (3/4) - w2/2 & mouseX < width * (3/4) + w2/2 && 
       mouseY > height/2 - h2/2 && mouseY < height/2 + h2/2 && 
       dist(mouseX, mouseY, width * (3/4), height/2) < w2/2) { //when mouse is in border of circle
        w2 += 5; //grows bigger
        h2 += 5;
    } else { if(w2 > 40 & h2 > 40){ //shrinks back down to 40 x 40
        w2 -= 5;
        h2 -= 5;
        }
    }

    fill(203, 190, 179); //bottom circle
    ellipse(width/2, height * (3/4), w3, h3);
    if(mouseX > width/2 - w3/2 & mouseX < width/2 + w3/2 && 
       mouseY > height * (3/4) - h3/2 && mouseY < height * (3/4) + h3/2 && 
       dist(mouseX, mouseY, width/2, height * (3/4)) < w3/2) { //when mouse is in border of circle
        w3 += 5; //grows bigger
        h3 += 5;
    } else {if(w3 > 40 & h3 > 40){ //shrinks back down to 40 x 40
        w3 -= 5;
        h3 -= 5;
        }
    }

    fill(188, 175, 156); //left circle
    ellipse(width/4, height/2, w4, h4);
    if(mouseX > width/4 - w4/2 & mouseX < width/4 + w4/2 && 
       mouseY > height/2 - h4/2 && mouseY < height/2 + h4/2 && 
       dist(mouseX, mouseY, width/4, height/2) < w4/2) { //when mouse is in border of circle
        w4 += 5; //grows bigger
        h4 += 5;
    } else { if(w4 > 40 & h4 > 40){ //shrinks back down to 40 x 40
        w4 -= 5;
        h4 -= 5;
        }
    }

    fill(255); //white dots
    ellipse((mouseX - width/5) * 2, (mouseY - height/5) * 2, 15, 15);
    ellipse((mouseX - width/5) * 2, (mouseY + height/5) * 2, 15, 15);
    ellipse((mouseX + width/5) * 2, (mouseY - height/5) * 2, 15, 15);
    ellipse((mouseX + width/5) * 2, (mouseY + height/5) * 2, 15, 15);
    

}

karinac-Project-03

//Karina Chiu
//Section C
//karinac@andrew.cmu.edu
//Project-03

var bgRed = 0;
var bgGreen = 0;
var bgBlue = 64;


function setup() {
    createCanvas(600,400);
    drawSky();
}



function drawSky() {

	//background color changes using mouse movement

   	background(bgRed,bgGreen,bgBlue);

   	var bgX = mouseX
    
   	//day time bgcolor(187,228,248)
	if (bgX > 200 & bgX < 400) {
		bgX = 200
	}

    //transition to night time
    if (bgX >= 400) {
		bgX = 200 - (mouseX-400)
	}



	//day time transition to blue
	//bgcolor(187,228,248)
	//200 is the starting point of blue sky

	bgRed = bgX*((187-0)/200) + 0;
	bgGreen = bgX*((228-0)/200) + 0;
	bgBlue = bgX*((248-64)/200) + 64;



	//call drawSky function
	window.setInterval(drawSky, 100);
}



function draw() {

	//sun

	var sunSize = 0.4*mouseX
	var sunX = mouseX
	//parametric equation for path of sun
	var sunY = 80 + 0.0033*Math.pow(sunX-300,2)


	if (sunX <= 50) {
		sunX = 50
	}

	if (sunX >= 550) {
		sunX = 550
	}


	fill(255,201,14);
	noStroke();
	ellipseMode(CENTER);
	ellipse(sunX,sunY,sunSize,sunSize);





	//skyline

	fill(0);
	noStroke();

	//left buildings
	rect(0,height-200,45,200);
	rect(50,height-250,75,250);
	rect(55,height-260,65,10);
	rect(60,height-270,55,10);
	rect(65,height-280,45,10);

	//disproportionate building - right
	triangle(475,height-220,525,800,575,height-200);
	triangle(482,height-240,525,650,570,height-260);
	triangle(487,height-280,525,500,562,height-270);

	//dome building
	rect(150,height-110,200,110);
	rect(160,height-125,180,125);
	rect(165,height-130,170,130);
	ellipseMode(CENTER);
	ellipse(250,height-130,160,130);
	rect(240,height-198,20,10);
	rect(248,170,5,100);

	//bottom skyline
	rect(0,height-150,100,150);
	rect(100,height-100,100,100);
	rect(350,height-220,70,220);
	rect(380,height-300,50,325);
	rect(420,height-200,20,200);
	rect(440,height-120,60,120);
	rect(520,height-150,80,150);

	//windows
	fill(240);
	rect(388,120,22,5);
	rect(388,130,34,5);
	rect(388,140,34,5);
	rect(60,160,5,5);
	rect(70,160,5,5);
	rect(80,180,5,5);
	rect(90,180,5,5);
	rect(100,180,5,5);
	rect(110,180,5,5);
	rect(70,190,5,5);
	rect(110,190,5,5);
	rect(100,200,5,5);
	rect(110,200,5,5);
	rect(60,220,5,5);
	rect(70,220,5,5);
	rect(90,220,5,5);
	rect(110,230,5,5);
	rect(60,240,5,5);
	rect(80,240,5,5);
	rect(90,240,5,5);
	rect(100,240,5,5);
	rect(180,282,20,3);
	rect(210,282,20,3);
	rect(240,282,20,3);
	rect(270,282,20,3);
	rect(300,282,20,3);
	rect(490,200,10,20);
	rect(530,210,5,5);
	rect(540,210,5,5);
	rect(550,210,5,5);
	rect(520,220,5,5);
	rect(530,220,5,5);
	rect(510,240,5,5);
	rect(540,240,5,5);
	rect(550,240,5,5);
	rect(490,170,5,5);
	rect(500,170,5,5);
	rect(530,170,5,5);
	rect(550,170,5,5);
	rect(540,160,5,5);
	rect(550,160,5,5);
	rect(500,140,5,5);
	rect(510,140,5,5);
	rect(360,190,5,15);
	rect(370,210,5,15);
	rect(370,230,5,15);
}

The part I struggled with the most was definitely trying to come up with equations for the parabolic pathway of the sun as well as the color equation for the sky. After a lot of trial and error on paper, I was finally able to come up with something and transfer it to the computer and work from there.

aerubin-LookingOutwards-03-Section-C

KINEMATIC PETALS DRESS
Museum of Fine Arts (MFA), Boston
Project by: Nervous System

The Kinematic Petals Dress explores the “synergy between fashion and technology” by creating 3D printed clothing utilizing an algorithm that can be altered based on the wearer and designer. Individually customizable, the dress can be manipulated through a computer program that adjusts sizing through a 3D scan. The shape of the interlocking petals that create the material can also be tailored to the designer’s liking. When the design is complete, it is then sent to the 3D printer and the 1600+ unique pieces and 2600+ hinges are fabricated and the dress is complete.

I think it is a very unique approach to traditional attire. There are plenty of pros and cons to this design as although it can be completely devised through a computer program and printed instead of sewn like traditional clothing, however, shell structures can only move in one direction which has its limitations and prevents the 360 degrees of movement other fabric has. Another feature of the Kinematic Dress is its customizability as it is tailored for each customer based on their 3D scan. In addition, the pattern of the scales, shape of the scales, and the length of the dress can be altered. The algorithm created probably forms the base that the dress begins at when beginning the design process, with uniform scales over a standard body type. This could then be changed to the designers liking and the base form is still generally represented in the final design. It is amazing how innovative designers have become to arrive at the stage where it is feasible to design and print clothing from a computer.

More information at: http://n-e-r-v-o-u-s.com/blog/?p=7162

serinal – Looking Outwards 03 (section C)

Trussfab is an extremely cool platform, created by Robert Kovacs and his HCI team at Hasso Plattner Institute in Germany, that allows users to design something that can be fabricated into large structures using recycled bottles and 3D printed joints.

Personally, I think the very coolest part of this is that the user doesn’t need to have any outstanding knowledge on engineering or have certain materials/equipment, but still can produce these large structures. You design your structure via Trussfab and then they will generate all the 3D files for all the hinges and joints that are needed to complete the structure.

The idea of Trussfab being an easy to use platform for people to create structures and prototype different things is really great. What is even cooler is how much you can manipulate the structure (with decorations, small details, etc) and the fact that it can even support human weight. I am extremely interested in seeing where this will take a lot of designers and architects with their ideas and whether or not it will become a part of some people’s practices.

I am not completely sure what the algorithms for the actual Trussfab extension are, but I am sure that there was a lot of complex thinking behind it. Robert Kovacs and his HCI team are definitely more into the background, the actual algorithm and the coding that goes into it, because it is meant to serve the artistic sensibilities of other people. I think it’s really cool because it directly relates to design being a “service industry” and they have created a platform that conveys this idea. I am excited to see the future of Trussfab.

Read more about Trussfab via this article!

abradbur – Looking Outwards 03 – Section C

“Morandi’s Infinite Shelf” Gallery View, 2016

This is “Still Life (Morandi’s Infinite Shelf)” by Jason Salavon. I was really intrigued by his piece “Generic Mammal Skull” that was shown in the lecture notes given with the instructions for this Looking Outwards, so I went to check out his website and was delighted by what I saw. This Infinite Shelf is somehow able to make itself run forever and slowly produce new, possibly randomized vases as the image crawls along, from what I can see. I love art that seems mundane but actually has a fantastical sense to it. It tickles me. I feel like I could find this shelf in the house of a modern, scatterbrained wizard.

If you feel like watching a slow pan of a shelf for three hours, here’s a video of the work where you can observe Still Life in action.

And here’s his website. And the page where this work can be found.

karinac-LookingOutwards-03

http://pdf.mmci.uni-saarland.de/projects/DirectionalScreens/

This is the new directional screen created by a group of six individuals, whose goal was to maximize a movie screen’s image quality across all perspectives of the audience members. Currently, much of the light and energy from screens are also displayed onto the walls, ceilings, and floors. To solve this problem by creating greater energy efficiency, this team of people created a new screen using CNC mills to design individual square panels compiled with tiny mirroring facet surfaces to project light solely onto the audience. This new design further accentuates the resolution and color reproductions of the project being exhibited, making it up to 15 times brighter than a simple matted screen. I was amazed at how practical and universal this new design could be in the future world of cinema. Before, I held the preconceived notion that computational fabrication was purely a visual art. Little did I know that it could also very well be applied in everyday life.

ashleyc1-Section C-LookingOutwards-03

Earlier this year (February to May), the Carnegie Museum of Art hosted a retrospective of Iris van Herpen’s fashion designs called Iris van Herpen: Transforming Fashion that featured clothes from 15 of her collections. She is credited to be the first designer to send a 3-D printed dress down the runway. Her dresses are meticulous and overwhelming in detail but she is able to create these intricate dresses through her process of integrating traditional craftsmanship with computers and digital fabrication. Although this particular merging is apparent in the majority of her collections, I think one the most note able collections to mention is Escapism. To me, this is the collection that mostly reads as fashion that merges with digital fabrication as well as meticulous craft. It was also one of her beginning collections to feature more than one 3-D printed dresses on the runway.

In Escapism, Herpen explores the concept of emptiness and how emptiness plays with form to create fantastical and grotesque feelings. Although I couldn’t find information on the particular algorithms used, I do know her process is collaborative as she works with architects like, Daniel Widrig, to 3-D print her desired designs. In this collection, they were able to create a lace-like structure that didn’t require a needle to construct the parts together. Together, they weaved into a coral-like, organic design. Most of the dresses in this collection remind me of the way sine waves move and billow together when programmed correctly.

Herpen became successful because of her unique melding of the two worlds; not just using the machine to replace the traditional process. In an interview with Vogue, she clarified that designing the dress is mostly hand crafted because of the inventive ways the designers need to create to sew the printed components together. In this way, her voice as a traditional artist is still prominent because she uses the machine to support her process, not become it.

Sources:

Iris van Herpen: Transforming Fashion

http://www.irisvanherpen.com/behind-the-scenes/escapism

http://www.irisvanherpen.com/haute-couture/crystallization

Bettina-LookingOutwards03-SectionC

Screenshot from MIT computation fabrication lab’s youtube video.

In looking through examples, I was curious to find work that had function outside of “being pretty” or “showing data”. As a peer expressed, “the most beautiful things are functional”. While this is a long contended perspective, I agree that with the power of generating from code/data, there is power to make very useful things. This multicopter from MIT’s fab-lab can vary it’s physical structure, such as wingspan, power, height, etc. to adjust to the user’s needs. This level of customizability gives users more control than simply choosing from a set list of specs.

From a practical standpoint, printing this using a 3D printer would be economically viable. Mass production using other materials may be tricky because of molds; however if 3D printers could print the molds themselves, I could see this concept used widely.

afukuda_Project03

afukuda-project-03

/* 
   Name | Ai Fukuda 
   Course Section | C 
   Email | afukuda@andrew.cmu.edu
   Project | 02-VariableFaces
*/ 

var deg = mouseX;
var rad = radians(deg);
var size = 5;
 

function setup() {
    createCanvas(640, 480);
    rectMode(CENTER);
}

function draw() {
    background(214,233,248);
    if (mouseX > (width / 2)) {                                // change background color 
        background (219,233,198);
    }

    noStroke();                                                // orange square 
    fill(253, 205, 167);
    rect(40+mouseX, max((480 - mouseX)-60, 240), 40, 40);
    if (mouseX > 300) {                                
        fill(182,178,215);
    }

    fill(249, 200, 203);                                      // pink square 
    rect(60+mouseX, min((480 - mouseX)-60, 200), 60, 60);

    fill(254, 232, 147);    
    rotate(rad);                                              // yellow square
    rect(100+mouseX, min(mouseX-220), (mouseX*0.25)+60, (mouseX*0.25)+60);

    
}