Jackson Pollock is on of my favorite artists and as he was mentioned in the description for this assignment, his work with ‘drip painting’ (splatter paint) is the definition of randomness in art.
Pollock’s work ‘Autumn Rhythm’
It is hard to say what his intentions and feelings were when making these paintings, I’ve heard this style called ‘action painting’ because the artist can literally be just throwing paint at the canvas. In this way, the art can feel very emotional while also being completely random. There’s no real way/reason to predict where the paint will land on the canvas, but that is part of the emotion and feeling behind it.
I think Pollock’s work in this area is very admirable as it was extremely experimental but it caught on. I think it is amazing how even pure randomness can create beautiful artworks.
// Catherine Coyle
// ccoyle@andrew.cmu.edu
// Section C
// Project 6 - Abstract Clock
var notes = [];
var audience = [];
var mouthY = 120;
var dir = .3;
function setup() {
createCanvas(480, 480);
}
function draw() {
var H = hour() % 12;
var M = minute();
var S = second();
// this accounts for an off by 1 error that happens in the afternoon
if (hour() > 12) {
H = (hour() % 12) - 1;
}
// resetting the storage of notes/audience members every
// new minute/new hour
if (S == 0) {
notes = [];
}
if (M == 0) {
audience = [];
}
// the basic bg art of the clock is gonna be really complicated
// so to keep draw() from getting too messy im doing it
// in another function
drawBG();
// generating randomized notes
for(var i = 0; i < S; i++) {
// only add on one per draw call so its not
// generating a ton of notes every second
if (i == notes.length) {
notes.push([random(15,width-10), random(height / 2),
random(-3,3), random(-3,3), 1, 1]);
}
}
// do same thing for minutes
for(var i = 0; i < M; i++) {
if (i == audience.length) {
audience.push([random(20, width - 20), random(height / 2 + 80, height - 20)]);
}
}
// i want to draw the notes and have them float around!
for(var i = 0; i < notes.length; i++) {
// 0 is x, 1 is y, 2 is xvel, 3 is yvel, 4 is xdir, 5 ydir
notes[i][0] += notes[i][4] * notes[i][2];
if (notes[i][0] > width - 10 || notes[i][0] < 15) {
notes[i][4] = -1 * notes[i][4]
}
notes[i][1] += notes[i][5] * notes[i][3];
if (notes[i][1] > height / 2 + 20 || notes[i][1] < 0) {
notes[i][5] = -1 * notes[i][5];
}
// this whole thing is just basic movement stuff
// but it looks more complicated bc the values are stored in
// nested lists
drawNote(notes[i][0], notes[i][1]);
}
// partially hardcoding drawing locations for coffee cups (hours)
for(var i = 0; i <= H; i++) {
if (i < 3) {
drawCoffee(25 + i*45, height / 2 + 20);
}
if ((i >= 3) & (i < 5)) {
drawCoffee(50 + (i - 3) * 45, height / 2 - 23);
}
if (i == 5) {
drawCoffee(75 + (i - 5) * 45, height / 2 - 65);
}
if ((i > 5) & (i < 9)) {
drawCoffee(width - 10 - (i - 5) * 45, height / 2 + 20);
}
if ((i >= 9) & (i < 11)) {
drawCoffee(width - 35 - (i - 8) * 45, height / 2 - 23);
}
if (i == 11) {
drawCoffee(width - 105, height / 2 - 65);
}
}
// i want him to be in front of the music
drawKK();
// the audience (minutes) are randomized in front of him
for(var i = 0; i < audience.length; i++) {
drawAudience(audience[i][0], audience[i][1]);
}
// i want his mouth to move as he sings!
mouthY += dir;
if (mouthY > 128) {
dir = -dir;
}
if (mouthY < 120) {
dir = -dir;
}
// drawing the actual mouth
fill(0);
stroke(0);
strokeWeight(3);
line(width / 2, 105, width / 2, 115);
line(width / 2, 115, width / 2 + 10, 120);
line(width / 2, 115, width / 2 - 10, 120)
noStroke();
quad(width / 2 + 10, 120, width / 2, 115, width / 2 - 10, 120, width / 2, mouthY);
// i want him to blink too
drawEyes(S);
drawSpotlight();
}
// everything below here is less coding magic and
// more magic numbers for graphics
function drawBG() {
noStroke();
background(193, 120, 51);
// platform top
fill(197, 155, 113);
rect(0, height / 2 + 40, width, 200);
// platform front
fill(132, 62, 11);
rect(0, height / 2 + 70, width, 200);
}
function drawKK() {
// stool legs
fill(209, 175, 66);
rect(width / 2 - 60, height / 2, 20, 60);
rect(width / 2 + 40, height / 2, 20, 60);
fill(201, 146, 58); // back leg
rect(width / 2 - 10, height / 2, 20, 45);
// stool
fill(201, 146, 58); // stool shadow
ellipse(width / 2, height / 2 + 3, 150, 38);
fill(209, 175, 66); // this is the main stool color
ellipse(width / 2, height / 2, 150, 30);
// kk body
fill(255);
ellipse(width / 2, 180, 90, 120)
fill(247, 242, 234); // kk shadow color
ellipse(width / 2, 110, 68, 68);
// kks head
fill(255);
ellipse(width / 2, 75, 90, 90);
ellipse(width / 2, 100, 70, 70);
// eyebrowsss
fill(0);
ellipse(width / 2 + 22, 65, 23, 25);
ellipse(width / 2 - 22, 65, 23, 25);
fill(255);
ellipse(width / 2 + 22, 70, 24, 15);
ellipse(width / 2 - 22, 70, 24, 15);
// ears
noStroke();
fill(255);
triangle(width / 2 + 40, 40, width / 2 + 60, 40, width / 2 + 57.5, 70);
triangle(width / 2 - 40, 40, width / 2 - 60, 40, width / 2 - 57.5, 70);
// right leg
ellipse(width / 2 + 25, height / 2 - 10, 35, 100);
fill(247, 242, 234);
ellipse(width / 2 + 30, height / 2 + 40, 30, 30);
fill(255);
ellipse(width / 2 + 30, height / 2 + 35, 30, 30);
//left leg
fill(255);
ellipse(width / 2 - 15, height / 2 - 5, 70, 35);
fill(247, 242, 234);
ellipse(width / 2 + 18, height / 2, 20, 28);
fill(255);
ellipse(width / 2 + 15, height / 2, 20, 30);
// guitar neck
fill(160, 109, 27);
rect(width / 2, height / 2 - 60, 130, 20);
fill(102, 69, 17);
rect(width / 2 + 120, height / 2 - 62.5, 30, 25);
fill(183, 177, 167); // little knobs at the end
ellipse(width / 2 + 125, height / 2 - 65, 4, 4);
ellipse(width / 2 + 135, height / 2 - 65, 4, 4);
ellipse(width / 2 + 145, height / 2 - 65, 4, 4);
ellipse(width / 2 + 125, height / 2 - 35, 4, 4);
ellipse(width / 2 + 135, height / 2 - 35, 4, 4);
ellipse(width / 2 + 145, height / 2 - 35, 4, 4);
// guitar body
fill(209, 175, 6);
beginShape();
curveVertex(192, 220);
curveVertex(181, 188);
curveVertex(187, 160);
curveVertex(199, 153);
curveVertex(221, 156);
curveVertex(234, 163);
curveVertex(247, 162);
curveVertex(256, 160);
curveVertex(267, 167);
curveVertex(277, 188);
curveVertex(277, 205);
curveVertex(268, 213);
curveVertex(254, 214);
curveVertex(239, 213);
curveVertex(228, 217);
curveVertex(210, 221);
curveVertex(185, 211);
curveVertex(181, 188);
curveVertex(183, 173);
endShape();
// guitar details
fill(175, 123, 40); // background thing
ellipse(width / 2 + 3, height / 2 - 45, 30, 20);
fill(102, 69, 17); // hole
ellipse(width / 2 + 10, height / 2 - 52, 25, 25);
ellipse(width / 2 - 30, height / 2 - 52, 10, 25);
// kks hands
fill(255);
ellipse(width / 2 - 55, height / 2 - 75, 30, 30);
ellipse(width / 2 + 70, height / 2 - 35, 30, 30);
}
function drawCoffee(x, y) {
// mug
noStroke();
fill(255);
rect(x, y, 30, 40);
ellipse(x + 15, y, 30, 5);
ellipse(x + 15, y + 40, 30, 5);
// handle
stroke(255);
strokeWeight(5);
noFill();
ellipse(x, y + 20, 20, 20);
// coffee
noStroke();
fill(132, 62, 11);
ellipse(x + 15, y, 25, 2);
}
// will draw music note at given coords
function drawNote(x, y) {
fill(0);
stroke(0);
strokeWeight(5);
line(x, y, x, y + 20);
noStroke();
ellipse(x - 5, y + 20, 15, 10);
triangle(x, y-2.25, x, y + 5.75, x + 12, y + 1.75);
}
// will draw audience member at coords
function drawAudience(x, y) {
noStroke();
fill(239, 239, 208);
ellipse(x, y-1, 48, 50);
fill(48, 49, 51);
ellipse(x, y, 50, 50);
fill(0);
ellipse(x, y + 3, 46, 46);
}
function drawEyes(S) {
if (S % 5 == 0) {
fill(0);
ellipse(width / 2, 105, 15, 10);
strokeWeight(3);
stroke(0);
noFill();
beginShape();
curveVertex(width / 2 + 11, 85);
curveVertex(width / 2 + 11, 85);
curveVertex(width / 2 + 22, 88);
curveVertex(width / 2 + 34, 85);
curveVertex(width / 2 + 34, 85);
endShape();
beginShape();
curveVertex(width / 2 - 11, 85);
curveVertex(width / 2 - 11, 85);
curveVertex(width / 2 - 22, 88);
curveVertex(width / 2 - 34, 85);
curveVertex(width / 2 - 34, 85);
endShape();
} else {
// eyes and nose
fill(0);
ellipse(width / 2 + 22, 75, 15, 15);
ellipse(width / 2 - 22, 75, 15, 15);
ellipse(width / 2, 105, 15, 10);
//eyelids
strokeWeight(3);
stroke(0);
beginShape();
curveVertex(width / 2 + 11, 71);
curveVertex(width / 2 + 11, 71);
curveVertex(width / 2 + 22, 68);
curveVertex(width / 2 + 34, 71);
curveVertex(width / 2 + 34, 71);
endShape();
beginShape();
curveVertex(width / 2 - 11, 71);
curveVertex(width / 2 - 11, 71);
curveVertex(width / 2 - 22, 68);
curveVertex(width / 2 - 34, 71);
curveVertex(width / 2 - 34, 71);
endShape();
}
}
function drawSpotlight() {
noStroke();
fill(0, 0, 0, 30);
quad(0, 0, width / 2 - 70, 0, width / 2 - 150, height / 2 + 70, 0, height / 2 + 70);
quad(width, 0, width / 2 + 70, 0, width / 2 + 150, height / 2 + 70, width, height / 2 + 70);
rect(0, height / 2 + 70, width, 200);
}
I simultaneously had a really fun time with this project while I’m also extremely happy I’m finished.
Anyone who’s played the Nintendo game Animal Crossing will recognize this character as KK Slider. Animal Crossing has always been one of my favorite series, and I thought that it was fitting to do a project related to it for this assignment because the game plays in real time as well.
Here was my initial sketch design for the clock
The musical notes represent seconds, audience members minutes, and coffee mugs hours.
I had a lot more trouble with this than I expected too. I got stuck on more than a few off by one errors, and its probably the most graphically complex project I’ve made for this class so far. I had a really hard time with plotting out the acoustic guitar (it’s still a bit lopsided but much better now). I ended up writing a program that would let me click on the screen where I wanted to place my dots and then would print the array of coordinates. It also removed the most recent coordinate when you clicked a key because it was very easy to mess up, and I didn’t want to have to start over entirely.
Screenshot of the program I mention above (was really useful for this)
Altogether this project was fun and I’m really proud of what I made! (My code is super long so I’m crossing my fingers for no missed style errors.)
I wasn’t sure what to write about for this project at first because there is such a multitude of impressive 3d graphics projects out there. I found this artist, mregfx, while scrolling through Twitter though, and thought his work seems perfect!
This is the piece that I had initially seen. It is amazing that 3d graphics can look so realistic and seem to blend in with real world surroundings so well. The work itself feels very mysterious and fits especially well with October coming up. I am particularly impressed by the smoke physics. It’s amazing that a computer can generate these textures and movements.
The artist himself doesn’t seem to have a website, but has a fairly large following on both Twitter and Instagram and it based out of the UK. A lot if his projects are similar to this one in that they seem extremely realistic but some small details are changed using computer graphics that make them particularly intriguing or cool to look at.
// Catherine Coyle
// ccoyle@andrew.cmu.edu
// Section C
// Project - 05 Wallpaper
// https://www.historicnewengland.org/explore/collections-access/gusn/286690/ inspo
var tileW = 75;
var tileH = 100;
function setup() {
createCanvas(600, 500);
}
function draw() {
background(249, 240, 229);
for(var row = 0; row < height / tileH; row++) {
for(var col = 0; col < width / tileW; col++) {
drawTile(tileW * col, tileH * row);
}
}
noLoop();
}
function drawTile(x, y) {
// many tiles have the same thing drawn over each other which is
// just to account for the edges of the canvas so it looks
// more continuous
// short lines through the middle circles
stroke(237, 186, 85, 95);
strokeWeight(tileW / 8);
line(x + tileW / 4, y, x + tileW * 3/4, y);
line(x + tileW / 4, y + tileH, x + tileW * 3/4, y + tileH);
line(x, y + tileH / 4, x, y + tileH * 3/4);
line(x + tileW, y + tileH / 4, x + tileW, y + tileH * 3/4);
// gold thicker background lines
strokeWeight(6);
stroke(237, 186, 85);
line(x, y + tileH / 2, x + tileW / 2, y);
line(x, y + tileH / 2, x + tileW / 2, y + tileH);
line(x + tileW / 2, y, x + tileW, y + tileH / 2);
line(x + tileW / 2, y + tileH, x + tileW, y + tileH / 2);
// thinner blue lines between diamonds
strokeWeight(2);
stroke(132, 145, 232);
line(x, y + tileH / 2, x + tileW / 2, y);
line(x, y + tileH / 2, x + tileW / 2, y + tileH);
line(x + tileW / 2, y, x + tileW, y + tileH / 2);
line(x + tileW / 2, y + tileH, x + tileW, y + tileH / 2);
noStroke();
// gold background circle
fill(237, 186, 85);
ellipse(x, y + tileH / 2, tileW / 4 + 3, tileW / 4 + 3);
ellipse(x + tileW / 2, y, tileW / 4 + 3, tileW / 4 + 3);
ellipse(x + tileW / 2, y + tileH, tileW / 4 + 3, tileW / 4 + 3);
ellipse(x + tileW, y + tileH / 2, tileW / 4 + 3, tileW / 4 + 3);
// blue circle at corners
fill(132, 145, 232);
ellipse(x, y + tileH / 2, tileW / 4, tileW / 4);
ellipse(x + tileW / 2, y, tileW / 4, tileW / 4);
ellipse(x + tileW / 2, y + tileH, tileW / 4, tileW / 4);
ellipse(x + tileW, y + tileH / 2, tileW / 4, tileW / 4);
// inside circle to show background color
fill(249, 240, 229);
ellipse(x, y + tileH / 2, tileW / 8, tileW / 8);
ellipse(x + tileW / 2, y, tileW / 8, tileW / 8);
ellipse(x + tileW / 2, y + tileH, tileW / 8, tileW / 8);
ellipse(x + tileW, y + tileH / 2, tileW / 8, tileW / 8);
// gold diamonds in middle of some tiles
fill(237, 186, 85);
quad(x + tileW / 2, y + tileH / 2 - tileH / 8, x + tileW / 2 + tileW / 8, y + tileH / 2,
x + tileW / 2, y + tileH / 2 + tileH / 8, x + tileW / 2 - tileW / 8, y + tileH / 2);
}
I really love looking at kind of antique and elegant designs so this project was a lot of fun for me! I set up my basic grid with nested for loops and then made a ‘helper’ function that would draw the tiles based on the top left corner of each part of the grid.
In coming up with ideas for what to make for this project, I looked a lot at the antique wallpaper link that was provided with the assignment. Rather than doing sketches of my own, I tried to emulate one of my favorite patterns I found there.
I found this design very pretty and wanted to make something similar
I feel like the design I made is a nice mix between retro looking with the rounded edges and the elegant look to this wallpaper. This project was a fun way for me to get refreshed on nested for-loops!
Vocaloid is a music program, its first commercial release being in 2004. This series of programs allows a music producer to create a fully voiced song all on the computer. The producer types in the lyrics they want sung as well as a melody and the program synthesizes a voice for the song so no real singer is involved in the process of creating the actual song. Each ‘voice bank’ originally started with a real singer pronouncing all possible syllables which then can be used over and over again to create a huge number of possible songs.
Screenshot of program’s 3rd version
I don’t know much about computing to change sounds, but I would imagine there are certain factors that allow the program to change the pitch, vibrato, etc of each syllable. I just think it’s really cool technology, and could be good for those who want to make music but lack the singing ability.
Many of the voice banks have animated ‘personas’ which have led to a large fanbase for the program. You can see this illustrated below in vocaloid “Hatsune Miku’s” inclusion on the popular video game Just Dance.
// Catherine Coyle
// ccoyle@andrew.cmu.edu
// section C
// Project-04-String Art
var rightY = 0;
var leftY;
var colorV = 0;
var bgColor = 0;
function setup() {
createCanvas(400, 300);
leftY = height;
}
function draw() {
background(200);
// background gradient done w lines
// the line gets smaller and lighter each round making a gradient
for(var thickness = height*2; thickness > 1; thickness = thickness*.8) {
strokeWeight(thickness);
stroke(bgColor/2, bgColor/2, bgColor);
line(0, height, width, height);
bgColor += 20;
}
strokeWeight(.5);
// corner curves
for(var topX = 0; topX < width; topX += 4) {
// as one side of the line increases the other decreases making a curve
// here are curves near the four corners
stroke(colorV, 255-colorV, 150);
line(width, leftY, width-topX, 0);
line(topX, height, width, width-rightY);
rightY += 4;
line(topX, 0, 0, leftY);
line(0, leftY, height-topX, height);
leftY -= 4;
// the color is continuously changing to make a gradient
colorV += 2.5;
}
// yellow middle lines
strokeWeight(1);
stroke(253, 255, 137);
for(var midX = 0; midX < width/2 - 50; midX += 8) {
line(width/2 - 50, height/2 - 50 + midX, width/2 + 50 -midX, height/2 - 50);
line(width/2 + 50, height/2 + 50 - midX, width/2 - 50 +midX, height/2 + 50);
}
noLoop();
}
I thought this was a really fun project! I didn’t do any sketches this time, instead I just experimented with different numbers to figure out how to make a curve and then added the curves in the middle. Additionally, I thought it would be cool to have a gradient background so I did this by using lines in a for-loop to follow the rest of the theme of the project.
The project I found inspiration in this week was from the generative design studio ‘Nervous System.’ Specifically, I was interested in their Floraform project. I found this studio from the linked reading, and I find it very interesting.
An example of one of these ‘Floraform’ designs
This project was started in 2014. Essentially, the studio took inspiration from the natural growth and development of blooming flowers in nature. This ‘digital garden’ can even be 3D printed and worn as accessories. According to their website, Floraform is a garden where ‘instead of growing plants, we’re cultivating algorithms.’
A lot of research into how plants divide and grow naturally must’ve gone into making this project come to life in such a natural way. I think it is exciting because the idea of simulating cell growth and development in a 3D plane could lead to some very interesting science and procedurally developed ‘organisms.’ On top of that, it all just looks very cool!
Feel free to read more about the project on the studio’s website here.
// Catherine Coyle
// Section C
// ccoyle@andrew.cmu.edu
// Project-03 Dynamic Drawing
var skyColor = 80;
var sunColor = 0;
var cloudPosition = 1;
var oldX = 0;
var currX = 1;
var dir = 'right';
var angle = 0;
var targetX = 0;
var targetY = 0;
var diffX = 1;
var diffY = 1;
function setup() {
createCanvas(640,480);
}
function draw() {
// sky darkens
background(skyColor, skyColor * 2, skyColor * 4);
noStroke();
// sun/moon
fill(255, 212 + (sunColor / 5), sunColor);
ellipse(width / 2, height, 250, 250);
fill(255, 212 + (sunColor / 5), sunColor, 50);
ellipse(width / 2, height, 300, 300);
fill(255, 212 + (sunColor / 5), sunColor, 25);
ellipse(width / 2, height, 400, 400);
// rays will rotate based on mouseY value
push();
translate(width / 2, height);
rotate(angle);
fill(255, 212 + (sunColor / 5), sunColor, 70);
rect(145, 0, 25, 40);
rect(-145, 0, 25, 40);
rect(0, 145, 40, 25);
rect(0, -145, 40, 25);
pop();
// bird will change the way its facing based on the mouse
currX = mouseX
if (currX > oldX) {
dir = 'right';
} else if (currX < oldX) {
dir = 'left';
}
// drawing it based on direction
if (dir == 'right') {
// beak
fill(252, 194, 118);
triangle(mouseX, mouseY, mouseX - 20, mouseY + 10, mouseX - 20, mouseY - 10,)
// bird body
fill(232, 95, 117);
ellipse(mouseX - 20, mouseY, 20, 20);
triangle(mouseX - 30, mouseY, mouseX - 40, mouseY + 10, mouseX - 40, mouseY - 10)
fill(0);
ellipse(mouseX - 20, mouseY, 10, 10);
} else {
// beak
fill(252, 194, 118);
triangle(mouseX, mouseY, mouseX + 20, mouseY + 10, mouseX + 20, mouseY - 10,)
// bird body
fill(232, 95, 117);
ellipse(mouseX + 20, mouseY, 20, 20);
triangle(mouseX + 30, mouseY, mouseX + 40, mouseY + 10, mouseX + 40, mouseY - 10)
fill(0);
ellipse(mouseX + 20, mouseY, 10, 10);
}
// flock of birds trails the main one
// i got the basic format for this 'easing' from the class website
diffX = mouseX - targetX;
diffY = mouseY - targetY;
targetX = targetX + 0.1 * diffX;
targetY = targetY + 0.1 * diffY;
fill(155, 29, 44);
if (dir == 'right') {
ellipse(targetX - 75, targetY - 30, 15, 15);
ellipse(targetX - 75, targetY + 30, 15, 15);
ellipse(targetX - 150, targetY - 60, 15, 15);
ellipse(targetX - 150, targetY + 60, 15, 15);
} else {
ellipse(targetX + 75, targetY - 30, 15, 15);
ellipse(targetX + 75, targetY + 30, 15, 15);
ellipse(targetX + 150, targetY - 60, 15, 15);
ellipse(targetX + 150, targetY + 60, 15, 15);
}
// clouds move opposite to the bird
fill(227, 235, 239);
rectMode(CENTER);
cloudPosition = width - mouseX
rect(cloudPosition + 50, 350, 100, 40);
rect(cloudPosition + 30, 370, 100, 40);
rect(cloudPosition - 150, 200, 100, 40);
rect(cloudPosition - 180, 180, 100, 40);
rect(cloudPosition - 350, 275, 120, 30);
rect(cloudPosition - 380, 290, 80, 20);
// sky darkens as bird moves
skyColor = 80 - (mouseX / 10);
sunColor = mouseX / 2.5;
// adjusting various variables for the next frame (movement)
oldX = currX
angle = mouseY / 50;
}
I was not really sure what to do when starting this project. I started doodling a little bit and just came up with the idea of a migrating flock of birds. I wanted it to be cute and simple, but also incorporate some of the things we learned this week. I’m still not the biggest fan of rotation, but I think this project helped me get the hang of it a little better.
Here is my doodle from when I came up with the idea:
In this week’s Looking Outwards I wanted to talk about the pix2pix project. I had considered writing about this one for last week but I think it fits well with the generative art theme.
Essentially, pix2pix is a program that takes a simple line drawing, interprets what it is meant to look like, and turns it into a computer generated ‘oil painting.’ The entire program works because of artificial intelligence and procedural machine learning of scanning thousands of pictures in order to know how to interpret our drawings.
Here is an amazing example of what the program is capable of. (Click the photo for the source.)
It seems that the more lines and detail that are added to your drawing, the better the result will be. The program doesn’t know as much how to handle a lot of blank space which leads to some funny (or horrifying results). This program started at a Dutch broadcasting company called NPO, but the code is open source and it has expanded greatly. I feel as though this computer generated art can be whatever we make of it, and really shows the amazing power of machine learning.
This video demonstrates in more detail how the program works and provides many interesting examples of the generative art.
There is a free demo that anyone can access from their browser! Feel free to try and make your own generative creations here.
// Catherine Coyle
// Section C
// ccoyle@andrew.cmu.edu
// Project-02
var faceWidth = 300;
var faceHeight = 300;
var noseShape = 1;
var noseWidth = 50;
var noseHeight = 50;
var eyeSize = 50;
var eyeWidth = 100;
var eyeShape = 1;
// these are the coordinates of points on the mouth
var mouthY = 300;
var mouthMX = 320;
var mouthMY = 350;
var mouthLength=100
// skin color variables
var skinR = 250;
var skinG = 180;
var skinB = 140;
// pupils
var pupilSize = 30;
var pupilR = 0;
var pupilG = 0;
var pupilB = 0;
// other random features
var glasses = true;
var freckle = true;
var freckleX = 400;
var freckleY = 300;
var freckleSize = 5;
var blush = true;
var blushSize = 100;
function setup() {
createCanvas(640,480);
}
function draw() {
strokeWeight(0);
background(239, 198, 198);
// basic face
fill(skinR,skinG,skinB);
ellipse(width/2,height/2,faceWidth,faceHeight);
// some random characteristics
if (freckle == true) {
fill(104, 54, 11);
ellipse(freckleX, freckleY, freckleSize, freckleSize)
}
if (blush == true) {
fill(skinR,skinG-50,skinB);
ellipse((width/2)-(faceWidth/2)+blushSize/2,height/2,blushSize, blushSize);
ellipse((width/2)+(faceWidth/2)-blushSize/2,height/2,blushSize, blushSize);
}
// eyes
fill(255);
if (eyeShape==1) {
ellipse((width/2)-(eyeWidth/2),(height/2)-(faceHeight/4),eyeSize,eyeSize);
ellipse((width/2)+(eyeWidth/2),(height/2)-(faceHeight/4),eyeSize,eyeSize);
}
else if (eyeShape==2) {
rect((width/2)-(eyeWidth/2)-(eyeSize/2),(height/2)-(faceHeight/4)-(eyeSize/4),eyeSize,eyeSize/2);
rect((width/2)+(eyeWidth/2)-(eyeSize/2),(height/2)-(faceHeight/4)-(eyeSize/4),eyeSize,eyeSize/2);
}
else if (eyeShape==3) {
triangle((width/2)-(eyeWidth/2)-(eyeSize/2),(height/2)-(faceHeight/4)+(eyeSize/2),(width/2)-(eyeWidth/2)+(eyeSize/2),(height/2)-(faceHeight/4)+(eyeSize/2),(width/2)-(eyeWidth/2),(height/2)-(faceHeight/4)-(eyeSize*3/4));
triangle((width/2)+(eyeWidth/2)-(eyeSize/2),(height/2)-(faceHeight/4)+(eyeSize/2),(width/2)+(eyeWidth/2)+(eyeSize/2),(height/2)-(faceHeight/4)+(eyeSize/2),(width/2)+(eyeWidth/2),(height/2)-(faceHeight/4)-(eyeSize*3/4));
}
// pupils
fill(pupilR,pupilG,pupilB);
ellipse((width/2)-(eyeWidth/2),(height/2)-(faceHeight/4),pupilSize,pupilSize);
ellipse((width/2)+(eyeWidth/2),(height/2)-(faceHeight/4),pupilSize,pupilSize);
// nose
fill(skinR-50,skinG-20,skinB-20);
if (noseShape == 1) {
ellipse(width/2,height/2,noseWidth,noseHeight);
}
else if (noseShape == 2) {
rect((width/2)-noseWidth/2,(height/2)-noseHeight/2,noseWidth,noseHeight);
}
else if (noseShape==3) {
triangle((width/2)-noseWidth/2, (height/2)+(noseHeight/2),(width/2)+noseWidth/2, (height/2)+(noseHeight/2), width/2,(height/2)-(noseHeight/2));
}
// mouth
strokeWeight(5);
noFill();
beginShape();
curveVertex((width/2)-(mouthLength/2),mouthY);
curveVertex((width/2)-(mouthLength/2),mouthY);
curveVertex(mouthMX,mouthMY);
curveVertex((width/2)+(mouthLength/2),mouthY);
curveVertex((width/2)+(mouthLength/2),mouthY);
endShape();
// if they have glasses theyre added here
if (glasses == true) {
noFill();
strokeWeight(5);
stroke(0);
ellipse((width/2)-(eyeWidth/2),(height/2)-(faceHeight/4),eyeWidth*3/4,eyeWidth*3/4);
ellipse((width/2)+(eyeWidth/2),(height/2)-(faceHeight/4),eyeWidth*3/4,eyeWidth*3/4);
line((width/2)-(eyeWidth/8),(height/2)-(faceHeight/4),(width/2)+(eyeWidth/8),(height/2)-(faceHeight/4))
}
}
function mousePressed() {
// randomizing all variables used for the face to make a new one!
faceWidth=random(150,450);
faceHeight=random(150,450);
// randomizes the shape used for the nose
// 1 means circle, 2 means rectangle, 3 means triangle
noseShape = int(random(1,3.99));
noseWidth = random(10,100);
noseHeight = random(10,100);
eyeWidth = random(20,faceWidth/2);
eyeSize = random(20,eyeWidth/2);
mouthLength = random(50,faceWidth*3/4);
mouthY = (height/2)+faceHeight/4;
mouthMY = random((height/2)+(noseHeight/2)+10, (height/2)+(faceHeight/2)-10);
mouthMX = random((width/2)-(mouthLength/2)+10,(width/2)+(mouthLength/2)-10);
skinR = random(183,255);
skinG = random(120,skinR-60);
skinB = skinG - random(30,60);
pupilSize=random(5,eyeSize-10);
pupilR = random(0,255);
pupilG = random(0,255);
pupilB = random(0,255);
// eye shape works the same way as nose shape
eyeShape = int(random(1,3.99));
// randomizing extra features
if (random(0,5) > 2) {
glasses = false;
}
else {
glasses = true;
}
if (random(0,10) > 6) {
freckle = true;
freckleX = (random(width/2, width/2 + faceWidth/2))*3/4;
freckleY = (random(height/2, height/2 + faceHeight/2))*3/4;
freckleSize = random(4,10);
}
else {
freckle = false;
}
if (random(0,10) > 5) {
blush = true;
blushSize = random(50,faceWidth/2);
}
else {
blush = false;
}
}
I had a lot of fun with this project! I really wanted to emphasize the randomization so instead of creating a basic face set up and randomizing small parts, I decided to just create the face as if everything is randomly generated each time. Because of this, I didn’t make any sketches this time because it was impossible to predict anything about the faces. I wanted them all to be unrecognizable from one another. To help with this, I added variations to eye/nose shapes and also added additional features that aren’t on the face in every randomization. Initially I had wanted to add some kind of animation to this project but it ended up being to complicated with all the variability. Some of the faces end up being kind of funny/scary but I think it’s fun to click and see what the code can come up with!
![[OLD FALL 2018] 15-104 • Introduction to Computing for Creative Practice](../../../../wp-content/uploads/2020/08/stop-banner.png)
