Month: September 2016

zhuoyinl- self portrait

sketch

//Zhuoying Lin
//section a
//zhuoyinl@andrew.cmu.edu
//project1

function setup() {
    createCanvas(400, 400);
    background(220);
}

function draw() {

    fill(86, 63,2);
    noStroke();
    arc(200, 200, 200, 275, PI, 0, CHORD);
    arc(100, 200, 100, 150, 0, PI, CHORD);
    arc(300, 200, 100, 150, 0, PI, CHORD);

    fill(220)
    noStroke();
    arc(75, 200, 50, 50, 0, PI, CHORD);
    arc(325, 200, 50, 50, 0,PI, CHORD);

    fill(227, 202, 175);
    noStroke();
    ellipse(200, 200, 150, 190);

    noFill();
    strokeWeight(10);
    stroke(78, 51, 22);
    curve(135, 180, 155, 155, 175, 155, 195, 180);
    curve(200, 180, 220, 155, 240, 155, 260, 180);

    strokeWeight(5);
    line(145, 170, 180, 180);
    line(180, 180, 145, 190);
    line(215, 180, 250, 170);
    line(215, 180, 250, 190);

    fill(83,70,249);
    noStroke();
    triangle(197, 190, 180, 220, 215, 220);


    fill(255,144,144);
    noStroke();
    arc(197, 235, 60, 70, 0, PI, CHORD);

    fill(235, 233, 233); 
    noStroke();
    rect(185, 235, 10, 10);
    rect(200, 235, 10, 10);
















}

Looking Outwards 03

Line Number – Jennifer Jacobs MIT 2015

Used Algorithms to generate patterns using simple forms, and this was one example that was translated onto wooden panels

I think what I admired the most about this project was how intricate and expressive it was. I normally wouldn’t relate these types of projects to computer generated art, and to see that this was created with an algorithm really inspired me to gain more perspective on what is achievable through this median.

The art was created from a series of simple shapes, and if you look closely it is noticeable. The algorithm isn’t given, but it is very possible to create similar forms of art using specific shapes, and I think that’s very interesting.

I also think that even though it was algorithmically generated art, it still does present the artists own vision and style. Although it is generated, there is still an element of control in the constraints of generation, which I think shows the artists personality.

Hannah K-Project-02

sketch-114.js

// Variables Needed for Face

// Variable to create ellipse (circle) for eyes
    var eyeSize = 25;
// Variables regarding width and height of ellipse for face
    var fW = 400;
    var fH = 540;
// Variable to create ellipse (circle) for nose
    var noseSize = 6;
// Variables regarding width and height of rectangle for mouth
    var mW = 80;
    var mH = 50;

// Variables needed to change color of face features
// Left eye color
    var RleftEyeColor = 120;
    var GleftEyeColor = 100;
    var BleftEyeColor = 75;
// Right eye color
    var RrightEyeColor = 50;
    var GrightEyeColor = 75;
    var BrightEyeColor = 125;
// Nose color
    var RnoseColor = 75;
    var GnoseColor = 75;
    var BnoseColor = 75;
// Mouth color
    var RmouthColor = 50;
    var GmouthColor = 75;
    var BmouthColor = 125;
// Face color
    var RfaceColor = 50;
    var GfaceColor = 75;
    var BfaceColor = 125;
 
 function setup() {
    createCanvas(480, 640);
}
 
function draw() {
    background(0,0,0);
// Drawing face outline
    fill(RfaceColor,GfaceColor,BfaceColor);
    ellipse(width/2, height/2, fW, fH);
// Drawing left eye (pupil)
    fill(RleftEyeColor,GleftEyeColor,BleftEyeColor);
    stroke(10);
    ellipse(width/2-fW*0.25, height/2, eyeSize, eyeSize);
// Drawing right eye (pupil)
    fill(RrightEyeColor,GrightEyeColor,BrightEyeColor);
    stroke(10);
    ellipse(width/2+fW*0.25, height/2, eyeSize, eyeSize);
// Drawing nose
    fill(RnoseColor,GnoseColor,BnoseColor);
    stroke(5);
    rect(width/2, height/2, noseSize, noseSize);
// Drawing mouth
    fill(255,255,255);
    rect(width/2, height/2+fH*0.25, mW, mH);
}
 
function mousePressed() {
// Face changes
    eyeSize = random(15, 30);
    fW = random(325, 400);
    fH = random(525, 600);
    noseSize = random(5, 30);
    mW = random(50, 75);
    mH = random(50, 75);
// Left eye color
    RleftEyeColor = random(25,150);
    GleftEyeColor = random(25,150);
    BleftEyeColor = random(25,150);
// Right eye color
    RrightEyeColor = random(25,150);
    GrightEyeColor = random(25,150);
    BrightEyeColor = random(25,150);
// Nose color
    RnoseColor = random(25,150);
    GnoseColor = random(25,150);
    BnoseColor = random(25,150);
// Mouth color
    var RmouthColor = 50;
    var GmouthColor = 75;
    var BmouthColor = 125;
// Face color
    var RfaceColor = 50;
    var GfaceColor = 75;
    var BfaceColor = 125;
}

Using variables in this project turned out to be much more challenging than I expected. Many of the variables I tried to use did not initially work as I intended, and I felt like I was doing a lot more guessing and checking (similar to figuring out the coordinates in last week’s project). I had originally made a sketch of some of the kind of faces I wanted to make, but because I struggled so much with the variables, I ended up making a very basic face.

Jinhee Lee; Project-02: Variable Faces

Biggest thing I noticed afterwards – didn’t draw any sketches. Using variables didn’t serve to just compact the code and make it easier to manipulate the visual with just a few changes, but also allowed me to make relative measurements as opposed to exact measurements for every conceivable feature.

jinheel1_project-02

//Jinhee Lee
//Section C
//jinheel1@andrew.cmu.edu
//Project-02

//beginning template for face
var eyeSize = 10;
var eyeColor = "white";
var faceWidth = 200;
var faceHeight = 300;
var faceColor = "white";
var noseColor = "white";
var smileWidth = 50;
//beginning face mostly white for a blank canvas

function setup() {
    createCanvas(640, 480);
}

function draw() {
    background('purple');

    fill(faceColor); //changing face/skin color
    ellipse(width/2,height/2,faceWidth,faceHeight); //changing face size

    var eyeLX = width/2 - faceWidth/4; //varying eyes' position
    var eyeRX = width/2 + faceWidth/4;

    fill(255); //white color for eyeball
    ellipse(eyeLX,height/2,3*eyeSize,2*eyeSize); //drawing eyeballs
    ellipse(eyeRX,height/2,3*eyeSize,2*eyeSize);
    strokeWeight(5); //drawing iris
    stroke(eyeColor); //changing iris color
    fill(0); //making the black pupil
    ellipse(eyeLX,height/2,eyeSize,eyeSize); //varying eye size for pupil and iris
    ellipse(eyeRX,height/2,eyeSize,eyeSize);
    strokeWeight(1);
    stroke(0); 
    //above two functions reset to default

    var noseTY = height/2 - faceWidth/8; //varying nose length
    var noseBY = height/2 + faceWidth/5;

    fill(noseColor); //changing nose color
    triangle(width/2,noseTY,width/2 - faceWidth/10,noseBY,width/2 + faceWidth/10,noseBY);

    fill(135,45,45); //default color for mouth
    arc(width/2,height/2 + faceHeight/3,smileWidth,faceWidth/6,0,PI,CHORD); //draws mouth with varied width
}

function mousePressed() {

	faceWidth = random(150,300);
	faceHeight = random(200,400);

	eyeSize = random(10,20);
	eyeColor = random(["#00CED1","#20B2AA","#CD853F","#8B4513","#C0C0C0","#FF0000"]);

	faceColor = random(["#FFE4C4","#DEB887","#DAA520","#FFDAB9","#8B4513",]);

	noseColor = random(["orange","yellow","green","blue","purple"]);
    //meanwhile, in a parallel universe where people's noses are a random color from OY G. BIV
    //and Rudolph, the only red-nose is their ruler
}

Disregard those two last comments in the code.

Brandon Darreff – Looking Outwards 2

looking-outwards-2

I appreciate the amount of complexity and depth Jean Pierre Hebert was able to achieve in his piece “olive branch,” completed in 1990 utilizing a single drawing instrument and line weight. Hebert, an Algorist and pioneer of digital art, programs printing devices such as custom-built devices and plotters using computer codes he has developed himself to produce incredibly detailed drawings such as this one. By combining programming languages and simple mathematics, he successfully bridges both digital and analog mediums in a way that transforms how we think about art. Overall, it easy to hypothesize how his method of creating artwork has greatly influenced digital art practices in use today.

ShanWang-Project02-VariableFaces

Besides the shape and size of the elements in the face, I also explored the variations of gradient and the effect it has on the visual appeal.
sketch

//Shan Wang
//Section A
//shanw1@andrew.cmu.edu
//Project-02


var bgColor = 20
var faceEdge = 0
var eyeSize = 5;
var faceWidth = 100;
var faceHeight = 150;
var faceColor = 130;
var eyeColor = 225;
var eyeLidSize = 25;

function setup() {
    createCanvas(640, 480);
}

function draw() {
    background(bgColor);
    //draw face contour 
    fill(faceColor-20);
    stroke(faceColor-20);
    ellipse(width / 2, height / 2, faceWidth+10,  faceHeight+10);
    //draw face
    fill(faceColor);
    stroke(faceColor);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);
    //draw eyes
    fill(eyeColor);
    stroke(eyeColor);
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    var eyeY = height / 2;
    ellipse(eyeLX, eyeY, eyeSize, eyeSize);
    ellipse(eyeRX, eyeY, eyeSize, eyeSize);

    //draw eyelid
    stroke(bgColor+40);
    strokeWeight(eyeLidSize/10);
    line(eyeLX-eyeLidSize/2,eyeY-eyeSize/2,eyeLX+eyeLidSize/2,eyeY-eyeSize/2);
    line(eyeRX-eyeLidSize/2,eyeY-eyeSize/2,eyeRX+eyeLidSize/2,eyeY-eyeSize/2);

}

function mousePressed() {
    bgColor = random(0,100);
    eyeSize = random(5,20);
    eyeLidSize = random(faceWidth/5,faceWidth/4);
    faceColor = random(120,170);
    eyeColor = random(225,255);
    faceWidth = random(120, 240);
    faceHeight = random(140,200);

}

Project-02-Variable Face – Sara Lyons

saral-variableface 

//variables for face
var eyeSize = 35;
var pupilSize = 10;
var hairLength = 250;
var hairWidth = 100;
var browY = 120
var browLength = 25;
var browWidth = 50;

    //create the canvas
function setup() {
    createCanvas(640, 480);
}
	//build the basic face
function draw() {
    background(200, 50, 50);
    //hair
    rectMode(CORNER);
    noStroke();
    fill(240);
    rect(width / 4, height / 5, hairWidth,  hairLength);
    fill(5);
    rect(width / 4, height / 5, hairWidth / 2, hairLength);
    //mouth
    fill(10);
    strokeWeight(5);
    rectMode(CENTER);
    rect(width / 2, 275, 150, 35);
    //eyes
    var eyeLX = (width / 4) + hairWidth
    var eyeRX = eyeLX + hairWidth
    fill(5);
    ellipse(eyeLX, height / 3, eyeSize, eyeSize);
    ellipse(eyeRX, height / 3, eyeSize, eyeSize);
    //pupils
    fill(255);
    ellipse(eyeLX, height / 3, pupilSize, pupilSize);
    ellipse(eyeRX, height / 3, pupilSize, pupilSize);
    //brows
    stroke(5)
    strokeWeight(15)
    line(240, browY, 280, browY);
  	line(340, browY, 380, browY); 
  	}

    //create mouse functions: when the mouse is clicked, 
    //the size or position of these elements change value.
function mousePressed() {
     eyeSize = random(20, 70);
     browY = random(140, 90);
     pupilSize = random(3, 30);
}

I created a number of variables as I built this face, inspired by modular 1960s design styles. After building the face, I spent a while experimenting with randomizing the size and position of all the elements and chose the three (eye size, pupil size, and eyebrow position) that I found most strongly affected the expressive qualities of the face.

Christine Kim – Project -02

sketch

//Christine Kim
//Section A (Tuesdays 9:00)
//haewannk@andrew.cmu.edu
//Project-02

var eyeWidth = 13;
var eyeHeight = 15;
var faceWidth = 130;
var faceHeight = 150;
var noseWidth = 7
var noseHeight = 10
var eyebrowsWidth = 10
var eyebrowsHeight = 3 
var mouthWidth = 13
var mouthHeight = 5
var cheekWidth = 15;
var cheekHeight = 5;
 
function setup() {
    createCanvas(640, 480);
}
 
function draw() {
    background(198,234,162);
    noStroke();
    fill(241,212,177);
    
    //face
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);
    
    //eyes
    fill(73,45,37);
    ellipse(287,220, eyeWidth, eyeHeight);
    ellipse(355,220, eyeWidth, eyeHeight);

    //nose
    fill(186,155,129);
    ellipse(width/2,height/2,noseWidth,noseHeight);

    //eyebrows
    fill(86,47,44);
    ellipse(288,200,eyebrowsWidth,eyebrowsHeight);
    ellipse(353,200,eyebrowsWidth,eyebrowsHeight);

    //mouth
    fill(198,59,24);
    ellipse(width/2,280,mouthWidth,mouthHeight);

    //cheek
    fill(229,142,195);
    ellipse(280,240,cheekWidth,cheekHeight);
    ellipse(360,240,cheekWidth,cheekHeight);
}
 
function mousePressed() {
    // when the user clicks, these variables are reassigned
    // to random values within specified ranges. For example,
    // 'faceWidth' gets a random value between 75 and 150.
    faceWidth = random(75, 150);
    faceHeight = random(100, 200);
    eyeWidth = random(7, 20);
    eyeHeight = random(5,20)
    noseWidth = random(5,20);
    noseHeight = random(7,30);
    eyebrowsWidth = random(7,20);
    eyebrowsHeight = random(3,8);
    mouthWidth = random(5,20);
    mouthHeight = random(2,15);
    cheekWidth = random(5,20);
    cheekHeight = random(3,8);
}

Brandon Darreff – Project-02-Variable-Face

bdarreff_project02

//Brandon Darreff

//Section A

//bdarreff@andrew.cmu.edu

//Project-02-Variable-Face



//left figure hair color
var r1 = 199;
var g1 = 161;
var b1 = 87;

//right figure hair color
var r2 = 152;
var g2 = 136;
var b2 = 215;

//left eye size
var eyeWidth1 = 12;
var eyeHeight1 = 10;

//right eye size
var eyeWidth2 = 10;
var eyeHeight2 = 12;

//left mouth size
var mouthWidth1 = 20;
var mouthHeight1 = 10;

//right mouth size
var mouthWidth2 = 15
var mouthHeight2 = 8

//setup canvas size
function setup() {
    createCanvas(640, 480);
}

//fill background with color and design
function draw () { 
	background (112, 169, 169);
	stroke(200);
	strokeWeight(2);
	noFill();
	ellipse(200, 250, 300, 300);
	ellipse(350, 175, 200, 200);
	ellipse(550, 350, 100, 100);
	noStroke();


	//head & neck left
	fill(231, 200, 163);
	beginShape();
	vertex(125, 350);
	curveVertex(115, 400);
	curveVertex(135, 310);
	curveVertex(135, 290);
	curveVertex(120, 260);
	curveVertex(115, 230);
	curveVertex(125, 200);
	curveVertex(160, 170);
	curveVertex(190, 170);
	curveVertex(230, 190);
	curveVertex(238, 210);
	curveVertex(230, 230);
	vertex(240, 270);
	vertex(230, 280);
	curveVertex(230, 310);
	curveVertex(200, 310);
	curveVertex(190, 330);
	curveVertex(180, 400);
	vertex(125, 350);
	endShape();

	//head & neck right
	beginShape();
	vertex(530, 350);
	curveVertex(540, 400);
	curveVertex(520, 310);
	curveVertex(520, 290);
	curveVertex(535, 260);
	curveVertex(540, 230);
	curveVertex(530, 200);
	curveVertex(495, 170);
	curveVertex(465, 170);
	curveVertex(425, 190);
	curveVertex(417, 210);
	curveVertex(425, 230);
	vertex(415, 270);
	vertex(425, 280);
	curveVertex(425, 310);
	curveVertex(455, 310);
	curveVertex(465, 330);
	curveVertex(475, 400);
	vertex(530, 350);
	endShape();
	
// shirt left
	fill(255);
	beginShape();
	vertex(80, 480);
	curveVertex(80, 480);
	curveVertex(78, 420)
	curveVertex(100, 360);
	curveVertex(120, 350);
	curveVertex(150, 360);
	curveVertex(190, 350);
	curveVertex(200, 370);
	curveVertex(220, 400);
	curveVertex(210, 480);
	vertex(220, 480);
	vertex(80, 480);
	endShape();

// shirt right
	fill(0);
	beginShape();
	vertex(560, 480);
	curveVertex(560, 480);
	curveVertex(562, 420)
	curveVertex(540, 360);
	curveVertex(520, 350);
	curveVertex(490, 360);
	curveVertex(450, 350);
	curveVertex(440, 370);
	curveVertex(420, 400);
	curveVertex(430, 480);
	vertex(420, 480);
	vertex(560, 480);
	endShape();

	//hair left 
	fill(r1, g1, b1);
	stroke(0);
	strokeWeight(1);
	beginShape();
	vertex(115, 260);
	curveVertex(115, 260);
	curveVertex(110, 220);
	curveVertex(115, 170);
	curveVertex(130, 160);
	curveVertex(125, 150);
	curveVertex(160, 140);
	curveVertex(220, 155);
	curveVertex(270, 150);
	curveVertex(230, 180);
	curveVertex(265, 175);
	curveVertex(220, 200);
	curveVertex(160, 180);
	curveVertex(165, 220);
	curveVertex(150, 260);
	curveVertex(115, 260);
	vertex(115, 260);
	endShape();

	//hair right
	fill(r2, g2, b2);
	stroke(0);
	strokeWeight(1);
	beginShape();
	vertex(540, 260);
	curveVertex(540, 260);
	curveVertex(555, 220);
	curveVertex(550, 170);
	curveVertex(540, 160);
	curveVertex(505, 150);
	curveVertex(460, 150);
	curveVertex(415, 180);
	curveVertex(445, 200);
	curveVertex(485, 210);
	curveVertex(500, 220);
	curveVertex(485, 260);
	curveVertex(540, 260);
	vertex(540, 260);
	endShape();

	//left eye
	fill(255);
	stroke(0);
	strokeWeight(0.5);
	//variable shape
	ellipse(220, 235, eyeWidth1, eyeHeight1);
	//pupil
	noStroke();
	fill(0);
	ellipse(224, 235, 6, 6);
	//highlight
	fill(255);
	ellipse(226, 235, 2, 2);

	//right eye
	fill(255);
	stroke(0);
	strokeWeight(0.5);
	//variable shape
	ellipse(433, 235, eyeWidth2, eyeHeight2);
	//pupil
	noStroke();
	fill(0);
	ellipse(431, 235, 6, 6);
	//highlight
	fill(255);
	ellipse(429, 235, 2, 2);

	//left mouth
	fill(172, 97, 130);
	ellipse(218, 285, mouthWidth1, mouthHeight1);

	//right mouth
	fill(211, 129, 137);
	ellipse(435, 290, mouthWidth2, mouthHeight2);


	// left sleeve
	stroke(230);
	strokeWeight(1);
	fill(248);
    ellipse(150, 480, 80, 200);

    //right sleeve
    stroke(50);
    fill(25);
    ellipse(500, 480, 80, 200);
    

}
function mousePressed() {

	//left figure hair color change
	r1 = random(75, 200);
	g1 = random(75, 200);
	b1 = random(75, 200);

	//right figure hair color change
	r2 = random(130, 250);
	g2 = random(130, 250);
	b2 = random(130, 250);

	//left eye size
	eyeWidth1 = random(10, 18);
	eyeHeight1 = random(4, 14);

	//right eye size
	eyeWidth2 = random(8, 18);
	eyeHeight2 = random(4, 14);

	//left mouth size
	mouthWidth1 = random(10, 20);
	mouthHeight1 = random(0, 15);

	//right mouth size
	mouthWidth2 = random(8, 20);
	mouthHeight2 = random(0, 10);

}

With the face variable assignment, I utilized two portraits and adjusted facial features of each figure individually to make it appear they are having a conversation.

Brian Bizier – Looking Outwards 02

objfragmentaris_2015_11_29_011210_429

This is a piece of work by artist Frederik Vanhoutte. It appealed to me for a number of reasons. First, you have the pop culture reference, making me think of Any Warhol. Second, you have a series of repetition that I tend to associate with the music of Philip Glass. There’s also something about it that reminds me of religious sculpture. I imagine the code that created this piece utilizes multiple variables that reference one another, interlocking if you will. This piece tells me that the author is socially conscious and is adept at manipulating familiar images in new ways.