Month: August 2018

Studio Drift’s Shylights

While at the Design Museum, the Stedelijk, in Amsterdam, I had the opportunity to experience Studio Drift’s Shylights. These lights resemble flowers: growing, blooming, reacting- all as a part of a carefully choreographed dance.  Studio Drift, an artist collective led by Lonneke Gordijn and Ralph Nauta, was inspired by the “constant metamorphosis” of human activity. Using the expression of emotion and character as inspiration, they were interested in applying this attitude to inanimate objects, such as these Shylights.

I am inspired by this project because of the multiple layers of design involved in its creation. The first layer being the visual design and fabrication of the light itself, combined with the layers of responsive coding and software needed to control the light, with the last layer being the expression of their concept: human nature in inanimate objects.

Video of Design, Production, and Performance of Shylights by Studio Drift

Shylight movie by Studio Drift (extended version) from Studio DRIFT on Vimeo.

You can find out more about the project on Studio Drift’s website at http://www.studiodrift.com/work/shylight/

Jamie Dorst Project 01 Face


/*
Jamie Dorst
Section A
jdorst@andrew.cmu
Project-01
*/

function setup() {
    createCanvas(600, 600);
    background('#ADD8E6');
}

function draw() {

	noStroke();
	translate(-10, -30);
	
// hair
	fill('#271815');
	rectMode(CENTER);
	rect(300, 320, 250, 320, 100, 100, 20, 20);
	
// face
	fill('#EAC086');
	rectMode(CENTER);
	rect(300, 310, 200, 240, 100, 100, 120, 120);

// eyes
	fill('white');
	ellipseMode(CENTER);
	ellipse(255, 290, 40, 20);
	ellipse(345, 290, 40, 20);

	fill('#49311C');
	ellipse(255, 290, 20, 20);
	ellipse(345, 290, 20, 20);

	fill('black');
	ellipse(255, 290, 12, 12);
	ellipse(345, 290, 12, 12);

// eyebrows
	fill('#2D221F');
	rect(250, 270, 50, 7);

	rect(350, 270, 50, 7)

// nose
	noFill();
	stroke(51);
	strokeWeight(2);
	arc(300, 335, 22, 20, 0, PI);

// mouth
	strokeWeight(4);
	strokeCap(ROUND);
	stroke('#C4877A');
	arc(300, 370, 50, 25, 0, PI);

// more hair
	noStroke();
	fill('#271815');

	translate(250, -120);
	rotate(PI / 4.0);
	ellipseMode(CENTER);
	ellipse(250, 250, 70, 180);

	translate(576, -80);
	rotate(PI / 2.0);
	ellipseMode(CENTER);
	ellipse(250, 250, 70, 160);

}

I found this project sort of difficult at first just to visualize what I was going to be doing and the order the layers needed to be in, but once I got going I got the hang of it. The most difficult part was probably rotating the ellipses for my hair, I figured out a way to do it eventually, but I’m guessing there’s a better way than what I did.

Sarah Yae Project 1 Face

sarahyae-faceportrait

function setup() {
    createCanvas(500, 500);
    background('rgb(216,191,216)');

//face
    fill ('rgb(255,235,205)');
    ellipse (250,250,180,230);

//eyes related
    fill ('white');
    ellipse (215,225,40,20);

    fill ('black');
    ellipse (215,225,19,20);

    fill ('brown');
    arc (215,205, 50,10,PI,0);

    fill ('white');
    ellipse (285,225,40,20);

    fill ('black');
    ellipse (285,225,19,20);

    fill ('brown');
    arc (285,205,50,10,PI,0); 

//glasses 
    noFill ();
    ellipse (215,225,55,30);  
    noFill();
    ellipse (285,225,55,30);
    line (242.5,225,257.5,225)

//nose
    line (250,240,260,275);
    line (260,275,240,275);

//mouth
    fill ('red');
    arc (250,300,60,20, 0, PI);

//hair
    fill ('rgb(51,24,29)');
    rect (160,160,30,250);
    rect (310,160,30,250);
    arc (250,170,170,70,PI,0);

}

function draw() {
}

I used my favorite color, lavender, as the background color. I also added glasses to my self-portrait because I have been wearing glasses since I was 9.

Shirley Chen-Project-01-Face

shirleychen-face

// Shirley Chen
// Section B
// junfanc@andrew.cmu.edu
// Project-01


function setup() {
    createCanvas(600, 600);
    background(255, 171, 187);
}

function draw() {
//hair
	fill(82, 54, 36);
	noStroke();
	rect(151, 182, 299, 298);

//face
	fill(240, 206, 183);
	noStroke();
	rect(190, 150, 230, 230, 20, 20, 80, 80);

//bangs
	noStroke();
	fill(82, 54, 36);
	rect(180, 150, 240, 100);
	fill(82, 54, 36);
	arc(300, 200, 300, 300, PI, 0);
	var x1 = 240,
	x2 = 230,
	x3 = 230,
	x4 = 220;
	var y1 = 250,
	y2 = 190,
	y3 = 190,
	y4 = 250;
	fill(240, 206, 183);
	noStroke();
	bezier(x1, y1, x2, y2, x3, y3, x4, y4);
	var x1 = 295,
	x2 = 300,
	x3 = 300,
	x4 = 310;
	var y1 = 250,
	y2 = 197,
	y3 = 197,
	y4 = 250;
	fill(240, 206, 183);
	bezier(x1, y1, x2, y2, x3, y3, x4, y4);
	var x1 = 375,
	x2 = 380,
	x3 = 380,
	x4 = 390;
	var y1 = 250,
	y2 = 220,
	y3 = 220,
	y4 = 250;
	fill(240, 206, 183);
	bezier(x1, y1, x2, y2, x3, y3, x4, y4);

//eyes
	fill(0);
	var c = color(0);
	fill(c);
	ellipse(250, 300, 35, 35);
	ellipse(360, 300, 35, 35);

//blush
	var c = color(249, 177, 177);
	fill(c);
	ellipse(240, 340, 50, 35);
	ellipse(370, 340, 50, 35);

//mouth
	fill(206, 95, 95);
	noStroke();
	rect(290, 345, 30, 20, 0, 0, 10, 10);

//body
	fill(139, 162, 176)
	rect(160, 410, 280, 400, 70, 70, 0, 0);

//neck
	fill(240, 206, 183)
	rect(280, 380, 40, 30);

//hair relection
	noFill();
	stroke(213, 167, 121);
	strokeWeight(9);
	curve(260, 250, 180, 180, 250, 100, 260, 200);
	strokeWeight(15);
	point(180, 200);

//arms	
	stroke(0)
	strokeWeight(2);
	line(200, 500, 200, 600);
	line(400, 500, 400, 600);
}

This project is really fun to work on! The part that I need to be careful about during the process is the order of writing my code because I need to figure out which part is on the top and which is at the bottom. Keeping track with the coordinates is also important during the process. I enjoy this project!

Erin Fuller – Self Portrait


//Erin Fuller
//SectionA
//efuller@andrew.cmu.edu
//Project-01

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

function draw() {
    background(157, 196, 191);
    background(157, 196, 191);
    background(157, 196, 191);


//hair background

    strokeWeight(0);
    fill(214, 101, 36);
    ellipse(210, 180, 100, 30);    

    strokeWeight(0);
    fill(214, 101, 36);
    ellipse(340, 180, 200, 120);    

    strokeWeight(0);
    fill(214, 101, 36);
    rect(160, 180, 280, 340);   

//ears

    strokeWeight(0);
    fill(252, 206, 146);
    ellipse(175, 285, 40, 65);

    strokeWeight(0);
    fill(252, 206, 146);
    ellipse(425, 285, 40, 65);

//face

    strokeWeight(0);
    fill(255, 217, 153);
    ellipse(300, 300, 230, 290);

// hair foreground

    strokeWeight(0);
    fill(214, 101, 36);
    ellipse(210, 180, 100, 80);    
    
    strokeWeight(0);
    fill(214, 101, 36);
    ellipse(340, 180, 200, 80);  

//eyebrows

    strokeWeight(3); 
    stroke(168, 79, 28)   
    noFill();
    line(315, 240, 344, 230);
    line(344, 230, 365, 234);

    strokeWeight(3); 
    stroke(168, 79, 28)   
    noFill();
    line(285, 240, 256, 230);
    line(256, 230, 235, 234);

 //nose

    strokeWeight(2.5); 
    stroke(214, 177, 128)   
    noFill();
    line(300, 265, 315, 310);
    line(315, 310, 305, 315);

//smile

    strokeWeight(2.5); 
    stroke(204, 61, 94)   
    noFill();
    arc(300, 366, 85, 40, 0, PI);

//left eye

    strokeWeight(0);
    fill(249, 249, 249);
    ellipse(267, 265, 35, 20);

    strokeWeight(0);
    fill(77, 124, 69);
    ellipse(267, 265, 15, 15);

//right eye

    strokeWeight(0);
    fill(249, 249, 249);
    ellipse(343, 265, 35, 20);

    strokeWeight(0);
    fill(77, 124, 69);
    ellipse(343, 265, 15, 15);

//freckles

    strokeWeight(0);
    fill(186, 115, 80);
    ellipse(350, 300, 4, 4);
    ellipse(366, 300, 4, 4);
    ellipse(342, 313, 4, 4);
    ellipse(358, 313, 4, 4);
    ellipse(374, 313, 4, 4);

    strokeWeight(0);
    fill(186, 115, 80);
    ellipse(250, 300, 4, 4);
    ellipse(266, 300, 4, 4);
    ellipse(242, 313, 4, 4);
    ellipse(258, 313, 4, 4);
    ellipse(274, 313, 4, 4);


    noLoop();
}

I was originally very nervous for this class and the idea of coding, just because it seems too structured for me. However, I had a lot of fun with the project and had a lot of satisfaction when I made each new shape and of course when I finally completed the self-portrait.

Judy Li-Project-01-Face

judyli:Face Project

/*
Judy Li
Section A
judyli@andrew.cmu.edu
Assignment-01
*/

function setup() {
    createCanvas(500, 500);
    background(218,165,32);
}

function draw() {
	drawBackgroun();
	drawFace();
	drawBrows();
	drawEyes();
	drawLashes();
	drawNose();
	drawMouth();
	drawHat();
}

function drawBackgroun() {
	strokeWeight(0);
	fill(218,175,32);
	rect(50,50,400,400);
	fill(218,165,32);
	rect(100,100,300,300);
	fill(218,175,32);
	rect(150,150,200,200);

}

function drawFace() {
	strokeWeight(0);
	fill(239,219,178);
	rect(200,225,100,50);
	ellipseMode(CENTER);
	ellipse(250,225,100,50);
	ellipse(250,280,100,75);
}

function drawBrows() {
	fill(77,55,39);
	ellipse(225,240,30,5);
	ellipse(275,240,30,5);
	fill(239,219,178);
	ellipse(225,242.5,30,3);
	ellipse(275,242.5,30,3);
}

function drawEyes() {
	fill(239,200,150);
	ellipseMode(CENTER);
	ellipse(225,250,25,10);
	ellipse(275,250,25,10);
}

function drawLashes() {
	strokeWeight(1);
	line(225,255,225,257.5);
	line(220,255,217.5,257.5);
	line(230,255,232.5,257.5); 
	line(275,255,275,257.5);
	line(270,255,267.5,257.5); 
	line(280,255,282.5,257.5); 
}

function drawNose() {
	strokeWeight(0.5);
	fill(239,200,150);
	ellipse(248,280,10,5);
}

function drawMouth() {
	strokeWeight(0);
	fill(230,141,139);
	ellipse(245,298,10,5);
	ellipse(255,298,10,5);
	fill(225,120,118);
	ellipse(250,300,20,2.5);
	ellipse(250,300.5,17.5,4.5);
}

function drawHat() {
	strokeWeight(0);
	fill(108,108,108);
	rect(200,215,100,5);
	fill(0,0,0);
	rect(200,215,100,-30);
	ellipse(250,185,100,25);
	ellipse(250,225,185,15);
}

A lot of the people around me tell me that I love to sleep, wear hats quite often, and love the color golden yellow. Hence, I used all that for this project. When I started out, it was a bit difficult to start because I had no image in mind. But, I started to play around with the shapes and color to created this. I think during this process, I realized that my java script codes were a bit messy, so I made it more organized and I think that helped me a lot! Overall, I had fun with this project and learned a lot.

Yiran Xuan – Looking Outwards – 01

Snap Ships

Tested’ visit to Snap Ships’ Booth at MakerFaire Bay Area 2018

Though the primary focus of this video is the modular construction aspect of the ships, the most interesting component to me is the brief glimpse into the augmented-reality component. As a kid growing up with Lego, I made ships for hours on end, but they were static models so their interactivity was limited to my imagination. How great would it be to actually pilot my ship and have it interact with an environment?

Snap Ships currently seems to be only a startup looking for funding, consisting of a few guys who used CAD software, apparently Rhino, to design the components and 3D print them. The AR component looks like it may be made from Unity, which is a common starting point for game programming.

For now, the AR portion seems to be at a stage where a built model can be recognized by program through use of a special visual marker; the game can overlay the camera image of the ship with rocket flares and wing contrails. In addition, when a checkered platform is presented to the game’s camera, the game is abel to overlay a preloaded model onto it; the ship rotates with this platform that a person can hold and pick up. It is unknown whether the preloaded models can be replaced with the physically built ones.

Moving forward, the team looks to introduce more parts, such as mecha-themed components, as well as add more interactivity to the AR portion.

 

Victoria Reiter-Looking Outwards-01

Meandering River

 

 

 

 

Snapshot of image generated by the “Meandering River” project

Meandering River is an audio- visual installation put on display at the Funkhaus Berlin Sound Chamber between July 28 and July 30. Its designer is the Berlin-based studio for art and design onformative, which markets itself as existing at the boundary of art, design, and technology.

Meandering River features a visual presentation across multiple suspended screens, which is created in real-time as a reaction to an AI-generated audio soundscape. Berlin music group kling klang klong is credited with the initial inspiration of the music, by recording their interpretation of a soundscape inspired by the natural flow of a river. However, the soundscape utilized in the installation is actually composed by a computer, which used machine learning algorithms to “‘look’ not at the visuals but the raw data behind the visualization.” The main goal of onformative’s installation is to “create a ‘unique awareness of time,’ drawing us into what the studio describes as an ‘intense emotional journey’ that reminds us of nature’s beauty, its complexity, and capacity for slow, but dramatic change.”

What I find interesting about this project is how it seems to use technology to subvert the traditional understanding of what technology itself is. Technology is often seen as cold, unfeeling, artificial, and fast-paced, so to use it for the purpose of reflecting something emotional, natural, and slow, makes viewers rethink how technology can be purposed.

Little preview of the Meandering River soundscape and how it was created. Like the creation of the simulated river movement also the sound is created in an unusual and unpredictable way. We teamed up with @theklongs to create an A.I. driven soundscape. Using Machine Learning a computer was tought to compose. How? They invited different real piano players to improvise to the river visualisation. This material was used to teach a machine to create its own interpretation of the piece. The machine takes what it has learnt via Machine Learning algorithms and improvises by “looking” not at the visuals but the raw data behind the visualization. The result is 6 different machine composed pieces generated by klingklangklong, the machine and the river. #meanderingriver #river #digitalart #code #generative #machinelearning #soundofrivers #berlinevents #soundart #soundinstallations #artificialintelligence #theklongs2018 #funkhausberlin #nature

A post shared by onformative (@onformative) on

AI-generated soundscape for Meandering River

Link to a full description of the project and omformative’s website embedded above. Link to the Facebook event page here.

.

Elena-Deng-Looking-Outwards-01

One project that I find inspirational is Google’s Tilt Brush. I find it amazing that with all the technology of today, we are able to combine VR and fine arts in a new and innovative way. The project itself was developed by Skillman and Hackett, a rapid prototyping company in San Francisco. The project began in 2014 and since then it continually been in development. To the best of my knowledge, the creators of the product used preexisting headsets and handheld controllers, however the program was revamped and the two tracking sensors could allow you to paint or draw anywhere within the room.

The creators may have been inspired by artists and sculptors who bend the conventions of painting and 3D work. The future of the Tilt Brush, I believe, will be determined in what direction the users want the product to go in. As the technology improves, the Tilt Brush will become more responsive as well as lighter in physical form.