Variable-Face

VariableFaceNWDownload

 /*
Nicholas Wong
Section A
*/

 //Variables
 var eyeSizeR = 50; //Right eye squint amount
 var eyeSizeL = 50; //Left eye squint amount
 var smile = false; //Smile Bool
 var lBrowHeight = 0; //Brow height modifier
 var rBrowHeight = 0; //Brow height modifier
 var browAngle = 0; // Brow Angle
  var nostrilSize = 0; //Nostril size modifier
 var circleShade = 230; //Outer Circle greyscale tone
 var bgColor = 'white' //Background of inner circle

function setup() {
	
    createCanvas(640, 480);
    text("p5.js vers 0.9.0 test.", 10, 15);

    //White Background (hah no it's black)
    background(0);

}

function draw() {

//Circles
	fill(circleShade); //Fill outer circle with variable shade
	ellipse (width/2,height/2+30,500,500); //Outer Circle

	if (bgColor == 'white'){ //Make background circle white
		fill(255);
		stroke(150);
		strokeWeight(4);
		ellipse (width/2,height/2+30,450,450);
	}
	else if (bgColor == 'green'){ //Make background circle green
		fill(255);
		fill(240,255,240);
		stroke(150);
		strokeWeight(4);
		ellipse (width/2,height/2+30,450,450);
	}
	else{ 	//Make background circle blue
		fill(230,230,255);
		stroke(150);
		strokeWeight(4);
		ellipse (width/2,height/2+30,450,450);
	}

// I originally made my face thing 2000x2000
	scale (0.4); //Scaling drawing to fit in canvas
	translate(115,170) //Moving drawing to roughly be in center

//Neck
	noStroke();
	fill(235,190,160);
	rect(547,860,290,160);
	fill(250,205,175);
	rect(730,860,108,160);

//Face Base Shape
	noStroke();
	fill(250, 215, 172);
	beginShape();
	vertex(459,657);
	vertex(499,816);
	vertex(566,899);
	vertex(623,960);
	vertex(749,960);
	vertex(837,871);
	vertex(884,789);
	vertex(914,688);
	vertex(949,533);
	vertex(933,346);
	vertex(890,278);
	vertex(784,252);
	vertex(659,242);
	vertex(561,261);
	vertex(469,336);
	vertex(459,657);
	endShape();


	//Chin Shading
	noStroke();
	fill(250, 205, 175);
	beginShape();
	vertex(635,837);
	vertex(722,839);
	vertex(737,962);
	vertex(629,963);
	vertex(614,922);
	endShape();

	//Face Shading
	noStroke();
	fill(245, 200, 172)
	beginShape();
	vertex(469,200);
	vertex(445,606);
	vertex(499,811);
	vertex(626,960);
	vertex(686,960);
	vertex(672,852);
	vertex(610,795);
	vertex(510,527);
	vertex(538,429);
	endShape();

	//Right Eye
	noStroke();
	fill(250);
	ellipse(570,522,100,eyeSizeR);

	//Left Eye
	noStroke();
	fill(250);
	ellipse(805,522,100,eyeSizeL);

	//Left eye Shading
	noStroke();
	fill(245, 195, 162);
	beginShape();
	vertex(532,451);
	vertex(602,458);
	vertex(641,516);
	vertex(634,550);
	vertex(572,506);
	vertex(533,506);
	vertex(515,508);
	endShape();


	//Right Eye Shading
	noStroke();
	fill(245, 195, 165);
	beginShape();
	vertex(731,523);
	vertex(763,476);
	vertex(856,460);
	vertex(882,517);
	vertex(821,503);
	vertex(779,511);
	vertex(744,556);
	endShape();

	//Brows
	fill(200, 175, 175);

	quad(751,466+rBrowHeight,796,443+rBrowHeight,855,440+rBrowHeight,877,460+rBrowHeight); //Brow height variable added to Y coordinates of quad

	quad(507,438+lBrowHeight,579,437+lBrowHeight,611,461+lBrowHeight,496,454+lBrowHeight); //Brow height variable added to Y coordinates of quad

	//Nose Shading
	noStroke();
	fill(245, 200, 162);
	beginShape();
	vertex(669,573);
	vertex(613,688);
	vertex(617,713);
	vertex(638,694);
	vertex(684,689);
	vertex(674,623);
	endShape();

	//Under Nose Shading
	fill(248, 205, 170);
	quad(643,722,615,789,669,769,674,717);


	//Nostrils
	noStroke();
	fill(230,150,150);
	triangle(643-nostrilSize,695-nostrilSize,662+nostrilSize,707+nostrilSize,641-nostrilSize,707+nostrilSize); //Left
	triangle(715-nostrilSize,708+nostrilSize,739+nostrilSize,706+nostrilSize,728+nostrilSize,698-nostrilSize); //Right

	
	//Mouth
	noStroke();
	fill(245,193,172);
	if (smile) //If smile variable is true, draw smile shape for mouth
	{
		beginShape();
		vertex(595,776);
		vertex(664,784);
		vertex(690,788);
		vertex(719,784);
		vertex(790,776);
		vertex(739,820);
		vertex(693,832);
		vertex(654,820);
		endShape();

	}
	else //If smile variable is false, draw normal mouth
	{
		beginShape();
		vertex(605,792);
		vertex(664,784);
		vertex(690,788);
		vertex(719,784);
		vertex(780,793);
		vertex(739,828);
		vertex(693,832);
		vertex(654,827);
		endShape();
	}


	//Hair
	noStroke();
	fill(30,25,30);
	beginShape();
	vertex(445,644);
	vertex(364,521);
	vertex(375,402);
	vertex(393,263);
	vertex(447,201);
	vertex(563,81);
	vertex(717,45);
	vertex(793,52);
	vertex(890,107);
	vertex(935,160);
	vertex(950,226);
	vertex(950,272);
	vertex(960,308);
	vertex(970,401);
	vertex(950,478);
	vertex(948,550);
	vertex(947,584);
	vertex(935,603);
	vertex(936,451);
	vertex(925,344);
	vertex(889,278);
	vertex(778,266);
	vertex(698,261);
	vertex(599,262);
	vertex(535,292);
	vertex(464,365);
	endShape();

	//Hair Shading
	noStroke();
	fill(25,15,15);
	beginShape();
	vertex(448,607);
	vertex(461,378);
	vertex(557,286);
	vertex(651,254);
	vertex(782,260);
	vertex(920,288);
	vertex(870,189);
	vertex(764,120);
	vertex(679,126);
	vertex(593,162);
	vertex(509,205);
	vertex(426,279);
	vertex(401,409);
	endShape();


}

function mousePressed(){
	eyeSizeL = random(10,50); // Controls squint for left eye
	eyeSizeR = random(10,50); // Controls squint for right eye
	smile = random([true,false]); // Bool for smile or no smile
	lBrowHeight = random(0, -30); // Amount to increase left brow height by
	rBrowHeight = random(0, -30); // Amount to increase right brow height by
	browAngle = random(0,30); // Angle to rotate brow
	nostrilSize = random(0,5); // Amount to increase nostril size
	circleShade = random(0,255); // Greyscale tone for the outer circle in the background
	bgColor = random(['green','blue','white']); // Choose color randomly for background

}

Looking Outwards 2: Generative Art

https://gmunk.com/

Audi A5 - Pure Imagination - .www | GMUNK | Pure products, Audi a5, Imagine

GMUNK creates atmospheric, spatial, generative art that takes inspiration from science fiction, psychedelics, and architecture. His work is motivated by his desire to learn and be uncomfortable.

His work usually consist of moving, digitally generated images projected or displayed on screens, however he also utilizes programmable lighting arrays, projection mapped sculptures, and robotic choreography.

His installation works are very immersive, and transports the viewer into a mesmerizing, ominous environment created by sculptures, robotic arms, lights, and projected patterns.

A lot of his subtler, digital pieces utilize simple, recursive algorithms to create mesmerizing 3-dimensional patterns. Some aren’t entirely generated by code, however utilize particle simulations. Similarly, some rely on procedural generation techniques to create spectacularly complex environments from simple algorithms.

He is also the creator of extremely iconic wallpapers, posters, and designs, such as the Windows 10 desktop. He does a lot of promotional work for large brands.

www | GMUNK
GMUNK — The Collective Podcast

Looking Outwards – Generative Art

Fifty Sisters was created by John McCormack. It consists of fifty images of plants generated from computer code. What I find most admirational about this piece is that it reflects the astronomical impact that oil has made on our world today. The algorithm that the computer followed were the geographic elements of oil company logos. More specifically, these were logos of “Seven Sisters”, the name of seven oil companies that took over the petrochemical industry during the 1940s to 1970s.

Society has used oil for heat, electricity, generation, chemicals, plastics, and even more. While there are boundless benefits, it is also massively detrimental to the environment with oil spills and climate change.

McCormack recognized the transformation of fossil fuels from plants to coal and oil today. He took “digital genes”, otherwise known as “computer DNA”, to form replicas of Mesozoic plants. These species grew and evolutionized to form new species. Some computer-made species changed so much that the company logos were unrecognizable.

McCormack’s artistic sensibilities manifested in this art piece because he used technology to show how technology can be both a gift and a curse.

Fifty Sisters at the Ars Electronica Museum, April 2013

Variable Face

I decided to give this flower a face. I made each eye shape to randomize differently. In addition, the flower occasionally blushes.

VariableFace
/*
 *  Hayoon Choi
 *  hayoonc@andrew.cmu.edu
 *  Section C
 *
 *  Random Face
 */
var reyeWidth = 23;
var reyeHeight = 7;
var leyeWidth = 23;
var leyeHeight = 7;
var headWidth = 160;
var headHeight = 262;
var petalHeight = 150;
var petalR = 237;
var petalG = 227;
var petalB = 98;
var nosePoint = 253.5;
var noseePoint = 243.5;
var blush = 0;

function setup() {
    createCanvas(480, 640);
    frameRate = 10;
}
 
function draw() {
    background(166, 213, 221);
    //clouds
    fill(255);
    circle(100, 50, 70);
    circle(140, 90, 60);
    circle(70, 90, 90);
    circle(150, 60, 50);
    circle(300, 180, 50);
    circle(350, 170, 80);
    circle(375, 120, 85);
    circle(430, 150, 100);
    circle(400, 200, 45);
    //petals
    noStroke();
    fill(petalR, petalG, petalB);
    ellipse(207, 168, 61, petalHeight);
    push();
    translate(290,210);
    rotate(PI / 3.0);
    ellipse(0, 0, 61, petalHeight);
    pop();
    push();
    translate(320,275);
    rotate(HALF_PI);
    ellipse(0, 0, 61, petalHeight);
    pop();
    push();
    translate(310,345);
    rotate(PI / 1.5);
    ellipse(0, 0, 61, petalHeight);
    pop();
    push();
    translate(270,390);
    rotate(PI / 1.25);
    ellipse(0, 0, 61, petalHeight);
    pop();
    push();
    translate(120,210);
    rotate(-PI / 3.0);
    ellipse(0, 0, 61, petalHeight);
    pop();
    push();
    translate(100,275);
    rotate(-HALF_PI);
    ellipse(0, 0, 61, petalHeight);
    pop();
    push();
    translate(100,345);
    rotate(-PI / 1.5);
    ellipse(0, 0, 61, petalHeight);
    pop();
    push();
    translate(114,390);
    rotate(-PI / 1.25);
    ellipse(0, 0, 61, petalHeight);
    pop();
    //shirt
    noStroke();
    fill(112, 163, 72);
    rect(80, 400, 250, 300, 80);
    //leaves
    ellipse(390, 530, 180, 70);
    ellipse(50, 580, 180, 70);
    strokeWeight(2);
    stroke(49, 73, 29);
    line(330, 530, width, 530);
    line(0, 580, 80, 580);
    //v neck
    point(135, 400);
    point(160, 470);
    point(200, 530);
    point(240, 470);
    point(280, 400);
    noStroke();
    fill(201, 170, 109);
    beginShape();
    curveVertex(135, 400);
    curveVertex(135, 400);
    curveVertex(160, 470);
    curveVertex(200, 530);
    curveVertex(240, 470);
    curveVertex(280, 400);
    curveVertex(280, 400);
    endShape();
    //head
    fill(216, 187, 115);
    ellipse(207, 347, headWidth, headHeight);
    noFill();
    strokeWeight(3);
    stroke(153, 128, 80);
    arc(230, 450, 30, 15, 0, PI);
    //eyes
    strokeWeight(1);
    stroke(0);
    fill(255);
    ellipse(189, 312, leyeWidth, leyeHeight);
    ellipse(258, 312, reyeWidth, reyeHeight);
    fill(0);
    noStroke();
    var x = constrain(mouseX, 189 - leyeWidth + 20, 189 + (leyeWidth - 20));
    ellipse(x, 312, 9, 7);
    var xTwo = constrain(mouseX, 257 - reyeWidth + 20, 257 + (reyeWidth - 20));
    ellipse(xTwo, 312, 9, 7);
    //mouth
    fill(214, 116, 146);
    ellipse(245, 368, 20.5, 16.5);
    stroke(0);
    line(236, 368, 256, 368);
    //blush
    if (blush > 1.5) {
        fill(245, 223, 223);
        noStroke();
        ellipse (170, 347, headWidth / 5, headHeight /12);
        ellipse (280, 347, headWidth / 7, headHeight /14);
    }
    //nose
    point(233.5, 307.5);
    point(noseePoint, 320.5);
    point(nosePoint, 350.5);
    point(241.5, 355.5);
    fill(216, 187, 115);
    stroke(0);
    beginShape();
    curveVertex(233.5, 307.5);
    curveVertex(233.5, 307.5);
    curveVertex(noseePoint, 320.5);
    curveVertex(nosePoint, 350.5);
    curveVertex(241.5, 355.5);
    curveVertex(241.5, 355.5);
    endShape();
    noFill();
    arc(236.5, 354.5, 4, 4, PI , TWO_PI);
    //shine
    fill(255);
    noStroke();
    push()
    translate(170 , 250);
    rotate(-PI / 3.75);
    ellipse(0, 0, 40, 10);
    pop();
    ellipse(195, 227, 10, 10);
}

function mousePressed() {
    reyeWidth = random(20, 35);
    reyeHeight = random(7, 25);
    leyeWidth = random(20, 35);
    leyeHeight = random(7, 25);
    headWidth = random(145, 230);
    headHeight = random(260, 350);
    petalHeight = random(100, 250);
    petalR = random(150, 250);
    petalG = random(30, 250);
    petalB = random(40, 220);
    nosePoint = random(245, 350);
    noseePoint = random(240, 280);
    blush = random(0,2);
}

LO 2 – Generative Art

The project Drawing Water, created by David Wicks, grabbed my attention as it incorporated scientific facts about where water falls and where it is consumed in the US. It was definitely fascinating to see scientific rainfall data being turned into an interactive artwork. Wick explores how landscapes, data visualization, and relationship between people and places can be turned into drawings, maps, animations, and softwares. Although this project may just look like a pretty animation, each line corresponds to a daily rainfall measurement. The length and initial placement of the lines represent the amount of rainfall and where it fell. The final placement and color are determined by the urban water consumption. As an example, if the rainfall was pulled farther away from where it fell, the color of the lines turn from blue to white. Each part of the map is encoded with specific data from that specific region. Wicks stated that he downloaded and parsed the data using python and used Cinder for creating visual software. In addition, this animated map is also interactive, allowing users to zoom in or zoom out of certain areas.

LO: Generative Art

I admire Joshua Davis’s art piece, ‘HPsprout’, because of the vague randomness of triangles with different colors but also includes the pattern of how geometric triangles are repetitive.

This piece can somehow be described with a term, “chaos” but also can be described as geometric. It is also interesting how the mood of the piece changes depending on the number of triangles. Depending on how the artist articulates the shape of it, the audience can be allured more into the art piece. This artist loves playing with new ideas and tools. That is why he decided to #GoMakeThings and challenged himself to make something new images. Not only fundamentally thinking about those primary colors, but he also wrapped all those new transparent PNGs into some processing code to come with an infinite number of colors/layouts.

This piece n0t only includes some processing code but also requires hand-made efforts. The artist had to scan the pools of color from shredded papers to come up with natural dropped shadows and lights.

HPsprout colors
 Different elevations to create natural drop shadows

LO 2 – Generative Art

the V01D” (2018) by Joshua Davis is a generative work that utilizes audio reactive algorithms to create fascinating, complex imagery. This piece was a large-scale installation created for the OFFF Festival in Barcelona. Davis has created numerous computational art/design projects, many of which use programming to visualize sound.

I really admire Davis’s work because of the unique, ever-changing visuals that he is able to achieve and am interested to learn more about the execution of his work. From what I can tell, I think that Davis used real-time algorithms that respond to audio in order to generate transformative animations. In this specific work, he used Kurt Uenela / Null + Void’s music to determine the motion of the piece.

Some of Davis’s other works that I am particularly drawn to include “Golden Times,” “Take 10 Weightless,” and “Noise Paintings.” Across all of his works, his strong color sensibility is quite evident. I think that his understanding of color and visual composition are what make his work so successful.

“the V01D” (2018)
“the V01D” (2018)

Variable Faces

variable faces
//Rouann Chen, Section B

var facewidth = 450;
var eyesize = 50;
var faceheight = 250;
var smile = 15

function setup() {
    createCanvas(640, 480);
    text("Variable Faces", 10, 15);
}

function draw() {
	background(163, 216, 238);
	fill(255);
	noStroke();
	triangle(width/2, height/2 - faceheight/2 - 80, width/2 - 40, height/2 - faceheight/2 + 40, width/2 + 40, height/2 - faceheight/2 + 40);	//horn
	fill(255, 211, 216);
	ellipse(width/2, height/2, facewidth, faceheight);	//face
	noFill();
	stroke(252, 127, 136);
	arc(width/2, height/2 + faceheight/2*0.7, 80, 30, 0, PI);	//DOUBLE CHIN
	strokeWeight(7);
	point(width/2 - 5, height/2 + 5);
	point(width/2 + 5, height/2 + 5);	//piggy nose
	var eyeLX = width/2 - facewidth * 0.16;
	var eyeRX = width/2 + facewidth * 0.16;
	fill(175, 114, 201);
	stroke(255);
	strokeWeight(9);
	ellipse(eyeLX, height/2 - faceheight*0.05, eyesize, eyesize);	//left eye
	ellipse(eyeRX, height/2 - faceheight*0.05, eyesize, eyesize);	//right eye
	var mouthLX = width/2 - facewidth * 0.13;
	var mouthLY = height/2 + faceheight * 0.17;
	var mouthMX = width/2;
	var mouthMY = height/2 +faceheight * 0.17 + smile;
	var mouthRX = width/2 + facewidth * 0.13;
	var mouthRY = height/2 + faceheight * 0.17;
	stroke(252, 127, 136);
	strokeWeight(3);
	noFill();
	beginShape();
	curveVertex(mouthLX, mouthLY);
	curveVertex(mouthLX, mouthLY);
	curveVertex(mouthMX, mouthMY);
	curveVertex(mouthRX, mouthRY);
	curveVertex(mouthRX, mouthRY);
	endShape();	//mouth
}

function mousePressed() {
	faceheight = random(200, 300);
	facewidth = random(200, 500);
	smile = random(-20, 15);
	eyesize = random(9, 50);

}

Looking Outwards 02: Generative Art

Directed by one of the fashion’s most experimental designer, Hussein Chalayan, the wearable installations shown in the 2006 show employs laser technology and computational textile to emit laser beams with its motions. I appreciate how the piece is a critical exploration of the body in relation to technology and how it demonstrates that technology is a very suitable medium for any artist. By pixel mapping on a media server, the maker can control the visuals on the fabric with any video content. The final LED dress plays with lights and space, performing with a strong sense of spatial dynamics that manifested Chalayan’s fascination with architecture, aerodynamics, bodily form, and identities. It narrates the personal aspects of technology that emphasize how the borders between public and private are blurring in the digital world. Another reason that makes the work revolutionary is how the designer considers the daily outfit as a communication device while the traditional garments cannot. 

Link to the interview: https://showstudio.com/projects/readings#fashion_film

blog02-generative art

Skin Rendering by Altered Qualia
In this project, the figure turns and the perspective changes as the viewer’s mouse moves. Yet, in the meantime, the figure’s eyes are always staring at you straight in your eyes. I admire how real the face is rendered, from the structure of the face, the color and texture of the skin and pupil, to the light and shadow casted on the face. The developer must have devoted a lot of effort in studying the composition of human face. This makes the stare more intimidating and reminds me of the uncanny valley.
Based on my current knowledge, I can only know that it used the mouseX, mouseY functions since the perspective is adjusted by the position of my mouse.
This project is interactive in a way as it makes the viewer uncomfortable to some extent since it falls into the uncanny valley. You would feel like you are watched or monitored by a seemingly real virtual character on the screen.