Author: sarahk1@andrew.cmu.edu

Sarah Kang – Project 02 – Variable Face

ugly

//sarah kang
//section c
//sarahk1@andrew.cmu.edu
//project-02

var faceWidth = 180;
var earDim = 40;
var earhole = 20;
var eyebrows = 170;
var nostril = 7;
var hairlength = 30;
var hairR = 0;
var hairG = 0;
var hairB = 0;
var shirtR = 0;
var shirtG = 0;
var shirtB = 0;

function setup() {
	createCanvas(400, 400);
	background(255, 242, 246);
}

function draw() {
	noStroke();

	//body
	fill(shirtR, shirtB, shirtG);
	ellipse(200, 350, 100, 200);

	//ears
	fill('tan');
	ellipse(115, 200, earDim, earDim);
	ellipse(285, 200, earDim, earDim);
	fill(171, 133, 103);
	ellipse(115, 200, earhole, earhole);
	ellipse(285, 200, earhole, earhole);

	//face
	fill('tan');
	ellipse(200, 200, faceWidth, 180);

	//hair
	fill(hairR, hairG, hairB);
	rect(200, 100, 7, hairlength);

	//eyes 
	fill('white');
	ellipse(165, 200, 30, 15);
	ellipse(235, 200, 30, 15);
	fill('black');
	ellipse(165, 200, 15, 15);
	ellipse(235, 200, 15, 15);

	//nostrils
	ellipse(190, 220, nostril, nostril);
	ellipse(210, 220, nostril, nostril);

	//brows
	stroke(0);
	noFill();
	arc(165, eyebrows, 30, 10, PI, 0, OPEN);
	arc(235, eyebrows, 30, 10, PI, 0, OPEN);

	//mouth
	stroke(176, 60, 79);
	strokeWeight(2);
	arc(200, 240, 30, 30, 0, PI, CHORD);
}

function mousePressed(){
	faceWidth = random(180, 220);
	earDim = random(40, 100);
	earhole = random(40, 80);
	eyebrows = random(140, 180);
	hairlength = random(20, - 80);
	nostril = random(4, 14);
	hairR = random(0, 225);
	hairB = random(0, 225);
	hairG = random(0, 225);
	shirtR = random(0, 225);
	shirtB = random(0, 225);
	shirtG = random(0, 225);
}

I enjoyed playing around with different variables for my face. Adjusting the colors to only display certain shades that were still discernible was pretty difficult, so I decided to completely randomize the colors instead.

Sarah Kang – Looking Outwards – 02

“Unnumbered Sparks” by Janet Echelman x Aaron Koblin, March 2014 in downtown Vancouver, Canada

Unnumbered Sparks was an interactive installation project created through the collaboration generative artist Aaron Koblin and sculptor, Janet Echelman. This giant, floating canvas was installed in downtown Vancouver, Canada in March of 2014, generating through the real-time data sent through visitors’ mobile devices. I was first interested in this project by its striking visual quality, but then even more amazed by the rendering aspect of this artwork, as visitors directly painted magnified beams of colored light with just small movements on their phones. This project was entirely manifested on a giant, Google Chrome window and programmed using Go, a language that manages the visitor interactions and outputs the visuals to the light projectors. WebGL is a web technology that enables real-time graphics processing; with the WebSockets connection, when users make contact with their phones, the location data is transmitted to the server, allowing instant interaction with the giant canvas projections.

The Making of Unnumbered Sparks, from YouTube.

Aaron Koblin’s focus on data-based interactive digital art partnered with Janet Echelman’s beautiful, flowing sculptures creates a visual experience that users can directly experience and become a part of.

Project-01-Face Sarah Kang

My approach to this project was to capture my features into a mini cartoon character. Although I tried my best to translate my face features into this portrait, my picture turned out looking pretty different from my appearance in reality, especially my hair. Despite this outcome, this was a good learning experience on how to draw geometric shapes on p5.js.

face

//Sarah Kang
//Section C
//sarahk1@andrew.cmu.edu
//assignment-01
var line;
function setup() {
	createCanvas(600, 600);
}
function draw() {
	background(255, 204, 100);
	

	strokeWeight(2.5);
	stroke(0, 0, 255);
	for(var offset =0; offset<600; offset +=20){
		line(offset, 0, offset, height);
	}
	//bangs
	noStroke();
	fill(0);
	rect(185, 315, 230, 180);
	//face + neck
	noStroke();
	fill(238, 212, 194);
	ellipse(300, 300, 196, 264);
	ellipse(300, 450, 40, 150);
	//ears
	ellipse(392, 355, 30, 30);
	ellipse(208, 355, 30, 30);
	
	//shirt
	fill(245, 102, 91);
	ellipse(300, 600, 170, 260);
	//hair in back
	fill(0);
	arc(300, 240, 230, 185, PI, 0, OPEN);
	rect(185, 240, 230, 75);
	//eyes
	ellipse(255, 350, 15, 7);
	ellipse(345, 350, 15, 7);
	//eyebrows
	stroke(0);
	noFill();
	arc(255, 340, 30, 10, PI, 0, OPEN);
	arc(345, 340, 30, 10, PI, 0, OPEN);
	//mouth
	stroke(245, 102, 91);
	noFill();
	arc(300, 400, 20, 7, 0, PI, OPEN);
	//earrings
	stroke(360);
	ellipse(392, 375, 14, 20);
	ellipse(208, 375, 14, 20);
}

Sarah Kang – Looking Outwards – 01

Virtual walk-through of the Borderless World exhibit in the Museum of Digital Art in Tokyo, Japan by teamLab on YouTube

The world’s first digital art museum opened in Tokyo, Japan early last year. One of its most famous exhibit sections is Borderless World, where visitors can experience an otherworldly waterfall, an interactive digital installation by teamLab. teamLab is an art collective created by an interdisciplinary group of ultra-technologists aiming to analyze and explore the interactions between humans and nature using art. I was immediately drawn to this exhibit because of the virtual three-dimensional experience inspired by the fusion of natural elements with the world of digital art. This is an example demonstrating the possibilities that can be created in virtual reality to take art installations to another dimension in the future. The interactions amongst the water particles are extensively calculated to simulate the reality of a waterfall, and directly react when people approach the water flows that transform in real-time. The lines that are drawn from the interactions between the water particles are flattened using “ultrasubjective” space resulting in visual states that can never reoccur, or be replicated.

image of visitor interactions with the digital waterfall