As soon as I saw “Rottlace” created by the MIT Media Lab I knew where it was from. Rottlace is a series of masks created for Bjork and inspired by Bjork’s music. I enjoy the intricacy of the masks and how they seam to be in motion, as well as the technical quality they have. The ideas of self-healing and having a skinless face align well with the visual style of the mask.
This parametric object was 3D printed using multi-material printing, which allows the elaborate combinations of different properties and variables to be produced. The properties are distributed complex structures, in this instance Bjork’s face, allowing the mask to fit perfectly as well as allowing the structure and shape of the mask to coexist with Bjork’s face, causing both elements to complement each other. The technology utilized in the printing of this mask has allowed the design to be fluid and has allowed for the combination of elements with different transparencies and generated modules to coexist in a single form. The simulation that generated the code and creation of this piece is mimicking that of both lace but something of vein structure as well.
Leander Herzog’s “Extruder”, 2015 was something I gravitated towards upon closer encounter. At first I was intrigued by the opacity and shapes of the forms that were being presented – visually. I did not know it was a generated typeface and that these were letters, which is what I found extremely interesting. I hope to build a type that is altered by code as soon as I learn the capabilities. I enjoy seeing design work that integrates code because I can see its benefits. Visually, it is also interesting to see how code creates as it is generated and the motions and shapes that are produced are very distinct.
D3.js was utilized in the creation of this piece – D3 assists users in utilizing data and visualizing it through code. Clipper.js was also used, which allows one to modify the path and geometry of shapes. Data also had to be pulled somehow – some sort of api? Mouse hover and mouse click are also used. Variables must have also been created for the different shapes to be able to be interacted with, and to be able to effect each other.
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
var sizex = 0;
function setup() {
createCanvas(640, 480);
}
function draw() {
rectMode(CENTER);
noStroke();
R=(640-mouseX)/2;
G=(480-mouseY)/2;
B=mouseX*(0,255);
//Altering color based on mouse position
background(B,R,G);
//altering background color based on mouse position
sizex=mouseX/2;
if (sizex>160){
sizex=mouseX/-2;
};
//altering position and size based on x mouse position
sizey=mouseY/2;
if(sizey>120){
sizey=mouseY/-2;
};
//altering position and size based on y mouse position
rot=PI/(640/mouseX);
//altering rotation based on x position
fill(R, G, B);
translate(mouseX, mouseY);
rotate(rot);
rect(0, 0, sizex, sizey);
}
I was inspired by Jamie XX’s “In Colour” album artwork and visuals. I created a square that is drawn on a background where the color is altered based on mouse location – this is to mimic the spectrum in the album artwork’s background. The shape itself is a square and is altered by the mouse x and y, depending on the quadrant it is in (if you divide the canvas size into 4 parts) as I wanted the location of the shape to respond to the mouse placement as well.
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.
MIT Media Lab’s Mediated Matter group (Neri Oxman, Jorge Duro-Royo, Markus Kayser, and Jared Laucks) created a structure that naturally and robotically mimicked the weaving patterns of silk worms. They initially started by tracking individual silkworms’ movements by attaching small magnets to their heads. The data and movements collected from those sessions were then translated into code so that a robot arm could weave different simplified versions across 26 panels that would eventually be formed into an elevated dome. However, they tie back in their original inspiration for the last step by putting the silkworms back on the threaded structure and integrating their natural silk. That is probably what I admire the most, the fact that they took the next step and incorporated silkworms after they could have easily stopped and left it at the threaded structure.
In terms of algorithms, they used the tracked movements of the silkworms and translated that into a single route the CNC machine would trace with a single white thread. But incorporating the silkworms as the last step really changed the final form and emphasizes the creator’s artistic intention of magnifying the silkworm phenomenon.
//Yoonseo(Dave) Choi
//Section B
//yoonseo1@andrew.cmu.edu
//Assignment-03-B
//variable for Bezier curvature
var Curv;
//variable for Red, Green, Blue color.
var R = 0;
var B = 0;
var G = 0;
function setup() {
createCanvas(640, 480); //setting Canvas size to 600x480
//No fill for any geometry
noFill();
//initializing Curv
Curv = 0;
}
function draw() {
//adding random number to Red for change of color when it is < 255
//adding random number to Blue for change of color when it is < 255
//adding random number to Green for change of color when it is < 255
//When any of R,G,B elements are over 255, it resets to 0.
if (R >= 255){
R = 0;
}
if (G >= 255){
G = 0;
}
if (B >= 255){
B = 0;
}
//variable for color c
var c = color(R,B,G);
//continuously assign color variable to stroke
stroke(c, 10);
//setting up standard place for x and y coordinate.
var x = width/2;
var y = height/2;
//Dividing the canvas into four difference quadrant.
if (mouseX > x & mouseY < y ) { //when mouse is on right top quadrant
Curv += mouseX/60; //Curv value goes up randomly from 1 to 5
R += mouseX/120 + mouseY/50;// Red is sum of differenct X and Y value
}
if (mouseX < x & mouseY < y){//when mouse is on left top quadrant
Curv -= mouseY/30; //Curv value goes down randomly from 4 to 12
B += mouseX/40 + mouseY/80;// Blue is sum of differenct X and Y value
}
if (mouseY > y & mouseX > x){//when mouse is on right bottom quadrant
Curv += mouseY/60;//Curv value goes up randomly from 4 to 12
}
if (mouseY > y & mouseX < x){//when mouse is on left bottom quadrant
Curv -= mouseX/30;//Curv valvue goes down randomly from 1 to 5
G += mouseX/70 + mouseY/100;// Green is sum of differenct X and Y value
}
//when Curv is larger than height or width, or less than 0 , it will reset to 0.
if ( Curv > height || Curv < 0 || Curv > width){
Curv = 0;
}
//setting background to black
background(0);
//bezier curves.
//each for statement is used to generate multiple bezier curve based on increment of i value
//bezier curve assigns, anchor points and control points to create paramatric curve.
//bezier(anchor pts, anchor pts, control pts, control pts, control pts2,control pts2, anchor pts2,anchor pts2)
for (var i = 0; i < mouseX; i += 30){
bezier(mouseX-(Curv+i/2.0), mouseY-Curv+i, Curv*2, Curv, Curv*2, Curv*2, mouseX, 0);
}
//based on the i and z constraint, number of lines are decided.
// i or z's constraints are defined by mouse X adn Y position
// all the position of the anchor points are based on the mouse X and Y
for (var z = 200; z < mouseY; z += 30){
bezier(mouseX-(Curv+z/2.0), mouseY-Curv+z, Curv*4, Curv/6, Curv*3, Curv*2, width-mouseX, 0);
}
for (var i = 0; i < height-mouseY; i += 30){
bezier(mouseX+(Curv+i/2.0), mouseY+Curv+i, Curv*2, Curv, Curv*2, Curv*2, 0, mouseY);
}
for (var z = 200; z < width-mouseX; z += 30){
bezier(mouseX+(Curv+z/2.0), mouseY-Curv+z, Curv*4, Curv/6, Curv*3, Curv*2, width, height-mouseY);
}
}
For this Dynamic art project, I focused on the movement of line in a curve form. At first, I wanted to express very light wing like motion based on the mouse position. I abstracted the initial concept and created the following digital illustration of movement. Fortunately, I found a example at p5js website that resembles part of what I imagined. I took that example and modified to create my own dynamic art.
For my project, I made a dynamic drawing that is controlled by the mouse, or the user. I varied several elements, including size, color, rotation and position.
The user can move the wrecking ball to wherever in the canvas and manipulate the size of the buildings. One can see that the size of the ball itself changes, according to position as well. The size of the wrecking ball is largest when the mouse is located on both extremes of the width. The height of the buildings decreases when approached by the ball.
As for colors, as you move the mouse from left to right, the background changes from dark to light.
Another element that the mouse controls is the particles floating in air. It could be considered stars or dust. When the mouse is in the bottom half of the canvas, the particles rotate at a faster pace than they do when the mouse is in the top half of the canvas.
I would say that some challenges came from how tedious my design was. I also wish that I could have made the windows on the buildings to change color in the same fashion that the background does to keep it more consistent.
A design based on algorithms that interested me is the auditorium in the Elbphilharmonie, which is a concert hall in Hamburg designed by an architecture firm called Herzog and de Meuron and opened in 2017. The Elbphilharmonie is a complex that resembles a city; it offers many different attractions, such as the main philharmonic hall, music hall and restaurants.
TThe building complex as a whole is extremely intricate, with its many geometries and attractive materiality but an area that is more impressive in regards to its use of technology would be the largest concert hall. The concert hall was created based on algorithms. Over 10 years, architects Jacques Herzog and Pierre de Mueron created about 10,000 gypsum fiber acoustic panels that cover the walls. Basically, the entire auditorium is covered in algorithmic, NURBS-based cells that look like shallow dugouts in the sand. The concave cells look like they were hand-carved, but were actually milled with CNC milling machines, based on precise calculations made computationally. The algorithm that lies underneath varies the characteristic of each cell so that individual cells play their unique role in handling the sounds and perfectly fill up the walls. Some of the variables here are depth, radius and splits, as seen in the image directly below.
With the help of an acoustician (Yasuhisa Toyota) the architects were able to create and fabricate a space that insures the highest acoustic qualities that a music hall can ask for. The variations that the algorithm randomly creates within its parameters significantly affect the sound in the auditorium. Depending on the shape of the surface that sound waves hit, the sound gets manipulated differently: some are absorbed by the surface, while others are disseminated, ultimately creating a balanced harmonic sound.
Algorithms in this case allowed the firm to manifest its style of conveying through materials and complex geometries and suggest at infinite possibilities of creating structures that require such finesse that might not be achievable through manual work.