Looking Outwards 07 – Min Lee

 

 

                               The Library Project’s Futuristic UI
    The Interface makes every collection and connections visible.

The Library Project created by Spacial Information Digital Lab is a digital interface for browsing all collections and connections at the Columbia University Library in a very visible way. It allows for easy browsing that invites curiosity in the readers. The reason this project stood out to me is its amazingly futuristic UI design. It’s the first step to a modern and forward-looking design for educational purposes. What I particularly admire is the institution’s design choices to make an interface that motivates readers. I could imagine this being a standard piece of technology used for education in the next decade or so.

 

 

Source: http://www.visualcomplexity.com/vc/project_details.cfm?id=967&index=967&domain=

Project 06 – Min Lee

sketch

var prevSec;
var millisRolloverTime;

function setup() {
    createCanvas(480, 480);
    millisRolloverTime = 0;
}

function draw() {
	//changes background color to be different from minute color 
	if  (H % 2 == 1) {
		background(221, 84, 105)
	} else {
		background(141, 173, 157)
	}

	var H = hour();
	var M = minute();
	var S = second();

    text("Hour: "   + H, 10, 22);
    text("Minute: " + M, 10, 42);
    text("Second: " + S, 10, 62);

    if (prevSec != S) {
		millisRolloverTime = millis();
	}
	prevSec = S;
	var mils = floor(millis() - millisRolloverTime);

	//makes minute and second values move smoothly
    var fractionSeconds = S + (mils / 1000.0);
    var secondsWidth = map(fractionSeconds, 0, 60, -300, 300);
    var minutesSmooth = map(M + (fractionSeconds / 60.0), 0, 60, -HALF_PI, PI + HALF_PI);
    var fractionHours = H + (minutesSmooth / 60.0)
    var hoursSmoothWidth = map(fractionHours, 0, 24, -240, 240);


    //minute color changes between green and pink
    if (H % 2 == 1) { 
    	//pink minute hand
	    push();
	    strokeWeight(2);
	    fill(221, 84, 105);
	    arc(width / 2, height / 2, width * 2, width * 2, - HALF_PI, minutesSmooth);
    	pop();
    } else if (H % 2 == 0) {
    	//green minute hand
 	    push();
	    strokeWeight(2);
	    fill(141, 173, 157);
	    arc(width / 2, height / 2, width * 2, width * 2, - HALF_PI, minutesSmooth);
    	pop();   	
    }

    //seconds circle closes and opens every 60 seconds
    push();
    stroke(58, 90, 120);
    strokeWeight(3);
    line(width / 2, height, width / 2, 0);
    pop();
    push();
    fill(141, 173, 157);
    strokeWeight(3);
    stroke(58, 90, 120);
    if (H % 2 == 1) {
    	fill(141, 173, 157);
    	ellipse(width / 2, height / 2, secondsWidth, 300);
    } else {
    	fill(221, 84, 105);
    	ellipse(width / 2, height / 2, secondsWidth, 300);
    }
    pop();

    //hours circle moves across 
    push();
    noStroke();
    fill(58, 90, 120);
    translate(width / 2, height / 2);
    ellipse(hoursSmoothWidth, 0, 50, 50);
    pop();
}

For this project I wanted to insert some 3D aspect, which is why I added a rotating circle for the seconds hand. I wanted to make the hour circle move across the screen from side to side but I ran out of time.

Initial Sketch

Looking Outwards 06 – Min Lee

                     Sand Spline by Anders Hoff

Generative Art is art in which there is a level of autonomy that the artist is not in direct control of. More specifically, in generative art, the artist purposefully produces a canvas with certain blank spots that can be generatively filled in and still produces a wonderful outcome within the artist’s vision.

In this particular work, the basic concept that the artist is using is the mathematical concept of B-splines, where a smooth spline is drawn through control points without passing through these points itself. By moving the points, or nodes, the splines follow the nodes, creating an erratic yet smooth picture. Hoff, the artist for this piece, used randomness to change the positions of the nodes. From this piece, I could sense the artist’s intentions of creating a beautiful transitional piece that showcases the calm becoming the erratic.

Source: https://inconvergent.net/thoughts-on-generative-art/

Looking Outwards 05 – Min Lee

The Trade by Jacky Lee

The Trade by Jacky Lee is an astounding work that was made through 3D computer graphics. The piece took two months for him to complete and it was all done through ZBrush, Substance Painter, Arnold and Photoshop.

What captivates me about this piece is the juxtaposition of two very common fears, the fear of sharks and the fear of going to the dentist. The artist presents the setting in a comical sort of way with the use of computer generated graphics to add a touch of realism. The artist’s creativity shines through and it generates a funny ironic sort of humor in his piece. Although the dark colors used and the realistic and horrifying shark head mounting the center of this piece dominate the visual context, the underlying humorous situation reflects the artist’s sensibility.

Source:

https://www.creativebloq.com/3d/inspiring-examples-3d-art-12121523

 

Project 05 – Min Lee

sketch

function setup() {
    createCanvas(600, 600);
    background(169, 209, 226);
}

function draw() {
	// milk boxes 
	var xPosition = 0;
	var yPosition = 0;
	translate(0, -50);
	fill(255);

	for (var y = 1; y < 12; y++) {
		for (var x = 0; x < 10; x++) {
			if (y % 2 == 0) {
				var spaceX = 90;
				var spaceY = 60;
				//milk face
				quad(xPosition + spaceX * x, yPosition + spaceY * y,
				xPosition + 50 + spaceX * x, yPosition + spaceY * y, 
				xPosition + 50 + spaceX * x, yPosition + 70 + spaceY * y, 
				xPosition + spaceX * x, yPosition + 70 + spaceY * y);
				//milk side
				quad(xPosition + 50 + spaceX * x, yPosition + spaceY * y, 
				xPosition + 50 + 15 + spaceX * x, yPosition - 12 + spaceY * y, 
				xPosition + 50 + 15 + spaceX * x, yPosition + 58 + spaceY * y, 
				xPosition + 50 + spaceX * x, yPosition + 70 + spaceY * y);
				//milk middle
				quad(xPosition + spaceX * x, yPosition + spaceY * y, 
				xPosition + 50 + spaceX * x, yPosition + spaceY * y, 
				xPosition + 50 + 7 + spaceX * x, yPosition - 22 + spaceY * y, 
				xPosition + 10 + spaceX * x, yPosition - 22 + spaceY * y);
				//milk top
				quad(xPosition + 10 + spaceX * x, yPosition - 22 + spaceY * y, 
				xPosition + 50 + 7 + spaceX * x, yPosition - 22 + spaceY * y, 
				xPosition + 50 + 7 + spaceX * x, yPosition - 22 - 3 + spaceY * y, 
				xPosition + 10 + spaceX * x, yPosition - 22 - 3 + spaceY * y)
				//milk triangle
				triangle(xPosition + 50 + spaceX * x, yPosition + spaceY * y, 
				xPosition + 50 + 7 + spaceX * x, yPosition - 22 + spaceY * y, 
				xPosition + 50 + 15 + spaceX * x, yPosition - 12 + spaceY * y);
				//box crease
				line(xPosition + 50 + 6 + spaceX * x, yPosition - 22 + spaceY * y, 
				xPosition + 50 + 7 + spaceX * x, yPosition - 7 + spaceY * y)
				//milk eyes
				push();
				fill(0);
				ellipse(xPosition + 16 + spaceX * x, yPosition + spaceY * y + 20, 3, 3);
				ellipse(xPosition + 32 + spaceX * x, yPosition + spaceY * y + 20, 3, 3);
				curve(xPosition + 16 + spaceX * x, yPosition + spaceY * y + 20, 
					xPosition + 20 + spaceX * x, yPosition + spaceY * y + 20 + 6,
					xPosition + 32 + spaceX * x - 2, yPosition + spaceY * y + 20 + 6,
					xPosition + 32 + spaceX * x, yPosition + spaceY * y + 20)
				pop();

			} else {
				var spaceX = 75;
				var spaceY = 60;
				//milk face
				quad(xPosition + spaceX * x + 18 * x + spaceX / 8, yPosition + spaceY * y,
				xPosition + 50 + spaceX * x + 18 * x + spaceX / 8, yPosition + spaceY * y, 
				xPosition + 50 + spaceX * x + 18 * x + spaceX / 8, yPosition + 70 + spaceY * y, 
				xPosition + spaceX * x + 18 * x + spaceX / 8, yPosition + 70 + spaceY * y);
				//milk side
				quad(xPosition + 50 + spaceX * x + 18 * x + spaceX / 8, yPosition + spaceY * y, 
				xPosition + 50 + 15 + spaceX * x + 18 * x + spaceX / 8, yPosition - 12 + spaceY * y, 
				xPosition + 50 + 15 + spaceX * x + 18 * x + spaceX / 8, yPosition + 58 + spaceY * y, 
				xPosition + 50 + spaceX * x + 18 * x + spaceX / 8, yPosition + 70 + spaceY * y);
				//milk middle
				quad(xPosition + spaceX * x + 18 * x + spaceX / 8, yPosition + spaceY * y, 
				xPosition + 50 + spaceX * x + 18 * x + spaceX / 8, yPosition + spaceY * y, 
				xPosition + 50 + 7 + spaceX * x + 18 * x + spaceX / 8, yPosition - 22 + spaceY * y, 
				xPosition + 10 + spaceX * x + 18 * x + spaceX / 8, yPosition - 22 + spaceY * y);
				//milk top
				quad(xPosition + 10 + spaceX * x + 18 * x + spaceX / 8, yPosition - 22 + spaceY * y, 
				xPosition + 50 + 7 + spaceX * x + 18 * x + spaceX / 8, yPosition - 22 + spaceY * y, 
				xPosition + 50 + 7 + spaceX * x + 18 * x + spaceX / 8, yPosition - 22 - 3 + spaceY * y, 
				xPosition + 10 + spaceX * x + 18 * x + spaceX / 8, yPosition - 22 - 3 + spaceY * y)
				//milk triangle
				triangle(xPosition + 50 + spaceX * x + 18 * x + spaceX / 8, yPosition + spaceY * y, 
				xPosition + 50 + 7 + spaceX * x + 18 * x + spaceX / 8, yPosition - 22 + spaceY * y, 
				xPosition + 50 + 15 + spaceX * x + 18 * x + spaceX / 8, yPosition - 12 + spaceY * y);
				//box crease
				line(xPosition + 50 + 6 + spaceX * x + 18 * x + spaceX / 8, yPosition - 22 + spaceY * y, 
				xPosition + 50 + 7 + spaceX * x + 18 * x + spaceX / 8, yPosition - 7 + spaceY * y)
				//milk eyes
			};
		};
	};
}

For this project I wanted to create a wallpaper full of cute milk boxes with different faces, but I came across a problem trying to create the second face, so it’s not as cute. I’d still drink it.

Project 04 – Min Lee

sketch

function setup() {
    createCanvas(400, 300);
    background(0);

    var x1 = 0;
	var y1 = 0;
	var x2 = 400;
	var y2 = 300 / 2 - 50;

	//blue strings
	for (var i = 0; i < 40; i++) {
		stroke(88 - (i * 10), 157 - (i * 7), 242 - (i * 5))
		line(x1, y1, x2, y2)
		x1 += 20
		y2 += 10
	}

	x1 = 400;
	y1 = 0;
	x2 = 0;
	y2 = 300 / 2 - 50;

	//white strings
	for (var i = 0; i < 40; i++) {
		stroke(88 + (i * 2), 157 + (i * 7), 242 + (i * 5))
		line(x1, y1, x2, y2)
		x1 -= 20
		y2 += 10
	}

	x1 = 0
	y1 = 8
	x2 = 400
	y2 = 300 / 2 - 60

	//filler strings between blue and white
	for (var i = 0; i < 9; i++) {
		stroke(88 + (i * 10), 157 + (i * 7), 242 + (i * 5))
		line(x1, y1, x2, y2)
		y1 += 10
		y2 -= 10
	}

	x1 = 400;
	y1 = 0;
	x2 = 0;
	y2 = 300 / 2 - 50;

	//pink strings
	for (var i = 0; i < 40; i++) {
		stroke(88 + (i * 10), 157 + (i * 7), 242 + (i * 5))
		line(x1, y1, x2, y2)
		x1 -= 20
		y2 += 10
	}

	x1 = 400
	y1 = 300
	x2 = 0
	y2 = 300 / 2 + 50

	//beige strings
	for (var i = 0; i < 40; i++) {
		stroke(195 - (i * 3), 149 - (i * 5), 167 - (i * 3))
		line(x1, y1, x2, y2)
		x1 -= 20
		y2 -= 10
	}

	x1 = 0
	y1 = 300
	x2 = 400
	y2 = 300 / 2 + 50

	for (var i = 0; i < 40; i++) {
		stroke(195 + (i * 3), 149 + (i * 5), 167 + (i * 3))
		line(x1, y1, x2, y2)
		x1 += 20
		y2 -= 10
	}

	x1 = 400
	y1 = height - 8
	x2 = 0
	y2 = 300 / 2 + 60

	//filler strings between pink and beige
	for (var i = 0; i < 9; i++) {
		stroke(195 + (i * 3), 149 + (i * 5), 167 + (i * 3))
		line(x1, y1, x2, y2)
		y1 -= 10
		y2 += 10
	}

	//eye-top
	x1 = width / 2 - 20
	y1 = height / 2 - 10
	x2 = width / 2 + 20
	y2 = height / 2 + 10

	for (var i = 0; i < 21; i++) {
		stroke(121 - (i * 5), 157 - (i * 3), 120 - (i * 3))
		line(x1, y1, x2, y2)
		x1 += 2
		y2 += 1
	}

	//eye-bottom 
	x1 = width / 2 + 20
	y1 = height / 2 + 30
	x2 = width / 2 - 20
	y2 = height / 2 + 10

	for (var i = 0; i < 21; i++) {
		stroke(121 + (i * 5), 157 + (i * 3), 120 + (i * 3))
		line(x1, y1, x2, y2)
		x1 -= 2
		y2 -= 1
	}
}

function draw() {
}

This project was the most challenging for me because of my lack of experience with string art, but I still wanted to challenge myself to draw something. This is my attempted drawing of an eye with gradient colors. The pupil looks a lot like the Pied Piper logo.

Looking Outwards – 04 Min Lee

LOOPLEX is an interactable user interface that distorts sound and colors through the hexagonal markers placed by the user on the device. As the user plays with the markers, a DV-cam inside the device keeps track of the different variations in the markers’ angles to trigger sound loops and changing color effects.

This project intrigued me because of its resemblance to a modern deejay’s turn-table. But LOOPLEX’s rendition of the turn-table incorporates both changing audio and colors through a more futuristic design. Instead of reacting to the physical touch of the user through a button or dial, the LOOPLEX uses a camera to sense the slightest changes in motion or position of the markers, meaning it could become an instrument for highly-skilled deejays and musicians in the future. As of yet, it is still a simple prototype that delivers on simple functions but in my opinion, it is a project that could be improved on for practical use in the real world.

Source:  https://vimeo.com/3546180

Project 03 – Min Lee

sketch

function setup() {
    createCanvas(640, 480);
    background(208, 57, 64);
}

function draw() {
	background(208, 57, 64);

	translate(320, 240);

	var squareRotate = map(mouseX, 0, width, 0, TWO_PI);
	var squareSize = map(mouseX, 0, width, 0, 200);
	var squareSize2 = map(mouseY, 0, width, 0, 200);
	var squareSize3 = map(mouseY, 0, height, 0, 200);
	var rgbR = 1;
	var rgbG = 2;
	var rgbB = 0.5;
	var circleR = map(mouseX, 0, width, 350, width + 150);
	var faceSize = map(mouseX, 0, width, 1, 10);
	var textChange = map(mouseX, 0, width, 80, -60);
	var mouthChange1 = map(mouseX, 0, width, 30, 60);
	var mouthChange2 = map(mouseX, 0, width, 20, 50);

	//circle around head
	noStroke();
	fill(156, 38, 40);
	ellipse(0, 0, circleR + 420, circleR + 420);
	fill(208, 57, 64);
	ellipse(0, 0, circleR + 400, circleR + 400);
	fill(163,45,47);
	ellipse(0, 0, circleR + 360, circleR + 360);
	fill(188, 49, 52);
	ellipse(0, 0, circleR + 320, circleR + 320);
	fill(211, 66, 74);
	ellipse(0, 0, circleR + 280, circleR + 280);
	fill(163,45,47);
	ellipse(0, 0, circleR + 250, circleR + 250)
	fill(188, 49, 52);
	ellipse(0, 0, circleR + 220, circleR + 220);
	fill(211, 66, 74);
	ellipse(0, 0, circleR + 180, circleR + 180);
	fill(208,57,64);
	ellipse(0, 0, circleR + 140, circleR + 140);
	fill(217,87,98);
	ellipse(0, 0, circleR + 100, circleR + 100);
	fill(213, 70, 75);
	ellipse(0, 0, circleR + 90, circleR + 90);
	fill(208, 57, 64);
	ellipse(0, 0, circleR + 60, circleR + 60);
	fill(217,87,98);
	ellipse(0, 0, circleR + 50, circleR + 50);
	fill(213, 98, 120);
	ellipse(0, 0, circleR + 30, circleR + 30);
	fill(60, 125, 195);
	ellipse(0, 0, circleR, circleR);

	//head
	push();
	rotate(0 + squareRotate);
	noStroke();
	fill(247, 204, 160);
	arc(0, 0, 209, 225, 0, PI);
	arc(5, 12, 200, 200, 0, 270);
	//hair
	noStroke();
	fill(150,86,3);
	arc(-width/4 + 65, -20, 50, 200, 0, PI, CHORD);
	//ear
	fill(247,204,160);
	ellipse(-width/4 + 70,20,30,40);
	//hair
	fill(150,86,3);
	arc(-width/4 + 85, -20, 30, 140, 0, PI, CHORD);
	arc(-width/4 + 105, -20, 20, 100, 0, PI, CHORD);
	//eyes
	fill(255, 255, 255);
	stroke(0, 0, 0);
	strokeWeight(1);
	ellipse(0, 25, 8, 8);
	ellipse(45, 25, 8, 8);
	//mouth
	noFill();
	stroke(0, 0, 0);
	strokeWeight(2);
	curve(5, mouthChange1, 10, 40, 40, 40, 50, mouthChange2);
	//eyesbrows
	noFill();
	stroke(0, 0, 0);
	strokeWeight(4);
	line(41, 8, 51, 8);
	line(-5, 8, 5, 8);
	//#nocap
	noStroke();
	fill(43, 43, 43);
	arc(-5, -20, 230, 210, PI, TWO_PI);
	fill(35, 35, 35);
	rect(-125, -40, 240, 30, 5, 5, 5, 5);
	pop();

	//'Hello' text
	rotate(-PI/15);
	textAlign(CENTER);
	textSize(textChange);
	fill(194, 203, 152);
	textFont('Georgia Italic');
	text("That's all Folks!", 0, 150);
}

For this project, I wanted to create a “Looney-Tunes style” graphic in which I could create an interactive cartoon. It involved a lot of tinkering, but I ended up making a dynamic drawing in a style that I prefer and that is within my skill range.

Looking Outwards – 03 Min Lee

Skyline is a computer-generative music video by Raven Kwok created using many core principles which were used to generate beautiful visual patterns, one of the principles being Voronol tesselation, a geometric model that is used by many computational artists. The geometric patterns in the music video create a behavioral diagram that shifts itself not only according to the audio of the song but also to the animated sequences of the vocalist singing.

What I find amazing about this project is the artist’s ability to use large amounts of geometric shapes to seamlessly create visual stimulation to represent not only the instrumental, but to also use those same shapes to create a smoky figure of the vocalist. The vocalist’s face is fully recognizable as a person if not only for a split second before once again seamlessly changing into an array of different shapes and inkblot-like figures. The creator’s artistry shines through in his ability to not only create computer-generative, but to also use music as a part of his medium.

Source: http://parametricworld.tumblr.com/post/129838926923/prostheticknowledge-skyline-music-video-for

Project – 02 Min Lee

sketch

/* 
Min Lee
Section A
mslee@andrew.cmu.edu
Project-02
*/

//face
var faceWidth = 150
var faceHeight = 150

//use for nose and mouth color 
var faceColorR = 255 
var faceColorG = 216
var faceColorB = 209

//eyes
var eyeWidth = 25
var eyeHeight = 15
var eyeColor = 255

//eye positioning
var eyeX = 20
var eyeY = 15

//nose positioning
var noseY = 5
var noseHeight = 60

//mouth shape
var mouthWidth = 25
var mouthHeight = 15
var distance = 30

//font
var textPlacement = 0

//stars
var a = 50


function setup() {
    createCanvas(640, 480);
    background(141,189,193);
}


function draw() {
	background(141,189,193);
	noStroke();
	//face shape
	fill(faceColorR, faceColorG, faceColorB);
	ellipse(width/2 ,height/2 , faceWidth, faceHeight);
	rect(width/2 - faceWidth/2, height/2, faceWidth, height);
	//eyebrows
	fill(faceColorR/2, faceColorG/2, faceColorB/2);
	ellipse(width/2 - eyeX, height/2 - eyeY, eyeWidth, eyeHeight);
	ellipse(width/2 + eyeX, height/2 - eyeY, eyeWidth, eyeHeight);
	//eyes
	fill(0);
	ellipse(width/2 - eyeX, height/2 - eyeY + 20, 10, 8);
	ellipse(width/2 + eyeX, height/2 - eyeY + 20, 10, 8);
	//nose
	fill(faceColorR/4*3, faceColorG/4*3, faceColorB/4*3);
	ellipse(width/2 - 7.5, height/2 + noseY/3*2, 10, 10);
	ellipse(width/2 + 7.5, height/2 + noseY/3*2, 10, 10);
	arc(width/2, height/2 + noseY, 15, noseHeight, PI, TWO_PI);
	arc(width/2, height/2 + noseY - 1, 15, 10, 0, PI);
	//mouth
	fill(faceColorR/4*3, faceColorG/4*3, faceColorB/4*3);
	arc(width/2, height/2 + noseY + distance, mouthWidth, mouthHeight, 0, PI);
	fill(faceColorR/2, faceColorG/2, faceColorB/2);
	arc(width/2 - mouthWidth/4, height/2 + noseY + distance, mouthWidth/2 + 5, mouthHeight, PI, TWO_PI);
	arc(width/2 + mouthWidth/4, height/2 + noseY + distance, mouthWidth/2 + 5, mouthHeight, PI, TWO_PI);
	//ears
	fill(faceColorR, faceColorG, faceColorB);
	arc(width/2 - faceWidth/2 + 1, height/2 + noseY/3* 4 + 5, 30, 40, HALF_PI, PI + HALF_PI);
	arc(width/2 + faceWidth/2 - 1, height/2 + noseY/3* 4 + 5, 30, 40, PI + HALF_PI, HALF_PI);
	fill(faceColorR/4*3, faceColorG/4*3, faceColorB/4*3);
	arc(width/2 - faceWidth/2 + 1, height/2 + noseY/3* 4 + 5, 15, 20, HALF_PI, PI + HALF_PI);
	arc(width/2 + faceWidth/2 - 1, height/2 + noseY/3* 4 + 5, 15, 20, PI + HALF_PI, HALF_PI);
	//chin
	stroke(faceColorR/4*3, faceColorG/4*3, faceColorB/4*3);
	strokeWeight(2);
	noFill();
	beginShape();
	curveVertex(width/2 - 10, height/2 + 50 + noseY + distance);
	curveVertex(width/2 - 10, height/2 + 50 + noseY + distance);
	curveVertex(width/2 - 5, height/2 + 55 + noseY + distance);
	curveVertex(width/2 + 5, height/2 + 55 + noseY + distance);
	curveVertex(width/2 + 10, height/2 + 50 + noseY + distance);
	curveVertex(width/2 + 10, height/2 + 50 + noseY + distance);
	endShape();
	//shirt
	fill(0);
	strokeWeight(1);
	rect(width/2-faceWidth/2, height - 60, faceWidth, 60);
	fill(faceColorR, faceColorG, faceColorB);
	arc(width/2, height - 60, faceWidth, 40, 0, PI);
	//moving text 
	noStroke();
	fill('DarkCyan');
	textSize(50);
	textFont('Helvetica');
	text('bald is beautiful.', textPlacement, 100);
	textPlacement = textPlacement + 2
	if (textPlacement > 640) {
	textPlacement = -350
	};
	//stars
	fill(255,215,0);
	rect(width/4, height/4 * 3, 50, 50);
	rect(width/2 + 100, height/4 + 20, 50, 50);
	fill(141,189,193);
		//bottom left star
	arc(width/4, height/4 * 3, a, a, 0, HALF_PI);
	arc(width/4 + 50, height/4 * 3, a, a, HALF_PI, PI);
	arc(width/4, height/4 * 3 + 50, a, a, PI + HALF_PI, TWO_PI);
	arc(width/4 + 50, height/4 * 3 + 50, a, a, PI, PI + HALF_PI);
		//top right star
	arc(width/2 + 100, height/4 + 20, a + 2.5, a + 2.5, 0, HALF_PI);
	arc(width/2 + 150, height/4 + 20, a + 2.5, a + 2.5, HALF_PI, PI);
	arc(width/2 + 100, height/4 + 70, a + 2.5, a + 2.5, PI + HALF_PI, TWO_PI);
	arc(width/2 + 150, height/4 + 70, a + 2.5, a + 2.5, PI, PI + HALF_PI);

}

function mousePressed() {
	faceWidth = random(130,170);
	faceHeight = random(110,190);
	faceColorR = random(141,255);
	faceColorG = random(80,255);
	faceColorB = random(36,170);
	eyeX = random(20,30);
	eyeY = random(20,30);
	eyeWidth = random(15,25);
	eyeHeight = random(10,15);
	noseY = random(0, 20);
	mouthWidth = random(20, 25);
	mouthHeight = random(15,20);
	distance = random(20,35);
	a = random(50,60);

}

preliminary sketch

For my project, I wanted to create a message that resonates in my heart. While the variability in the faces that I created is not significant, I went for this effect to show that being a bald, green-skinned person does not make one any different than being a bald, orange-skinned person. Bald is beautiful, folks.