September 2017 – Page 59 – [OLD FALL 2017] 15-104 • Introduction to Computing for Creative Practice

Jdrown – Looking Outward 2: Generative Type

Here is my Looking Outward for generative art.

I’m really interested in sound-based interfaces, and this is no exception. The on-screen printing is based on the sound produced by the computer, and the type weight is based off how heavy or light (read: textured) the sound is. There are a bunch of these on this guy’s YouTube page, and they all seem to have some sort of sound component. Looking forward, I think it would be really interesting if there were some kinda live version – like the real sounds of a place or an audience affected this drawing. Perhaps instead of a program, we had a laser cutter, who knows.

Josh

hannahk2-project-02

sketch

//Hannah Kim
//Section A
//hannahk2@andrew.cmu.edu
//Project-02

var eyeHeight = 40;
var eyeWidth = 42;
var pupil = 5;
var mouthHeight = 10;
var mouthWidth= 20;
var tentacleHeight= 10

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

function draw() {
//colors
background(210, 134, 136);
var bodyColor = color(188, 81, 81);
var darkestColor= color(62, 25, 26);
var tentacleColor= color(81, 40, 40);
var white= color(254, 218, 233);
var black= color(16, 0, 1);
    
noStroke();

//body curve
fill(bodyColor);
beginShape();
curveVertex(270, 600);
curveVertex(259, 300);
curveVertex(240, 136);
curveVertex(263, 71);
curveVertex(352, 54);
curveVertex(397, 98);
curveVertex(398, 142);
curveVertex(378, 262);
curveVertex(374, 700);
endShape();

//left tentacles
fill(tentacleColor)
ellipse(158, 348, 10, tentacleHeight);
ellipse(161, 330, 10, tentacleHeight);
ellipse(171, 314, 10, tentacleHeight);
ellipse(187, 308, 10, tentacleHeight);
ellipse(197, 286, 10, tentacleHeight);
ellipse(209, 273, 10, tentacleHeight);
ellipse(228, 273, 10, tentacleHeight);

//right tentacles
fill(tentacleColor)
ellipse(407, 276, 10, tentacleHeight);
ellipse(429, 281, 10, tentacleHeight);
ellipse(435, 276, 10, tentacleHeight);
ellipse(447, 298, 10, tentacleHeight);
ellipse(465, 312, 10, tentacleHeight);
ellipse(477, 338, 10, tentacleHeight);
ellipse(479, 363, 10, tentacleHeight);

//front 2 legs
fill(bodyColor);
beginShape();
curveVertex(259, 300);
curveVertex(259, 300);
curveVertex(279, 415);
curveVertex(274, 400);
curveVertex(275, 381);
curveVertex(272, 358);
curveVertex(246, 315);
curveVertex(244, 281);
curveVertex(317, 239);
curveVertex(389, 265);
curveVertex(391, 319);
curveVertex(373, 345);
curveVertex(365, 377);
curveVertex(363, 405);
curveVertex(357, 419);
curveVertex(348, 362);
curveVertex(365, 311);
curveVertex(318, 277);
curveVertex(276, 296);
curveVertex(280, 325);
curveVertex(288, 370);
curveVertex(283, 410);
curveVertex(280, 418);
curveVertex(276, 417);
endShape();

//left leg
fill(bodyColor);
beginShape();
curveVertex(400, 234);
curveVertex(265, 232);
curveVertex(204, 232);
curveVertex(180, 256);
curveVertex(166, 288);
curveVertex(152, 299);
curveVertex(142, 329);
curveVertex(156, 380);
curveVertex(157, 378);
curveVertex(160, 333);
curveVertex(175, 314);
curveVertex(198, 287);
curveVertex(222, 270);
curveVertex(262, 273);
curveVertex(400, 275);
endShape();

//right leg
fill(bodyColor);
beginShape();
curveVertex(300, 240);
curveVertex(372, 245);
curveVertex(435, 230);
curveVertex(458, 244);
curveVertex(462, 274);
curveVertex(473, 290);
curveVertex(497, 322);
curveVertex(482, 383);
curveVertex(480, 379);
curveVertex(470, 316);
curveVertex(441, 289);
curveVertex(405, 275);
curveVertex(381, 270);
curveVertex(350, 275);
endShape();

//left eye white
fill(white);
ellipse(295, 195, eyeWidth, eyeHeight);

//left eye pupil
fill(black);
ellipse(295, 195, pupil, pupil);


//right eye white
fill(white);
ellipse(348, 194, eyeWidth, eyeHeight);

//right eye pupil
fill(black);
ellipse(348, 194, pupil, pupil);

//mouth
fill(darkestColor);
ellipse(320, 230, mouthWidth, mouthHeight);

//left brow
strokeWeight (3);
stroke(120);
line(270, 170, 286, 165);

//right brow
strokeWeight (3);
stroke(120);
line(351, 163, 365, 169);
}

function mousePressed() {
    eyeHeight = random(30, 55);
    eyeWidth = random(20, 60);
    pupil = random(2, 10);
    eyeSize = random(10, 30);
    mouthHeight = random(4, 30);
    tentacleHeight = random(10, 20);
}

This project was pretty fun for me. Since it was my first time working with the curve function, it got frustrating at times, but I am pretty happy with how the curves and the changing shapes on the octopus turned out.

Looking Outwards 02

Jean-Pierre Hebert, TimeStamps, 2009.

This is a piece of generative art by Jean-Pierre Hebert, a generative artist. His website/blog contains artwork in order (“structured like a book”). Many of the works on the website are organized by date (and sometimes not named in any other way), and he created the above work by seeding the algorithm with the current time: jumping off the idea of artwork being named with a time-stamp, here is artwork whose identity stems entirely from a time-stamp. I found this to be an amusing idea, as well as an illustration of the strange liberties generative artists can take with their work.

timestamps

haewanp – Project 02 – Variable Face

Variable Face

//Hae Wan Park
//15104-A
//haewanp@andrew.cmu.edu
//Project-02-variable-Face

var eyeSize = 15;
var x = 10;
var y = 9;
var t = 5;
var faceY = 5;
var faceX = 3;
var color1 = 0;
var color2 = 150;
var color3 = 240;
var eyeX = 240;
var eyeY = 310;
var n = 10;
var v = 0;


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

function draw() {
    background(252);
    
    //hair
    noStroke();
    fill(255 - color1, 235, 70 + color1);
    beginShape();
    curveVertex(170, 220);
    curveVertex(width / 2 - (faceX+9)*x, 210);
    curveVertex(170, height / 2 - 3*y*faceY - 7*faceY); //
    curveVertex(230, height / 2 - 3*y*faceY - 7*faceY); //
    curveVertex(width / 2 + (faceX+5)*x, height / 2 - 3*y*faceY - 7*faceY);
    curveVertex(width / 2 + (faceX+6.5)*x, 195);
    curveVertex(305, 230);
    curveVertex(270, 215);
    curveVertex(265, height / 2 - 20*faceY);
    curveVertex(285, height / 2 - 14*faceY);
    curveVertex(240, height / 2 - 12*faceY);
    curveVertex(220, height / 2 - 18*faceY);
    curveVertex(210, 210);
    curveVertex(200, 230);
    curveVertex(180, 235);
    curveVertex(170, 220);
    curveVertex(width / 2 - (faceX+9)*x, 210);
    curveVertex(170, height / 2 - 3*y*faceY - 7*faceY);
    endShape();
    
    //cheek
    noStroke();
    fill(255 - color1/2, color2 - 50, 210 - color1);
    ellipse(width/2 + 70, 350, 8*x, 8*x);
    ellipse(width/2 - 80, 350, 8*x, 8*x);
    
    //face
    noFill();
    stroke(color1, color2 - 40, 255 - color1);
    strokeWeight(4.5);
    curveTightness(0);
    beginShape();
    curveVertex(width / 2 - (faceX+5)*x, height / 2 - (faceY+8)*y);
    curveVertex(width / 2 - (faceX+1)*x, height / 2 - 3.2*y*faceY); 
    curveVertex(width / 2 - (faceX-5)*x, height / 2 - 3.2*y*faceY); //
    curveVertex(width / 2 - (faceX-10.5)*x, height / 2 - 2.5*y*faceY);
    curveVertex(width / 2 + (faceX+7)*x, height / 2 - faceY*y);
    curveVertex(width / 2 + (faceX+5)*x, height / 2 + 9*y);
    curveVertex(width / 2 + (faceX-2)*x, height / 2 + 15*y);
    curveVertex(width / 2 - (faceX+4)*x, height / 2 + 12*y);
    curveVertex(width / 2 - (faceX+7)*x, height / 2 + faceY*y);
    curveVertex(width / 2 - (faceX+8)*x, height / 2 - faceY*y);
    curveVertex(width / 2 - (faceX+6)*x, height / 2 - (faceY+8)*y);
    curveVertex(width / 2 - (faceX+1)*x, height / 2 - 3.2*y*faceY);
    curveVertex(width / 2 - (faceX-5)*x, height / 2 - 3.2*y*faceY);
    endShape();
    
    //ear
    ellipse(width / 2 - (faceX+8.5)*x, height / 2 - (faceY-3)*y, 30, 40);
    ellipse(width / 2 + (faceX+7)*x, height / 2 - (faceY-3)*y, 30, 40);
    
    //eye
    ellipse(205 - faceY, eyeY - 35 + eyeSize/2, eyeSize, eyeSize);
    ellipse(275 + faceY, eyeY - 35 + eyeSize/2, eyeSize, eyeSize);

    stroke(255, color2 - 55, color2 - 40);
    
    curve(175 + faceY*(faceX/8), eyeY + 60 + 2*faceY, 
          175 + faceY*(faceX/8), eyeY - 40 + 2*faceY, 
          225 - faceY, eyeY - 40 + 2*faceY, 
          225 - faceY, eyeY + 60 + 2*faceY);
    curve(255 + faceY, eyeY + 60 + 2*faceY, 
          255 + faceY, eyeY - 40 + 2*faceY, 
          305 - faceY*(faceX/8), eyeY - 40 + 2*faceY, 
          305 - faceY*(faceX/8), eyeY + 60 + 2*faceY);
    
    //eyebrow
    line(width/2 - 55, eyeY - 70 + 7*v, width/2 - 25, eyeY - 60 + v);
    line(width/2 + 55, eyeY - 70 + 7*v, width/2 + 25, eyeY - 60 + v);
    
    
    //nose
    line(width / 2, 325, 240, 305);
    line(width / 2, 325, width / 2 - 2*n, 337);
    line(width / 2 - 2*n, 337, width / 2, 351);
    
    //mouth
    strokeJoin(ROUND);
    beginShape();
    vertex(width / 2 + 5*faceX, 390);
    vertex(width / 2 - 5*faceX - 6, 390);
    vertex(width / 2 - 3*faceX, 380);
    vertex(width / 2, 385);
    vertex(width / 2 + 10, 380);
    vertex(width / 2 + 5*faceX, 390);
    vertex(width / 2 - 3, 405);
    vertex(width / 2 - 5*faceX - 6, 390);
    endShape();
    
}

function mousePressed() {
    eyeSize = random(10, 25);
    eyeX = random (220, 250);
    eyeY = random (300, 320);
    x = random(8,12);
    y = random(7,10);
    t = random(7,20);
    faceY = random(5,7);
    faceX = random(3,5);
    color1 = random(0, 85);
    color2 = random(85, 170);
    color3 = random(170, 255);
    n = random(6,12);
    v = random(-2,4);
}

It is fun to watch the face keeps changing. It was not easy to make everything in right proportion. Also, I sketched on illustrator then tried to figure out how to draw with p5.js. It has to be simplified even though I thought my sketch was not so complicated. Maybe need more practice to control p5.js.

Jonathan Perez Looking Outwards 2

This week, I came across a generative piece called Sands of Changes by Jean Pierre Hebert. At first glance, I was a bit confused: how could this be a generative piece done by a program? The piece is done with real sand, actually using a computerized metal ball to roll on top of the sand to create minuscule lines.

sands

Hebert here emulates the Zen garden style, giving the piece a very calming and centering aesthetic. I truly admire the way in which Hebert uses a material so susceptible to the forces of nature and chance with something as exact and calculated as an algorithm. It almost seems to me that to get the full artistic value of this piece, one would have to watch the metal ball etch out the entire thing, witnessing the interaction of these two disparate elements.

dahyec-Project -02-Variable-Face

sketch


// Dahye Chung
// 15-104 Section E
// dahyec@andrew.cmu.edu
// Project-O2

var eyeWidth = 5;
var eyeHeight = 5;
var mouth = 30;
var faceWidth = 300;
var faceHeight = 300;
var skinR = 28;
var skinG = 142;
var skinB = 200;
var noseWidth = 30;
var noseHeight = 65;
var mouthWidth = 0;
var mouthHeight =5;
var eyebrows = 30;
var eyebrowStroke = 8;
var mouthCurve = 90;
var glasses = 60;

function setup() {
createCanvas(500, 560);
rectMode (CENTER);
}

function draw() {
background(236,220,189);

noStroke();
fill(skinR, skinG, skinB, 100);
ellipse(width/2, height/2, faceWidth, faceHeight); // head

fill(0,0,0,180);
ellipse(width/2-40, height/2, eyeWidth+3, eyeHeight+5); // left eye
ellipse(width/2+40, height/2, eyeWidth+3, eyeHeight+5); // right eye

fill(skinR, skinG, skinB, 210);
rect(width/2, height/2, noseWidth, noseHeight); // nose

drawMouth(mouthCurve);
strokeWeight(3);
stroke(0); 
fill (0,0,0,0);

ellipse(width/2-40, height/2, glasses+4, glasses+4); // glasses
ellipse(width/2+40, height/2, glasses+4, glasses+4);
line(width/2-40+((glasses+4)/2), height/2, width/2+40-((glasses+4)/2), height/2);

stroke(skinR-20, skinG-20, skinB-20); // eyebrows
strokeWeight(eyebrowStroke);
line(width/2-53, height/2-20-eyebrows, width/2-30, height/2-20-eyebrows); 
line(width/2+53, height/2-20-eyebrows, width/2+30, height/2-20-eyebrows); 

}

function drawMouth(mouthCurve) {
stroke(skinR-20, skinG-20, skinB-20); // eyebrows
fill(0,0,0,0);

p1 = {x: width/2-20, y: mouthCurve}, p2 = {x: width/2-40, y: height/2+90} // mouth
p3 = {x: width/2+40, y: height/2+90}, p4 = {x: width/2+20, y:mouthCurve}
curve (p1.x, p1.y, p2.x, p2.y, p3.x, p3.y, p4.x, p4.y)
}

function mousePressed() {
faceWidth = random(200, 400);
faceHeight = random(300, 450);
skinR = random(200, 100);
skinG = random(200, 100);
skinB = random(200, 100);
eyeWidth = random(-2, 10);
eyeHeight = random(-2, 5);
noseWidth = random(10,30);
noseHeight = random(40, 70);
eyebrows = random(20,40);
eyebrowStroke = random(5,16);
mouthCurve = random(0, (height/2+90)*2);
glasses = random(30,70);
}

I tried to show different emotions of people around me in my school life. I wanted to show variety range of people’s emotions in this project and wanted to study which factors of a face communicate different emotions to other people. Also, I tried to make every parts of the face and the glasses look different when the user clicks my project. I used soft colors and opacities to make my project look simple and minimal.

dahyec-Looking Outwards-02

LookingOutwards-02

TITLE: Inspired by the Incomprehensible

AlteredQualia에 대한 이미지 검색결과

To be honest, I am not a mathperson. But I was fascinated by the work of generative artist AlteredQualia. It is not clear who this individual is, but it is clear that AlteredQualia is a driven artist-programmer who explores the boundaries between art and computation. AlteredQualia’s Twitter <https://twitter.com/alteredq> account shows that s/he is currently active.

https://pbs.twimg.com/media/CQpIn2qUYAAjTms.jpg:large
“An example of one of AlteredQualia’s interests—the ‘Uncanny Valley’. More can be found here <http://fractalfantasy.net/#/4/uncanny_valley>.”

One of his/her projects, named “Evolve” <alteredqualia.com/visualization/evolve/>, particularly struck my interest. Though I don’t understand it fully, it uses code to pick random shapes to create a copy of an image. Though it takes a long time, the collection of random shapes begin to look like a copy of the original image.

http://alteredqualia.com/visualization/evolve/mona_9712.jpg
“After 7 days and 8,143,969 random shapes.”

What intrigues me is the very fact that I don’t truly understand what has been created behind the scenes of this transformation. Knowing that there are clear boundaries that I have never explored and may never even understand reminds me of the great possibilities that exist in the world of design. It excites me to understand how incomprehensibly vast the horizon is.

project-02-variable-face

sketch

var faceWidth = 0.75;
var eyeColor1 = 100;
var eyeColor2 = 200;
var eyeColor3 = 100;
var eyebrowSlant = 0;
var mouthSlant = 0;

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

function draw()
{
  background(220);
  
  //Background of face
  strokeWeight(1);
  fill(255);
  ellipse(width/2, height/2, 300*faceWidth, 300);
  
  //Eye background
  ellipse((width/2)+(80*faceWidth), (height/2)-25, 50*faceWidth, 50*faceWidth);
  ellipse((width/2)-(80*faceWidth), (height/2)-25, 50*faceWidth, 50*faceWidth);

  //Eye irises
  strokeWeight(0);
  fill( eyeColor1, eyeColor2, eyeColor3 );
  ellipse((width/2)+(80*faceWidth), (height/2)-25, 20*faceWidth, 20*faceWidth);
  ellipse((width/2)-(80*faceWidth), (height/2)-25, 20*faceWidth, 20*faceWidth);

  //Eyebrows
  fill(0);
  triangle((width/2)+(80*faceWidth)+(25*faceWidth), (height/2)-35-(25*faceWidth),
           (width/2)+(80*faceWidth)+(25*faceWidth), (height/2)-45-(25*faceWidth),
           (width/2)+(80*faceWidth)-(25*faceWidth), (height/2)-40-(25*faceWidth)+eyebrowSlant);
  triangle((width/2)-(80*faceWidth)-(25*faceWidth), (height/2)-35-(25*faceWidth),
           (width/2)-(80*faceWidth)-(25*faceWidth), (height/2)-45-(25*faceWidth),
           (width/2)-(80*faceWidth)+(25*faceWidth), (height/2)-40-(25*faceWidth)+eyebrowSlant);

  //Mouth
  strokeWeight(3);
  noFill();
  if( mouthSlant == 0 )
  {
    line((width/2)+(80*faceWidth), (height/2)+60, (width/2)-(80*faceWidth), (height/2)+60);
  }
  else if( mouthSlant < 0 )
  {
    var posSlant = mouthSlant*-1;
    arc(width/2, (height/2)+60, 160*faceWidth, posSlant*2, PI, 0 );
  }
  else
  {
    arc(width/2, (height/2)+60, 160*faceWidth, mouthSlant*2, 0, PI ); 
  }
}

function mousePressed() 
{
  eyeColor1 = random(100,255);
  eyeColor2 = random(100,255);
  eyeColor3 = random(100,255);
  faceWidth= random(60,125) / 100;
  eyebrowSlant= random(-15,15);
  mouthSlant= eyebrowSlant * 3 * ((random(0,1)*2)-1);
}

I tried to make the variables interdependent to create a coherent face throughout variations. For example, the size of the eyes and mouth are dependent on the width of the face, and the eyebrows are always the same width as the eyes. The mouth can be upwards or downwards as can the eyebrows allowing for 5 expressions (neutral, smile, evil smile, angry, sad/afraid), however the intensity of the mouth slant will always correspond to the intensity of the eyebrow slant allowing for a coherent intensity of the expression.

heeseoc-LookingOutwards-02

http://www.butterfly.ie/

“Particle Man” and “Universe Hand” are computer generated artworks by artist Glenn Marshall. He developed a way to digitally visualize what he had in mind through manipulating the system of Cinema 4D using the Python language. They are experimental digital artworks that creates 3D sculptural forms using mathematical and scientific models of particle collisions, creating the shape of human body parts using thousands of particles of close proximity that are released from a source in 3D space.

What I like about these are how he effectively uses the simple dots and lines in a 3D space to create more complex shapes. The intertwining strands creating a shape that looks organic, which is interesting because the artwork itself is obviously very artificial. Also, I like how his works are presented in an indefinite digital space with illuminated objects, which almost feels really like the universe, just like how he named his second piece.

keuchuka-project2-variablefaces

project2

// Fon Euchukanonchai
// section A
// keuchuka@andrew.cmu.edu
// Project 2

//face coordinates
var faceX = 158;
var faceY = 103;
var faceW = 200;
var faceH = 320;
var faceRotate = -5;

var colorR = 249;
var colorG = 201;
var colorB = 216;


//facial features coordinates
var featureA = 130;
var featureB = 180;
var featureC = 150;
var featureD = 160;
var featureE = 220;
var featureE = 190;


function setup() {
    createCanvas(480, 640);
    background(255);
    noStroke(0);

   }
 
 function draw() {

    //face
    push();
    fill(colorR, colorG, colorB);
    noStroke();
    angleMode(DEGREES);
    rotate(faceRotate);
    rect(faceX, faceY, faceW, faceH, 20);
    pop();

    //top left eyes

    rotate(faceRotate-5);
    noFill();
    strokeWeight(2);
    stroke(0);
    beginShape();
    curveVertex(featureA, featureB);
    curveVertex(featureA, featureB);
    curveVertex(featureC, featureD); 
    curveVertex(featureE, featureE);
    curveVertex(featureE, featureE);
    endShape();

    //top right eyes
    noFill();
    strokeWeight(2);
    stroke(0);
    beginShape();
    curveVertex(featureA*2, featureB);
    curveVertex(featureA*2, featureB);
    curveVertex(featureC+230, featureD); 
    curveVertex(featureE*2, featureE);
    curveVertex(featureE*2, featureE);
    endShape();

    //bottom left eyes
    noFill();
    strokeWeight(3);
    stroke(0);
    beginShape();
    curveVertex(featureA+20, featureB+40);
    curveVertex(featureA+20, featureB+40);
    curveVertex(featureC+20, featureD+70); 
    curveVertex(featureE, featureE+40);
    curveVertex(featureE, featureE+40);
    endShape();

    //bottom right eyes
    noFill();
    strokeWeight(3);
    stroke(0);
    beginShape();
    curveVertex(featureA*2, featureB+50);
    curveVertex(featureA*2, featureB+50);
    curveVertex(featureC+200, featureD+90); 
    curveVertex(featureE+180, featureE+50);
    curveVertex(featureE+180, featureE+50);
    endShape();

    //nose
    noFill();
    strokeWeight(2);
    stroke(0);
    beginShape();
    curveVertex(featureA*2, featureA*2);
    curveVertex(featureA*2, featureA*2);
    quadraticVertex(featureA+110, featureC*2, featureA*2, featureD*2);
    quadraticVertex(featureA*2, featureB*2, featureA*2, featureD*2);
    curveVertex(featureA*2, featureE*2);
    curveVertex(featureA*2, featureE*2);
    endShape();

    //mouth
    noFill();
    strokeWeight(1);
    stroke(0);
    beginShape();
    curveVertex(featureB, featureC*3);
    curveVertex(featureB, featureC*3);
    quadraticVertex(featureA*2, featureC*3, featureA*2, featureD*3);
    quadraticVertex(featureD*2, featureD*3, featureC*2, featureD*3);
    curveVertex(featureB*2, featureD*3);
    curveVertex(featureB*2, featureD*3);
    endShape();

    //moustache
    fill(0);
    arc(featureA*2-10, featureC*3-10, 30, 15, -180, 0)
    rotate(20);
    arc(featureA*3+30, featureC*2+25, 30, 15, -180, 0)

    //mole
    fill(0);
    stroke(0);
    strokeWeight(1);
    ellipse(featureC, featureD-140, 20, 20);

}

//when mouse clicks, face and facial features dance

function mousePressed() {

    background(255);
    faceX = random(70, 200);
    faceY = random(50, 150);
    faceW = random(150, 300);
    faceH = random(250, 350);
    faceRotate = random(-15, 15);

    colorR = random(150, 300);
    colorG = random(150, 300);
    colorB = random(150, 300);

    featureA = random(120, 140);
    featureB = random(170, 190);
    featureC = random(140, 160);
    featureD = random(150, 170);
    featureE = random(210, 230);
    featureE = random (180, 200);

}

I wanted to create a line portrait that had simple parts, all of its parts moving, and constantly generating something new from random values. The result is an interesting one as the features constantly change but the attitude remains the same.