Author: rfarn@andrew.cmu.edu

Looking Outward-02

Beautiful chaos is an interactive app created by Nathan Selikoff that displays abstract shapes and imagery as a reaction to 3D motion. The app was created and initially exhibited in 2013 for the Leap Motion controller, a virtual reality device. Based on certain hand motions, the app calculates new algorithms and moves swiftly and gracefully on the screen.

I find this specific piece really interesting because of the interactive aspect of it. The app relies on the movements of a user in order to morph. I find it very inspiring how physical movements can be converted into digital actions on screen.

Also, there’s an interesting juxtaposition between the calming, elegant visuals and the constant recalculating and thinking of the programming. While the display is seemingly soft and smooth, behind the scenes, the app is actually continuously calculating the movements and interaction of the user in order to project the video.

Beautiful Chaos

rfarn-project02

For this project, I started with a very complicated idea. I wanted to create three faces that would all have similar randomly changing variables that could flash around the screen like random lights.

However, I soon realized this would just be a lot of work and my code kept getting longer and longer with more and more variables to the point that I started confusing myself. In the end, I decided to just simplify my concept into one face with simple variables that could change.

sketch

var hairWidth = 160;
var hairHeight = 135;
var faceWidth = 130;
var faceHeight = 110;
var mouthHeight = 15;
var mouthWidth = 15;

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

  }


function draw() {
	 background(245, 235, 230);
	
	//blue hair
	strokeWeight(10);
	stroke(172, 216, 242);
	fill(180, 225, 255);
	rectMode(CENTER);
	rect(width/2, height/2, hairWidth, hairHeight, 20);
	noStroke();
	fill(250, 218, 190); //face
	rect(width/2, height/2 + 13, faceWidth, faceHeight, 20);
	fill(180, 225, 255); //bangs
	arc(width/2 + hairWidth/2 - 5, height/2 - 50, hairWidth*(7/5), 100, PI/2, PI, PIE);
	arc(width/2 - hairWidth/2 + 5, height/2 - 50, hairWidth*(2/3), 90, 0, PI/2, PIE);
	strokeWeight(3); //eyes
	stroke(255);
	fill(188, 235, 203);
	ellipse(width/2 - faceWidth/4, height/2 + 15, 20, 20);
	ellipse(width/2 + faceWidth/4, height/2 + 15, 20, 20);
	noStroke(); //mouth
	fill(231, 90, 124);
	ellipse(width/2, height/2 + 35, mouthWidth, mouthHeight);
 
}


function mousePressed(){
	hairWidth = random(160, 250);
	hairHeight = random(135, 225);
	faceWidth = random(130, 220);
	faceHeight = random(110, 100);
	mouthWidth = random(15, 30);
	mouthHeight = random(15, 30);
}

LookingOutward-01

SixthSense site

     One interactive project that really stuck to me is the SixthSense project. I first came across this project in a TEDx video. SixthSense is a prototype consisting of a projector, mirror and camera. It allows the user to have an interactive projection/screen on various surfaces in everyday life, using simple hand gestures to control it.

I find this project very inspiring because of its ease. The prototype relies on simple hand gestures and various physical surfaces that can be found anywhere. Its brings high-tech concepts and software into the every day lives of people. The website itself even has instructions to creating your own prototype device.

It is also very interesting seeing the potential of the prototype and trying to envision where this technology will end up. Although a lot of software and tech has been developed for this prototype, it is still a long way from becoming a refined product.

rfarn-assignment01-selfportrait

When first given the assignment to code a self portrait, my immediate thought was to create a portrait that was as realistic as possible. However, given my very little knowledge of coding, I soon found that that wouldn’t be possible. So I then turned to a more graphic, animated concept. Instead of creating a foreground and background portrait, I decided to use the entire canvas to illustrate my face. Once figuring out the placement of my face and hair, it was quick and easy to place and “draw” the rest of my facial features.

sketch

function setup() {
    createCanvas(600, 500);
    background(54, 37, 29);

  }

function draw() {
	noStroke();
	
	//face
	fill(250, 209, 178);
	rectMode(CENTER);
	rect(300, 450, 400, 600, 100);

	//hair
	fill(54, 37, 29);
	ellipseMode(CENTER);
	ellipse(500, 70, 600, 500);
	ellipse(100, 10, 300, 600);

	//eyes
	stroke(255);
	strokeWeight(3);
	fill(65, 56, 23);
	ellipseMode(CENTER);
	ellipse(200, 350, 40, 40);
	ellipse(400, 350, 40, 40);
	noStroke();
	fill(255);
	ellipse(190, 340, 10, 10);
	ellipse(390, 340, 10, 10);

	//mouth
	fill(0);
	arc(300, 425, 150, 100, 0, PI);
	fill(255);
	ellipseMode(CENTER);
	ellipse(300, 425, 150, 25);
	fill(250, 209, 178);
	rect(300, 400, 200, 50);

	//nose
	fill(233, 194, 164);
	arc(300, 395, 45, 20, 0, PI);

}