alchan-Project 02-variable face

alchan project 02

//face shape
var faceShade = 100;
var faceWidth = 150;
var faceHeight = 200;
var faceAngle1 = 10;
var faceAngle2 = 10;
var faceAngle3 = 10;
var faceAngle4 = 10;

var eyeSize = 50;
var eyeStroke = 4;
var eyeNumber = 2;
var eyeX = 320;
var eyeY = 210;
var eyeDistance = 30;

var antlerX = 50;
var antlerY = 120;
var antlerLeft1 = 80;
var antlerLeft2 = 180;
var antlerLeftSize = 100;
var antlerRight1 = 0;
var antlerRight2 = 100;
var antlerRightSize = 100;
var antlerStroke = 8;

//determine whether to show/hide
var crestType = 1;
var showEars = 0;

var earX = 320;
var earY = 100;
var earWeight = 50;

var spikeX = 320;
var spikeY = 240;
var spikeWidth = 20;
var spikeHeight = 100;

//specimen label
var n1 = 0;
var n2 = 0;
var n3 = 0;

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

function draw() {
    background(237, 234, 218);

    arc(320 - faceWidth/2, antlerY, antlerLeftSize, antlerLeftSize, antlerLeft1, antlerLeft2, OPEN);
    arc(320 + faceWidth/2, antlerY, antlerRightSize, antlerRightSize, antlerRight1, antlerRight2, OPEN);

    //determine additional crest type: antlers, ears, spike
    if(crestType === 1) {
      strokeWeight(antlerStroke - 2);
      arc(320 - faceWidth/2, antlerY - 20, antlerLeftSize - 50, antlerLeftSize - 50, antlerLeft1, antlerLeft2, OPEN);
      arc(320 + faceWidth/2, antlerY - 20, antlerRightSize - 50, antlerRightSize - 50, antlerRight1, antlerRight2, OPEN);
    } else if (crestType === 2) {
      triangle(spikeX - spikeWidth/2, 245 - faceHeight/2, spikeX + spikeWidth/2,
        245 - faceHeight/2, spikeX, spikeHeight);

    //determine whether or not to draw ears
    if(showEars >= 0.5) {
      line(earX - faceWidth/2, antlerY + earY, earX + faceWidth/2, antlerY + earY);

    rect(320, 240, faceWidth, faceHeight,
      faceAngle1, faceAngle2, faceAngle3, faceAngle4);

    //eyes: determine how many, then draw
    if(eyeNumber === 1) {
      ellipse(eyeX, eyeY, eyeSize, eyeSize);
    } else if(eyeNumber === 2) {
      ellipse(eyeX - eyeDistance, eyeY, eyeSize, eyeSize);
      ellipse(eyeX + eyeDistance, eyeY, eyeSize, eyeSize);
    } else if (eyeNumber === 3) {
      ellipse(eyeX - eyeDistance, eyeY, eyeSize, eyeSize);
      ellipse(eyeX + eyeDistance, eyeY, eyeSize, eyeSize);
      ellipse(eyeX, eyeY - eyeDistance, eyeSize, eyeSize);

    //caption: specimen number
    text('specimen no. ' + n1 + n2 + n3, 320, 440);

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(180, 250);
    faceHeight = random(200, 250);
    faceAngle1 = random(10, 60);
    faceAngle2 = random(10, 60);
    faceAngle3 = random(10, 60);
    faceAngle4 = random(10, 60);
    faceShade = random(80, 150);

    eyeSize = random(30, 70);
    eyeStroke = random(3, 10);
    eyeNumber = Math.floor((random() * 3) + 1); //need a whole number
    eyeX = random(290, 350);
    eyeY = random(180, 240);
    eyeDistance = eyeSize/2 + random(5,30);

    antlerX = random(90, 125);
    antlerY = random(100, 180);
    antlerLeft1 = random(70, 90);
    antlerLeft2 = random(170, 200);
    antlerLeftSize = random(80, 120);
    antlerRight1 = random(-20, 10);
    antlerRight2 = random(90, 110);
    antlerRightSize = random(80, 120);
    antlerStroke = random(4, 15);

    crestType = Math.floor((random() * 2) + 1); //need a whole number
    showEars = random();

    earY = random(80, 120);
    earWeight = random(40, 80);

    spikeX = random(260, 380);
    spikeY = random(50, 100);
    spikeWidth = random(10, 40);
    spikeHeight = random(25, 80);

    n1 = Math.floor((random() * 9) + 1); //need a whole number
    n2 = Math.floor((random() * 9) + 1);
    n3 = Math.floor((random() * 9) + 1);

I first figured out which elements of my face I wanted to be randomized. I then decided which elements would be constant (antlers, eyes) and which would only be drawn for some faces (2nd set of antlers, ears, horn, number of eyes). From there it was just working out dimensions, coordinates, and ranges for the randomly generated variables.



//Yoon Young Kim
//Section E

var eyeLxSize = 40;
var eyeRxSize = 20;
var faceWidth = 240;
var faceHeight = 200;

var nose1x = 300;
var nose1y = 250;
var nose2x = 350;
var nose2y = 250;
var nose3x = 325;
var nose3y = 285; 
var earpoint = 100;
var smileWidth = 25;
var smileHeight = 25;

var R1 = 232;
var R2 = 64;
var B1 = 33;
var B2 = 91;
var B3 = 237;
var Ye1 = 323;
var Ye2 = 204;
var Ye3 = 74;

var RW = 4 //weight of any red line

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

function draw() {
    background (B1, B2, B3);
    fill(Ye1, Ye2, Ye3);
    ellipse (width/2, height/2 - 10, faceWidth, faceHeight)
    stroke(R1, R2, R2);
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    ellipse(eyeLX, height / 2, eyeLxSize, eyeLxSize);
    ellipse(eyeRX, height / 2, eyeRxSize, eyeRxSize);
    //triangle nose
    fill(R1, R2, R2);
    triangle(nose1x, nose1y, nose2x, nose1y, nose3x, nose3y);

    //left ear
    fill(Ye1, Ye2, Ye3);
    triangle(220, 190, 225, earpoint, 310, 150);

    //right ear
    triangle(420, 190, 420, earpoint, 340, 150);

    stroke(R1, R2, R2);
    arc(width / 2, height / 2 + faceWidth * 0.20, smileWidth, smileHeight, 0, 180);

function mousePressed() {
    faceWidth = random(200, 300);
    faceHeight = random(200, 275);
    eyeLxSize = random(20, 80);
    eyeRxSize = random(30, 60);
    R1 = random(200, 250);
    R2 = random(50, 100);
    B1 = random(20, 70);
    B2 = random(90 ,140);
    B3 = random(200, 250);
    Ye1 = random(300, 350);
    Ye2 = random(180, 230);
    Ye3 = random(50, 100);
    RW = random(7, 15);
    smileWidth = random(40, 80);
    smileHeight = random(20, 50);
    nose1x = random(270, 300);
    nose1y = random(240, 260);
    nose2x = random(320, 350);
    nose3x = random(300, 325);
    nose3y = random(270, 285); 
    earpoint = random(50, 120);


Much like the first project, I felt that this project required a lot of playing around and trial and error. I wanted to use primary colors in order to range the different color values to evict a childish type of project. In order to experiment with different shapes, I decided to go with a cat face. I like how each image generates a new combination/a new cat face upon each click.


This project is Memo Akten’s “Pattern Recognition,” created in collaboration with choreographer Alexander Whitley.

This generative art project involves a series of lights learning and observing how two dancers move and interact. The lights thus move accordingly to the dancers’ movements and placement within the space.

I appreciated how much the light is fully integrated with the dance art form. Rather than merely being a light show that would provide an aesthetic value to the performance, the lights serves a cognitive purpose for it assists dancers with recognition and learning with routines and dance. This project made me realize that generative art is not limited to media art but also performance art and music. Like most generative art, the outcome depends on the interactions and so the outcomes always seem to be unique.

The algorithm of Pattern Recognition relies heavily upon the movement and the space of the subjects: the dancers. The artist made the decision to use strong, harsh strobe lights that would beam lights across a stage. I thought this artistic decision was appropriate as a generative component since the light would be empathetic to the dancer’s form and movements.

rmanagad-Section E-lookingoutwards-02

Creator: Hiroshi Ishii, Xiao Xiao

Title of Work: Andante

Year of Creation: 2014

Link to Project Work:

Link to Artist Bio: ,

Andante is an augmented reality program intended for developing beginner skills in piano playing. In developing this learning program, Hiroshi Ishii and Xiao Xiao regarded human experiences and histories from the somatic perspective — constant consideration was put towards recognizing the rhythmic flow of the human gait, and applying this consideration towards learning musical notations. This emphasis on the body-mind is reflected in Ishii’s and Xiao’s other new media art work, as they develop spaces, messages, and tools that rely on direct human interaction. As a designer focused on the human sciences and transitions to futures, I’m interested in Andante‘s potential as a person-based contribution towards futures-learning — does the human soma need increased priority in the design process?

According to the paper, Andante: Walking Figures on the Piano Keyboard to Visualize Musical Motion, the program runs both MIDI and the walking animations on Java, and in response to the player hitting each of the keys.

katieche – project 02 variable face


// Katie Chen
// 9:30 AM Class
// Assignment-02

var eyeSize = 20;
var earWidth = 50;
var earHeight = 55;
var headHeight = 200;
var headWidth = 220;
var ewSize = 30;
var cSize = 25;
var ccSize = 25;
var x = 6;
var y = 4;
var v = 6;
var z = 5;

function setup() {
    createCanvas(480, 640);
function draw() {
    background(207, 228, 247);

    // head
    fill (250);
    	// top right
		curveVertex(headWidth/2, headHeight);
		// top left
		curveVertex(headWidth*2, headHeight);
		// bottom right
		curveVertex(headWidth*2, headHeight*2);
		// bottom left 
		curveVertex(headWidth/2, headHeight*2);

	// ears
    fill (250);
    var earL = width / 2 - headWidth * 0.25;
    var earR = width / 2 + headWidth * 0.25;
    ellipse(earL, headHeight, earWidth, earHeight);
    ellipse(earR, headHeight, earWidth, earHeight);

    // cheeks
    fill (255, 221, 211);
    var cL = width / 2 - headWidth * 0.25 - 10;
    var cR = width / 2 + headWidth * 0.25 + 10;
    var dist = 25
    ellipse(cL, height / 2 + dist, cSize, cSize);
    ellipse(cR, height / 2 + dist, ccSize, ccSize);
    // eyes
    fill (250);
    stroke (0);
    var ewL = width / 2 - headWidth * 0.25;
    var ewR = width / 2 + headWidth * 0.25;
    ellipse(ewL, height / 2, ewSize, ewSize);
    ellipse(ewR, height / 2, ewSize, ewSize);
    fill (0);
    var eL = width / 2 - headWidth * 0.25;
    var eR = width / 2 + headWidth * 0.25;
    ellipse(eL, height / 2, eyeSize, eyeSize);
    ellipse(eR, height / 2, eyeSize, eyeSize);

    // left eyebrow
    stroke (0);
    line(eL - 7, 290+x, eL +7, 290+y);

	// right eyebrow
    line (eR - 7, 290+v, eR +7, 290+z);

function mousePressed() {
    headWidth = random(150, 250);
    headHeight = random(200, 300);
    eyeSize = random(10, 30);
    cSize = random(20, 40);
    ewSize = random(20, 40);
    earWidth = random(15, 75);
    earHeight = random(55, 120);
    dist = random(20, 30);
    ccSize = random(20, 40);
    x = random(0, 10);
    y = random(0, 10);
    v = random(0, 10);
    z = random(0, 10);

I started the project with the template and shapes that I felt more comfortable playing around with (ellipses, lines, rectangles, etc.), before trying new shapes. For me, the body was the hardest to construct since I tried curveVertex(); for the first time, and even now, it doesn’t necessarily look the way I intended it to (it kind of just looks like a marshmallow now which I guess I’m also okay with). A lot of my project did come from happy accidents (i.e I was trying to make cheeks but ended up making ears, etc.) which I thought was fun, but it’d also be neat to eventually be confident enough in coding that I can actually make what I intend to make.

In terms of planning, I didn’t do anything much last project so I decided I’d try to make something in illustrator first (as seen below) this time and then recreate it with code. Unfortunately after a string of accidental shapes and still not being able to understand how to make curves, I ended up just kind of making everything on a whim for my final!

juyeonk-Looking Outwards-02

Creator: Julius Popp
Title: Bit.Flow
Year of Creation: 2008
Link to the project:

Julius Popp’s Bit.Flow is an installation where a machine pumps a small amount of liquids into a 45-m long, intertwined tube with specific time intervals. At first, the manner in which these liquids are pumped seem disorderly and chaotic, but at some point, these small pumps of liquid at different parts of the tube line up in an orderly fashion to form a certain letter. The letter then quickly disintegrates back into a chaos until another letter pops up among the seemingly random movements of the liquids.

There are multiple variations to this project: it could be hung from the wall as well as laid on the floor. Different colors of the liquid and shapes of the tube could be used.

The part that intrigued me the most was how computer generated programs were used to not only to pump the liquid at a very precise time intervals that enabled the letters to pop up at a certain time and place but also to reenact the random motions that seem to be able to exist only in the non-digital realm. In general, I enjoyed the little discoveries of order among the chaotic movements of the liquids. It seemed magical that these letters were popping out of nowhere without any patterns or warnings.

My guess is that an algorithm is set up to control the time at which the machine pumps out the liquids. These time intervals probably vary from a project to project according to the shape and the length of the tube.

Along with his other well-known project, Bit.Fall, Bit.Flow is supposed to represent how quickly the things that are important to us change, and how fast the things that were important to us become meaningless. According to Popp, these works symbolize the personhood that “changes permanently” as well as the cultures that is “changing the whole time”.

Image result for julius popp bit flow





var eyeSize = 12;
var eyeAdd1 = 10;
var eyeAdd2 = 30;
var eyeAdd3 = 20;
var eyeAdd4 = 30;

var faceWidth = 130;
var faceHeight = 150;
var roundX1 = 20;
var roundX2 = 20;
var roundY1 = 20;
var roundY2 = 20;

var roundXX1 = 10;
var roundXX2 = 10;
var roundYY1 = 10;
var roundYY2 = 10;
var mouthWidth = 30;
var mouthHeight = 18;
var mouthX = 34;

var colorR = 60;
var colorG = 200;
var colorB = 10;
var colorPr = 250;
var colorPg = 122;
var colorPb = 129;
var colorLr = 250;
var colorLg = 220;
var colorLb = 220;
var colorBr = 10;
var colorBg = 10;
var colorBb = 200;

var browWidth = 10;
var browHeight = 10;

var noseHeight = 12;
var noseWidth = 6;

var hairX = 300;
var hairY = 190;
var hairWidth = 60;
var hairHeight = 30;

var arcA = 0;
var arcB = 0;
var arcC = 0;
var arcD = 0;

function setup() {

function draw() {
    rect(280,200, faceWidth, faceHeight,roundX1, roundX2, roundY1, roundY2);

    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    ellipse(eyeLX+eyeAdd1, height / 2+eyeAdd2, eyeSize, eyeSize);
    ellipse(eyeRX+eyeAdd3, height / 2+eyeAdd4, eyeSize, eyeSize);

    //text bubble
    text("w o w z a ! !",168,293,400,400);

    fill(colorPr, colorPb, colorPg);



    rect(eyeLX+eyeAdd1-10,height/2+eyeAdd2+12, 20,14,80)
    rect(eyeRX+eyeAdd3-10,height/2+eyeAdd4+12, 20,14,80)

    stroke(colorPr, colorPb, colorPg);
    rect(280+mouthX,height/2+eyeAdd2+20, mouthWidth, mouthHeight+random(0,10),roundXX1, roundXX2, roundYY1, roundYY2);


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, 150);
    faceHeight = random(150, 200);
    eyeSize = random(12, 15);
    roundX1 = random(10,70);
    roundX2 = random(10,70);
    roundY1 = random(10,70);
    roundY2 = random(10,70);
    colorR = random(10,80);
    colorG = random(100,230);
    colorB = random(10,80);
    eyeAdd1 = random(0,20);
    eyeAdd2 = random(30,70);
    eyeAdd3 = random(0,20);
    eyeAdd4 = random(30,70);
    roundXX1 = random(1,9);
    roundXX2 = random(1,9);
    roundYY1 = random(1,9);
    roundYY2 = random(1,9);
    mouthHeight = random(20,50);
    mouthWidth = random(20,50);
    mouthX = random(20,30);
    colorPr = random(200,255);
    colorPg = random(100,150);
    colorPb = random(100,150);
    colorLr = random(270,255);
    colorLg = random(220,255);
    colorLg = random(220,255);
    noseWidth = random(4,10);
    noseHeight = random(9,14);
    hairWidth = random(30,100);
    hairHeight = random(20,50);
    hairX = random(300,320);
    arcA = random(0,0.4);
    arcB = random(0,0.4);
    arcC = random(0,0.4);
    arcD = random(0,0.4);
    colorBr = random(0,140);
    colorBg = random(0,40);
    colorBb = random(200,255);

My process in completing this project was similar to the last one in that I worked trial and error through all of the elements of the face–starting with a base shape and going on to the eyes, mouth, nose, etc. As an attempt to stay consistent with the style of the face I created for the previous project, I decided generate faces with a similar worried expression. Rather than have my code be completely randomized, I set a lot of limitations to the range of values so as to be able to be able to have more control over the random nature of the project.

In the end, I focused most on creating a good color scheme in which all of the facial elements would go well together. I had a lot of trouble with this given the amount of randomization in my code. In order to achieve the color scheme that I liked, I altered the range of numbers for the R, G, and B values. I focused on having more warm pastel tones in my project so that the faces I generated would be aesthetically pleasing in a series.


In July 2014, anonymous designer Strangethink created a video game exemplifying generative art in the form of a glitchy video game by the name of Error City Tourist.

Strangethink created Error City Tourist using Unity 3D as part of a “Glitch Jam” game design challenge, in which glitches are meant to be implemented in the gameplay and/or aesthetic of a game. What was most visually surprising to me about this game was its lack of consideration of the draw distance, as shown by the video above. Unlike most games that attempt to have objects in the distance fade in as they are generated, Error City Tourist does not attempt to hide this, adding to the glitchy appearance of the game.

This sparked his next project, Secret Habitat, a game in which the player is able to view generated art in a digital walk through gallery. Rather than being limited to visual art, the game includes both generated poetry and music.


Strangethink revealed that his fascination with procedurally-generated games came with his distaste of “heavily-stage managed” video games, or games in which the player is merely following a one-way path created by its designers. What I admire about both of these projects is its aesthetic consistency despite the nature of variables being generated.

alchan-Looking Outwards 02

Proteus is a video game developed by Ed Key, released in 2013. Players can wander around a colorful, pixelated, procedurally-generated island filled with plants, strange animals, and the occasional remnant of civilization. The game’s soundtrack, composed by David Kanaga, also changes depending on the time of day and where the player is standing. I couldn’t find too much about the algorithms behind the game, but from playing the game there’s a certain amount of features (such as plants, animals, or structures) that can be randomly generated around the island, depending on the island’s “season.” The island’s topography and weather also are randomly generated. All this works together to create a strange, peaceful space that’s different every time the player visits it.

Even though there’s not much gameplay in the “traditional” sense–all you can do is walk around, listen to music, and take screenshots of the places you encounter–and what gameplay there is is fairly limited, Proteus has a vague, dream-like feel to it that I really enjoy. I also admire the way Key has created a world with a specific feel to it, despite or perhaps working along with the purposefully low-resolution graphics.

Proteus by Ed Key and David Kanaga


‘A Night of Spiritual Jazz’ Installation – The Mill X Red Bull Music Academy


Visuals from the Cosmograph and Bloom were projected on a display of strings.

Music is a magnificent part of all of our lives. Wherever you go, you can hear music. But what if you could see the music, instead of listening? The Mill created an experimental installation that combined a live liquid paint show with generative art software, called Cosmograph and Bloom, led by multiple jazz band’s audio. As jazz bands played, a live painter was behind the scenes creating a color palette for the software by using different kinds of liquid media. The software would then capture this visual and generate it into visuals alongside the audio inputs from the jazz bands.

Example of a visual created by Cosmograph.

I especially admired this installation because of how it combines different types of art with technical software to produce a more unique and possibly beautiful visual. Both music and fine art can be intertwined thanks to the technical software. It also made me think about how possibly deaf people who have never heard music or any kind of sound can be given the chance to experience the beauty of music through visuals. Just like the creator, Rama Allen, states, the visuals represent the “puffy eruptions of the caterpillar from Alice in Wonderland”, which he claims was part of his inspiration.

Behind the scenes of the visual creations.