Stefano – [OLD FALL 2020] 15-104 • Introduction to Computing for Creative Practice

LookingOutwards-2

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.

Colourfield

Project 2- Variable faces

sketch Download

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

portrait Download

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.