sketch

// Dahye Chung
// 15-104 Section E
// dahyec@andrew.cmu.edu
// Project-O2

var eyeWidth = 5;
var eyeHeight = 5;
var mouth = 30;
var faceWidth = 300;
var faceHeight = 300;
var skinR = 28;
var skinG = 142;
var skinB = 200;
var noseWidth = 30;
var noseHeight = 65;
var mouthWidth = 0;
var mouthHeight =5;
var eyebrows = 30;
var eyebrowStroke = 8;
var mouthCurve = 90;
var glasses = 60;

function setup() {
createCanvas(500, 560);
rectMode (CENTER);
}

function draw() {
background(236,220,189);

noStroke();
fill(skinR, skinG, skinB, 100);
ellipse(width/2, height/2, faceWidth, faceHeight); // head

fill(0,0,0,180);
ellipse(width/2-40, height/2, eyeWidth+3, eyeHeight+5); // left eye
ellipse(width/2+40, height/2, eyeWidth+3, eyeHeight+5); // right eye

fill(skinR, skinG, skinB, 210);
rect(width/2, height/2, noseWidth, noseHeight); // nose

drawMouth(mouthCurve);
strokeWeight(3);
stroke(0); 
fill (0,0,0,0);

ellipse(width/2-40, height/2, glasses+4, glasses+4); // glasses
ellipse(width/2+40, height/2, glasses+4, glasses+4);
line(width/2-40+((glasses+4)/2), height/2, width/2+40-((glasses+4)/2), height/2);

stroke(skinR-20, skinG-20, skinB-20); // eyebrows
strokeWeight(eyebrowStroke);
line(width/2-53, height/2-20-eyebrows, width/2-30, height/2-20-eyebrows); 
line(width/2+53, height/2-20-eyebrows, width/2+30, height/2-20-eyebrows); 

}

function drawMouth(mouthCurve) {
stroke(skinR-20, skinG-20, skinB-20); // eyebrows
fill(0,0,0,0);

p1 = {x: width/2-20, y: mouthCurve}, p2 = {x: width/2-40, y: height/2+90} // mouth
p3 = {x: width/2+40, y: height/2+90}, p4 = {x: width/2+20, y:mouthCurve}
curve (p1.x, p1.y, p2.x, p2.y, p3.x, p3.y, p4.x, p4.y)
}

function mousePressed() {
faceWidth = random(200, 400);
faceHeight = random(300, 450);
skinR = random(200, 100);
skinG = random(200, 100);
skinB = random(200, 100);
eyeWidth = random(-2, 10);
eyeHeight = random(-2, 5);
noseWidth = random(10,30);
noseHeight = random(40, 70);
eyebrows = random(20,40);
eyebrowStroke = random(5,16);
mouthCurve = random(0, (height/2+90)*2);
glasses = random(30,70);
}

I tried to show different emotions of people around me in my school life. I wanted to show variety range of people’s emotions in this project and wanted to study which factors of a face communicate different emotions to other people. Also, I tried to make every parts of the face and the glasses look different when the user clicks my project. I used soft colors and opacities to make my project look simple and minimal. 

LookingOutwards-02

TITLE: Inspired by the Incomprehensible

To be honest, I am not a mathperson. But I was fascinated by the work of generative artist AlteredQualia. It is not clear who this individual is, but it is clear that AlteredQualia is a driven artist-programmer who explores the boundaries between art and computation. AlteredQualia’s Twitter <https://twitter.com/alteredq> account shows that s/he is currently active.

https://pbs.twimg.com/media/CQpIn2qUYAAjTms.jpg:large
“An example of one of AlteredQualia’s interests—the ‘Uncanny Valley’. More can be found here <http://fractalfantasy.net/#/4/uncanny_valley>.”

One of his/her projects, named “Evolve” <alteredqualia.com/visualization/evolve/>, particularly struck my interest. Though I don’t understand it fully, it uses code to pick random shapes to create a copy of an image. Though it takes a long time, the collection of random shapes begin to look like a copy of the original image.

http://alteredqualia.com/visualization/evolve/mona_9712.jpg
“After 7 days and 8,143,969 random shapes.”

What intrigues me is the very fact that I don’t truly understand what has been created behind the scenes of this transformation. Knowing that there are clear boundaries that I have never explored and may never even understand reminds me of the great possibilities that exist in the world of design. It excites me to understand how incomprehensibly vast the horizon is.

sketch

function setup() {
    createCanvas(500,600);
    background(226,82,98);
}

function draw() {

//background
strokeWeight(0);
fill (182,68,81);
rect (0,0,700,80);
rect (0,150,700,80);
rect (0,300,700,80);
rect (0,450,700,80);

//hair
strokeWeight(0);
fill(137,54,73);
ellipse(250,230,300,270);
rect(100,240,300,500);


//ears
fill(226,110,112);
ellipse(135,300,40,70);
fill(226,110,112);
ellipse(365,300,40,70);
fill(85,33,64,80);
ellipse(135,300,20,40);
fill(85,33,64,80);
ellipse(365,300,20,40);

//face
strokeWeight(0);
fill(82,36,67,90);
ellipse(242,310,220,260);
strokeWeight(0);
fill(226,110,112);
ellipse(250,300,220,260);


//body
strokeWeight(0);
fill(233,202,163);
ellipse(250,580,355,240);
fill(233,202,163);
rect(73,565,354,240);


//eyes 
strokeWeight(0);
fill(85,33,64);
ellipse(205,290,26,40);
ellipse(310,290,26,40);


//nose
strokeWeight(0);
ellipse(258,325,10,10);

//mouth
fill(85,33,64,80);
arc(255, 380,33,30,0,PI);
fill(85,33,64);
arc(255, 365, 60,13,PI,0,PI);

//bang
fill(82,36,67,60);
rect(178,163,180,100);
fill(137,54,73);
rect(185,155,180,100);

//eyelash
strokeWeight(3);
line(225,289,215,285);
line(330,289,320,285);

//hairpin
strokeWeight(5);
line(390,210,350,240);
strokeWeight(5);
line(390,230,360,253);

}

In processing my self-portrait, I created simplified and 2D styled design.
Before starting with this project, I sketched my idea and then illustrated with illustrator so I can see what it would look like. In order to make it more 2D looking, I added some shadow under my front hair and face. Also, I only used 2 toned colors to look more simplified. I had a lot of fun learning and utilizing p5.js geometric elements.

Groupon

Groupon is a service website and app where people are able to buy goods and services in groups for a discount. This project started as a side project for a small team who was working on a platform that focused on getting people together into online groups to solve problems. They decided on using the concept of group buying in order to make money.

https://youtu.be/c-40o3ZoXJU

“A modern groupon ad.”

Initially they sent emailed group coupons to people daily, but in around 2009, they developed their own software which people could use to easily browse the coupons in their local areas.

“The Groupon logo. Bold, simple, and practical.”

Their website is not artistic in the very least. But I am inspired by how such a small idea could turn into one of the most popular software in the world. As a designer, I wish that the website and app would adopt a more aesthetically pleasing form, but I can’t deny that it is practical.

For more information,  click here <https://www.forbes.com/forbes/2010/0830/entrepreneurs-groupon-facebook-twitter-next-web-phenom.html> and here <http://www.businessinsider.com/inside-groupon-the-truth-about-the-worlds-most-controversial-company-2011-10>.