Hi here are my faces! The hardest part of the project is to create all these different options for hair, eyes, mouth etc. Then linking those to the random function.
sketch
]]>//Tracy Meng
//Section B
// GLOBAL VARIABLES
var eyeSize = 20;
var mouthSize = 50;
var earringSize = 30;
var faceWidth = 100;
var faceHeight = 150;
var earSize = 20;
var noseSize = 30;
var pupSize = 10;
var noseType = 1;
var hairType = 1;
var eyeType = 1;
var earringType = 1;
var mouthType = 1;
var backgroundType = 1;
function setup() {
createCanvas(600, 480);
}
function draw() {
//BACKGROUND
//background types
if (backgroundType == 1) {
background(225,246,255); //light blue background
}
else if (backgroundType == 2) {
background(255,164,216); //light pink background
}
else {
background(247,255,165); //light yellow background
}
//HAIR
// hair types
if (hairType == 1) {
strokeWeight(15);
stroke(127,82,0); //brownhair
fill(127,82,0);
arc(width / 2, height / 2, faceWidth, faceHeight, PI, 0); //straight long hair
rect(width/2 - faceWidth/2, height/2, faceWidth, height);
}
else if (hairType == 2) {
strokeWeight(45);
stroke(209,209,20); //blondehair
fill(209,209,20);
arc(width / 2, height / 2, faceWidth, faceHeight, PI-PI/4, PI/4); //pom-poms
ellipse(width/2 - faceWidth/2, height/2 + faceHeight/4, faceHeight/2); //pom-pom left
ellipse(width/2 + faceWidth/2, height/2 + faceHeight/4, faceHeight/2); //pom-pom right
}
else {
strokeWeight(80);
stroke(27,6,0); //blackhair
arc(width / 2, height / 2, faceWidth, faceHeight, PI-PI/8, PI/8); //short hair
}
//EARS
//local variable of EARS
var earLX = width / 2 - (faceWidth/2); // earLX = horizontal coordinate of LEFT ear
var earRX = width / 2 + (faceWidth/2); // earLX = horizontal coordinate of LEFT ear
//left ear
noStroke();
fill(255,220,177); //nude color
ellipse(earLX, height/2, earSize/2, earSize);
//right ear
ellipse(earRX, height /2, earSize/2, earSize);
//left ear hole
strokeWeight(2);
stroke(230,145,20); //dark nude stroke
arc(earLX, height/2, earSize/4, earSize/2, -PI/2, -PI+PI/2);
//right ear hole
arc(earRX, height /2, earSize/4, earSize/2, PI/2, -PI-PI/2);
//FACE / HEAD
//strokeWeight(1);
strokeWeight(0);
fill(255,220,177); //nude color
ellipse(width / 2, height / 2, faceWidth, faceHeight);
//EARRINGS
//earring types
if (earringType == 1) {
strokeWeight(5);
stroke(167,0,239); //purple
noFill();
ellipse(earLX, height/2 + earSize/2, earringSize/6, earringSize); //left ear
ellipse(earRX, height/2 + earSize/2, earringSize/6, earringSize); // right ear
}
else if (earringType == 2) {
noStroke();
fill(27,255,255); //teal
ellipse(earLX, height/2 + earSize/2, earringSize/2, earringSize); //left ear
ellipse(earRX, height/2 + earSize/2, earringSize/2, earringSize); // right ear
fill(0,159,11); //green - smaller circle
ellipse(earLX, height/2 + earSize/2, earringSize/3, earringSize/1.5); //smaller cirlcle left
ellipse(earRX, height/2 + earSize/2, earringSize/3, earringSize/1.5); //smaller circle right
}
else {
fill(255,277,80); //orange
rect(earLX-earringSize/4, height/2 + earSize/2, earringSize/2, earringSize,5); //left ear
rect(earRX-earringSize/4, height/2 + earSize/2, earringSize/2, earringSize,5); // right ear
}
//NOSE
//local variables of NOSE
var noseX = width /2; // horizontal coordinates for NOSE
var noseY = height /2 + (faceHeight/8); // vertical coordinates for NOSE
noStroke();
fill(255,198,122); //nose color darker nude
//nose types
if (noseType == 1) {
ellipse(noseX, noseY, noseSize, noseSize); // nose circle
}
else if (noseType == 2) {
rect(noseX - (noseSize/4), noseY - (noseSize/2), noseSize/2, noseSize, 30); // nose rectangle
}
else {
triangle(noseX, noseY - (noseSize/2), noseX - (noseSize/2), noseY + (noseSize/4), noseX + (noseSize/2), noseY + (noseSize/4)); // nose triangle
}
//EYES
//local variable of EYES
var eyeLX = width /2 - (faceWidth * 0.25); //eyeLX = horizontal coordinate of LEFT eye
var eyeRX = width /2 + (faceWidth * 0.25); //eyeRX = horizontal coordinate of RIGHT eye
//eye type 1 - eye open
if (eyeType == 1) {
//overall eyeball
fill(255); //white eyeballs
ellipse(eyeLX, height /2, eyeSize + eyeSize/4, eyeSize); //left eye
ellipse(eyeRX, height /2, eyeSize + eyeSize/4, eyeSize); //right eye
//eye color
fill(0,176,203); //eye color - blue
ellipse(eyeLX, height /2, eyeSize/2, eyeSize/2); // left eye color
ellipse(eyeRX, height /2, eyeSize/2, eyeSize/2); // right eye color
//eye pupils
fill(0); //black pupils
ellipse(eyeLX, height /2, pupSize, pupSize); // left eye pupil
ellipse(eyeRX, height /2, pupSize, pupSize); // right eye pupil
}
//eye type 2 - shut
else if (eyeType == 2) {
strokeWeight(2);
stroke(230,145,20); //dark nude outline
noFill();
//LEFT EYE
arc(eyeLX, height /2, eyeSize/2, eyeSize, 0, PI);
//RIGHT EYE
arc(eyeRX, height /2, eyeSize/2, eyeSize, 0, PI);
}
//eye type 3 - sunglasses
else {
strokeWeight(4);
stroke(250,145,164); //rim color hot pink
fill(0); //glass of sunglasses is black
//LEFT EYE SUNGLASSES
rect(eyeLX - eyeSize/2, height /2 - eyeSize/2, eyeSize, eyeSize, 1);
//RIGHT EYE SUNGLASSES
rect(eyeRX - eyeSize/2, height /2 - eyeSize/2, eyeSize, eyeSize, 1);
//LINE CONNECTION
line(eyeLX + eyeSize/2, height /2 - eyeSize/4, eyeRX - eyeSize/2, height /2 - eyeSize/4);
//GLARE
strokeWeight(8);
stroke(255);
point(eyeLX + eyeSize /8, height /2 + eyeSize/4); //left eye
point(eyeRX + eyeSize /8, height /2 + eyeSize/4); //right eye
}
//MOUTH
//local variable of MOUTH
var mouthX = width /2; //mouthX = horizontal coordinate of MOUTH
var mouthY = height /2 + (faceHeight/3); //mouthY = vertical coordinate of MOUTH
//mouth type 1 - surprised with tongue
if (mouthType == 1) {
strokeWeight(2);
stroke(225,0,37); //lip liner color - red
fill(255);
ellipse(mouthX, mouthY, mouthSize, mouthSize/2); //surprised
//tongue
noStroke();
fill(255,144,159); //tongue color - pink
ellipse(mouthX, mouthY + mouthSize/8, mouthSize/1.5, mouthSize/4); //tongue
}
//mouth type 2 - smile
else if (mouthType == 2) {
noFill();
strokeWeight(3);
stroke(201,0,40); //lip liner color - red
arc(mouthX, mouthY, mouthSize, mouthSize/2, 0, PI); //happy
}
//mouth type 3 - frown
else {
stroke(94,53,0); //sad mouth color - dark brown
strokeWeight(3);
noFill();
arc(mouthX, mouthY, mouthSize, mouthSize/2, PI, 0); //sad
}
}
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.
//CREATE RANDOM DIMENSIONS
faceWidth = random(100, 400);
faceHeight = random(100, 400);
earSize = random(10, 80);
eyeSize = random(10, 65);
noseSize = random(10,50);
pupSize = random(8,15);
earringSize = random(20,60);
//CREATE RANDOM TYPES & OPTIONS
noseType = random (1,3);
noseType = round(noseType);
hairType = random (1,3);
hairType = round(hairType);
eyeType = random (1,3);
eyeType = round(eyeType);
earringType = random (1,3);
earringType = round(earringType);
mouthType = random(1,3);
mouthType = round(mouthType);
backgroundType = random(1,3);
backgroundType = round(backgroundType);
}Title: Modular Lattice
Author: Marius Watz
Link: http://mariuswatz.com/2012/08/08/modular-lattice/
I am very interested in Marius Watz’ project called “Modular Lattice”, as I enjoy that it has a 3-dimensional component to it, unlike the typical 2-dimensional drawings. Being from an architecture background, I admire how these “forms” can almost be seen as structural. It would be interesting to see these 3D elements supporting buildings or even become the overall building form. I also admire that due to a change in set of parameters, these forms not only vary in the overall form, but the textile qualities (there seems to be various densities). Unfortunately I was not able to find much information on how these 3D elements are derived specifically, however with some knowledge in 3D generative modeling; I can assume that there are variables containing height, width, percentage of infill or number of faces that want to be generated in the final form. These variables can be changed or adjusted depending on specific parameters set. This perhaps allows an unlimited number of different generations of the form (however each are similar due to the same basic / standard elements). Marius Watz’ artistic sensibilities seem to manifest in the algorithm, as he tends to create very random and radially generated works. Therefore, there has to be something in the algorithm that connects to some origin point, with perhaps a randomizer function that allows unlimited possibilities but with parameters that the artist can set / control.
Here is me! 
sketch
]]>//Tracy Meng
//Section B
function setup() {
createCanvas(600, 600);
background(220);
text("p5.js vers 0.9.0 test.", 10, 15);
}
function draw() {
//BACKGROUND
background(225,246,255); // light blue sky
//CLOUDS
noStroke();
fill(255); // cloud color (white)
circle(200,90,70); // cloud 1
circle(150,70,100);
circle(100,90,80);
circle(50,90,60);
circle(340,180,80); // cloud 2
circle(400,160,120);
circle(450,180,100);
circle(500,180,90);
circle(550,180,50);
//HILLS
fill(186,245,190); // light green
circle(150,550,300); // hill 1
circle(0,520,100); // hill 2
circle(450,520,200); // hill 3
circle(550,570,150); // hill 4
//TREES
fill(104,193,110); // dark green
ellipse(50,500,70,300); // tree 1
ellipse(145,400,90,height); // tree 2
ellipse(480,500,70,500); // tree 3
//SHRUBS
fill(77,235,87); // light green 2
ellipse(85,550,60,200); // shrub 1
ellipse(530,550,70,360); // shrub 2
//BACK OF HAIR
fill(102,58,14); // hair color (dark brown)
rect(185,308,230,height);
//HAIR HIGHLIGHTS
stroke(166,111,0); // light brown
strokeWeight(3); // highlight thickness
line(200,308,200,height);
line(240,308,240,height);
line(225,308,225,432);
line(380,400,380,height);
line(400,308,400,height);
//HEAD SHAPE
noStroke();
fill(255,220,177); // skin color (nude)
ellipse(width/2,height/2,220,250); // head shape & location
//EARS
fill(255,220,177); // skin color (nude)
ellipse(190,308,30,50); // left ear
ellipse(410,308,30,50); // right ear
//BODY
//SHIRT
fill(243,18,153); // shirt color (hot pink)
ellipse(width/2,490,250,100); // shoulders
quad(175,485,125,height,475,height,425,485); // rest of tshirt
//SHIRT COLLAR
noFill();
stroke(255); // collar color (white)
strokeWeight(10);
arc(width/2,450,80,80,0,PI);
//NECK
noStroke();
fill(255,220,177); // skin color (nude)
rect(260,410,80,35);
ellipse(width/2,450,80,80); // neckline
//EAR HOLES
noFill();
strokeWeight(2);
stroke(230,145,20); // brown ear stroke
arc(190,308,10,30,PI/2,PI/2+PI); // left hole
arc(410,308,10,30,-PI/2,PI/2); // right hole
//CHIN DEFINITION
arc(width/2,422,20,10,0,PI);
//EARRINGS
//LEFT TRIANGLE EARRING
strokeWeight(2);
stroke(255,157,58); // orange outline
fill(255,239,0); // gold
triangle(180,333,200,333,190,350);
//RIGHT TRIANGLE EARRING
triangle(400,333,420,333,410,350);
//LEFT EARRING DANGLES 1
strokeWeight(4); // thicker orange outline
fill(185,63,255); // purple
quad(190,350,170,365,190,385,210,365);
//RIGHT EARRING DANGLES 1
quad(410,350,390,365,410,385,430,365);
//LEFT EARRING DANGLE 2
noFill();
stroke(0,233,194); // teal dangle outline
quad(190,385,180,395,190,410,200,395);
//RIGHT EARRING DANGLE 2
quad(410,385,400,395,410,410,420,395);
//SUNGLASSES
//FRAME + LENSES
stroke(250,145,164); // rim color (pink)
strokeWeight(8); // rim thickness
fill(28,28,28); // lenses color (dark grey)
rect(220,260,65,65,10); // rectangle lense 1 (left)
rect(315,260,65,65,10); // rectangle lense 2 (right)
line(285,295,315,295); // connect rims
line(220,295,195,295); // left band
line(380,295,405,295); // right band
//PEARLS
strokeWeight(4); // thickness of point
stroke(255); // pearl color (white)
point(230,260); // top left rim
point(240,260);
point(250,260);
point(260,260);
point(270,260);
point(230,325); // bottom - left rim
point(240,325);
point(250,325);
point(260,325);
point(270,325);
point(220,275); // left - left rim
point(220,285);
point(220,295);
point(220,305);
point(220,315);
point(285,275); // right - left rim
point(285,285);
point(285,295);
point(285,305);
point(285,315);
point(330,260); // top - right rim
point(340,260);
point(350,260);
point(360,260);
point(370,260);
point(330,325); // bottom - right rim
point(340,325);
point(350,325);
point(360,325);
point(370,325);
point(315,275); // left - right rim
point(315,285);
point(315,295);
point(315,305);
point(315,315);
point(380,275); // right - right rim
point(380,285);
point(380,295);
point(380,305);
point(380,315);
//GLARE LINES
stroke(238,238,255); // glare color (grey - white)
strokeWeight(3); // glare thickness
line(242,304,264,282); // glare left
line(337,304,359,282); // glare right
//NOSE
noFill();
stroke(230,145,20); // brown nose stroke
strokeWeight(2); // nose stroke weight
arc(290,350,20,20,PI/2,PI/2+PI) // arc left: PI = Half of a circle
arc(310,350,20,20,-PI/2,PI/2); // arc right: PI = Half of a circle
line(290,340,290,322); // nose line left
line(310,340,310,322); // nose line right
//NOSTRILS
noStroke();
fill(222,171,95); // light brown
ellipse(292,353,10,5); // left nostril
ellipse(308,353,10,5); // right nostril
//LIPS
//BOTTOM LIP
stroke(255,122,162); // lip liner color
fill(255,132,168); // lip color (light red)
ellipse(width/2,390,25,15);
//TOP LIP
noStroke();
fill(255,78,132); // lip color (deep red)
ellipse(292,385,27,13); // left side
ellipse(308,385,27,13); // right side
//MAKEUP HIGHLIGHT
//LIP SPARKLE
stroke(255,238,210); // sparkle color
strokeWeight(5); // sparkle thickness
point(width/2,376); // top sparkle
point(width/2,402); // bottom sparkle
//NOSE SPARKLE
line(width/2,340,width/2,322);
//ROSY CHEEKS
noStroke();
fill(255,200,228); // rose
ellipse(245,340,60,20); // blush left
ellipse(355,340,60,20); // blush right
//HAIR BANGS
stroke(166,111,0); // light brown stroke (match highlight)
strokeWeight(3);
fill(102,58,14); // bangs color (dark brown)
point(220,220); // left
point(380,220); // right
bezier(300,175,120,180,250,300,150,430); // left bangs
bezier(300,175,480,180,350,300,450,430); // right bangs
//HIGHLIGHT BANGS
//LEFT
bezier(280,195,150,200,260,320,170,400);
//RIGHT
bezier(320,195,450,200,340,320,430,400);
}
Title: Threads
Author: Bill Ralph
Link: https://billralph.com/threads/
Bill Ralph is a mathematician, artist and professor at Brock University in Canada. He is interested in the intersection of math and art, as his pieces are made entirely from mathematical scripts and formulas transformed into computer code. He creates his artworks using a loop and randomizing system, which can continuously auto generate variations of his pieces within minutes. He is greatly influenced and inspired by the works of Leonardo da Vinci, such as Vitruvian Man, Mona Lisa and the Last Supper. They both share the belief that there is no art without mathematical logic. I believe his work and approach have a lot of future potential in terms of AI generated art. If any imagery can be translated into a mathematical algorithm and be manipulatable by simply changing parameters, an unlimited amount of artwork and its variations can be generated within seconds. I am a huge fan of his pieces because at first they look creative, abstract and random without any logic at all. I could not tell that there is an entire mathematical system behind each piece. The viewer would assume that he is a typical abstract artist and will draw in an uncontrolled, fluid motion. However it is actually quite the opposite, he strategically knows exactly what shapes he’ll create and the exact position of them.
This is my project of my self portrait.
sketch
]]>//Tracy Meng
//Section B
function setup() {
createCanvas(600, 600);
background(220);
text("p5.js vers 0.9.0 test.", 10, 15);
}
function draw() {
//BACKGROUND
background(225,246,255); // light blue sky
//CLOUDS
noStroke();
fill(255); // cloud color (white)
circle(200,90,70); // cloud 1
circle(150,70,100);
circle(100,90,80);
circle(50,90,60);
circle(340,180,80); // cloud 2
circle(400,160,120);
circle(450,180,100);
circle(500,180,90);
circle(550,180,50);
//HILLS
fill(186,245,190); // light green
circle(150,550,300); // hill 1
circle(0,520,100); // hill 2
circle(450,520,200); // hill 3
circle(550,570,150); // hill 4
//TREES
fill(104,193,110); // dark green
ellipse(50,500,70,300); // tree 1
ellipse(145,400,90,height); // tree 2
ellipse(480,500,70,500); // tree 3
//SHRUBS
fill(77,235,87); // light green 2
ellipse(85,550,60,200); // shrub 1
ellipse(530,550,70,360); // shrub 2
//BACK OF HAIR
fill(102,58,14); // hair color (dark brown)
rect(185,308,230,height);
//HAIR HIGHLIGHTS
stroke(166,111,0); // light brown
strokeWeight(3); // highlight thickness
line(200,308,200,height);
line(240,308,240,height);
line(225,308,225,432);
line(380,400,380,height);
line(400,308,400,height);
//HEAD SHAPE
noStroke();
fill(255,220,177); // skin color (nude)
ellipse(width/2,height/2,220,250); // head shape & location
//EARS
fill(255,220,177); // skin color (nude)
ellipse(190,308,30,50); // left ear
ellipse(410,308,30,50); // right ear
//BODY
//SHIRT
fill(243,18,153); // shirt color (hot pink)
ellipse(width/2,490,250,100); // shoulders
quad(175,485,125,height,475,height,425,485); // rest of tshirt
//SHIRT COLLAR
noFill();
stroke(255); // collar color (white)
strokeWeight(10);
arc(width/2,450,80,80,0,PI);
//NECK
noStroke();
fill(255,220,177); // skin color (nude)
rect(260,410,80,35);
ellipse(width/2,450,80,80); // neckline
//EAR HOLES
noFill();
strokeWeight(2);
stroke(230,145,20); // brown ear stroke
arc(190,308,10,30,PI/2,PI/2+PI); // left hole
arc(410,308,10,30,-PI/2,PI/2); // right hole
//CHIN DEFINITION
arc(width/2,422,20,10,0,PI);
//EARRINGS
//LEFT TRIANGLE EARRING
strokeWeight(2);
stroke(255,157,58); // orange outline
fill(255,239,0); // gold
triangle(180,333,200,333,190,350);
//RIGHT TRIANGLE EARRING
triangle(400,333,420,333,410,350);
//LEFT EARRING DANGLES 1
strokeWeight(4); // thicker orange outline
fill(185,63,255); // purple
quad(190,350,170,365,190,385,210,365);
//RIGHT EARRING DANGLES 1
quad(410,350,390,365,410,385,430,365);
//LEFT EARRING DANGLE 2
noFill();
stroke(0,233,194); // teal dangle outline
quad(190,385,180,395,190,410,200,395);
//RIGHT EARRING DANGLE 2
quad(410,385,400,395,410,410,420,395);
//SUNGLASSES
//FRAME + LENSES
stroke(250,145,164); // rim color (pink)
strokeWeight(8); // rim thickness
fill(28,28,28); // lenses color (dark grey)
rect(220,260,65,65,10); // rectangle lense 1 (left)
rect(315,260,65,65,10); // rectangle lense 2 (right)
line(285,295,315,295); // connect rims
line(220,295,195,295); // left band
line(380,295,405,295); // right band
//PEARLS
strokeWeight(4); // thickness of point
stroke(255); // pearl color (white)
point(230,260); // top left rim
point(240,260);
point(250,260);
point(260,260);
point(270,260);
point(230,325); // bottom - left rim
point(240,325);
point(250,325);
point(260,325);
point(270,325);
point(220,275); // left - left rim
point(220,285);
point(220,295);
point(220,305);
point(220,315);
point(285,275); // right - left rim
point(285,285);
point(285,295);
point(285,305);
point(285,315);
point(330,260); // top - right rim
point(340,260);
point(350,260);
point(360,260);
point(370,260);
point(330,325); // bottom - right rim
point(340,325);
point(350,325);
point(360,325);
point(370,325);
point(315,275); // left - right rim
point(315,285);
point(315,295);
point(315,305);
point(315,315);
point(380,275); // right - right rim
point(380,285);
point(380,295);
point(380,305);
point(380,315);
//GLARE LINES
stroke(238,238,255); // glare color (grey - white)
strokeWeight(3); // glare thickness
line(242,304,264,282); // glare left
line(337,304,359,282); // glare right
//NOSE
noFill();
stroke(230,145,20); // brown nose stroke
strokeWeight(2); // nose stroke weight
arc(290,350,20,20,PI/2,PI/2+PI) // arc left: PI = Half of a circle
arc(310,350,20,20,-PI/2,PI/2); // arc right: PI = Half of a circle
line(290,340,290,322); // nose line left
line(310,340,310,322); // nose line right
//NOSTRILS
noStroke();
fill(222,171,95); // light brown
ellipse(292,353,10,5); // left nostril
ellipse(308,353,10,5); // right nostril
//LIPS
//BOTTOM LIP
stroke(255,122,162); // lip liner color
fill(255,132,168); // lip color (light red)
ellipse(width/2,390,25,15);
//TOP LIP
noStroke();
fill(255,78,132); // lip color (deep red)
ellipse(292,385,27,13); // left side
ellipse(308,385,27,13); // right side
//MAKEUP HIGHLIGHT
//LIP SPARKLE
stroke(255,238,210); // sparkle color
strokeWeight(5); // sparkle thickness
point(width/2,376); // top sparkle
point(width/2,402); // bottom sparkle
//NOSE SPARKLE
line(width/2,340,width/2,322);
//ROSY CHEEKS
noStroke();
fill(255,200,228); // rose
ellipse(245,340,60,20); // blush left
ellipse(355,340,60,20); // blush right
//HAIR BANGS
stroke(166,111,0); // light brown stroke (match highlight)
strokeWeight(3);
fill(102,58,14); // bangs color (dark brown)
point(220,220); // left
point(380,220); // right
bezier(300,175,120,180,250,300,150,430); // left bangs
bezier(300,175,480,180,350,300,450,430); // right bangs
//HIGHLIGHT BANGS
//LEFT
bezier(280,195,150,200,260,320,170,400);
//RIGHT
bezier(320,195,450,200,340,320,430,400);
}