Author: tswarsta@andrew.cmu.edu

TSWARSTA-Section A-LookingOutwards-03

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.

https://www.media.mit.edu/projects/rottlace/overview/

TSWARSTA-Section A-LookingOutwards-02

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.

https://leanderherzog.ch/extruder/

TSWARSTA- Section A- Project-03-Dynamic-Drawing

swarstad-dynamic-drawing


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.

TSWARSTA- Section A- Project-02-Variable-Face

swarstad-face-sketch

// Treat Swarstad
// 15-104 A
//tswarsta@andrew.cmu.edu
//Project 02 -Variable -Face

var eyeSize = 100;
var faceWidth = 350;
var faceHeight = 350;
var mouthsize=100;
var cheek=50;

 
function setup() {
    createCanvas(640, 480);
}
 
function draw() {
	noStroke();
    background(0,255,255);
    fill(255,224,189);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    fill(250,128,114);
    var cheekY = height/2 + faceHeight/6; //so cheeks will not appear outside of the face
    ellipse(eyeLX, cheekY, cheek, cheek);
    ellipse(eyeRX, cheekY, cheek, cheek);
    fill(255,255,255);
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);
    fill(0,0,255);
    ellipse(eyeLX, height / 2, eyeSize/2, eyeSize/2);
    ellipse(eyeRX, height / 2, eyeSize/2, eyeSize/2);
    fill(0,0,0);
    ellipse(eyeLX, height / 2, eyeSize/4, eyeSize/4);
    ellipse(eyeRX, height / 2, eyeSize/4, eyeSize/4);
    fill(255,0,0);
    var mouthY = height/2+faceHeight*0.25; // so mouth will appear within the face
    ellipse(width/2, mouthY, mouthsize/2, mouthsize/2);
    fill(0,0,0);
    ellipse(width/2, mouthY, mouthsize/3, mouthsize/3);
    fill(0,255,0);


}
 
function mousePressed() {
    faceWidth = random(50, 500);
    faceHeight = random(50, 500);
    eyeSize = random(10, 120);
    mouthsize = random(50,150);
    cheek = random(25,75);
    clear();
}

LookingOutwards-01

Taking inspiration from old De Stijl works, Kyuha Shim is able to input images as well as type into code to create “RASTER” (2017). Shim is a computational designer and researcher at CMU and his work “RASTER” has been funded by CMU. By utilizing p5 Shim has been able to create images ranging from literal to more abstract interpretations. I admire this work as Shim is able to combine both an advanced knowledge of De Stijl work both technically but visually. She is able to balance both of their contexts and combine them creating this work that can applied to our world. Other works by Shim also relate to “RASTER” as manipulating images and type through generative code is common through his work. Users who utilize “RASTER” and range in understanding of De Stijil work will be able to understand at a deeper level their proportions as well as aesthetic that is apparent through the amount of work.

Project-01-Face

swarstad_face

function setup(){
    createCanvas(495,495);
    background(255,224,189);
    fill(255);
    rect(33,99,165,165);
    rect(297,99,165,165);
    noStroke();
    fill(66,33,11);
    rect(66,132,99,99);
    rect(330,132,99,99);
    fill(0);
    rect(33,33,165,33);
    rect(297,33,165,33);
    rect(99,165,33,33);
    rect(363,165,33,33);
    rect(231,264,33,33);
    rect(198,297,99,33);
    fill(255,0,0);
    rect(99,396,297,33);
    

}

function draw() {

}

I wanted to create an extremely simplified, pixelated self portrait. I created it first in illustrator and then placed into photoshop to easily see the placement of each shape.