A generative or computational design that caught my attention as I was searching through work is a piece called, “Colourfield” by Jon McCormack. It’s a piece of evolving colors palettes that shift throughout time. It builds off of old compositions to develop a new range of complimentary colors. The intelligent algorithm also takes into consideration time, where a blend of colors that could be better slowly merges to something different and you can settle into ones that work well. I’m unaware of exactly how this was constructed but I can assume that McCormack developed code that understood what color codes work with others based on intensity, quantity, and negative space. The gradual change also creates a slight movement on your screen that holds your attention in learning what’s to come. As a Communication Designer, I appreciate Jon McCormack’s thinking in developing a digital piece that works with its environment. Color is something that’s underappreciated, and this makes you realize the subtitles and beauty it creates when it works together.
Author: Stefano
Project 2- Variable faces
var LeyeXPoint = 225;
var LeyeYPoint = 190;
var ReyeXPoint = 325;
var ReyeYPoint = 190;
var faceHeight = 120;
var faceWidth = 260;
var noseXPoint = 280;
var noseYPoint = 200;
var mouthXPoint = 255;
var mouthYPoint = 285;
var eyebrowXPoint = 300;
var eyebrowYPoint = 185;
var backgroundColor = 0
function setup() {
createCanvas(640, 480);
background(0);
text("p5.js vers 0.9.0 test.");
}
function draw() {
background((backgroundColor), (backgroundColor), (backgroundColor));
fill (229, 184, 135);
noStroke();
ellipse(320, 235, faceWidth - 70, faceHeight + 115);
noFill();
strokeWeight(7);
stroke(250, 250, 250);
beginShape();
curveVertex(faceWidth, faceHeight);
curveVertex(faceWidth, faceHeight);
curveVertex(faceWidth - 50, faceHeight + 100);
curveVertex(faceWidth, faceHeight + 200);
curveVertex(faceWidth + 45, faceHeight + 225);
curveVertex(faceWidth + 100, faceHeight + 200);
curveVertex(faceWidth + 150, faceHeight + 120);
curveVertex(faceWidth + 150, faceHeight + 140);
curveVertex(faceWidth + 165, faceHeight + 130);
curveVertex(faceWidth + 180, faceHeight + 80);
curveVertex(faceWidth + 170, faceHeight + 60);
curveVertex(faceWidth + 150, faceHeight + 80);
curveVertex(faceWidth + 155, faceHeight + 90);
curveVertex(faceWidth + 150, faceHeight + 100);
curveVertex(faceWidth + 150, faceHeight + 100);
endShape(); // face and ear
noStroke();
noFill();
fill (173, 230, 230);
strokeWeight(5);
stroke(250, 250, 250);
beginShape();
curveVertex(LeyeXPoint + 15, LeyeYPoint + 10);
curveVertex(LeyeXPoint + 15, LeyeYPoint + 10);
curveVertex(LeyeXPoint, LeyeYPoint);
curveVertex(LeyeXPoint - 20, LeyeYPoint + 30);
curveVertex(LeyeXPoint, LeyeYPoint + 50);
curveVertex(LeyeXPoint + 30, LeyeYPoint + 30);
curveVertex(LeyeXPoint + 15, LeyeYPoint + 10);
curveVertex(LeyeXPoint + 15, LeyeYPoint + 10);
curveVertex(LeyeXPoint + 15, LeyeYPoint + 10);
curveVertex(LeyeXPoint - 5, LeyeYPoint + 20);
curveVertex(LeyeXPoint, LeyeYPoint + 35);
curveVertex(LeyeXPoint + 10, LeyeYPoint + 20);
curveVertex(LeyeXPoint - 5, LeyeYPoint + 20);
curveVertex(LeyeXPoint - 5, LeyeYPoint + 20);
endShape(); //Left Eye
noStroke();
noFill();
fill (173, 230, 230);
strokeWeight(5);
stroke(250, 250, 250);
beginShape();
curveVertex(ReyeXPoint + 15, LeyeYPoint + 10);
curveVertex(ReyeXPoint + 15, LeyeYPoint + 10);
curveVertex(ReyeXPoint, LeyeYPoint);
curveVertex(ReyeXPoint - 25, LeyeYPoint + 30);
curveVertex(ReyeXPoint, LeyeYPoint + 50);
curveVertex(ReyeXPoint + 30, LeyeYPoint + 30);
curveVertex(ReyeXPoint + 15, LeyeYPoint + 10);
curveVertex(ReyeXPoint + 15, LeyeYPoint + 10);
curveVertex(ReyeXPoint + 15, LeyeYPoint + 10);
curveVertex(ReyeXPoint - 5, LeyeYPoint + 20);
curveVertex(ReyeXPoint, LeyeYPoint + 35);
curveVertex(ReyeXPoint + 10, LeyeYPoint + 20);
curveVertex(ReyeXPoint - 5, LeyeYPoint + 20);
curveVertex(ReyeXPoint - 5, LeyeYPoint + 20);
endShape(); //Right Eye
noStroke();
noFill();
strokeWeight(5);
stroke(250, 250, 250);
beginShape();
curveVertex(noseXPoint, noseYPoint);
curveVertex(noseXPoint, noseYPoint);
curveVertex(noseXPoint - 25, noseYPoint + 55);
curveVertex(noseXPoint - 10, noseYPoint + 70);
curveVertex(noseXPoint - 5, noseYPoint + 65);
curveVertex(noseXPoint - 5, noseYPoint + 65);
curveVertex(noseXPoint, noseYPoint + 70);
curveVertex(noseXPoint + 10, noseYPoint + 65);
curveVertex(noseXPoint, noseYPoint + 55);
curveVertex(noseXPoint, noseYPoint + 55);
endShape(); //nose
fill (193, 104, 115);
strokeWeight(5);
stroke(250, 250, 250);
beginShape();
curveVertex(mouthXPoint - 3, mouthYPoint + 25);
curveVertex(mouthXPoint - 3, mouthYPoint + 25);
curveVertex(mouthXPoint, mouthYPoint);
curveVertex(mouthXPoint + 15, mouthYPoint + 15);
curveVertex(mouthXPoint + 25, mouthYPoint);
curveVertex(mouthXPoint + 65, mouthYPoint + 25);
curveVertex(mouthXPoint - 3, mouthYPoint + 25);
curveVertex(mouthXPoint - 3, mouthYPoint + 25);
endShape(); //mouth
//fill (150, 150, 150);
//noStroke();
//triangle(eyebrowXPoint - 5, eyebrowYPoint, eyebrowXPoint + 75, eyebrowYPoint, eyebrowXPoint + 18, eyebrowYPoint - 20);
//fill (150, 150, 150);
//noStroke();
//triangle(eyebrowXPoint - 35, eyebrowYPoint, eyebrowXPoint - 85, eyebrowYPoint, eyebrowXPoint - 50, eyebrowYPoint - 20);
noFill();
fill (150, 150, 150);
strokeWeight(3);
stroke(250, 250, 250);
beginShape();
curveVertex(eyebrowXPoint, eyebrowYPoint);
curveVertex(eyebrowXPoint, eyebrowYPoint);
curveVertex(eyebrowXPoint + 15, eyebrowYPoint - 15);
curveVertex(eyebrowXPoint + 65, eyebrowYPoint);
curveVertex(eyebrowXPoint + 25, eyebrowYPoint - 5);
curveVertex(eyebrowXPoint, eyebrowYPoint);
curveVertex(eyebrowXPoint, eyebrowYPoint);
endShape(); //Leyebrow
noFill();
fill (150, 150, 150);
strokeWeight(3);
stroke(250, 250, 250);
beginShape();
curveVertex(eyebrowXPoint - 40, eyebrowYPoint);
curveVertex(eyebrowXPoint - 40, eyebrowYPoint);
curveVertex(eyebrowXPoint - 55, eyebrowYPoint - 15);
curveVertex(eyebrowXPoint - 95, eyebrowYPoint);
curveVertex(eyebrowXPoint - 75, eyebrowYPoint - 5);
curveVertex(eyebrowXPoint - 40, eyebrowYPoint);
curveVertex(eyebrowXPoint - 40, eyebrowYPoint);
endShape(); //Reyebrow
}
function mousePressed(){
backgroundColor = random(0, 210);
LeyeYPoint = random(180, 200);
ReyeYPoint = random(180, 200);
faceHeight = random(100, 140);
noseYPoint = random(185, 215);
mouthYPoint = random(270, 295);
eyebrowYPoint = random(175, 195);
}
Project 1: Self Portrait
function setup() {
createCanvas(600, 600);
background(220);
text("p5.js vers 0.9.0 test.", 10, 15);
}
function draw() {
background(50, 31, 23);
strokeWeight(0);
fill(215, 188, 185);
rect(150, 400, 300, 300);
fill(230, 188, 180);
circle(303, 150, 400);
quad(125, 380, 480, 380, 500, 125, 105, 125);
quad(125, 380, 480, 380, 350, 490, 255, 490);
fill(230, 178, 175);
quad(290, 195, 265, 340, 340, 340, 315, 195);
triangle(265, 340, 250, 320, 300, 320);
triangle(340, 340, 355, 320, 300, 320);
triangle(225, 385, 263, 370, 300, 385);
triangle(300, 385, 337, 370, 375, 385);
fill(50, 31, 23);
triangle(125, 195, 210, 180, 250, 195);
triangle(350, 195, 390, 180, 480, 195);
fill(250, 250, 250);
ellipse(200, 225, 100, 50);
ellipse(400, 225, 100, 50);
fill(50, 31, 23);
rect(25, 0, 600, 80);
triangle(300, 90, 325, 80, 275, 80);
fill (50, 31, 23);
circle (200, 225, 40);
circle(400, 225, 40);
fill(0, 0, 0);
quad(150, 450, 210, 600, 0, 600, 0, 500);
quad(450, 450, 390, 600, 600, 600, 600, 500);
arc(300, 395, 150, 120, 0, PI);
circle(200, 225, 15);
circle(400, 225, 15);
fill(250, 250, 250);
rect(225, 385, 150, 15);
//fill(250, 0, 0)
//arc(300, 415, 150, 100, 0, PI)
}
function setup() {
createCanvas(600, 600);
background(220);
text("p5.js vers 0.9.0 test.", 10, 15);
}
function draw() {
background(50, 31, 23);
strokeWeight(0);
fill(215, 188, 185);
rect(150, 400, 300, 300);
fill(230, 188, 180);
circle(303, 150, 400);
quad(125, 380, 480, 380, 500, 125, 105, 125);
quad(125, 380, 480, 380, 350, 490, 255, 490);
fill(230, 178, 175);
quad(290, 195, 265, 340, 340, 340, 315, 195);
triangle(265, 340, 250, 320, 300, 320);
triangle(340, 340, 355, 320, 300, 320);
triangle(225, 385, 263, 370, 300, 385);
triangle(300, 385, 337, 370, 375, 385);
fill(50, 31, 23);
triangle(125, 195, 210, 180, 250, 195);
triangle(350, 195, 390, 180, 480, 195);
fill(250, 250, 250);
ellipse(200, 225, 100, 50);
ellipse(400, 225, 100, 50);
fill(50, 31, 23);
rect(25, 0, 600, 80);
triangle(300, 90, 325, 80, 275, 80);
fill (50, 31, 23);
circle (200, 225, 40);
circle(400, 225, 40);
fill(0, 0, 0);
quad(150, 450, 210, 600, 0, 600, 0, 500);
quad(450, 450, 390, 600, 600, 600, 600, 500);
arc(300, 395, 150, 120, 0, PI);
circle(200, 225, 15);
circle(400, 225, 15);
fill(250, 250, 250);
rect(225, 385, 150, 15);
ellipse((width / 2), (height / 2), 60, 60);
//fill(250, 0, 0)
//arc(300, 415, 150, 100, 0, PI)
}
LO: My Inspiration
A project that influenced me to take this class was programmed by a former student of 15-104. They decided to create a code to indicate when 60 seconds have gone by. He was able to visualize the amount of time that’s increased through the opacity/intensity of rings of light that pulse every second. It was a project done individually, and he looked at alternatives to time and sound in the world to gain an idea of what direction to go. It seems as though he developed a custom code for this function. Digital tools have created an accommodating environment for multiple users, so the fact that this student looked at how we can use technology to form a better experience and understanding, makes it stand out to me. I know that the creator of this project has been interested in using different senses to change or enhance things, which was most likely a reason for them deciding to develop this project. It was a simple look into the impact of computational design.