Author: Jamie

Jamie Dorst Project 02 Variable Faces

sketch

/*
Jamie Dorst
Section A
jdorst@andrew.cmu.edu
project-02
*/

// variables
var eyeSize = 20;
var faceWidth = 150;
var faceHeight = 180;
var r, g, b
var faceCorners = 120
var irisSize = 15;
var eyeR, eyeG, eyeB
var pupilSize = 12
var mouthWidth = 50
var mouthHeight = 25
var noseWidth = 15
var noseHeight = 10
var mouthR, mouthG, mouthB
 
function setup() {
    createCanvas(640, 480);

    // choose random canvas starting color
    r = random(255);
    g = random(255);
    b = random(255);

    // choose random eye starting color
    eyeR = random(255);
    eyeG = random(255);
    eyeB = random(255);

    // choose random mouth starting color
    //reddish hue
    mouthR = random(51, 255);
    mouthG = random(204);
    mouthB = random(204);
}
 
function draw() {
    noStroke();
    background(r, g, b);

    // face
    fill('#EAC086');
    rectMode(CENTER);
    rect(width / 2, height / 2, faceWidth, faceHeight, faceCorners, faceCorners, faceCorners, faceCorners);

    // eyes
    // whites
    fill('white');
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);
    // iris
    fill(eyeR, eyeG, eyeB);
    ellipse(eyeLX, height / 2, irisSize, irisSize);
    ellipse(eyeRX, height / 2, irisSize, irisSize);
    // pupil
    fill('black');
    ellipse(eyeLX, height / 2, pupilSize, pupilSize);
    ellipse(eyeRX, height / 2, pupilSize, pupilSize);

    // mouth
    noFill();
    strokeWeight(4);
    strokeCap(ROUND);
    stroke(mouthR, mouthG, mouthB);
    arc(width / 2, height / 2 + .25 * faceHeight, mouthWidth, mouthHeight, 0, PI);

    // nose
    stroke(51);
    strokeWeight(2);
    arc(width / 2, height / 2 + .1 * faceHeight, noseWidth, noseHeight, 0, PI);
}
 
function mousePressed() {
    // randomize sizes, colors upon click
    faceHeight = random(120, 220);
    faceWidth = random(100, faceHeight);
    eyeSize = random(10, 30);
    r = random(255);
    g = random(255);
    b = random(255);
    faceCorners = random (80, 140);
    irisSize = random(5, eyeSize - 1);
    eyeR = random(255);
    eyeG = random(255);
    eyeB = random(255);
    pupilSize = random(1, irisSize - 1);
    mouthWidth = random(5, 90);
    mouthHeight = random(2, 40);
    noseWidth, noseHeight = random(5, 25);
    mouthR = random(51, 255);
    mouthG = random(0, mouthR - 50);
    mouthB = random(0, mouthR - 50);

}

For this project, I started with the template that was given and added some of my code from last week’s face project to create a base face. Then I added in some variables, thought about what to change, and ended up finding a way to have sizes change but keep them relatively proportional (ie. have the size of the pupil change but not have it be bigger than the iris). I also found it fun to change colors and learn how to randomize something like that where it’s not as simple as a range of two numbers.

Jamie Dorst Looking Outwards 02

For this week’s Looking Outward post, I am choosing to write about Daniel Eden’s Drawing With Numbers project. Eden has created many works of generative art, all created with Processing, p5.js, or OpenFrameworks.

Some of Eden’s pieces, with his captions describing the code behind them:

Pack as many circles as possible within another circle, ensuring they don’t overlap. Draw a line through the middle of each of the sub-circles at a random angle.
“Given an origin and a parallel destination, draw 1000 points of varying transparency between them. Using Perlin noise, calculate a delta vector for both origin and destination, with x coordinates between -0.2 and +0.5, and y coordinates between -1 and +2. Add the delta vectors to the origin and destination. Repeat until either the origin or destination points are at least 80px from the bottom of the canvas.”
“Plot a series of connected points around the center of the canvas, using three-dimensional Perlin noise to vary the radius. Repeat this with an increasing base radius, stepping forward through the Perlin noise function to slightly vary the next shape.”
“One example of the kinds of sketches that would collapse on p5.js and demanded a more powerful medium.” Titled: Fabric

I selected this because I admired that he created these as a way to combat his inability to draw traditionally. He drew inspiration from designs he saw in the real world, then found a way to create them through his computer. I was attracted to the simplicity of the black and white patterns, and how he really focused on making the shapes emulate movement. I think it would be interesting to see the actual code behind it (versus just the pseudocode) to see how complex it is. Some of them seem doable to me, like the circle filled with dashes, while others seem much more complicated. I also found his blog post about how he began creating generative art interesting, because describes how he started out with p5.js which is what we are using in this course.

Jamie Dorst Project 01 Face


/*
Jamie Dorst
Section A
jdorst@andrew.cmu
Project-01
*/

function setup() {
    createCanvas(600, 600);
    background('#ADD8E6');
}

function draw() {

	noStroke();
	translate(-10, -30);
	
// hair
	fill('#271815');
	rectMode(CENTER);
	rect(300, 320, 250, 320, 100, 100, 20, 20);
	
// face
	fill('#EAC086');
	rectMode(CENTER);
	rect(300, 310, 200, 240, 100, 100, 120, 120);

// eyes
	fill('white');
	ellipseMode(CENTER);
	ellipse(255, 290, 40, 20);
	ellipse(345, 290, 40, 20);

	fill('#49311C');
	ellipse(255, 290, 20, 20);
	ellipse(345, 290, 20, 20);

	fill('black');
	ellipse(255, 290, 12, 12);
	ellipse(345, 290, 12, 12);

// eyebrows
	fill('#2D221F');
	rect(250, 270, 50, 7);

	rect(350, 270, 50, 7)

// nose
	noFill();
	stroke(51);
	strokeWeight(2);
	arc(300, 335, 22, 20, 0, PI);

// mouth
	strokeWeight(4);
	strokeCap(ROUND);
	stroke('#C4877A');
	arc(300, 370, 50, 25, 0, PI);

// more hair
	noStroke();
	fill('#271815');

	translate(250, -120);
	rotate(PI / 4.0);
	ellipseMode(CENTER);
	ellipse(250, 250, 70, 180);

	translate(576, -80);
	rotate(PI / 2.0);
	ellipseMode(CENTER);
	ellipse(250, 250, 70, 160);

}

I found this project sort of difficult at first just to visualize what I was going to be doing and the order the layers needed to be in, but once I got going I got the hang of it. The most difficult part was probably rotating the ellipses for my hair, I figured out a way to do it eventually, but I’m guessing there’s a better way than what I did.

Jamie Dorst Looking Outwards 01

This project, titled Material of the Web, was made by a friend of mine, Andrew Shen. He made it for one of his computer science classes at the University of Pennsylvania. In his words, it is “… an attempt at representing and visualizing the nature of screens.” Andrew is a designer, and as such, has a lot of experience working with how we interact with our screens, and how they interact with us. It frustrated him that we didn’t seem to be “taking full advantage of the medium.”

The caption on the bottom right of Andrew’s project:

“The contemporary fringe is the material with which we craft the tools and environments of today. The platform for these tools and environments of today is the web. We understand the properties of wood, leather, and plastic. But what is the screen made of? What material is the web made of? We treat the web as a fixed canvas right now–we create Photoshop documents with set dimesions, and carefully place our static elements onto the dynamic domain of the screen. Not only are we decieving ourselves, we’re not taking full advantage of the medium with which we’re working with. How can we utilize the screen as it truly is: a material that stretches across a series of devices? What does it mean to design with the web, for the platform of the contemporary? This project is an attempt at representing and vizualising the natue of screens–as a modular system of highly interactive components constantly in flux. That is the contemporary fringe. It is modeular, it is edgeless, it is iteractive, it is always changing.”

Material of the Web, an interactive project designed to represent the dynamic nature of screens.

I chose this project because it opened my eyes to how screens really work, and how it approaches what could possibly be the next era of design; it is First Word Art. Before seeing this, I never realized the limitations that exist when designing for a screen. However, when Andrew told me about the gap between how we design for screens and how we use them, I realized how big that gap really was. It is inspiring to me that he created this from scratch, simply because he felt that it was missing. I admire that the project leaves you asking yourself what a screen really is because by asking these questions, we will be able to move forward. It is more than just a fun interaction, it leaves you thinking, even non-designers such as myself. To me, Andrew’s project points toward a future where we are better enabled to create, where our tools will match the task. It inspires me to not settle for something that worked in the past; it inspires me to look toward what we could be doing next, to create the next era of creation.