jknip@andrew.cmu.edu – Page 3 – [OLD FALL 2017] 15-104 • Introduction to Computing for Creative Practice

jknip-Project-02-variable-face

/*Jessica Nip
Section A
jknip@andrew.cmu.edu
Project-02 */

var eyeSize = 20;
var cheekSize = 20;
var faceWidth = 120;
var faceHeight = 150;
var et = 15;
var value = 150;
var faceR = 179;
var faceG = 229;
var faceB = 178;
var cheekR = 235;
var cheekG = 189;
var cheekB = 176;

function setup() {
    createCanvas(640, 480);
}
 
function draw() {
	background(value);
    var b = color(179,229,178);
	fill(256);
    noStroke();
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);
    fill(faceR, faceG, faceB);
    ellipse(width / 2+3, height / 2+3, faceWidth,  faceHeight);
    fill(b);
    ellipse(360,119,et,et*1.1);
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    var c = color(0);
    fill(c);
    ellipse(eyeLX, height / 2.1, eyeSize, eyeSize*2);
    ellipse(eyeRX, height / 2.1, eyeSize, eyeSize*2);
    fill(cheekR,cheekG,cheekB);
    ellipse(eyeLX, height / 1.85, cheekSize/2, cheekSize/3); //cheeks
    ellipse(eyeRX, height / 1.85, cheekSize/2, cheekSize/3);
    var green = color(1,146,79);
    noFill();
    stroke(b);
	beginShape();
	curveVertex(374,191);
	curveVertex(358,119);
	curveVertex(311,117);
	curveVertex(322,200);
	curveVertex(322,200);
	endShape();
	fill(green);
	noStroke();
	ellipse(315, height/1.85, eyeSize/5, eyeSize/5); //nostrils
    ellipse(325, height/1.85, eyeSize/5, eyeSize/5);
}

function mouseMoved() {
	value = value +5;
	if (value>255) {
		value = 0;
	}
}
 
function mousePressed() {
    faceWidth = random(80, 150);
    faceHeight = random(80, 150);
    et =random(5,40);
    eyeSize = random(10, 25);
    cheekSize = random(15,30);
    faceR = random(180,250);
    faceG = random(150,250);
    faceB = random(130,200);
    cheekR = random(120,150);
    cheekG = random(100,120);
    cheekB = random(100,130);

}

I wanted to create an interactive alien face that utilizes different pops of pastel for its face and cheek. I found that when setting different scales for the ellipses, they easily formed interesting facial compositions.

jknip-SectionA-LookingOutwards-02

“Tangent” by Marcin Ignac (2012)

Marcin Ignac is a polish artist/programmer/designer exploring hybrid work including data visualization, programmable art, and more. Tangent is a form of generative animation created from studying surface curvature, where tracing lines are programmed to appear across the surface of a generated shape. I really enjoy this project as the tracing lines are able to give a sense of dimension and life to these otherwise seemingly flat, line drawings. As the form rotates in his video documentation, we begin to understand the flow of the curvatures at different perspectives — these intricate details are really engaging to watch. Tangent was created using Javascript, Plask, OpenGL and glsl. Ignac heavily utilized Plask, a multimedia programming environment utilizing processing and open frameworks, through Javascript. His artistic sensibilities were integrated in the algorithm through choice of color, composition, line weight, and motion; which work cohesively to create delicate, rotating 3D forms.

http://variable.io/tangent/
http://marcinignac.com/projects/tangent/
http://marcinignac.com/blog/data-art-with-plask-and-webgl/

jknip-LookingOutwards-01

Generative Typography (GT by Q)

This project was developed by a professor in the School of Design, Kyuha Shim. I really enjoy his project as he creates an algorithm that bridges designers’ logic with computation through software generated typography. The algorithm establishes systematic patterns from type iterations, and can create different combinations of typographic forms. The resulting forms are not only pleasing to look at, but can also be taken further, becoming responsive to external inputs such as sound and motion. I think Shim has always been involved in data visualization, typography, and code work for some time, and this series of work were created between 2011 and 2014. The project required custom software I believe, that toggled different inputs and iterations. Shim may have been inspired by other forms of existing parametric design. Generative Typography provides a new paradigm of metadesign, where designers can push boundaries of creation beyond traditional type rules and guides.

http://generativetypography.com/

jknip-Project-01-Face

sketch.js

function setup() {
    createCanvas(600,600);
    //background(256,256,256);
    background(42,134,191);
}

function draw() {
	var a = color(253,233,53);  
	fill(a);  
	noStroke(); 
	rect(300, 0, 300, 600);
	var bc = color(31,50,101);  
	fill(bc);  
	noStroke(); 
	rect(160, 130, 285, 400, 140, 140, 15, 15);
	var c = color(243,197,192);  
	fill(c);  
	noStroke();  
	ellipse(300,300,250); 
	var cd = color(255,255,255);  
	fill(cd);  
	noStroke(); 
	arc(300, 300, 250, 250, -HALF_PI, HALF_PI, CHORD);
	noFill();
	var d = color(200,45,52);  
	stroke(d);
	strokeWeight(6);
	arc(260, 250, 50, 40, PI+QUARTER_PI, TWO_PI);
	arc(355, 250, 50, 40, PI+QUARTER_PI, TWO_PI);
	arc(300, 365, 30, 15, QUARTER_PI, PI+TWO_PI);
	noStroke();
	fill(d);  
	ellipse(250, 280, 20, 20);
	ellipse(345, 280, 20, 20);
	ellipse(290, 330, 10, 10);
	var e = color(163,144,129);
	stroke(e);  
	strokeWeight(3);
	line(365, 330, 375, 322);
	line(355, 330, 365, 322);
	line(345, 330, 355, 322);
	line(235, 330, 245, 322);
	line(225, 330, 235, 322);
	line(215, 330, 225, 322);
}

To develop this sketch, I played with a series of symmetrical components within the larger shapes that makes up the majority of the background. I wanted to create a more expressive, asymmetrical face within the smaller components of the face, using simple arcs, lines and circles.