Alice Fang- Project 02 Variable Face

dancing bird

/*
Alice Fang
Section E
acfang@andrew.cmu.edu
Project-02
*/

var R = 255; //RGB color
var G = 255;
var B = 255;

var HeadW = 300; //width of head
var HeadH = 200; //height of head
var HeadX = 320; //x position of head
var HeadY= 200; //y position of head

var beakA = 80; //length of beak

var t = "chirp";
var tX = 600; //text position
var tY = 440;
var ran = 300; //affecting variable

var kneeA = 300; //x position for knee
var kneeB = 390; //y position for knee

var wingW = 30; //wing width
var wingL = 120; //wing length
var degW = 260; //angle of wing

var featherA = 20; //width of first head feather
var featherB = 80; //height of first head feather
var featherC = 10; //width of second head feather
var featherD = 75; //height of second head feather
var deg = 50; //angle of head feather

function setup() {
    createCanvas(640, 480);
    angleMode(DEGREES);
}

function draw() {
	background(20, 30, 50);

	//bird legs
	stroke(117, 53, 18);
	strokeWeight(6);
	//left leg
	line(HeadX, HeadY, kneeA, kneeB);
	line(kneeA, kneeB, HeadX - 40, 480);
	//rightlig
	line(HeadX, HeadY, kneeA + 100, kneeB);
	line(kneeA + 100, kneeB, HeadX + 40, 480);

	//"chirp" text
	noStroke();
	textSize(20);
	textStyle(BOLD);
	fill(B - 120, G - 80, R - 100);
	text(t, tX, tY);
	fill(R - 20, B - 80, G - 120);
	text(t, mouseX, mouseY);
	fill(G - 100, B - 120, R - 10);
	text( t, tX + ran, tY + ran);

	//bird body
	noStroke();
	fill(R, G, B);
	ellipse(HeadX, HeadY, HeadW, HeadH);

	//left wing
	fill(R, G, B);
	push();
	translate(HeadX - HeadW/2, HeadY);
	rotate(180 + degW);
	ellipseMode(CORNER);
	ellipse(0, 0, wingW, wingL);
	pop();
	//right wing
	push();
	translate(HeadX + HeadW/2, HeadY);
	rotate(180 - degW);
	ellipseMode(CORNER);
	ellipse(-20, 0, wingW, wingL);
	pop();

	//head feathers
	fill(R, G, B);
	push();
	translate(HeadX, HeadY - HeadH/2);
	rotate(180 + deg);
	ellipseMode(CORNER);
	if (HeadY - HeadH/2 <= 80) {
		ellipse(0, 0, featherA, 40);
	} else {
		ellipse(0, 0, featherA, featherB);
	}
	pop();

	push();
	translate(HeadX, HeadY - HeadH/2);
	rotate(180+ deg + 40);
	ellipseMode(CORNER);
	if (HeadY - HeadH/2 <= 80) {
		ellipse(0, 0, featherC, 40);
	} else {
		ellipse(0, 0, featherC, featherD);
	}
	pop();

	//bird beak
	fill(193, 86, 27);
	triangle(HeadX, HeadY - 10, HeadX + beakA, 
		    HeadY, HeadX, HeadY + 5);

	//bird eyes
	fill(0);
	ellipse(HeadX - 32, HeadY - 15, 8, 8);
	ellipse(HeadX + 32, HeadY - 15, 8, 8);

}

function mousePressed() {
	R = random(180, 255);
	G = random(180, 255);
	B = random(180, 255);

	//head
	HeadW = random(120, 200);
	HeadH = random(150, 180);
	HeadX = random(300, 320);
	HeadY = random(150, 200);

	beakA = random(-70, 80);

	//knee joint
	kneeA = random(220, 300);
	kneeB = random(320, 370);

	//text position
	tX = random(110, 550);
	tY = random(20, 440);
	ran = random(-300, 300);

	//wing size and angle
	wingL = random(80, 120);
	wingW = random(10, 30);
	degW = random(200, 260);

	//head feather size and angle
	featherA = random(10, 20);
	featherB = random(50, 80);
	featherC = random(5, 10);
	featherD = random(20, 75);
	deg = random(-50, 50);


}

This dancing bird was inspired by a doodle that I tend to draw in my notes (and in my friends’ notes too…). Working with variables was a bit of a struggle for me, especially if something went wrong in the position or rotation, because then I had to figure out which variable the problem occurred with, as opposed to just toggling numbers, but this was a fun exercise to do!

birds of various sizes!

Alice Fang- Looking Outwards-2

“Metamorphic Drawings” by Miguel Nóbrega, days 1-6

it’s doing it is an online exhibition where artists express a set of instructions through code which then generates images daily for 45 days. With a new, unique image generated every single day, this project experiments with removing the physical viewing aspect of interactive exhibitions, instead driving the viewer to revisit the webpage over a month and a half. A new visit to the website will have a new set of images curated. I think this is an interesting solution to the problem of displaying media in galleries that are limited in the physical world, and I wish I knew about this while it was still current, to experience first hand the intrigue in visiting the site daily to see unique, but similar pieces of art.

Written instructions are given to the viewer as well, and they tend to be very poetic, and although the computer generates the image, the artist still has their own personal touch (through style and type of content). Each artist probably used algorithms with different purposes, from randomizing variables of size and generating numbers for colors (Matthias Dörfelt’s ‘Daily Donut’) to adding filters and effects from images in a database (Daniel Schwarz’s ‘Morning Routine’), to generating random handwritings (Adam Ferriss’ ‘Signed Autograph’).

Alice Fang- Self Portrait

alice-portrait

/* Alice Fang
Section E
acfang@andrew.cmu.edu
Project-01
*/


function setup() {
    createCanvas(600, 600);
    background(87, 160, 170);

    //neck
    noStroke();
    fill(244, 207, 162);
    quad(289, 444, 412, 428, 480, 600, 300, 600);

    //hair
    fill(76, 35, 5);
    ellipse(337, 199, 385, 350);
    quad(176, 252, 314, 303, 218, 562, 80, 511);
    ellipse(199, 542, 244, 357);

    //ear
    fill(244, 171, 122);
    ellipse(183, 307, 75, 103);

    //earring
    strokeWeight(5);
    stroke(225, 245, 235);
    noFill();
    rect(161, 350, 45, 125, 17);

    //shirt
    noStroke();
    fill(204, 104, 70);
    quad(273, 527, 433, 471, 480, 600, 300, 600);

    //face
    fill(244, 207, 162);
    ellipse(338, 271, 350, 408);

    //nose
    fill(244, 171, 122);
    quad(284, 290, 317, 323, 300, 351, 267, 336);

    //eye line
    fill(76, 35, 5);
    ellipse(357, 279, 47, 32);
    ellipse(244, 283, 47, 32);

    //white of eye
    fill(255, 245, 235);
    ellipse(243, 287, 44, 29);
    ellipse(358, 283.2, 44, 29);

    //pupil
    fill(76, 35, 5);
    ellipse(256, 285, 21, 27);
    ellipse(370, 282, 21, 27);

    //eyebrow
    stroke(76, 35, 5);
    strokeWeight(10);
    line(214, 252, 268, 252);
    line(334, 238, 389, 253);

    //top of mouth, nose shadow
    noStroke();
    fill(219, 122, 83);
    ellipse(305, 388, 57, 22);
    quad(267, 336, 296, 339, 317, 322, 300, 351);

    //bottom of mouth
    fill(204, 104, 70);
    ellipse(306, 395, 50, 11);

    //bangs
    fill(76, 35, 5);
    ellipse(485, 390, 147, 564);
    rect(250, 54, 151, 192, 25);
    quad(120, 205, 211, 68, 296, 125, 205, 261);
    quad(346, 93, 432, 50, 521, 231, 424, 273);

}

I found this project to be fairly straightforward, though it was tricky making sure I had the elements in the correct order (especially my hair, in order to get bangs in front of my face…), and making sure the code was organized and readable. Super satisfied with learning how to do this!

Alice Fang-LookingOutwards-1

Demonstration of Sandbox AR

This augmented reality sandbox, developed by a team at UC Davis, is an interactive topographical map that changes based on the shape of the real sand in the sandbox. Elevation, water, and contour lines are projected in real time as the sand shifts and changes. I think this project is great from a design standpoint in bringing physical interaction with the augmented reality as a tool for education. Users can change topography with their own hands, and the projection provides a deeper understanding into the unique landscape, as well as simulate water flow into the valleys and surfaces created. I think it would be interesting to consider how the project would integrate in exhibition, for example if it were displayed at the Carnegie Museum of Natural History.

To the best of my knowledge, the team developed custom software, which is available free to download, for anyone who wants to build their own sandbox AR(!). I’ve also seen a few videos of science teachers unaffiliated with UC Davis who built the sandbox AR for their own classrooms, and I think having an open source for something like this is a great resource to educators, but also people who are interested in AR.

Oliver Kreylos, UC Davis