Month: September 2016

Hannah K-Looking Outwards-02

This piece is called Possible, Plausible, Potential and was created by Miguel Nóbrega in March 2015. I was drawn towards this piece because while it initially seems very simple, the truth is that there is much complexity and uniqueness in this piece.

Although the creator relied on the use of algorithms to create this piece of work, there is still an element of randomness that allows for variation within the results. The code works by randomly generating new properties and arrangements of structure every time it runs.

I personally thought that it was very interesting that this work was done with markers, especially because the final result lends an air of sophistication that I do not personally associate with coloring markers. This work is quite figurative too, since the images generated by Nóbrega are not architecture blueprints even though they give off that kind of impression. More of Miguel Nóbrega’s work can be found here.

Soyun Kim – Looking Outwards – 02

I was intrigued by the Aaron Koblin and Janet Echelman’s collaboration, “Unnumbered Sparks”. Janet Echelman created a large soft sculpture made out of fiber and Koblin and his team created a system where people can “draw” and “paint” on Echelman’s sculpture. Using python, WebGL, Chrome and more, they were able to let people connect to their specific wifi near the sculpture and interactively create a digital mark and generate sounds by using their phone. Both artists believed that it was the public who created and finished the art work, not them and was aiming for an essentially a large scale collaboration with people. They broke people from their usual routine with their phone and invited them to participate in their art work.

From this project, I was able to physically see the creative side of coding. The process of creating the fiber sculpture was obviously a creative act but considering such curved and unique sculpture as an aerial canvas and creating a moment where people can interact with each other was something I  have never heard or seen before. Another thing which I have never heard of before is called WebGL. After a brief research, I learned that WebGL is a ‘web technology that bring hardware 3D graphics to the browser without installing additional software’ and ability for ultra fast graphic processing.

After seeing what they have done, collaboration between technology and art seems almost vital in our time and limitless.

https://www.youtube.com/watch?v=6JGzPLZrVFU

screen-shot-2016-09-09-at-6-07-55-pmscreen-shot-2016-09-09-at-6-08-29-pm

mreyes-looking outward-02

Ralf Baecker, Irrational Computing, 2011

What I admire most about this project is the atmosphere it projects through the composition of the sound. Each module has a distinct and almost haunting sound. Some are semi nostalgic of old dial up computers while other are cringing popping and scraping sounds and some are a mix of both. All the modules are working together not only as signal processor, but also as some sort of nightmarish symphony.

The video goes into more detail, but the entire system of modules is a mix of electical parts a raw elements such as crystals, salt, and iron. The system together makes signal processor in a way that is basically alchemic. Beaker’s manages to make It feels primitive even though the science behind it is actually very advanced.

Project2-Variable-Face

sketch

//color
var colorA=255;
var colorB=240;
var colorC=178;
var skinA=242;
var eyeballcolorA=35;
var eyeballcolorB=39;
//size
var earsize=50;
var eyesize=88;
var nosesize=18;
var facesizeY=344;
var facesizeX=310;
//XY
var earY=276;
var eyeballLX=227;
var eyeballRX=eyeballLX+140;
var eyeballY=230;
var noseX=312;
var noseY=294;
var mouseLX=263;
var mouseLY=357;
var mouseRX=350;
var mouseRY=337;

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

function draw() {
    background(180);

    //hair   
    fill(colorA,colorB,colorC);
    noStroke();
    arc(320,254,420,425,2*PI,2*PI);

    //ears
    fill(247,skinA,216);
    ellipse(163,earY,earsize,earsize);
    ellipse(462,earY,earsize,earsize);

    //neck
    rect(245,369,140,155);

    //face
    stroke(220);
    strokeWeight(3);
    ellipse(312,260,facesizeX,facesizeY);

    //eyes
    fill(255);
    stroke(1);
    strokeWeight(2);
    ellipse(237,243,61,eyesize);
    ellipse(377,243,61,eyesize);

    //eyeballs
    fill(58,eyeballcolorB,eyeballcolorA);
    stroke(1);
    ellipse(eyeballLX,eyeballY,33,48);
    ellipse(eyeballRX,eyeballY,33,48);

    //nose
    noFill();
    stroke(1);
    ellipse(noseX,noseY,nosesize,nosesize);

    //mouse
    stroke(1);
    line(mouseLX,mouseLY,mouseRX,mouseRY);

    //hairban
    fill(colorA,colorB,colorC);
    noStroke();
    ellipse(396,125,150,75);

    //brows
    noFill();
    stroke(1);
    //browLeft
    beginShape();
    curveVertex(218,164);
    curveVertex(238,165);
    curveVertex(250,168);
    curveVertex(261,176);
    curveVertex(280,199);
    endShape();
    //browRight
    beginShape();
    curveVertex(350,193);
    curveVertex(351,190);
    curveVertex(354,184);
    curveVertex(364,176);
    curveVertex(375,171);
    curveVertex(403,167);
    endShape();
}

function mousePressed() {
	//color
	colorA = random(0,255);
	colorB = random(220,240);
	colorC = random(160,200);
	skinA = random(221,242);
	eyeballcolorA=random(0,255);
	eyeballcolorB=random(0,255);
	//size
	earsize = random(50,70);
	eyesize = random(80,120);
	nosesize=random(15,25);
	facesizeY=random(320,360);
	facesizeX=random(270,330);
	//XY
	earY = random(250,285);
	eyeballLX=random(227,250);
	eyeballRX=eyeballLX+140;
	eyeballY=random(230,250);
	mouseLX=random(265,290);
	mouseLY=random(340,365);
	mouseRX=random(340,360);
	mouseRY=random(325,360);
}

I used simple geometries to create this face. Hair colour, eye size, eyeball colour and size, mouth, nose and ears are set random each time mouse is clicked.

PROJECT-02-VARIABLE-FACE

sketch

var eyeSize = 20;
var faceWidth = 200;
var faceHeight = 300;
var BrowW = 30;
var BrowH = 5;
var MouthWidth = 60;
var MouthHeight = 5;
var AntW = 5;
var AntH = 100;
var AntB = 20
var cheek = 20
function setup() {
    createCanvas(480, 640);
}

function draw() {
    background(150,200,255);
    // Ears
    fill(255,120,160);
    ellipse(width/2,height/2,faceWidth*1.3,faceHeight/3);
    // Antenna
    fill(200,90,230);
    rect(width/2-5,110,AntW,AntH);
    // Antenna Ball
    fill(180,180,255);
    ellipse(width/2,105,AntB,AntB);
    // Head
    fill(255,120,160);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);
    var eyeLX = width / 2 - faceWidth * 0.35;
    var eyeRX = width / 2 + faceWidth * 0.25;
    // Left Cheek
    fill(255,140,140);
    ellipse(width-310,height-300,cheek,cheek);
    // Right Cheek
    fill(255,140,140);
    ellipse(width-190,height-300,cheek,cheek);
    // Two Eyes
    fill(255,255,255);
    ellipse(eyeLX, height / 2, eyeSize, 10);
    fill(255,255,255);
    ellipse(eyeRX, height / 2, eyeSize, 10);
    //  Two Pupils
    fill(0);
    ellipse(eyeLX,height/2,5,10);
    fill(0);
    ellipse(eyeRX,height/2,5,10);
    // Eyebrows:
    // Left Eyebrow
    fill(200,100,130);
    rect(eyeLX/1.01,height/2.2,BrowW,BrowH);
    // Right Eyebrow
    fill(200,100,130);
    rect(eyeRX/1.11,height/2.2,BrowW,BrowH);
    // Mouth
    fill(200,90,230);
    rect(width/2.3,height/1.8,MouthWidth,MouthHeight);
    
    



}

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(150, 250);
    faceHeight = random(200, 380);
    eyeSize = random(40, 70);
    BrowW = random(30,35);
    BrowH = random(5,10);
    MouthHeight = random(5,8);
    MouthWidth = random(50,70);
    AntW = random(5,10);
    AntH = random(300,300);
    AntB = random(30,50);
    cheek = random(30,50);
}

Rather than making a human, I decided to make an alien (hence the antenna).I tried to not make it boring which is why I didn’t use regular skin tones.The hardest part was getting the facial features to actually stay on the head when it started randomizing, because they kept flying all over the place.

DeniseJiang-LookingOutwards-02

I looked into artist Lia’s generative artwork on Flickr. I think she might start this drawing with lines that have thick line weights created by hatching. After arrayed several series of these lines, she might distort and bend (like these commands in Rhino), these lines to achieve visual illusion. Her work is also artistic in a way these lines create volumes and spaces. By placing series of lines together, surfaces are formed. The drawing has tight and loose parts, and the dramatic acute-angled curves bring contrast and depth. I also discovered that the hatching components of the lines differ as it moves from the tight parts to the loose parts. The asymmetrical yet symmetrical-in-part composition creates movement for this artwork, allowing audience to follow the flow of the surfaces. Her idea of creating dynamic moves by repetition corresponds to her algorithm, making it a piece of “smart” art.

Lia’s Webstie
29039805975_8c95316a4a_b
04-Untitled 20160816

Kyle Lee Variable Face

The biggest challenge for me was properly sorting the local variables, global variables, and mouse pressed function. I felt good about the lines of code that I wrote, but it took me a long time of moving the lines to different locations in the code to finally get the result I wanted.

kdlee-project-02

var faceWidth = 100;
var faceHeight = 150;
var mouthWidth = 50;
var mouthHeight = 20;
var eyeSize = 20;
var eyeLidWidth = 10;
var eyeLidHeight = 2;
var irisColor = '#A46861';
var colors = ['#A46861', '#8CAEDC', '#A9BD8C'];

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

function draw() {
    background('#5D8FA4');
    noStroke();

//HEAD
    fill('#F2C4A2');//SKIN TONE
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);//HEAD
//MOUTH
    fill(0);//BLACK
    ellipse(width / 2, height / 2 + faceHeight / 4, mouthWidth, mouthHeight);//MOUTH

//EYE WHITES
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    fill(250);//WHITE
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);//LEFT EYE
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);//RIGHT EYE
//EYE IRIS
    var eyeIris = 9;
    fill(irisColor);//IRIS COLOR
    ellipse(eyeLX, height / 2, eyeIris, eyeIris);//LEFT IRIS
    ellipse(eyeRX, height / 2, eyeIris, eyeIris);//RIGHT IRIS
//EYE PUPIL
    var eyeP = 5;
    fill(0);//BLACK
    ellipse(eyeLX, height / 2, eyeP, eyeP);//LEFT PUPIL
    ellipse(eyeRX, height / 2, eyeP, eyeP);//RIGHT PUPIL
//EYELIDS
    var eyeLidY = height / 2 - eyeSize
    noFill();
    stroke(1);
    strokeWeight(2);
    arc(eyeLX, eyeLidY, eyeLidWidth, eyeLidHeight, PI, 0);//LEFT EYELID
    arc(eyeRX, eyeLidY, eyeLidWidth, eyeLidHeight, PI, 0);//RIGHT EYELID
}

function mousePressed() {
    faceWidth = random(75, 150);
    faceHeight = random(100, 200);
    mouthWidth = random(50, 30);
    mouthHeight = random(30, 5);
    eyeSize = random(10, 30);
    eyeP = random (5, eyeSize - 10);// Pupil
    eyeIris = (eyeSize - eyeP) / 2; //Iris size
    eyeLidWidth = random(12, 7);
    eyeLidHeight = random(7, 0);
    irisColor = random(colors);
}

Project-02-Charlie Mo

sketch

var eyeHeight=15;
var eyeWidth=55;
var noseSize=6;
var browHeight1=2;
var browHeight2=2;
var faceWidth=200;
var faceHeight=250;
var ballSize=10;
var mouthLength=40;




function setup() {
    createCanvas(480, 640);
    background(253,255,75);
    
}

function draw() {

	//face
	fill(255);
	ellipse(width/2,height/2,faceWidth,faceHeight);

	//eye
	var eyeLX= width/2-faceWidth*0.3;
	var eyeLY= height/2+faceHeight*0.1;
	var eyeRX= width/2+faceWidth*0.2;
	var eyeRY= height/2+faceHeight*0.1;
	fill(255);
	ellipse(eyeLX,eyeLY,eyeWidth,eyeHeight);
	ellipse(eyeRX,eyeRY,eyeWidth,eyeHeight);

	//eyeballs
	fill(0);
	ellipse(eyeLX,eyeLY,ballSize,ballSize);
	ellipse(eyeRX,eyeRY,ballSize,ballSize);

	//nose
	var noseLX= width/2-faceWidth*0.08;
	var noseLY= height/2+faceHeight*0.2;
	var noseRX= width/2+faceWidth*0.000000000001;
	var noseRY= height/2+faceHeight*0.2;
	fill(0);
	ellipse(noseLX,noseLY,noseSize,noseSize);
	ellipse(noseRX,noseRY,noseSize,noseSize);

	//brow
	var browLX= width/2-faceWidth*0.45;
	var browLY= height/2+faceHeight*0.01;
	var browRX= width/2+faceWidth*0.1;
	var browRY= height/2+faceHeight*0.01;
	fill(0);
	rect(browLX,browLY,50,browHeight1);
	rect(browRX,browRY,50,browHeight2);

	//mouth
	var mouthX= width/2-faceWidth*0.08;
	var mouthY= height/2+faceHeight*0.27;
	rect(mouthX,mouthY,15,mouthLength);

}

function mousePressed() {
    //change nostril size
    noseSize = random(6,12);

    //change pupil size
    ballSize = random(2,12);

    //change mouth size
    mouthLength = random(10, 55);
}

mdambruc-Project-02-Variable-Face

project-02-variable-face

//Mairead Dambruch
//mdambruc@andrew.cmu.edu
//Section C
//Project-02-Variable-Face.js

var faceWidth = 300;
var faceHeight = 180;
var mouthWidth = 30;
var eyebrowHeightL = 209;
var tongueHeight = 50;
var pupilcolor = 0

function setup() {
    createCanvas(640, 480);
}
function draw() {
    background(153, 196, 178);
    fill (234, 255, 16);
    rect(width / 4, height / 3, faceWidth,  faceHeight);//face

    fill(255);
    var eyeLX = width / 1.5 - faceWidth * 0.5;
    var eyeRX = width / 3 + faceWidth * 0.5;
    ellipse(eyeLX, height / 2, 50, 50);
    ellipse(eyeRX, height / 2, 50, 50);//eyes

    fill(pupilcolor);
    var pupilsize = 25;
    var pupilLX = eyeLX;//aligned with eyes
    var pupilRX = eyeRX;
    ellipse(pupilLX, height / 2, pupilsize, pupilsize); //left pupil
    ellipse(pupilRX, height/ 2, pupilsize, pupilsize); //right pupil

    fill(234, 142, 142);
    arc(width / 2, (height / 2) + 40, mouthWidth, 30, 0, PI); //mouth

    fill(255, 0, 95);
    arc(width/2, (height / 2)+ 40, 15, tongueHeight, 0, PI); // tongue

    fill(0);
    ellipse(308, 272, 20, 5);
    ellipse(330, 272, 20, 5);//mustache

    fill(0);
    line(258, eyebrowHeightL, 299, eyebrowHeightL);// left eyebrow
    line(345, 212, 387, 212);//right eyebrow

    fill(108, 84, 28);
    beginShape();
    curveVertex(267, 148);
    curveVertex(299, 161);
    curveVertex(374, 160);
    curveVertex(386, 150);
    curveVertex(363, 145);
    curveVertex(355, 116);
    curveVertex(344, 110);
    curveVertex(326, 118);
    curveVertex(317, 110);
    curveVertex(302, 108);
    curveVertex(292, 143);
    curveVertex(272, 146);
    curveVertex(268, 154);
    curveVertex(267, 148);
    endShape();//fedora

}

function mousePressed() {
    mouthWidth = random (10, 70);//changes width of mouth
    eyebrowHeightL = random(190, 212);//changes height of left eyebrow
    tongueHeight = random(10, 100);//changes how long the tongue is
    pupilcolor = random (0, 255);//changes pupil color

}

I call him “Le Provocateur”, because the features that change when clicked make him a bit provocative. In my process I struggled with aligning all of the features and using more efficient shortcuts. However, I’ve gotten a lot more comfortable with the program.

Andrew-Project02-VariableFaces

sketch

// Simple beginning template for variable face.
var eyeSize = 20;
var eyeInside = 10;
var faceWidth = 100;
var faceHeight = 150;
var earWidth = 5;
var earHeight = 20;
var noseBridge = 15;
var hairType = 3;
var colorR = 180;
var colorG = 180;
var colorB = 180;
var colorR2 = 200;
var colorG2 = 200;
var colorB2 = 200;
var mouthWidth = 20;
var mouthHeight = 5;
var mouthPosition = 4;
var eyeBrow = 1;

function setup() {
    createCanvas(300, 300);
}
function draw() {
    background(colorR, colorG, colorB);
      
    noStroke();
    fill(255);
    switch(hairType) {
        case 1:
            fill(colorR2, colorG2, colorB2);
            ellipse(width/2, height/2+faceHeight/6, faceWidth+30, faceHeight+80);
            break;
        case 2:
            fill(color(colorR2, colorG2, colorB2));
            rectMode(CENTER);
            rect(150, 150-faceHeight/2.5, faceWidth-20, faceHeight/6,80);
            rect(150, 150-faceHeight/2.5, faceWidth-50, faceHeight/2,90);
            break;
        default:
            strokeWeight(10);
            stroke(color(colorR2, colorG2, colorB2));
            arc(150, 150, faceWidth, faceHeight, PI, 0);
    }
    fill(255);
    strokeWeight(1);
    noStroke();
    //face
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);

    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    var earLX = width / 2 - faceWidth / 2;
    var earRX = width / 2 + faceWidth / 2;
    var mouthY = height / 2 + faceWidth / mouthPosition;
    noStroke();
    //ear
    ellipse(earLX, height / 2, earWidth, earHeight);
    ellipse(earRX, height / 2, earWidth, earHeight);
    fill(colorR, colorG, colorB);
    //eye
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);
    fill(255);
    ellipse(eyeLX, height / 2, eyeInside, eyeInside);
    ellipse(eyeRX, height / 2, eyeInside, eyeInside);
    fill(colorR, colorG, colorB);
    //nose
    stroke(color(colorR, colorG, colorB));
    line(150,160,150,150+noseBridge);
    //mouth
    ellipse(width / 2, mouthY, mouthWidth, mouthHeight);
    //neck
    rectMode(CENTER);
    fill(255);
    noStroke();
    rect(150, 150+faceHeight/2,25,30);
    //eyebrows
    switch(eyeBrow) {
        case 1:
            noFill();
            stroke(color(colorR, colorG, colorB));
            arc(eyeLX, eyeRX-40, 30, 30, PI, 0);
            arc(eyeRX, eyeRX-40, 30, 30, PI, 0);
            break;
        case 2:
            noFill();
            stroke(color(colorR, colorG, colorB));
            strokeWeight(4);
            line(eyeLX-10, eyeRX-50, eyeLX+10,eyeRX-50);
            line(eyeRX-10, eyeRX-50, eyeRX+10,eyeRX-50);
            break;
        default:
            noFill();
            stroke(color(colorR, colorG, colorB));
            arc(eyeLX-10, eyeRX-faceHeight/2, 40, 20, 0, HALF_PI);
            arc(eyeRX+10, eyeRX-faceHeight/2, 40, 20, HALF_PI, PI);
    }
    if (hairType == 1) {
        noStroke();
        fill(colorR2, colorG2, colorB2);
        arc(150, 150-faceHeight/4, faceWidth/1.1, faceHeight/1.9, PI, 0);
    }
}
 
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.
    colorRandomizer();
    colorRandomizer2();
    faceWidth = random(75, 150);
    faceHeight = random(100, 200);
    eyeSize = random(10, 30);
    earWidth = random(5, 15);
    earHeight = random(15, 30);
    hairType = floor(random(1, 4));
    mouthPosition = random(2, 5);
    mouthWidth = random(10, 30);
    mouthHeight = random(1, 5);
    noseBridge = random(5,20);
    eyeInside = random(5,10);
    eyeBrow = floor(random(1,4));
}
function colorRandomizer() {
    colorR = random(0, 250);
    colorG = random(0, 250);
    colorB = random(0, 250);
}
function colorRandomizer2() {
    colorR2 = random(0, 250);
    colorG2 = random(0, 250);
    colorB2 = random(0, 250);
}

I tried changing the eyebrows and hairstyles in this project as I think eyebrows are the easiest way to express different emotions, and hairstyles can make the individual look drastically different. Other than that I changed the variable and position of the mouth, nose, eyes, and ears to represent differences.