Section C – Page 31 – [OLD FALL 2017] 15-104 • Introduction to Computing for Creative Practice

ashleyc1-Section C-Project-02-Variable-Face

//Ashley Chan   
//Section C
//ashleyc1@andrew.cmu.edu
//Assignment-02-A


var cupShape = 260;
var cupWidth = 200;
var cupBrim = 50;
var liquidWidth = 200;
var liquidHeight = 10;
var randomInteger = 1.25;
var eyeSize = 50;
var eyeX = 100;
var pupilLX = 285;
var pupilLY = 295;
var pupilRX = 390;
var pupilRY = 295;
var drinkColor = 100;
var steamMvt = 270;
var mouthX = 320;

 
function setup() {
    createCanvas(640, 480);
}
 
function draw() {
    background(242, 234, 188);

//handle
    noStroke();
    fill(255);
    ellipse(cupWidth + 250, 310, 150, 100);

    fill(242, 234, 188);
    ellipse(cupWidth + 250, 310, 100, 50);

//cup body

    fill(255);
    noStroke();
    rect(cupWidth , 200, (cupWidth * randomInteger), 240, 40, 40, cupShape, cupShape);

//cup brim

    fill(220);
    ellipse(cupWidth/2 * 3.25, 220, 200, cupBrim);
    
   
//drink
//when mouse clicked, liquid color will change and adjust to new shape of cup

    fill(drinkColor, 49, 30);
    ellipse(cupWidth/2 * 3.25, 220, liquidWidth - 20, cupBrim - 10);

//eyes
//when mouse clicked, width of cup changes

     fill(0);
     var eyeX = cupWidth/2;
     ellipse(eyeX*2.75, 300, eyeSize, eyeSize);
     ellipse(eyeX*3.75, 300, eyeSize, eyeSize);

//pupils
//when mouse clicked, pupils go crazy

     fill(255);
     stroke(5);
     ellipse(pupilRX, pupilRY, 15, 15);
     ellipse(pupilLX, pupilLY, 15, 15);

//mouth

    push();
    noFill();
    stroke(50);
    arc(cupWidth + 125, 380, 50, 10, 0, PI);
    pop();

//blush

    fill(249, 210, 243);
    noStroke();
    ellipse(eyeX + 175, 330, 50, 20);
    ellipse(eyeX + 275, 330, 50, 20);

//steam

    noFill();
    stroke(0);
    push();
    translate((cupWidth/2) - 80, 0);
    bezier(260, 180, steamMvt, 150, 230, 0, 300, 30);
    pop();

    push();
    translate((cupWidth/2) - 20, 10);
    bezier(260, 180, steamMvt, 150, 230, 0, 300, 30);
    pop();

    push();
    translate((cupWidth/2) + 50, 0);
    bezier(260, 180, steamMvt, 150, 230, 0, 300, 30);
    pop();


}
 
function mousePressed() {
 
    cupShape = random(30, 80);
    cupWidth = random(200, 210);
    cupBrim = random(20, 50);
    liquidWidth = random(170, 200);
    liquidHeight = random(20, 30);
    randomInteger = random(1.2, 1.4);
    drinkColor = random(100, 200);
    steamMvt = random(270, 300);
    eyeSize = random(30, 70);
    pupilLX = random (270, 295);
    pupilLY = random(290, 305);
    pupilRX = random(380, 390);
    pupilRY = random(290, 310);


}

Initially, I didn’t know what face I wanted to create so I drew the first thing I saw at the time, which was a poster of a coffee cup in Morewood Gardens. Although I’m not particularly happy with my final result because I wanted to add additional elements that didn’t work out, I’m still proud that, while creating this, I began developing the ability to troubleshoot and understand where to find the problem in my code whenever the index revealed something I wasn’t intending.

aerubin-LookingOutwards-02-Section_C

Utilizing an algorithm, a computer-generated jazz improvisation was created in the form of a melody over a walking bass line. I surprising found it very pleasing to listen to in comparison to what I would expect a computer to compose as it lacks humanity and emotion which is essential for music, composition, and art. It also sounds like jazz music as the interaction between the progression of chords and melody emulate works of famous jazz artists.

Although it is undeniably jazz improvisation, I felt that it lacked variation in both rhythm, range, and complexity. As a classically trained music performance major, I do not know everything there is to know about the genre of jazz, but when I listen to improvisation, it is not typically just straight triplets and quarter notes. In live improvisation, there is customarily some aspect of “extended techniques” (an unconventional method of playing an instrument such as glissando or pizzicato on a string instrument) utilized in the performance. That said, this is one of the reasons why performers, composers, and artists can never be replaced by solely technology as it lacks the innate creativity and range of emotions humans possess.

The description of the video gives a brief explanation of the code and how it operates. The author of the program set pre-defined chord changes to occur which is the basis of jazz music. I also suppose that the author preset most of the rhythms as there is not much variety. I believe the algorithm provided a set number of notes to choose from depending on each chord. The computer most likely randomly selected notes to play on the preset rhythm in some order. Overall, it is amazing to see what kind of art can be partially generated by artificial intelligence, although I do not believe it will ever be enough to completely replace an artist’s craft.

eeryan-Looking-Outwards-02

chronomops from Tina Frank on Vimeo.

This generative art, created in 2005 by Tina Frank interested me because of the combination of flashing images and jarring music engaging and thought provoking. It reminded me of the randomized animations we looked at in class, but used in a way that was visually appealing and planned. The neon colored lines, rapidly reappearing in parallel and perpendiculat sequences, in combination with the increasingly fast and nonsensical music combine in a way that is jarring, yet still visually compelling. Occasionally your eyes will try to find sense in the rapidly appearing lines and shapes – for example the appearance of the rotating cubic form in the midst of linear chaos around the 40 second mark. The ability to generate these patterns and shapes rapidly and randomly allow an artistic interpretation of chaos using digitally generated images and sound.

Jdbrown – Project 2: Electric Boogaloo

JdbrownProject02

// Joshua Brown
// Jdbrown@andrew.cmu.edu
// Section C
// Project 2: Face Generation

var faceWidth = 200;
var faceHeight = 150;

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

function draw () {
    background (190, 50, 90);
    noStroke ();

    fill (random (30, 60), random (60, 120), random (90, 180));

    // Drawing background triangles

    triangle (0, 480, 240, 480, 240, 240);  // idk why not
    triangle (640, 480, 400, 480, 400, 240);  // idk why not
    triangle (0, 0, 240, 0, 240, 240);  // idk why not
    triangle (640, 0, 400, 0, 400, 240); // idk why not

    // Drawing actual face

    fill (255);
    ellipse (width / 2, height / 3 + 50, width / 4, height / 3);    // drawing face outline

    fill (200);
    ellipse (width / 2, height / 3 + 50, width / 6, height / 5);    // drawing face outline

    stroke (0);
    strokeWeight (5);

    fill (255);
    ellipse (width / 3 + 75, height / 3 + 25, width / 12, height / 9);    // drawing eye socket (L)
    ellipse (width / 3 + 140, height / 3 + 25, width / 12, height / 9);    // drawing eye socket (R)
    
    noFill ();

    ellipse (width / 3 + 75, height / 3 + 25, width / 16, height / 12);     // drawing eyeball Ring1 (L)
    ellipse (width / 3 + 140, height / 3 + 25, width / 16, height / 12);    // drawing eyeball Ring1 (R)
    ellipse (width / 3 + 75, height / 3 + 25, width / 24, height / 20);     // drawing eyeball Ring2 (L)
    ellipse (width / 3 + 140, height / 3 + 25, width / 24, height / 20);    // drawing eyeball Ring2 (R)

    fill (random (30, 60), random (60, 120), random (90, 180));

    ellipse (width / 3 + 75, height / 3 + 25, width / 52, height / 40);     // drawing eyeball Ring1 (L)
    ellipse (width / 3 + 140, height / 3 + 25, width / 52, height / 40);    // drawing eyeball Ring1 (R)

    ellipse (width / 2, height / 3 - 65, faceWidth / 10, faceHeight / 6);   // drawing third eye

    ellipse (width / 2, height / 3 + 185, faceWidth / 10, faceHeight / 6);   // drawing third eye blind

    fill (0);
    arc (width / 2, height / 2, width / 6, faceHeight / 6, 90, PI); // drawing mouth

}

function mousePressed () {

    width = random (160, 1280) + random (10, 50);
    height = random (120, 920) + random (10, 50);

}

This project went through a few iterations, but the most challenging aspect was that I discovered “random” commands. As you can see, I couldn’t help myself, and there’s a psychedelic quality to the overall presentation. Sorry ’bout it.

Josh

abradbur-Project-02-Variable Face

facegenerator

//global variables
var eyeSize = 20;
var faceWidth = 200;
var faceHeight = 200;
var pupilSize = 10;
var noseLength = 30;
var noseHeight = 30;
 
function setup() {
    createCanvas(640, 480);
    rectMode(CENTER);
}
 
function draw() {
    noStroke();
    background(108, 207, 246);

    //hair + torso
    fill(112, 102, 119);
    rect(width/2, height/2 + 30, faceWidth + 10, faceHeight - 30);
    ellipse(width/2, height/2 - faceHeight/4, faceWidth + 10, faceHeight - 40);

    //face shape
    fill(204, 183, 174);
    ellipse(width/2, height/2, faceWidth, faceHeight);

    //eyeballs + pupils
    var eyeLX = width/2 - faceWidth * 0.25;
    var eyeRX = width/2 + faceWidth * 0.25;
    var eyeLH = height/2 - faceHeight * 0.25;
    var eyeRH = height/2 - faceHeight * 0.25;
    fill(255);
    ellipse(eyeLX, eyeLH, eyeSize, eyeSize);
    ellipse(eyeRX, eyeRH, eyeSize, eyeSize);
    fill(186, 199, 190);
    ellipse(eyeLX, eyeLH, pupilSize, pupilSize);
    ellipse(eyeRX, eyeRH, pupilSize, pupilSize);

    //mouth
    fill(166, 128, 140);
    arc(width/2, height/2 + faceHeight * 0.25, 100, 50, HALF_PI, PI);

    //nose
    fill(255, 202, 177);
    rect(width/2, height/2, noseLength, noseHeight);
    
    }

function mousePressed() {
    // when the user clicks, these variables are reassigned
    // to random values within specified ranges. 
    faceWidth = random(100, 400);
    faceHeight = random(70, 300);
    eyeSize = random(55, 70);
    pupilSize = random(5, 50);
    noseLength = random(20, 70);
    noseHeight = random(20, 70);
}

At first I wanted to make this a lot more complex than the way it turned out, but I definitely didn’t give myself enough time. I was going to make the shape of the nose switch between a circle, square, and triangle, in addition to having randomized proportions. I was also going to go with three different hairstyles and mouth options.

Unfortunately, I ended up only messing around with the proportions of the face, so I’m a little disappointed in the result. I might play with it more on my own.

serinal (section C) – project 02

*i’m not sure why the thing is getting cut off, but TECHNICALLY if you zoom out, it should work out*

sketch

// Serina Liu 
// Section C
// serinal@andrew.cmu.edu
// Project 02, Changing Faces

var eye = 40;
var faceWidth = 150;
var faceHeight = 200;
var mouthSize = 25;
var featherwidth = 30;
var featherheight = 60;
var beaklength = 160;
var pupilsize = 10;
var buttfeathers = 495;
var brow = 5; 
var browtilt = 130; 
//colors
var cR = 240;
var cG = 100; 
var cB = 192; 
//eyebrow
var eyebrows = 10;
 
function setup() {
    createCanvas(640, 480);
}
 
function draw() {
    background(178, 255, 102);
    //head
    fill(256, 256, 256);
    rect(320, 240, faceWidth,  faceHeight);
    //top part of head 
    fill (220);
    rect (320, 240, faceWidth, faceHeight/2);
    //eyes
    fill(0, 0, 0);
    var eyeLX = 320 - faceWidth * 0.1;
    var eyeRX = 320 + faceWidth * 0.2;
    ellipse(eyeLX +10, height / 2, eye, eye);
    ellipse(eyeRX +10, height / 2, eye, eye);
    //eyepupils
    fill(256, 256, 256);
    ellipse (eyeLX+5, height/2, pupilsize, pupilsize);
    ellipse (eyeRX+5, height/2, pupilsize, pupilsize);
    //mouth
    fill(255, 255, 0);
    triangle(200, height/2 + 40, 360, 280, 360, 330);
    //mouthpiece2
    fill(255, 255, 0);
    triangle(beaklength, height/2 + 60, 360, 330, 360, 380);
    //head piece
    fill (255, 0, 0);
    ellipse(460, 240, featherwidth, featherheight);
    ellipse (470, 250, featherwidth, featherheight);
    ellipse (480, 260, featherwidth, featherheight);
    //butt feathers
    fill (256, 256, 256);
    triangle (buttfeathers, height/2 +120, 420, 390, 490, 4000);
    //underchin 
    fill (255, 0, 0);
    ellipse (350, 390, featherwidth, featherheight);
    ellipse (330, 390, featherwidth, featherheight);
    ellipse (370, 390, featherwidth, featherheight);
    //text
    fill(250, cG, cB);
    textSize(20);
    text("hello i am a chicken", 235, 145, 500, 500);
    //text
    fill(cR, 180, cB);
    textSize(20);
    text("hello i am a chicken", 450, 145, 500, 500);
    //text
    fill(cR, cG, 180);
    textSize(20);
    text("hello i am a chicken", 20, 145, 500, 500);
    //text
    fill (76, 153, 0);
    textSize (100);
    text("i am a chicken", 1, 30, 700, 700);
    //eyebrows
    fill(0,0,0);
    rect(eyeLX+7, 203, 30, eyebrows);
    rect(eyeRX+7, 203, 30, eyebrows);
}
 
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, 165);
    faceHeight = random(300, 400);
    eye = random(10, 30);
    mouthSize = random(80, 100);
    featherwidth = random(30,60);
    featherheight = random(30, 60);
    beaklength = random(40, 120);
    pupilsize = random(7, 15);
    buttfeathers = random(40, 150);
    cR = random(1, 256);
    cG = random(1, 256);
    cB = random(1, 256);
    eyebrows = random(5, 15);
}

This particular project was kind of a challenge for me just because I was having trouble really understanding variables in general. However, once I started to understand the meaning of a variable, I was more easily able to code something. I knew I wanted to do an animal and I wanted to keep the colors of the chicken stable so I tried to manipulate all the other stuff that is involved with it. The text changing color was a fun little thing. Overall, I guess that I would love to have a bit more time to explore and refine my ideas. I think it would probably be helpful to actually sketch out my ideas prior to making it, but as of now and as of the level I am at, I think that it satisfies my standards.

eeryan-Project-02-VariableFace

sketch

//Erin Ryan
//eeryan@andrew.cmu.edu
//Lecture 1, Section C
//Project 02
var eyeSize = 20;
//face variables
var faceWidth = 100;
var faceHeight = 150;
var wink = 1;
//mouth variables
var mouthXone = 120;
var mouthXtwo = 140;
var mouthYone = 190;
var mouthYtwo = 190;
var mouthWidth = 10;
var mouthHeight = 10;
var mouthNumber = 1;
var rB = 40;
//body variables
var shoulderHeight = 265;
 
function setup() {
    createCanvas(300,300);
}
 
function draw() {
    background(255,255,210);
    //phone
    noStroke();
    fill(193,93,101);
    quad(45,140,70,150,70,212,45,200);
    var eyeY = height/2;//eye height
    //arm
    noFill();
    stroke(152,196,249);
    strokeWeight(10);
    beginShape();
    curveVertex(50,170);
    curveVertex(50,170);
    curveVertex(50,180);
    curveVertex(50,280);
    curveVertex(100,310);
    curveVertex(110,310);
    endShape();
    //shoulders
    noStroke();
    fill(50,80,109);
    rect(75,shoulderHeight,170,100,25,25,25,25);
    //face
    stroke(152,196,249);
    fill(197,255,237);
    strokeWeight(5);
    rect(100, 75, faceWidth,  faceHeight,25,25,40,40);
    var eyeLX = width / 2 - faceWidth * 0.25-10;
    var eyeRX = width / 2 + faceWidth * 0.25-10;
    stroke(50,80,109);
    noFill();
    //left eye
    strokeWeight(3);
    ellipse(eyeLX, eyeY, eyeSize, eyeSize);
    //mouth
    if(mouthNumber==1){
      noStroke();
      fill(193,93,101);
      arc(mouthXtwo, mouthYtwo, mouthWidth, mouthHeight,0,PI);
    }
    if(mouthNumber==2){
      stroke(193,93,101);
      line(mouthXone,mouthYone,mouthXtwo,mouthYone);
    }
    if(mouthNumber==3){
      noStroke();
      fill(193,93,101);
      ellipse(mouthXone,mouthYone,mouthWidth,mouthHeight);
    }
    //right eye
    if(wink==1){
      stroke(50,80,109);
      line(eyeRX-5, height/2,eyeRX+5, height/2);
    }
    else{
    noFill();
    stroke(50,80,109);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize); 
    }
    
}
 
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(75, 150);
    faceHeight = random(120, 180);
    eyeSize = random(10,20);
    mouthXone = random(120,130);
    mouthXtwo = random(140,150);
    mouthYone = random(180,190);
    mouthYtwo = random(155,165);
    mouthXthree = random(110,120);
    mouthYthree = random(155,165)
    mouthWidth = random(10,35);
    mouthHeight = random(5,25);
    mouthNumber = Math.floor((random()*3)+1);
    wink = Math.floor((random()*3)+1);
    eyeY = height/2 +(Math.floor((random()*7)+1));
    shoulderHeight = random(265,230);
    
}

I started off by tweaking the original template, finding slight differences like making the height of the eyes unequal, changing the radius of the curves of the face rectangle and adding strokes to different elements. I chose a color palette that I thought worked well with the simplistic faces I created, primarily desaturated primary colors.

After toying with conditionals and tweaking elements to give my faces different expressions, I decided that adding the context of a cell phone would tie my piece together. The different faces dictate how the phone is being used – are they taking a selfie? did they just read a text that irritated them?

Lrospigl-LookingOutwards-02

The project I looked at was Flight Patterns by Aaron Koblin. As I was scrolling through the list of projects, this one stood out to me. There was so much happening I couldn’t look away. Unfortunately, there wasn’t much information on the site to let me know how this project came to be. From what I found on the site, they put in information from the FAA into a program that allowed them to visualize the information. This to me is really interesting, mostly because it resembles the most to what we are taught in design about being able to translate quantitive information visually to communicate a certain aspect of it.

It is also incredible how beautiful the outcome of these numbers and patterns are. By giving a visual aspect of the information, it also gives a better understanding of exactly how much america uses planes in concentrated areas.

abradbur-Looking Outwards 02-Section C

Just one of the limitless images that can be created by Tentasho.

This is an image that was created by the program Tentasho, an interactive exhibit displayed at galleries that will draw different images depending on the sliders guests use and how they move their finger on the touchscreen. Tentasho was created by LIA in 2016, and while it can be experienced as an interactive exhibit it is also generative, as it will begin to draw on its own if left to itself for too long. It is described as “impatient” taking control of the art out of the artists hands should they become to hesitant in their strokes. I find this exhibit inspiring because every image crafted by Tentasho is entirely unique, like several thousand art pieces in one. The images it produces are alien, yet the processes Tentasho uses to draw appear meandering and calming. The generative qualities of Tentasho also make the piece feel alive and whimsical. The algorithm used to make Tentasho must have had some aspect of randomization to it, and I think the organic look of the pieces it generates reflects LIA’s artistic sense in that they appreciate art that occurs by chance.

Here is the Tentasho page on LIA’s website.

ablackbu – Section C – Looking Outwards 02

The topic of my Looking Outwards post this week is a man-made artist. I saw this installation at Wood Street Galleries in downtown Pittsburgh and have been thinking about it ever since. The installation is called Robotlab.

__________________________________________

The installation consists of two robots (installed for 8 months) that are connected to drawing instruments.

On the lower level, “The Big Picture” is using one continuous pen line to draw a detail landscape of Mars. Being that this robot is drawing continuously for 8 months one can imagine how every day more and more resolution comes to the image.

__________________________________________

The second robot, “Bios” (bible), is also continuously moving for 8 months but instead of drawing, it is copying down the bible (as seen below). Every single letter takes about 10 seconds to draw and looks perfect when it is done.

__________________________________________

The thing I admire most about this project is the level of patients that the artist has. These both almost take a year to complete and standing in that room you can feel the tension in the air caused by how slow it operates.

At the same time the way this is coded makes it so elegant and complex yet so perfect and calculated. I think it shows a lot about the artist’s personality.

__________________________________________

Video: