Category: Section A

hschung-LookingOutwards-02

I looked at the generative artwork of Tina Frank, specifically a performance she did live in Basel, on September 12, 2015. The performance consisted of a constantly changing background accompanying rather abstract, synth-electronic-like music. According to Frank’s website, all the images were created live by using audio frequencies played through a synchronator. The music she was creating was fed into a computer, which then made visuals in the form of a digital video, which was projected.
I think the beauty of this project is that it creates many works of ephemeral art, and that it uses technology so creatively. Looking at the wildly contrasting pictures of the projected video makes me reflect on how each moment a person experiences this performance is so unique and isn’t repeated again. The fluctuations of the sounds and sights mix to make a constantly changing piece of art. I think it’s impressive and an interesting contrast to typical, “classic” art, such as paintings or drama plays.

(I tried to embed the video, but they have restricting permissions, so I was unable to do so.)
http://www.tinafrank.net/audiovisual-art/av-performance-coh-frank/

COH & FRANK, live at HeK, Basel from Tina Frank on Vimeo.

hdw – Project 2 – Variable Face

sketch

var picker = 1
var types = [1, 2, 3, 4, 5];
var backgroundR = 255
var backgroundG = 255
var backgroundB = 255

function setup() {
    createCanvas(500, 500);
    angleMode(DEGREES);
}

function draw(){
    background(255);
    fill(backgroundR-30,backgroundG-30,backgroundB,100);
    noStroke();
    rect(0,0,height,width);

  var head = width * 2/5;
  var eyes = width * 1/10;
  var lips = width * 1/30;

  //shadow
  noStroke();
  fill(backgroundR+10,backgroundG+10,backgroundB+10);
  ellipse(width*.4,height*.6,head,head);


  if(picker == 1){
    //head
    fill(255);
    stroke(0);
    strokeWeight(10);
    ellipse(width*.5,height*.5,head,head);
    //eyes
    ellipse(width*2/5,height*.5,eyes,eyes);
    arc(width*3/5,height*.5,eyes,eyes,0,180);
    //lips
    noStroke();
    fill(255,0,0);
    ellipse(width*.5,height*.6,lips,lips);
    ellipse(width*.5,height*.6+lips,lips,lips);
    }

  if (picker == 2){
    //head
    fill(255);
    stroke(0);
    strokeWeight(10);
    ellipse(width*.5,height*.5,head,head);
    //eyes
    arc(width*2/5,height*.5,eyes,eyes,340,160);
    arc(width*3/5,height*.5,eyes,eyes,340,160);
    //lips
    noStroke();
    fill(255,0,0);
    ellipse(width*.5+5,height*.6+1+10,.7*lips,.7*lips);
    ellipse(width*.5,height*.6+lips*.7*.5+lips*.5+10,lips,lips);
    }

  if (picker == 3){
    //head
    fill(255);
    stroke(0);
    strokeWeight(10);
    ellipse(width*.5,height*.5,head,head);
    //eyes
    arc(width*2/5,height*.5,eyes,eyes,20,200);
    arc(width*3/5,height*.5,eyes,eyes,20,200);
    //lips
    stroke(250,0,0);
    arc(width*.5-5,height*.6+10,lips,lips,210,60);
    }

  if (picker == 4){
    //head
    fill(255);
    stroke(0);
    strokeWeight(10);
    ellipse(width*.5,height*.5,head,head);
    //eyes
    arc(width*2/5,height*.5,eyes,eyes,180,0);
    arc(width*3/5,height*.5,eyes,eyes,180,0);
    //lips
    noFill();
    stroke(255,0,0);
    strokeWeight(10);
    arc(width*.5,height*.6,2*lips,2*lips,0,180);
    //ellipse(width*.5,height*.6+lips,lips,lips);
  }

  if(picker == 5){
    //head
    fill(255);
    stroke(0);
    strokeWeight(10);
    ellipse(width*.5,height*.5,head,head);
    //eyes
    ellipse(width*2/5,height*.5,eyes,eyes);
    ellipse(width*3/5,height*.5,eyes,eyes);
    //lips
    stroke(255,0,0);
    strokeWeight(10);
    noFill();
    ellipse(width*.5,height*.6+.5*lips,lips,lips);
    }

  //blush
  fill(255,backgroundG,backgroundB);
  noStroke();
  ellipse(width*2/5,height*.6, 2*lips, 2*lips);
  ellipse(width*3/5,height*.6, 2*lips, 2*lips);
}

function mousePressed(){
    picker = random(types);
    backgroundR = random(0,250);
    backgroundG = random(0,250);
    backgroundB = random(0,250);
}

Process:

Made some initial concept sketches. Used mmiller5’s project 02 as a reference for the use of variables and commands of the five fixed variable faces. Stella Han helped me figure out where to put the variables for var types and var picker, because I initially posted them in the draw function and not as a global variable. Soonho Kwon helped me figure out how to get the background and shadow opacity to behave. Initially the shadow didn’t show up because I had it set to a variable opacity in the same colors as the background. I reversed the opacity so that the background had less intensity and created a white filler first so the color would show.

akluk – Section A – Looking outwards-02

The project that I decided to tackle is Weird Faces by Moka(or Matthias Dorfelt), from 2012-2013.

It is a project that is aimed towards creating a program/algorithm that generates various and unique faces. What I admire about this project is the ability that is make it so natural. I always expected a computer generated face to be very structured, exact, and calculated, kinda mechanic. However the creator was able to create an method to create very random and organic drawings. If I were simply shown the images, and not know it was a computer program, I would have thought an actual artist drew it.

The creator did not disclose what algorithm was used, but it was most likely a improved randomizer for the face shape, eyes, cheeks, mouth, nose and colors.

The creator’s artistic style seems to be quick similar. It usually uses very simple designs and looks quite abstract. It looks simply and random, however the general structure and object that the creator is still trying to describe is still evident and clear.

mmirho – Looking outwards – Section A

“Fractal Effervescence,” by David April, is a project that has impressed me greatly. The image, which I will add here, is a computer generated fractal, an image or figure that is constructed of many parts, and each part is exactly the same as the entire figure. In a sense, if you look closely at any piece of the figure in the image, you will find its the same image, just smaller.

The program used to generate this kind of art is based on recursion, which I hope to learn more about within this course. Recursion is a type of programming that makes the entire function into a loop, in a way, allowing the function to call itself to process the information given.

I’m unsure of the date of this art, though I do know it was created by David April, and the title is “Fractal Effervescence”. The artist is very interested in the concept of fractals and works to find new forms.

mmirho – Project 2 – Section A

I kept the structure of the face very similar to the original template because I thought it allowed me to experiment the most with the code and variation without worrying too much about the physical appeal

I was able to create a large amount of variation as a result, although the face is quite simple.

SORRY!
I’m really sorry, but would it be alright would it be alright if you let my incompetence slide this time. I followed the embedding instructions to the tee, and even compared it with my old post (Which I put below for reference) but my program still won’t show up. I would love it if you could take the time to paste my code into your own text editor, I assure you it works fine, the only thing that got hung up was my embedding.

I would love to schedule some office hours on this topic because it’s clear I’m missing something. Thanks! I hope I won’t get points off. I would appreciate a comment on my post or an email if you want to talk about it.

Max’s Face

function setup() {
    createCanvas(640, 480);
    mouth2 = PI - 0.2;
}
var leftEyeSize = 20;
var rightEyeSize = 20;
var faceWidth = 100;
var faceHeight = 150;
var noseHeight = 15;
var noseLength = 10;
var mouthHeight = 15;
var mouthLength = 10;
var mouthType = 5;
var pupilH = 1;
var pupilV = 1;
var mouth1 = 0.2;
var mouth2 = 3; // fix above to PI - 0.2;
var mouthFlat = 2*mouthHeight;
var moveUp = 0;
var moveNoseUp = 0;
function draw() {
    background(180);
    fill(250);
    fill(230, 200, 255);
    ellipse(width/2, height/2, faceWidth, faceHeight);
    var heightOrientation = height/2 + faceHeight/10;
    arc(width/2, heightOrientation + faceHeight/3.5 - moveUp, 2*mouthLength, mouthFlat, mouth1, mouth2);
    fill(230, 200, 255);
    arc(width/2 + noseLength, heightOrientation - moveNoseUp, 2*noseLength, 2*noseHeight, HALF_PI, PI);
    fill(250);
    line(width/2, heightOrientation + noseHeight - moveNoseUp, width/2 + noseLength, heightOrientation + noseHeight - moveNoseUp);
    var eyeLeftOri = width / 2 - faceWidth * 0.25;
    var eyeRightOri = width / 2 + faceWidth * 0.25;
    ellipse(eyeLeftOri, height/2, leftEyeSize, leftEyeSize);
    ellipse(eyeRightOri, height/2, rightEyeSize, rightEyeSize);
    ellipse(eyeLeftOri + pupilH, height/2 + pupilV, leftEyeSize/3, leftEyeSize/3);
    ellipse(eyeRightOri + pupilH, height/2 + pupilV, rightEyeSize/3, rightEyeSize/3);
    
}
function mousePressed() {
    eyeLeftOri = width/2 - faceWidth*1/random(3,6);
    eyeRightOri = width/2 + faceWidth*1/random(3,6);
    pupilH = random(-5, 5);
    pupilV = random(-5, 5);
    faceWidth = random(75, 150);
    faceHeight = random(100, 200);
    leftEyeSize = random(20, 30);
    noseHeight = random(8, 25);
    noseLength = random(5,10);
    mouthHeight = random(10, 15);
    mouthLength = random(10, 20);

    randomEye = random(1,40);
    if(randomEye < 5) {
        rightEyeSize = random(20,30);
    }
    else {
        rightEyeSize = leftEyeSize;
    }

    mouthType = random(0,100);
    if(mouthType < 40) {
        mouth1 = 0.2;
        mouth2 = (PI-0.2);
        mouthFlat = 2*mouthHeight;
        moveUp = 20;
    }
    else if (mouthType > 60) {
        mouth1 = (PI+0.2);
        mouth2 = -0.2;
        mouthFlat = 2*mouthHeight;
        moveUp = 0;
        moveNoseUp = 15;
    }
    else {
        mouth1 = 0.2;
        mouth2 = PI-0.2;
        mouthFlat = 1;
        moveUp = 0;
    }
}

Face

function setup() {
    createCanvas(500, 500);
    background(250, 250, 250);
}

function draw() {

    fill(255, 224, 189); //skin color
    noStroke();

    //Head
    rectMode(CENTER);
    ellipse(width/2, (height/2), 140, 160);

    //Cut off the top of head
    fill(250);
    rect(width/2, (height/2)-150, 140, 160); 
    fill(255,224,189);

    //Ears
    arc((width/2)-50,(height/2),60,50,3*PI/2+PI,3*PI/2,OPEN);
    arc((width/2)+50,(height/2),60,50,3*PI/2,3*PI/2,OPEN);

    //Mouth
    stroke(0);
    line(250, 310, 220, 300);
    noStroke();

    //Nose
    fill(0);
    triangle(250, 255, 265, 285, 250, 285);
    fill(255, 224, 189);
    triangle(247, 253, 262, 283, 247, 283);

    //Hair
    fill(255, 226, 60);
    triangle(237, 195, 197, 195, 240, 155);
    triangle(257, 195, 217, 195, 260, 155);
    triangle(277, 195, 237, 195, 280, 155);
    triangle(297, 195, 257, 195, 300, 155);

    //Eyes
    fill(0);
    stroke(0);
    strokeWeight(3);
    fill(255);
    ellipse((width/2)+30, (height/2)-10, 25, 15);
    ellipse((width/2)-30, (height/2)-10, 25, 15);

    //Irises
    fill(0,0,200); 
    stroke(0);
    ellipse((width/2)+32, (height/2)-10, 12, 14);
    ellipse((width/2)-28, (height/2)-10, 12, 14);

    //Pupils
    noStroke(); 
    fill(0);
    ellipse((width/2)+32, (height/2)-10, 5, 5);
    ellipse((width/2)-28, (height/2)-10, 5, 5);


}

jknip-Project-02-variable-face

sketch.js

/*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.

amui1-LookingOutwards-02

For this Looking Outwards, I was inspired by this project called “Human After All,” created by a photographer, Jan Kriwol, and a digital artist, Markos Kay. This generative art piece showcased 3D renderings of virtual blood vessels with particle simulations. They stripped down the human body to just the essentials, and placed them in the context of everyday situations. This project aimed to battle social barriers, caused by race or gender, in various environmental contexts.

I really admire this project because of its creative collaboration of 2 mediums and because of the message the artists work to convey. I admire this project because it is completely new and not like anything I have seen before. Also, this combination of digital and real is extremely creative, and I aspire to create something one day that does the same. “Human After All” inspires me because the artists use such a creative way to demonstrate equality.

Link to full project here

 

hschung-Project-02

sketch

//Heidi Chung
//Section A
//hschung@andrew.cmu.edu
//Project-02: Variable Faces; Face Variables
var eyeWidth = 22;
var eyeHeight = 22;
var mouthSize = 40;

var cheekR = 234;
var cheekG = 175;
var cheekB = 152;
var cheekWidth = 60;
var cheekHeight = 60;

var hairR = 76;
var hairG = 54;
var hairB = 36;

var eyebrowWidth = 40;
var eyebrowHeight = 10;
//var leftBrowX = 253;
var BrowY = 210;
//var rightBrowX = 347;
var BrowY = 210;

function setup() {
	 createCanvas(640,480);
	 background(145, 193, 191);

	 noStroke();
	}

function draw() {
	 fill(hairR-30, hairG-30, hairB-50); //background hair //fill(31, 34, 13);
	 quad(200, 195,  400, 185,  425, 375,  180, 375);

	 fill(234, 178, 117); //neck
	 rect(263, 380, 78, 78);

	 fill(235, 207, 155); //face
	 ellipse(300, 260, 210, 260);

	 fill(200, 125, 95); //mouth
	 ellipse(600/2, 600/2 +10, 60, mouthSize);

	 fill(235, 207, 155);//eclipse over mouth
	 rect(600/2 -40, 600/2 -75, 70, 85);


	 fill(cheekR, cheekG, cheekB); //left blush //fill(234, 175, 152);
	 ellipse(235, 265, cheekWidth, cheekHeight); //ellipse(235, 265, 60, 60);

	 fill(cheekR, cheekG, cheekB); //right blush
	 ellipse(365, 265, cheekWidth, cheekHeight);

	  fill(61, 44, 23); //left eye
	 ellipse(250, 240, eyeWidth, eyeHeight);

	 fill(61, 44, 23); //right eye
	 ellipse(350, 240, eyeWidth, eyeHeight);

	 fill(hairR-20, hairG-10, hairB-20); //left eyebrow // ellipse(253, 210, 40, 10)
	 ellipse(253, BrowY, eyebrowWidth, eyebrowHeight); //ellipse(253, 210, width, height)

	  fill(hairR-20, hairG-10, hairB-20); //right eyebrow
	 ellipse(347, BrowY, eyebrowWidth, eyebrowHeight); //ellipse(347, 210, width, height)


	 fill(234, 178, 117); //nose
	 triangle(300, 267, 320, 290, 280, 290);

	 fill(hairR, hairG, hairB); //more hair// fill(76, 54, 36);
	 quad(222, 159,  345, 129,  420, 220,  391, 230);

	 fill(hairR, hairG, hairB); //more hair
	 quad(371, 398,  391, 228,  421, 219,  433, 340);

	 fill(hairR, hairG, hairB); //more hair
	 quad(215, 156,  183, 234,  206, 245,  247, 163);

	 fill(hairR, hairG, hairB); //more hair
	 quad(183, 234,  174, 345,  237, 400,  207, 244);

	 fill(hairR, hairG, hairB); // top part of hair
	 quad(216, 157,  275, 123,  377, 132,  420, 219);

	 fill(hairR, hairG, hairB);
	 triangle(183, 235,  207, 149,  275, 122);
	}
function mousePressed() {
	eyeWidth = random(20, 35);
	eyeHeight = random(15, 35);
	mouthSize = random(10, 85);
	cheekR = random(234, 274);
	cheekG = random(175, 195);
	cheekB = random(152, 172);
	hairR = random(50, 100);
	hairG = random(54, 80);
	hairB = random(36, 70);
	eyebrowWidth = random(35, 50);
	eyebrowHeight = random(10, 20);
	cheekWidth = random(50, 75);
	cheekHeight = random(50, 75);
	BrowY = random(210, 223);
	//leftBrowX = random (253, 263);
	//rightBrowX = random (347, 357);
	

}

I used my previous face from the self-portrait as a base. I did a sketch in Illustrator for that face to give me direction as I drew it in code.

It took me a couple times to get used to manipulating the different values as variables, but once I got the hang of a few variables, it was easier for me to think of other values to turn into variables. Rather than make completely different faces, I made my program create mildly different versions of my self portrait. If I changed the hair too, it’d be drastically different, but I like it this way.

ljkim – project 02

sketch

/*Lois Kim
Section A
ljkim@andrew.cmu.edu
Project-02*/

var helmetWidth = 323;
var helmetHeight = 323;
var shieldWidth = 275;
var shieldHeight = 275;
var shieldOHeight = 275;
var shieldOWidth = 275;
var faceWidth =  178;
var faceHeight = 183;

//stars in sky
var star = {
  x: 100,
  y: 50
}

//color of stars
var col = {
  r: 255,
  g: 255,
  b: 255
}

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

function draw() {
  //background color
  background("#495C7C");
  
  //random stars in background
  star.x = random(0,width);
  star.y = random(0,height);
  fill(col.r, col.g, col.b);
  noStroke();
  ellipse(star.x, star.y, 1, 1);
  
  //helmet
  fill("#B3B3B3");
  noStroke();
  ellipse(320, 240, helmetWidth, helmetHeight);
  
  //shield
  fill("#666666");
  noStroke();
  ellipse(320, 240, shieldWidth, shieldHeight);
  
  //shield outline
  stroke("#1A1A1A");
  strokeWeight(3);
  noFill();
  ellipse(310, 250,shieldOHeight, shieldOWidth);
  
  //antenna stick
  fill("#B3B3B3");
  noStroke();
  rect(297, 29, 7, 70);
  
  //antenna circle
  fill("#9E0421");
  noStroke();
  ellipse(300,25,25,25);
  
  //face
  fill("#EAD8A9");
  noStroke();
  ellipse(320, 250, faceWidth, faceHeight);
  
  //left eye
  fill("#333333");
  noStroke();
  ellipse(365,250,12,12);
  //right eye
  fill("#333333");
  noStroke();
  ellipse(275,250,12,12);
  
  //mouth
  fill("#B2542F");
  beginShape();
  curveVertex(292, 303);
  curveVertex(310, 311);
  curveVertex(326, 280);
  curveVertex(349, 314);
  curveVertex(356, 308);
  endShape();
  
}

function mousePressed() {
  helmetWidth = random (200, 400);
  helmetHeight = random (310, 400);
  shieldWidth = random (300, 290);
  shieldHeight = random (350, 240);
  shieldOHeight = random (200, 430);
  shieldOWidth = random (290, 300);
  faceWidth = random (150, 200);
  faceHeight = random (100, 200);
}

I wanted to do an astronaut as my project this week. I attempted to add a stars generator in the background (as seen in my code) – however it would not allow my random generator for the face to start fresh. It would over draw what was existing before. Although I had fixed that issue – the star generator had disappeared. This is what it looked like with the stars:

Before I begin any project I always start in adobe illustrator and this always helps visualize projects.

TSWARSTA- Section A- Project-02-Variable-Face

swarstad-face-sketch

// Treat Swarstad
// 15-104 A
//tswarsta@andrew.cmu.edu
//Project 02 -Variable -Face

var eyeSize = 100;
var faceWidth = 350;
var faceHeight = 350;
var mouthsize=100;
var cheek=50;

 
function setup() {
    createCanvas(640, 480);
}
 
function draw() {
	noStroke();
    background(0,255,255);
    fill(255,224,189);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    fill(250,128,114);
    var cheekY = height/2 + faceHeight/6; //so cheeks will not appear outside of the face
    ellipse(eyeLX, cheekY, cheek, cheek);
    ellipse(eyeRX, cheekY, cheek, cheek);
    fill(255,255,255);
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);
    fill(0,0,255);
    ellipse(eyeLX, height / 2, eyeSize/2, eyeSize/2);
    ellipse(eyeRX, height / 2, eyeSize/2, eyeSize/2);
    fill(0,0,0);
    ellipse(eyeLX, height / 2, eyeSize/4, eyeSize/4);
    ellipse(eyeRX, height / 2, eyeSize/4, eyeSize/4);
    fill(255,0,0);
    var mouthY = height/2+faceHeight*0.25; // so mouth will appear within the face
    ellipse(width/2, mouthY, mouthsize/2, mouthsize/2);
    fill(0,0,0);
    ellipse(width/2, mouthY, mouthsize/3, mouthsize/3);
    fill(0,255,0);


}
 
function mousePressed() {
    faceWidth = random(50, 500);
    faceHeight = random(50, 500);
    eyeSize = random(10, 120);
    mouthsize = random(50,150);
    cheek = random(25,75);
    clear();
}