Category: SectionD

Project 02 – Variable Face

Some of the detail in this project are similar to the program I covered in my Looking Out for this week. There are times when the face does not look as it should, while there are others when it seems as though the face is trying to convey real emotions. Left click to begin and change faces.

variableface

/* Lance Yarlott (lcy)
   Section D */

// variable definitions, names self explanatory
var canvasWidth = 400;
var canvasHeight = 400;

const headCenterX = canvasWidth / 2;
const headCenterY = canvasHeight / 2;
const headRadius = canvasHeight / 3;

const noseX = headCenterX;
const noseTopY = headCenterY;
const noseBottomY = noseTopY + (headRadius / 4);

const eyeCenterLX = headCenterX - (headRadius / 2);
const eyeCenterRX = headCenterX + (headRadius / 2);
const eyeCenterY = headCenterY - (headRadius / 3);
const eyeWhiteRadius = headRadius / 5;
const irisRadius = eyeWhiteRadius / 2;

const mouthY = headCenterY + (2 *headRadius / 3);
const mouthX = headCenterX;

var skinR = 255;
var skinG = 255;
var skinB = 255;

var noseWidth = 10;
    
var earWidth = 10;

var pupilDilationRadius = 1;
var eyeR = 255;
var eyeG = 255;
var eyeB = 255;
    
var eyebrowWidth = 10;
var eyebrowThickness = 1;
var eyebrowAngle = 0;
var eyebrowDistance = 0;
var eyebrowHeight = eyeCenterY - (2 * eyeWhiteRadius);

var mouthCurve = 0;
var mouthWidth = 1;
var mouthThickness = 1;

var hairR = 255;
var hairG = 255;
var hairB = 255;

var noseR = 255;
var noseG = 255;
var noseB = 255;

var bgColor = 255;

function setup() {
    createCanvas(canvasWidth, canvasHeight);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
    frameRate(10);
    noStroke();
}

function draw() {
    if (mouseIsPressed) {
        if (mouseButton === LEFT) { 
            // colors
            skinR = random(0, 255);
            skinG = random(0, 255);
            skinB = random(0, 255);

            eyeR = random(0, 255);
            eyeG = random(0, 255);
            eyeB = random(0, 255);
            
            hairR = random(0, 255);
            hairG = random(0, 255);
            hairB = random(0, 255);

            noseR = random(0, 255);
            noseG = random(0, 255);
            noseB = random(0, 255);

            bgColor = random(0, 255);

            // face shapes
            noseWidth = random(10, headRadius / 2);

            pupilDilationRadius = random(1, irisRadius);
            
            eyebrowWidth = random(10, headRadius / 2);
            eyebrowThickness = random(1, eyeWhiteRadius);
            eyebrowAngle = random(-HALF_PI, HALF_PI);
            eyebrowDistance = random(0, eyebrowWidth);
            eyebrowHeight = eyeCenterY - (random(1, 3) * eyeWhiteRadius);

            mouthCurve = random(50);
            mouthWidth = random(1, headRadius * 2);
            mouthThickness = random(1, 10);
        }
    }

    // set background color
    background(bgColor);

    // draw face outline, variable skin color?
    fill(skinR, skinG, skinB);

    circle(headCenterX, headCenterY, 2 * headRadius);

    // TODO: nose
    fill(noseR, noseG, noseB);
    triangle(noseX - noseWidth, noseBottomY, noseX + noseWidth, noseBottomY,
            noseX, noseTopY);

    // TODO: variable eyes w/ variable color
    fill(255);
    circle(eyeCenterLX, eyeCenterY, eyeWhiteRadius);
    circle(eyeCenterRX, eyeCenterY, eyeWhiteRadius);

    fill(eyeR, eyeG, eyeB);
    circle(eyeCenterLX, eyeCenterY, irisRadius);
    circle(eyeCenterRX, eyeCenterY, irisRadius);

    fill(0);
    circle(eyeCenterLX, eyeCenterY, pupilDilationRadius);
    circle(eyeCenterRX, eyeCenterY, pupilDilationRadius);

    // TODO: variable eyebrows, match hair color
    stroke(hairR, hairG, hairB);
    strokeWeight(eyebrowThickness);
    line(headCenterX + eyebrowDistance, eyebrowHeight - 10 * sin(eyebrowAngle), 
        headCenterX + eyebrowDistance + eyebrowWidth, 
        eyebrowHeight + 10 * sin(eyebrowAngle));
    line(headCenterX - eyebrowDistance, eyebrowHeight - 10 * sin(eyebrowAngle),
        headCenterX - eyebrowDistance - eyebrowWidth,
        eyebrowHeight + 10 * sin(eyebrowAngle));

    // TODO: variable mouth, just shape of curve
    stroke(0);
    curve(mouthX - mouthWidth, mouthY + mouthCurve, mouthX - mouthWidth / 2,
        mouthY - mouthCurve, mouthX + mouthWidth / 2, mouthY - mouthCurve,
        mouthX + mouthWidth, mouthY + mouthCurve);
    noStroke();
}

LO – 02 (Generative Art)

For this week’s LO, I took a closer look at Collider by Robert Hodgin, who does a lot of work in 3D terrain simulations like this one. The concept behind the project is exploring a simulated particle system interacting with a universal gravitational force that is coded in.

I really enjoyed the way that this project took a simple physics concept and was able to visualize it in such a beautiful way to show the intersection between scientific and visual methods of communicating information. Not only is it visually pleasing to look at, it also demonstrates the theories of universal gravitation in a tangibly interactive way.

Robert Hodgin’s work is primarily done in Houdini and C++, for which he is a co-creator of Cinder C++, a free open-source library designed to be a resource for endeavors of creative coding in the aforementioned language.

LO-02 – Generative Art

The work I have looked at this week is called “nQbitor” or “Incubator.” It’s a program created by Mario Klingemann that generates 8-bit tones and imagery from a single line formula. I really appreciate the fact that such intricate designs can be created from a single formula when put into a program. The formula itself seems to be a large number of binary operations on numbers. The result is then presumably put into a tone and image generator, creating the end result. It seems as though the artist has an interest in sound design based on mathematical formulas, given the nature of this project. He understands that semi-random generation does not always lead to good results and accepts that with this generation there will be the need to make multiple attempts. Random generation can yield truly interesting results when given enough time, which is something that I appreciate, and something I hope this program’s author appreciates as well.

View post on imgur.com
A sample of an image created while using the program. Note: images on the site are not static and sound plays as well.

Project 02 – Variable Face

Made in honor of the moldy tomato I found at the back of my fridge. Rest in peace.

tomatoes
//Iris Yip
//15104 Section D

var bgColorR=0;
var bgColorG=0;
var bgColorB=0;
var faceWidth=200;
var faceHeight=300;
var eyeShape=0;
var eyeColor=0;
var smileYN=1;
var leafColor=1;
var leafLength=1;
var leafHeight=1;

//I need better names for my variables


function setup() {
  createCanvas(600, 600);
}

function draw() {
  //background
  background(bgColorR, bgColorG, bgColorB)
  
  //faceshape
    noStroke();
  fill(225, bgColorB, 110)
    ellipse(300, 300, faceWidth, faceHeight);
  
  //nose
    fill(225, bgColorB-20, 120)
  ellipse(300, 316, faceWidth/30, faceHeight-250)
  
  //eyes
  fill(255,255.255)
    ellipse(205, 290, (faceWidth/4), (faceHeight/4));
    ellipse(390, 290, (faceWidth/4), (faceHeight/4));
  fill(bgColorR,bgColorG,bgColorB)
    ellipse(390, 290, 50, 50);
    ellipse(205, 290, 50, 50);
  
  //mouth
  noFill()
  strokeWeight(10)
  stroke(225, bgColorB+50, 110)
  arc(270, 380, 120, (smileYN), PI + QUARTER_PI, TWO_PI)
  
  
  //leaf things
  noStroke();
  fill(bgColorR, 255-(bgColorG/3), (bgColorB-100))
  triangle(leafLength, 150, 300, 130, 240, leafHeight);
  triangle(leafLength, 200, 300, 130, 220, leafHeight);
  triangle(leafLength+20, 150, 300, 130, 200, leafHeight+60);
  
  //label
    fill(255);
    textSize(20);
    textAlign(CENTER);
    text("So Many Tomatoes",width/2,560);
}

function mousePressed() {
  //background color
    bgColorR = random(120, 130);
  bgColorG = random(80, 90);
    bgColorB = random (110, 120);
  
  //faceshape change
    faceWidth= random(250,450);
    faceHeight= random (300,300);
  
  //nose
  
  
  //smile, yes/no
    smileYN= random(2,100);
  
  //leaf things
    leafHeight=random (120,150);
    leafLength=random (300,340);

  
}

The code for this project was relatively simple in terms of creating and using the different shapes, but I did initially have a lot of trouble coming up with colors that still looked different but didn’t clash. I do regret not going in with a plan or initial sketch because I think it inhibited me from trying out more ambitious commands and shapes.

Procedural Lantern

Akari Lanterns

Robert Hodgin is a generative artist who creates both 2D data visualizations and immersive 3D terrains in Houdini. One project that showcases his talents in a unique way is his procedurally generated Akari Lanterns. In wanting to get better at procedural modeling, Hodgin created an algorithm in Houdini that created the geometry, mesh, and hardware for each lantern. As a product designer, I am fascinated by different methods to create form. I have only dabbled in virtual 3D form, but after seeing this project, I would love to explore the world of procedural modeling. This does not seem to use any “traditional” method of programming, but I know that he used a node/module based system to create the algorithm to make the polygons. Robert Hodgin received a degree in ceramics from RISD, and it is apparent that he values the form of objects.

Project-02-Variable-Face

sketch-variable-face
	// Huijun Shen D


	var faceWidthA = 100;
    var faceHeightA = 120;
    var faceWidthB = 100;
    var faceWidthB = 100;
    var faceHeightB = 100;
    var eyeWidth = 30;
    var eyeHeight = 30;
    var mouthWidth = 30;
    var mouthHeight = 30;
    var puffRWidth = 30;
    var puffRHeight = 30;
    var puffLwidth = 30;
    var puffLHeight = 30;
    var r = 10;
    var g = 10;
    var b = 10;

 
function setup() {
    createCanvas(640,480);
}
 
function draw() {
    noStroke();
    //bg
    background(r,g,b);    //randomize bg color
    fill(r+30, g+30, b+30);
    rect(width/2-width/3, height/2-height/3, width-width/2-width/3, height -30);
    rect(width/2-width/3+faceWidthB, height/2-height/3, width-width/2-width/3, height -30);
    rect(width/2-width/3+faceWidthB*2, height/2-height/3, width-width/2-width/3, height -30);
    //fill(r, g, b);

    stroke(0)
    fill(219,153,112);
    fill(50+r,50+g,b+50);  //neckDeco
    rect(width/2 - faceWidthB * 0.25, height/2 + faceHeightB/3, faceWidthB/2, faceHeightB/5);  
    fill(247,216,186);
    ellipse(width/2, height/2, faceWidthB, faceHeightB);  //face    
    var eyeLX = width / 2 - faceWidthB * 0.25;
    var eyeRX = width /2 + faceWidthB * 0.25;
    stroke(255,0,0);
    fill(245,140,203);
    ellipse(width / 2- faceWidthB * 0.25, height/2 + faceHeightB * 0.2, puffLwidth, puffLHeight); //puff
    ellipse(width / 2+ faceWidthB * 0.25, height/2 + faceHeightB * 0.2 , puffRWidth, puffRHeight); //puff

    //change eye white cirlce position
    fill(255);
    if (mouseX < width/2) {
        ellipse(eyeLX, height / 2, eyeWidth+20, eyeHeight+15); //eyeWhitCircle
    }else{
        ellipse(eyeRX, height / 2, eyeWidth+20, eyeHeight+15);
    }

    
    fill(0);
    ellipse (eyeLX, height / 2, eyeWidth, eyeHeight); //eye
    ellipse (eyeRX, height / 2, eyeWidth, eyeHeight); //eye
    stroke(0);
    ellipse(width / 2, height/2 + faceHeightB * 0.25, mouthWidth, mouthHeight) //mouth


    noFill();  //hair
    beginShape();
    vertex(width / 2 - faceWidthB * 0.5 ,height / 2 - faceHeightB * 0.5);
    bezierVertex(width / 2 - faceWidthB * 0.3, height / 2 - faceHeightB * 0.3, width / 2 - faceWidthB * 0.25, height / 2 - faceHeightB * 0.2, height / 2 - faceHeightB * 0.1 , height / 2 - faceHeightB * 0.1);
    endShape();

    noFill();  //hair
    beginShape();
    vertex(width / 2 - faceWidthB * 0.65 ,height / 2 - faceHeightB * 0.65);
    bezierVertex(width / 2 - faceWidthB * 0.3, height / 2 - faceHeightB * 0.3, width / 2 - faceWidthB * 0.25, height / 2 - faceHeightB * 0.2, height / 2 - faceHeightB * 0.1 , height / 2 - faceHeightB * 0.1);
    endShape();

    noFill(); //hair
    beginShape();
    vertex(width / 2 + faceWidthB * 0.25 ,height / 2 - faceHeightB * 0.25);
    bezierVertex(width / 2 + faceWidthB * 0.3, height / 2 - faceHeightB * 0.4, width / 2 + faceWidthB * 0.25, height / 2 + faceHeightB * 0.2, width / 2 + faceWidthB * 0.25 , height / 2 - faceHeightB * 0.6);
    endShape();

    noFill();  //hair
    beginShape();
    vertex(width / 2 + faceWidthB * 0.4 ,height / 2 - faceHeightB * 0.4);
    bezierVertex(width / 2 + faceWidthB * 0.4, height / 2 - faceHeightB * 0.5, width / 2 + faceWidthB * 0.3, height / 2 + faceHeightB * 0.25, width / 2 + faceWidthB * 0.25 , height / 2 - faceHeightB * 0.6);
    endShape();

    noFill();  //hair
    beginShape();
    vertex(width / 2 + faceWidthB * 0.6 ,height / 2 - faceHeightB * 0.5);
    bezierVertex(width / 2 + faceWidthB * 0.2, height / 2 - faceHeightB * 0.7, width / 2 + faceWidthB * 0.5, height / 2 + faceHeightB * 0.8, width / 2 + faceWidthB * 0.5 , height / 2 - faceHeightB * 0.9);
    endShape();
}


    function mousePressed() {
        r = random (0,255);
        g = random (0,255);
        b = random (0,255);
        faceWidthA = random(50, 70);
        faceHeightA = random(30,50);
        faceWidthB = random(150,250);
        faceHeightB = random (150, 300);
        eyeWidth = random(10, 30);
        eyeHeight = random(10, 30);
        mouthWidth = random (8, 15);
        mouthHeight = random (5,10);
        puffRWidth = random (10,30);
        puffRHeight = random (5,15);
        puffLwidth = random(10,30);
        puffLHeight = random(5,15);

    }

I tried some basics first then I tried to decorate the background. I would like to make some funny face so that I tried hard to make some ridiculous hair. Not very successful, I should say. I wanted to add some interaction in it so that I tried if/else. If you click on the left half of the canvas, the white circle of the under the eye is on the left, other wise it is on the right side.

LO-02 (generative art)

i.php-1

Nervous System is a design project by Jessica Rosenkrantz and Jesse Louis-Rosenberg that uses “generative systems, 3D printing, and webGL” to create different household and jewelry products. The randomly generated patterns they use are produced by 2 simulation systems Xylem and Hyphae. Xylem generates 2D patterns and was built using Processing while Hyphae generates 3D patterns and was built using C##. Through the software they produced, people are able to create their own variation of the patterns within a product they’re interested in and have it 3D printed. I like that they give people the opportunity to be more involved in the designing of their products. I also like that they drew inspiration from nature because they were able to create structurally and texturally unique patterns not normally seen in jewelry or home decor. The only critique I have for the products are that some of the products that they apply their patterns onto are fairly generic in form. The dresses they show as well and some of the lamps and cups have very simple silhouettes. It’d be interesting to see if they could make forms for those types of products that looked less uniform and more natural like the patterns.

Variable Face

sketchDownload
// Simple beginning template for variable face.
var eyeWidth = 30;
var eyeLength = 38;
var faceWidth = 220;
var faceHeight = 180;
var earWidth = 50;
var inEar = 30
var noseWidth = 22;
var noseHeight = 9;
var blushWidth = 40;
var blushHeight = 21;
var snoutWidth = 73
var BlushR = 159;
var BlushG = 66;
var BlushB = 76;
var OutlineR = 106;
var OutlineG = 44;
var OutlineB = 76;
 
function setup() {
    createCanvas(300, 300);
}
 
function draw() {
    background(180);
	
	//EARS
	fill(139, 94, 60);
	stroke(OutlineR, OutlineG, OutlineB);
	strokeWeight(4)
	var earLX = width / 2 - faceWidth * 0.3;
    var earRX = width / 2 + faceWidth * 0.3;
	var earHt = height / 2 - faceHeight * 0.4;
    ellipse(earLX, earHt, earWidth, earWidth);
    ellipse(earRX, earHt, earWidth, earWidth);
	
	fill(BlushR, BlushG, BlushB);
	stroke(OutlineR, OutlineG, OutlineB);
	strokeWeight(4)
	ellipse(earLX, earHt, inEar, inEar);
	ellipse(earRX, earHt, inEar, inEar);
    
	//FACE
	fill(139, 94, 60);
	stroke(OutlineR, OutlineG, OutlineB);
	strokeWeight(4)
	ellipse(width / 2, height / 2, faceWidth,  faceHeight); 


	//EYES
	stroke(OutlineR, OutlineG, OutlineB);
	strokeWeight(4)
	var eyeLX = width / 2 - faceWidth * 0.25; //EYE
    var eyeRX = width / 2 + faceWidth * 0.25;
    arc(eyeLX, height - 180, eyeWidth, eyeLength, radians(0),radians(180), OPEN);
	arc(eyeRX, height - 180, eyeWidth, eyeLength, radians(0),radians(180), OPEN);
    
	//SNOUT
	fill(169, 124, 80);
	noStroke();
	beginShape();
    vertex(width/2, width / 2 - faceWidth * 0.2);
    vertex(width / 2 + faceWidth * 0.2, width/2);
    vertex(width/2, width / 2 + faceWidth * 0.2);
    vertex(width / 2 - faceWidth * 0.2, width/2);
    endShape(CLOSE);
	
	//MOUTH
	stroke(OutlineR, OutlineG, OutlineB);
	strokeWeight(4)
	beginShape();
    vertex(width/2, height / 2 - faceHeight * 0.1);
	vertex(width/2, height / 2 + faceHeight * 0.02);
    vertex(width / 2 + faceWidth * 0.08, width / 2 + faceWidth * 0.05);
	endShape();
	beginShape();
    vertex(width/2, height / 2 - faceHeight * 0.1);
	vertex(width/2, height / 2 + faceHeight * 0.02);
    vertex(width / 2 - faceWidth * 0.08, width / 2 + faceWidth * 0.05);
	endShape();
	
	//NOSE
	fill(OutlineR, OutlineG, OutlineB);
	noStroke();
	var noseHt = height / 2 - faceHeight * 0.1;
	ellipse(width/ 2, noseHt, noseWidth, noseHeight);
	
	
	//BLUSH
	fill(BlushR, BlushG, BlushB);
	noStroke();
	var blushLx = width / 2 - faceWidth * 0.32;
	var blushRx = width / 2 + faceWidth * 0.32; 
	ellipse(blushLx, height - 150, blushWidth, blushHeight); 
	ellipse(blushRx, height - 150, blushWidth, blushHeight);
}
 
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(130, 230);
    faceHeight = random(120, 200);
    eyeWidth = random(10, 30);
	eyeLength = random(10, 50);
	earWidth = random(40, 60);
	inEar = random(10, 30);
	noseWidth = random(22, 28);
	noseHeight = random(9,15);
	blushWidth = random(10,40);
	blushHeight = random(10,21);
	BlushR = random(140,180);
    BlushG = random(40,80);
    BlushB = random(60,80);
	OutlineR = random(0,200);
    OutlineG = random(0,200);
    OutlineB = random(0,200);
}

LO 2 – Generative Art

Machine Hallucinations by Refik Anadol is a generated art projection that uses AI to compile 10 million images of New York online. The machine uses these images to generate moving, shifting images to represent the lifetime of the city. I admire how organic the final film looks, while it interprets the real, dynamic landscape of New York. It reflects the memories of a breathing city and how we may remember the city in our own memories. The artist utilized an entire archive of images to create an output that looks like an alternative reality. Anadol’s works utilizes data to generate mesmerizing, colorful, and harmonic sculptures. His work starts with a simple question of how people and machines can remember their environment and its patterns, to create a hallucinative image.

https://refikanadol.com/works/machine-hallucination/

Project 2 – Variable Face

click the clown man

sketch
//Se A Kim, Section D

var noseWidth = 100;
var noseHeight= 100;
var eyeheight = 250;
var eyeSize = 20;
var bodywidth = 500;
var bodyheight = 500;
var mouthheight = 100;
var mouthwidth = 100;



function setup() {
    createCanvas(600, 600);
    background(219, 246, 247);

}

function draw() {

noStroke();
frameRate(5);
fill(random(0,255), random(0,255), random(0,255));
ellipse(300, 300, 400, 400);
ellipse(400, 400, 300, 300);
ellipse(100,500,400,400);
ellipse(500,500,400,400)

noStroke();
fill(255, 255, 255);    //body
ellipse(300, 600, bodywidth, bodyheight);

fill(255, 0, 0);
triangle(280, 600, 300, 300, 350, 600);

fill(255,218,185)   //face
ellipse (300, 300, 300, 300);

frameRate(2);
fill(random(0,255), random(0,255), random(0,255));
arc(300, 330, mouthwidth, mouthheight, 0, 600);    //mouth

 //eye
ellipse(250, eyeheight, eyeSize);
ellipse(350, eyeheight, eyeSize);

noStroke(); //nose
fill(255,0, 0);
ellipse(300, 300, noseWidth, noseHeight);


}

function mousePressed(){

    noseWidth = random (50, 100);
    noseHeight = random (50, 100);
    eyeSize = random (20, 50);
    bodywidth = random(200, 500);
    bodyheight = random(300, 500);
    mouthwidth = random(100,200);
    mouthheight = random(100,200);
    eyeheight = random(230, 270);


   
}