This was an interesting task, and definitely very fun to research. I especially liked looking into how artists like Moka create algoritm-generated faces, and how the randomization tools of computers really highlight the odd ways our brains look and recognize facial expressions. Instead of working in a sketchbook, my main method of “sketching” for this project was first creating the static elements of my figure, so originally the arms and torso, and then playing with different features layered on top of each other to see what type of expressions come out. I found it especially interesting how much power the pupils and eyebrows have over a person’s expression.
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.
/* Tanvi Harkare
Section B
tharkare@andrew.cmu.edu
Project-02-Face Variables */
var eyeSize = 20;
var faceWidth = 100;
var faceHeight = 150;
var eyeColorR = 150
var eyeColorG = 250
var eyeColorB = 5;
var mouthWidth = 50;
var mouthHeight = 30;
var mouthY = 340;
var browHeight = 300;
var eyeHeight = 320;
function setup() {
createCanvas(480, 640);
}
function draw() {
background(150);
//hair
stroke(0);
strokeWeight(150);
line(width/2, height/2 - 20, width/2, height - 225);
//face
fill(255, 220, 177);
noStroke();
ellipse(width / 2, height / 2, faceWidth, faceHeight);
//eyes
noStroke();
var eyeLX = width / 2 - faceWidth * 0.25;
var eyeRX = width / 2 + faceWidth * 0.25;
fill(255);
ellipse(eyeLX, eyeHeight, eyeSize, eyeSize); //left eye
ellipse(eyeRX, eyeHeight, eyeSize, eyeSize); //right eye
//pupils
fill(eyeColorR, eyeColorG, eyeColorB);
ellipse(eyeLX, eyeHeight, eyeSize/2, eyeSize/2); //left pupil
ellipse(eyeRX, eyeHeight, eyeSize/2, eyeSize/2); //right pupil
//mouth
noFill();
strokeWeight(2);
stroke(100, 75, 80);
arc(240, mouthY, mouthWidth, mouthHeight, 0, 3.14, OPEN);
//eyebrows
strokeWeight(2);
stroke(0);
line(eyeLX - 10, eyeHeight - 10 - eyeSize, eyeLX + 10, eyeHeight - 10 - eyeSize);
line(eyeRX - 10, eyeHeight - 10 - eyeSize, eyeRX + 10, eyeHeight - 10 - eyeSize);
//nose
noStroke();
fill(198, 171, 137);
ellipse(width/2, height/2 + eyeSize, 10, 8);
}
function mousePressed() {
// when the user clicks, these variables are reassigned
// to random values within specified ranges. For example,
// 'faceWidth' gets a random value between 75 and 150.
faceWidth = random(100, 130);
faceHeight = random(110, 160);
eyeSize = random(10, 20);
eyeColorR = random(0, 255);
eyeColorG = random(0, 255);
eyeColorB = random(0, 255);
mouthWidth = random(30, 60);
mouthHeight = random(20, 40);
mouthY = random(335, 350);
browHeight = random(290, 305);
eyeHeight = random(315, 325);
}
For this project, I created a face from simple shapes such as ellipses, arcs, and lines. My favorite part of the project was coming up with different ways to create a unique face with colors, size, and position on the face. At first I had a difficult time dealing with facial features that were overlapping, but was able to solve that by changing the values of the random integers near the end .
Felipe Pantone’s “Transformable Systems” at Joshua Liner Gallery.
I think it’s cool how Pantone’s medium of choice is technology. All of his work depicts mechanized processes. I can see his sense of composition and balance throughout his work. The work examines our digital age and the way we process visual information. In this era, we are constantly assaulted with digital information, which can lead to information overload. Pantone shows this by placing jumbo pixels and CMYK printing in the foreground, calling attention to the underlying framework for digital imagery. Yet, there are aspects that stand out in this image-saturated world. Flat aluminum pieces balance the large interactive sculptures and installations.
The work I chose to examine was “Waves” by Austrian software artist LIA. i was quickly drawn to this work by its peacefulness and calming nature. the sine wave patterns in this work are randomly generated, and don’t repeat, and upon learning this I associated something other than human with its beauty. Humans lack the ability to replicate random patterns, and tend to have flawed conceptions of what is truly “random.” The fact that this consistently random motion could only have been produced by a computer adds an additional level of awe and admiration for the program and artist that produced this installation. It is so enjoyable to just stare at this work and let it mesmerize you, in a way that is only possible through generative code.
/*
Katherine Hua
Section A
khua@andrew.cmu.edu
Project-02
*/
var x = 60;
var y = 120;
var z = 180;
var a = 240;
var b = 300;
var c = 360;
var d = 420;
var e = 3;
var f = 477;
var speed = 1;
var backgroundColorR = 250;
var backgroundColorG = 250;
var backgroundColorB = 250;
var eyeWidth = 30;
var eyeHeight = 30;
var pupilWidth = 5;
var pupilHeight = 5;
var skin = 30;
var lips = 0;
var hair = 0;
var brows = 0;
var cheekColorR = 245;
var cheekColorG = 195;
var cheekColorB = 194;
function setup() {
createCanvas(480, 640);
background(backgroundColorR, backgroundColorG, backgroundColorB);
}
function draw() {
//background
background(backgroundColorR, backgroundColorG, backgroundColorB);
ellipse(x, 80, 50, 50);
x += speed;
if (x > width + 25) {
x = -25;
}
ellipse(x, 160, 50, 50);
x += speed;
if (x > width + 25) {
x = -25;
}
ellipse(x, 240, 50, 50);
x += speed;
if (x > width + 25) {
x = -25;
}
ellipse(x, 320, 50, 50);
x += speed;
if (x > width + 25) {
x = -25;
}
ellipse(x, 400, 50, 50);
x += speed;
if (x > width + 25) {
x = -25;
}
ellipse(x, 480, 50, 50);
x += speed;
if (x > width + 25) {
x = -25;
}
ellipse(x, 560, 50, 50);
x += speed;
if (x > width + 25) {
x = -25;
}
//y
ellipse(y, 80, 50, 50);
y += speed;
if (y > width + 25) {
y = -25;
}
ellipse(y, 160, 50, 50);
y += speed;
if (y > width + 25) {
y = -25;
}
ellipse(y, 240, 50, 50);
y += speed;
if (y > width + 25) {
y = -25;
}
ellipse(y, 320, 50, 50);
y += speed;
if (y > width + 25) {
y = -25;
}
ellipse(y, 400, 50, 50);
y += speed;
if (y > width + 25) {
y = -25;
}
ellipse(y, 480, 50, 50);
y += speed;
if (y > width + 25) {
y = -25;
}
ellipse(y, 560, 50, 50);
y += speed;
if (y > width + 25) {
y = -25;
}
//z
ellipse(z, 80, 50, 50);
z += speed;
if (z > width + 25) {
z = -25;
}
ellipse(z, 160, 50, 50);
z += speed;
if (z > width + 25) {
z = -25;
}
ellipse(z, 240, 50, 50);
z += speed;
if (z > width + 25) {
z = -25;
}
ellipse(z, 320, 50, 50);
z += speed;
if (z > width + 25) {
z = -25;
}
ellipse(z, 400, 50, 50);
z += speed;
if (z > width + 25) {
z = -25;
}
ellipse(z, 480, 50, 50);
z += speed;
if (z > width + 25) {
z = -25;
}
ellipse(z, 560, 50, 50);
z += speed;
if (z > width + 25) {
z = -25;
}
//a
ellipse(a, 80, 50, 50);
a += speed;
if (a > width + 25) {
a = -25;
}
ellipse(a, 160, 50, 50);
a += speed;
if (a > width + 25) {
a = -25;
}
ellipse(a, 240, 50, 50);
a += speed;
if (a > width + 25) {
a = -25;
}
ellipse(a, 320, 50, 50);
a += speed;
if (a > width + 25) {
a = -25;
}
ellipse(a, 400, 50, 50);
a += speed;
if (a > width + 25) {
a = -25;
}
ellipse(a, 480, 50, 50);
a += speed;
if (a > width + 25) {
a = -25;
}
ellipse(a, 560, 50, 50);
a += speed;
if (a > width + 25) {
a = -25;
}
//b
ellipse(b, 80, 50, 50);
b += speed;
if (b > width + 25) {
b = -25;
}
ellipse(b, 160, 50, 50);
b += speed;
if (b > width + 25) {
b = -25;
}
ellipse(b, 240, 50, 50);
b += speed;
if (b > width + 25) {
b = -25;
}
ellipse(b, 320, 50, 50);
b += speed;
if (b > width + 25) {
b = -25;
}
ellipse(b, 400, 50, 50);
b += speed;
if (b > width + 25) {
b = -25;
}
ellipse(b, 480, 50, 50);
b += speed;
if (b > width + 25) {
b = -25;
}
ellipse(b, 560, 50, 50);
b += speed;
if (b > width + 25) {
b = -25;
}
//c
ellipse(c, 80, 50, 50);
c += speed;
if (c > width + 25) {
c = -25;
}
ellipse(c, 160, 50, 50);
c += speed;
if (c > width + 25) {
c = -25;
}
ellipse(c, 240, 50, 50);
c += speed;
if (c > width + 25) {
c = -25;
}
ellipse(c, 320, 50, 50);
c += speed;
if (c > width + 25) {
c = -25;
}
ellipse(c, 400, 50, 50);
c += speed;
if (c > width + 25) {
c = -25;
}
ellipse(c, 480, 50, 50);
c += speed;
if (c > width + 25) {
c = -25;
}
ellipse(c, 560, 50, 50);
c += speed;
if (c > width + 25) {
c = -25;
}
//d
ellipse(d, 80, 50, 50);
d += speed;
if (d > width + 25) {
d = -25;
}
ellipse(d, 160, 50, 50);
d += speed;
if (d > width + 25) {
d = -25;
}
ellipse(d, 240, 50, 50);
d += speed;
if (d > width + 25) {
d = -25;
}
ellipse(d, 320, 50, 50);
d += speed;
if (d > width + 25) {
d = -25;
}
ellipse(d, 400, 50, 50);
d += speed;
if (d > width + 25) {
d = -25;
}
ellipse(d, 480, 50, 50);
d += speed;
if (d > width + 25) {
d = -25;
}
ellipse(d, 560, 50, 50);
d += speed;
if (d > width + 25) {
d = -25;
}
//e
ellipse(e, 80, 50, 50);
e += speed;
if (e > width + 25) {
e = -25;
}
ellipse(e, 160, 50, 50);
e += speed;
if (e > width + 25) {
e = -25;
}
ellipse(e, 240, 50, 50);
e += speed;
if (e > width + 25) {
e = -25;
}
ellipse(e, 320, 50, 50);
e += speed;
if (e > width + 25) {
e = -25;
}
ellipse(e, 400, 50, 50);
e += speed;
if (e > width + 25) {
e = -25;
}
ellipse(e, 480, 50, 50);
e += speed;
if (e > width + 25) {
e = -25;
}
ellipse(e, 560, 50, 50);
e += speed;
if (e > width + 25) {
e = -25;
}
//f
ellipse(f, 80, 50, 50);
f += speed;
if (f > width + 25) {
f = -25;
}
ellipse(f, 160, 50, 50);
f += speed;
if (f > width + 25) {
f = -25;
}
ellipse(f, 240, 50, 50);
f += speed;
if (f > width + 25) {
f = -25;
}
ellipse(f, 320, 50, 50);
f += speed;
if (f > width + 25) {
f = -25;
}
ellipse(f, 400, 50, 50);
f += speed;
if (f > width + 25) {
f = -25;
}
ellipse(f, 480, 50, 50);
f += speed;
if (f > width + 25) {
f = -25;
}
ellipse(f, 560, 50, 50);
f += speed;
if (f > width + 25) {
f = -25;
}
//character shape
strokeWeight(5);
point(0, 640);
point(40, 440);
point(70,320);
point(150, 160);
point(300, 160);
point(380, 300);
point(420, 440);
point(480, 640);
strokeWeight(5);
fill(250-skin, 223-skin, 198-skin);
beginShape();
curveVertex(0, 640);
curveVertex(0, 640);
curveVertex(40, 440);
curveVertex(70, 320);
curveVertex(150, 160);
curveVertex(300, 160);
curveVertex(380, 300);
curveVertex(420, 440);
curveVertex(480, 640);
curveVertex(480, 640);
endShape();
beginShape();
curveVertex(120, 500);
curveVertex(120, 500);
curveVertex(170, 560);
curveVertex(210, 565);
curveVertex(170, 440);
curveVertex(150, 400);
curveVertex(150, 440);
endShape();
beginShape();
curveVertex(360, 500);
curveVertex(360, 500);
curveVertex(310, 560);
curveVertex(270, 565);
curveVertex(310, 440);
curveVertex(330, 400);
curveVertex(330, 440);
endShape();
//hair
if (hair < 1) {
fill(0, 0, 0)
arc(230, 280, 300, 300, PI, 0);
fill(250-skin, 223-skin, 198-skin);
noStroke();
quad(100, 280, 120, 230, 340, 230, 360, 280);
}
else if (hair < 2) {
fill(0, 0, 0)
arc(230, 280, 350, 300, PI, 0);
fill(250-skin, 223-skin, 198-skin);
noStroke();
quad(100, 280, 120, 230, 340, 230, 360, 280);
fill(0,0,0);
rect(52, 275, 50, 125, 5);
rect(358, 275, 50, 125 ,5);
}
else if (hair < 3) {
fill(0, 0, 0)
arc(230, 280, 290, 350, PI, 0);
ellipse(120, 120, 75, 75);
ellipse(340, 120, 75, 75);
fill(250-skin, 223-skin, 198-skin);
noStroke();
quad(100, 280, 120, 230, 340, 230, 360, 280);
}
else if (hair < 4) {
fill(0, 0, 0)
arc(230, 280, 290, 350, PI, 0);
ellipse(57, 280, 80, 50);
ellipse(403, 280, 80, 50);
fill(250-skin, 223-skin, 198-skin);
noStroke();
quad(100, 280, 120, 230, 340, 230, 360, 280);
}
//brows
if (brows < 1) {
stroke(0,0,0);
noFill();
arc(180, 275, 30, 30, PI+QUARTER_PI, -QUARTER_PI);
arc(270, 275, 30, 30, PI+QUARTER_PI, -QUARTER_PI);
}
else if (brows < 2) {
stroke(0,0,0);
noFill();
arc(180, 275, 30, 30, PI, PI+HALF_PI);
arc(270, 275, 30, 30, PI+HALF_PI, 0);
}
else if (brows < 3) {
stroke(0,0,0);
noFill();
arc(180, 275, 30, 30, PI+HALF_PI, 0);
arc(270, 275, 30, 30, PI, PI+HALF_PI);
}
else if (brows < 4) {
stroke(0,0,0);
noFill();
arc(180, 250, 30, 30, QUARTER_PI, HALF_PI+QUARTER_PI);
arc(270, 250, 30, 30, QUARTER_PI, HALF_PI+QUARTER_PI);
}
//eyes
//whites
fill(255);
ellipse(180, 300, eyeWidth, eyeHeight);
ellipse(270, 300, eyeWidth, eyeHeight);
//pupil
fill(0);
ellipse(180, 300, pupilWidth, pupilHeight);
ellipse(270, 300, pupilWidth, pupilHeight);
//lips
if (lips < 1) {
fill(244, 49, 33);
ellipse(225, 310, 40, 20);
ellipse(225, 300, 40, 15);
}
else if (lips < 2) {
fill(244, 49, 33);
ellipse(225, 310, 40, 20);
ellipse(225, 300, 40, 15);
fill(0);
ellipse(225, 307, 20, 5);
}
else if (lips < 3) {
fill(244, 49, 33);
ellipse(225, 310, 40, 20);
ellipse(225, 300, 40, 15);
fill(0);
ellipse(225, 307, 20, 5);
noFill();
arc(190, 310, 30, 30, PI+HALF_PI+QUARTER_PI, QUARTER_PI);
arc(260, 310, 30, 30, HALF_PI+QUARTER_PI, PI+QUARTER_PI);
}
else if (lips < 4) {
fill(244, 49, 33);
ellipse(225, 310, 40, 20);
ellipse(225, 300, 40, 15);
noFill();
arc(190, 310, 30, 30, PI+HALF_PI+QUARTER_PI, QUARTER_PI);
arc(260, 310, 30, 30, HALF_PI+QUARTER_PI, PI+QUARTER_PI);
}
//cheeks
fill(cheekColorR, cheekColorG, cheekColorB);
noStroke();
ellipse(140, 320, 40, 20);
ellipse(320, 320, 40, 20);
stroke(0,0,0);
}
function mousePressed() {
backgroundColorR = random(200, 255);
backgroundColorG = random(137, 255);
backgroundColorB = random(175, 255);
eyeWidth = random (30, 40);
eyeHeight = random(15, 30);
pupilWidth = random(1,7);
pupilHeight = random(1,7);
skin = random(1, 150);
lips = random(4);
hair = random(4);
brows = random(4);
cheekColorR = random(220, 255);
cheekColorG = random(180, 255);
cheekColorB = random(139, 255);
}
This character is inspired by one of my favorite visual artists, Ton Mak’s character, flabjacks. At first, I had a difficult time figuring out how to randomize characteristics such as the mouth, hair, and eyebrows because the it was not simply randomizing components such as width, height, and color. Finally, after a lot of trial and error, I figured out I could use the if, else if functions to accomplish what I wanted. This project also allowed me to become more familiar with the arc and curveshape functions.
For this week’s Looking Outward blog post, I was curious about the correlation between architecture and algorithmic systems and discovered an a computational architect named Michael Hansmeyer. He initiated a project that overlays a 1960s theory (founded by a biologist named Aristid Lindenmayer) with the field of architecture. This theory is called L-Systems, which follows a string-rewriting algorithm to model plants and how they grow. This system is now being applied to architectural practices in two steps: first, by further analyzing the theory of L-Systems using mapping schemes and turtle graphics, and the second, expanding the system to include parametrics that would allow architectural design to benefit from the algorithms.
In this link, a step-by-step interpretation of an example of an L-Systems string is shown, based on algorithmic processes that are still being developed and further improved. It is fascinating to see how math, science and architecture can weave together to create something so beautiful. Though the product is astounding, the process itself is even more intriguing.
// Christine Seo
// Section C
// mseo1@andrew.cmu.edu
// Project-02
var xPos;
var yPos;
var xR;
var scale;
var eyeScale;
var curve;
var shirtH;
var shirtW;
var hatR;
var earSize;
var eyeW;
var eyeH;
var earringS;
var mouthH;
var headS;
var faceS;
var circleG;
var circleB;
var skinR;
var skinG;
var skinB;
var neckR;
var neckG;
var neckB;
var faceWidth = 100;
var faceHeight = 160;
var hairLength= 155;
function setup() {
createCanvas(480, 640);
xPos = random(0,width);
yPos = random(0,height);
xR = random(10,width);
scale=random(10,height);
shirtR=random(10,width);
harR=random(10,width);
eyeScale=random(10,20);
earSize=random(25,45);
curve=20
shirtH=80
shirtW=185
eyeW=140
eyeH=210
earringS=210
mouthH=240
headS=180
faceS=80
circleG=90;
circleB=80;
skinR=247;
skinG=225;
skinB=200;
neckR=231;
neckG=195;
neckB=156;
}
function draw() {
background(46, 47, 69);
noStroke(0);
//circles
fill(xR,circleG,circleB);
ellipse(xPos, yPos, scale,scale);
//neck
fill(neckR, neckG, neckB);
rect(width/2-80, height/3, faceWidth/2-15, width/4.2, curve/2);
//shirt
fill(shirtR,circleG,circleB);
rect(width/3.84, height/2.1, shirtH, shirtW, curve);
//shoulders
fill(skinR, skinG, skinB);
rect(height/3.5, height/2.2, shirtH-35, shirtW+40, curve);
rect(width/3.84, height/2.1, shirtH-70, shirtW+10, curve);
//hair
fill (141, 114, 41);
ellipse(width/2.91,height/3.6,width/3.2,height/3.8);
rect(height/7, width/2.6, width/7, hairLength);
//ears
fill(neckR, neckG, neckB);
ellipse(width/3.84,earringS,height/18,earSize);
//earring
fill(1);
rect(width/4.5,earringS,earringS/30,earringS/30);
//face
fill (skinR, skinG, skinB);
ellipse(width / 3, height /3, faceWidth, faceHeight);
//eyes
fill(1);
ellipse(eyeW,eyeH,eyeW/7,eyeScale);
fill(990);
ellipse(eyeW,eyeH,eyeW/17,eyeScale);
//nose
stroke(1);
line(eyeW, eyeH+30, width/2.5, width/3);
line(eyeW,eyeH+30,width/3.2,mouthH);
ellipse(width/3,mouthH,width/160);
//mouth
noStroke(0);
fill(236, 185, 248);
triangle(width/2.5,mouthH,width/2.8,width/2,width/3.2,height/2.5);
//bangs
noStroke(0);
fill(141, 114, 41);
translate(width/-9, height/2.95);
rotate(PI/0.6);
ellipse(width/3,headS,faceS,width/4);
//hat
fill(1);
translate(width/1.6, height/35);
rotate(PI/2);
ellipse(height/4,width/4-3,height/2.5,width/20);
rect(faceS,height/48,headS,width/4.8);
fill(hatR, circleG,circleB);
rect(faceS,height/9,headS,width/24);
}
function mousePressed() {
xPos = random(0,width);
yPos = random(0,height);
xR = random(10,width);
scale= random(10,height);
eyeScale= random(10,20);
shirtR= random(10,width);
hatR=random(10,width);
faceWidth = random(75, 100);
faceHeight = random(110, 150);
hairLength = random(120,255);
earSize= random(25,45);
}
Although I had difficulties in the beginning of using variables, I was able to find the convenience of them! I experimented with different shapes and sizes. It was great to learn about how much I could play around with the software; it makes everything so much more dynamic!
This project was really fun for me to work on because I had to figure out how to do a lot of new commands. Being successful after working on it for a long time was really satisfying. It was also interesting for me to start using more difficult things to work with such as ‘bezier’.
![[OLD FALL 2018] 15-104 • Introduction to Computing for Creative Practice](../../../../wp-content/uploads/2020/08/stop-banner.png)
