Section A – Page 30 – [OLD FALL 2018] 15-104 • Introduction to Computing for Creative Practice

rrandell project02- variable face

/* Rani Randell
Section A
rrandell@andrew.cmu.edu
Project 2 variable faces */


// Simple beginning template for variable face.
var eyeSize = 20;
var faceWidth = 100;
var faceHeight = 150;
var backcolor;
var mouthW = 70;
var mouthH = 30;
 
function setup() {
    createCanvas(640, 480);
    var R = random(20, 250);
    var G = random(100, 200);
    var B = random(10, 200);
    backcolor = color(R, G, B);

}
 
function draw() {
    background(backcolor);
    fill(230, 10, 200)
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);//face

    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    fill(10, 30, 200);
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);//left eye
    fill(30, 70, 70);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize); //right eye

    rect(width/2 - 35, height/2- 20, 20, 3)//eyebrows
    rect(width/2 + 15, height/2- 20, 20, 3)

    fill(200, 10, 120); //mouth color
    ellipse(width/2, height/2+40, mouthW, mouthH)//mouth


}
 
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(100, 200);
    eyeSize = random(10, 30);
    var R = random(20, 250);
    var G = random(100, 200);
    var B = random(10, 200);
    backcolor = color(R, G, B);
    mouthH = random(10, 40);
    mouthW = random(60, 90);
}

For my Variable Faces project, I wanted to explore randomizing different colors of the background when the mouse is pressed. I accomplished this by making distinct RGB variables and then randomizing them in the mousePressed function.

Ean Grady-Project 2-Variable Face

sketch

//Ean Grady
//Section A
//egrady@andrew.cmu.edu
//Project-02

var x = 0
var y = 0
var z = 0
var x2 = 0
var y2 = 0
var z2 = 0
var b = 0
var n = 0
var m = 0
var trix1 = 160
var trix2 = 440
var rx1 = 205
var ry1 = 220
var rx2 = 315
var ry2 = 220
var w = 0
var e = 0
var r = 0
var i = 0
var o = 0
var p = 0
var size = 200

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

function draw() {
    background (255, 255, 200);
    noStroke();

    //hair petals
    fill (x2, y2, z2)
    ellipse (215, 210, 70, 60)
    fill (x2, y2, z2)
    ellipse (272, 180, 70, 60)
    fill (x, y, z)
    ellipse (180, 265, 70, 60)
    fill (x2, y2, z2)
    ellipse (180, 330, 70, 60)
    fill (x, y, z)
    ellipse (215, 385, 70, 60)
    fill (x2, y2, z2)
    ellipse (280, 420, 70, 60)
    fill (x, y, z)
    ellipse (360, 405, 70, 60)
    fill (x2, y2, z2)
    ellipse (405, 355, 70, 60)
    fill (x, y, z)
    ellipse (415, 290, 70, 60)
    fill (x2, y2, z2)
    ellipse (395, 230, 70, 60)
    fill (x, y, z)
    ellipse (344, 185, 70, 60)

    //purple body
    fill (120, 20, 200)
    ellipse(300, 500, size, 200)

    //face
    fill (200, 205, 255)
    ellipse (300, 300, 250, 250)

    //eyes
    fill(w, e, r)
    arc(240, 260, 80, 40, 150, PI + QUARTER_PI, CHORD);
    arc(360, 260, 80, 40, 150, PI + QUARTER_PI, CHORD);
    fill(i, o, p)
    arc(240, 260, 80, 40, 20, PI + QUARTER_PI, CHORD);
    arc(360, 260, 80, 40, 20, PI + QUARTER_PI, CHORD);
    fill(255, 255, 255)
    ellipse(360, 260, 20, 20)
    ellipse(240, 260, 20, 20)
    fill(0, 0, 0)
    ellipse(360, 260, 10, 10)
    ellipse(240, 260, 10, 10)

    //mouth
    fill(255, 20, 123)
    rect(270, 300, 60, 100)
    fill(0, 0, 0)
    rect(275, 305, 50, 90)

    //eyebrows
    fill (0, 0, 0)
    rect (rx1, ry1, 80, 20)
    rect (rx2, ry2, 80, 20)

    //triangle hat
    fill(b, n, m)
    triangle(trix1, 210, trix2, 210, 300, 100);
}

function mousePressed() {
    x = random(0, 255);
    y = random(0, 255);
    z = random(0, 255);
    x2 = random(0, 255);
    y2 = random(0, 255);
    z2 = random(0, 255);
    b = random(0, 255);
    n = random(0, 255);
    m = random(0, 255);
    trix1 = random(100, 160)
    trix2 = random(440, 500)
    ry1 = random(220, 200)
    rx1 = random(200, 220)
    ry2 = random(220, 200)
    rx2 = random(310, 320)
    w = random(0, 255)
    e = random(0, 255)
    r = random(0, 255)
    i = random(0, 255)
    o = random(0, 255)
    p = random(0, 255)
    size = random(200, 250)
}

For this project, I didn’t use a pre-drawn sketch of mine, I instead went straight into programming which proved to be the main problem. I don’t mind how my variable face turned out, but in the future, I want to start employing the use of drawings more to make it more organized.

Adam He – Looking Outwards – 02

Phoenix International Media Center, Designed by BIAD

The field of architecture has been developing a new type of design strategy in the past few decades. Based on conventional modern space designs, some architects are passionate about so-called “parametric design,” which is a style of architectural design that is generated through the use of algorithms and computer programming. One of the most well-known pioneers of this field is the principal of Zaha Hadid Architects Patrik Schumacher. Schumacher spearheaded this concept called “parametricism.” This type of design methodologies are highly computer-based, employing 3D modeling softwares like Rhino and Revit, as well as scripting platforms like Grasshopper and GH Python. Generative modeling enables complex forms and structures to be created through scripts easily, which is almost impossible to model by hand. However, the fabrication methods are not caught up with the parametric designs that architects theorize today. Fabrication of parametric architecture requires an extraordinary amount of money and time. In fact, the original design of the 2020 main stadium of the Olympics in Tokyo, designed by Zaha Hadid, was renounced because of the difficulties in terms of the budget.

A render of parametric architecture by Patrik Schumacher

Though still encountering a lot of difficulties in the reality, parametric architecture is a theory that will dominate the architecture industry sooner or later. As architecture majors, we heavily focus on modern world software society, and we take generative modeling courses that teach grasshopper and gh python. Getting more familiar with parametric architecture, I am looking forward to capturing more of the yet abstract concepts and theories about algorithms in the field of art and architecture.

Curran Zhang-LookingOutwards-2

The focus of this project,GRIS, was to create an interactive reality for people to enjoy. Designed by Nomada Studio, the game was designed to allow players to explore the imaginative world or watercolors. Within the game, crimson mountains, cyan ruins, and irregular trees are created to feature the scene, which is sometimes more important than the character. Motions within the game mimics the property of water coloring on paper.

A part of the game where the setting is more important than the character

Nomada Studio started with game designers Adrian Cuevas and Roger Mendoza met artist Conrad Roset. GRIS is the company’s first production and brought upon the idea to beautifully blend art and gaming together. By using the different platforms and property of each theme, the production creates a very engaging perspective for gamer. This game is a representation of the mixture of fields in jobs. Even though game design is mathematical and very rigid, it was able to bring in the creativeness and playful aspect of art. Like this class, the game itself is a bridge that combines digital coding and art.

Various motions within the game are representations of water-coloring properties.

Usage of different color blends to bring out the mood

Article: https://www.thisiscolossal.com/2018/09/gris-video-game-by-nomada-studio/

Looking Outwards 02

http://www.ninakatchadourian.com/languagetranslation/talkingpopcorn.php

The generative artist that I am choosing to explore is Nina Katchadourian. She is a photographer, sculptor, and more, but the reason that I thought of her work for this blog post is because one of her pieces, entitled ‘Talking Popcorn’, uses the same logic as computer generated art. The piece is essentially a morse code reader installed inside of a popcorn machine, when batches of popcorn are popped, morse code reader translates strings of letters. In some of the popcorn batches there are actual english words that result in poems, or phrases and more. Nina has then memorialized the real popcorn that when popped, made words. Although this artist did not use code to make this artwork, I feel that she has utilized the concept of the randomness of an act like popping popcorn in a way that is similar to randomly generated code. I really admire how she took such a mundane act like popping popcorn and thought about how it could be made into randomly generated art.

Katherine Hua – LookingOutwards – 02

Parag K. Mital is an audiovisual computational artist and researcher. He creates his artwork through the building of artificial intelligence algorithms. I am captivated by the way Mital has explored deep learning, machine learning, film, eye-tracking, EEG, and fMRI recordings to generate his artistic productions. In his work “In the Style of Klee,” he utilizes these generative model processes and constructs an audiovisual perception of what looks like a video from the view from a car window as the car is driving through the streets. In this piece of work, it can be seen that it is inspired by the art style of Paul Klee. I admire how the Mital is able to bring what looks like a painting with Paul Klee’s style to life. He demonstrates the complexity yet simplicity of traditional fine art styles and brings it together with modern experimental generative art, giving his audience a unique film experience through traditional art and generative augmented computational science.

“In the Style of Klee” by Parag K. Mital, 2015

Anthony Ra – Looking Outwards – 02

“Unreleased Thoughts – neurons fire, images form”

Instead of a specific installation or project, I decided to look at a singular artist’s collection of works. From his biography, Sergio Albiac plays with the “visual intersection between generative computer code and traditional media. I originally ran across his work while on Pinterest and part of what his work that is especially intriguing is his implementation of two things that I have much interest in – portraits and learning art through code.

Using voice and facial recognition to generate a portrait

However, one of his works that stand out the most is “I am”. People sit in a visual portrait studio and, speaking to an audio application program interface, codes those words to create a portrait using those descriptions. It is the type of interactive artwork that does not involve the longevity of sitting through oil paintings or a couple nanoseconds of a flick of a film camera.

Part of what I really enjoy with his work is that it does not initially seem to have any generative-ness into it. Some of his work seems like oil paintings or watercolor, but upon further look, the ability to put computer programming and coding into a product that is convincingly realistic is something I definitely want to look into in the near future.

Anthony Ra – Project02 – Variable Faces

sketch


var eyeSize = 20;
var eye = 40;
var faceWidth = 100;
var faceHeight = 130;
var fillet = 100;
var head = 50;
var headd = 50;
var teeth = 20;
var sideStache = 7;
var r, g, b;

function setup() {
  createCanvas(480, 600);
  background(220, 250, 220);
  r = random(255);
  g = random(255);
  b = random(255);
  noStroke(0)

}

function draw() {

/* fixed symbol */
noStroke();
fill(70, 200, 0);
triangle(240, 20, 210, 100, 225, 100);

fill(150, 230, 0);
triangle(240, 20, 225, 100, 255, 100);

fill(70, 200, 0);
triangle(240, 20, 255, 100, 270, 100);

fill(30, 150, 0);
triangle(210, 100, 225, 100, 240, 180);

fill(70, 200, 0);
triangle(225, 100, 240, 180, 255, 100);

fill(30, 150, 0);
triangle(240, 180, 255, 100, 270, 100);

rectMode(RADIUS);
fill(250, 220, 190);
rect(width/2, height*3/5, faceWidth, faceHeight, fillet);
var eyeLX = width/2 - faceWidth*0.4;
var eyeRX = width/2 + faceWidth*0.4;

/* neck */
noStroke();
fill(250, 220, 190);
rect(width/2, height*4/5, faceWidth - 15, 185);

/* beard */
fill(90, 35, 5);
arc(width/2, height*3/5 + 30, faceWidth*2, faceHeight*2 - 50, TWO_PI, PI);

fill(250, 220, 190);
arc(width/2, height*3/5 + 30, faceWidth*2, faceHeight + 20, TWO_PI, PI);

/* eye */
fill(250);
ellipse(eyeLX, height*3/5 - 30, eye, eyeSize);
ellipse(eyeRX, height*3/5 - 30, eye, eyeSize);

/*pupil*/
fill(0);
ellipse(eyeLX, height*3/5 - 30, eyeSize, eyeSize);
ellipse(eyeRX, height*3/5 - 30, eyeSize, eyeSize);

/* ear */
fill(240, 220, 190);
arc(width/2 - faceWidth, height*3/5, 2*eyeSize, 2*eye, HALF_PI, HALF_PI + PI);
arc(width/2 + faceWidth, height*3/5, 2*eyeSize, 2*eye, HALF_PI + PI, HALF_PI);


fill(220, 200, 170);
arc(width/2 - faceWidth, height*3/5, eyeSize, eye, HALF_PI, HALF_PI + PI);
arc(width/2 + faceWidth, height*3/5, eyeSize, eye, HALF_PI + PI, HALF_PI);

fill(90, 35, 5);
rect(eyeLX, height*1/2 + 5, 5 + eye/2, eyeSize/4, fillet/25);
rect(eyeRX, height*1/2 + 5, 5 + eye/2, eyeSize/4, fillet/25);

/* hair */
fill(80, 30, 5);
ellipse(205, 225, head*2, head + 10);

fill(90, 35, 5);
triangle(140, 360, 150, 302, 133, 290);
triangle(340, 360, 347, 290, 330, 302);

fill(125, 40, 7);
ellipse(167, 247, headd, headd - 7);
ellipse(280, 265, head, head);

fill(90, 35, 5);
ellipse(211, 250, 2*head, head);
ellipse(150, 280, headd - 10, headd + 20);
ellipse(330, 280, head - 10, head + 20);
ellipse(260, 240, headd, headd);
ellipse(290, 226, head + 30, head + 10);

fill(115, 35, 5);
ellipse(260, 215, headd, headd);

fill(85, 30, 5);
ellipse(281, 238, headd, headd);

fill(115, 35, 5);
ellipse(176, 264, headd, headd);
ellipse(317, 248, head + 20, head);

/* teeth */

stroke(90, 35, 5);
strokeWeight(2);
line(eyeLX, 415, eyeRX, 415);

fill(50);
arc(width/2, 415, 80, 35, TWO_PI, PI);

fill(200, 0, 0);
noStroke();
arc(width/2, 415, teeth*2, teeth*4, TWO_PI, PI);

fill(250, 0, 0);
arc(width/2, 415, teeth/5, teeth*4 - 5, TWO_PI, PI);

fill(250);
noStroke();
arc(eyeLX + 10, 415, teeth, teeth, TWO_PI, PI);
arc(eyeLX + 30, 415, 20, 20, TWO_PI, PI);
arc(eyeRX - 30, 415, teeth, 20, TWO_PI, PI);
arc(eyeRX - 10, 415, 20, teeth, TWO_PI, PI);

/* stache */
stroke(90, 35, 5);
strokeWeight(10);
point(eyeLX, 410);
point(width/2, 400);
point(eyeRX, 410);

noFill();
beginShape();
curveVertex(eyeLX, 410);
curveVertex(eyeLX, 410);
curveVertex(width/2, 400);
curveVertex(eyeRX, 410);
curveVertex(eyeRX, 410);
endShape();

noFill();
strokeWeight(7);
beginShape();
curveVertex(eyeLX, 410);
curveVertex(eyeLX, 410);
curveVertex(eyeLX - sideStache, 440);
curveVertex(eyeLX - 5, 475);
curveVertex(eyeLX - 5, 475);
endShape();

noFill();
strokeWeight(7);
beginShape();
curveVertex(eyeRX, 410);
curveVertex(eyeRX, 410);
curveVertex(eyeRX + sideStache, 440);
curveVertex(eyeRX + 5, 475);
curveVertex(eyeRX + 5, 475);
endShape();

/* nose */

noFill();
stroke(90, 35, 5);
strokeWeight(3);
arc(width/2, 365, eyeSize*2, eye, TWO_PI, PI);

fill(0);
ellipse(width/2 + 7, 375, eyeSize/4, eyeSize/4);
ellipse(width/2 - 7, 376, eyeSize/4, eyeSize/4);

/* shirt */
noStroke();
fill(r, g, b, 127);
triangle(0, 575, 156, 525, width/2 + 40, 600);
triangle(480, 575, 324, 525, width/2 - 40, 600);
triangle(width/2, 575, width/2 + 40, 600, width/2 - 40, 600);

fill(r, g, b, 115);
triangle(0, 575, 0, 600, width/2 + 40, 600);
triangle(480, 575, 480, 600, width/2 - 40, 600);



}

function mousePressed() {


  eyeSize = random(10, 30);
  head = random(45, 65);
  headd = random(45, 65);
  teeth = random(15, 25);
  sideStache = random(5, 12);
  r = random(255);
  g = random(255);
  b = random(255);
}

The first thing I thought of when it came to interchangeable facial features is the life simulation game, The Sims. I know a guy in which many people and I agree on looks like the default Sims character. Implementing variables was a bit of a challenge in which I couldn’t only rely on numbers for the placement of my shapes. There are subtle changes in facial features, but as a whole, the face looks very different from the last to the next.

Curran Zhang- Project 2- Variable Faces

sketch

function setup() {
    createCanvas(600, 600);
}

var c1=0;
var c2=100;
var c3= 150;
var eyeSize = 20;
var faceWidth = 150;
var faceHeight = 150;
var faceWide= 100;
var faceHigh=100;
var bodyWidth=150;
var bodyHeight= 300;
var armLength= 150;
var bodyWide=100
var bodyHigh=200

function draw() {
    background(c1,c2,c3);

//Venom
    fill(0)
    ellipse(width / 4-40, height / 3, faceWidth,  faceHeight);
    var eyeL = width / 4 - faceWidth * 0.25;
    var eyeR = width / 4 + faceWidth * 0.25;
    //Face
    fill(250);
    arc(eyeL-40,height/3, 3*eyeSize,3*eyeSize,QUARTER_PI,PI+QUARTER_PI); 
    fill(250);
    arc(eyeR-40,height/3, 3*eyeSize,3*eyeSize,PI+QUARTER_PI+HALF_PI,HALF_PI+QUARTER_PI); 
    //Body
    fill(0);
    rect(width/4-bodyWidth/2-40,height/3+faceHeight/2,bodyWidth,bodyHeight,40)
    fill(250);
    quad(width/4-bodyWidth/2-40,height/3+faceHeight/2+40, 
         width/4-bodyWidth/2-40,height/3+faceHeight/2+bodyHeight/3+40,
         width/4+bodyWidth/2-40,height/3+faceHeight/2+40, 
         width/4+bodyWidth/2-40,height/3+faceHeight/2+bodyHeight/3+40)
    //Arm
    fill(0);
    rect(width/4+bodyWidth/2-40,height/3+faceHeight/2+30, armLength,50,40)


//Spidey
    fill('red');
    ellipse(3*width / 4, height / 2, faceWide,  faceHigh);
    noStroke();
    var eyeLL = 3*width / 4 - faceWide * 0.25;
    var eyeRR = 3*width / 4 + faceWide * 0.25;
    //Face
    fill(0);
    arc(eyeLL,height/2, 3*eyeSize+5,3*eyeSize+5,QUARTER_PI,PI+QUARTER_PI);
    fill(250);
    stroke('black');
    strokeWeight(1.5);
    arc(eyeLL,height/2, 3*eyeSize,3*eyeSize,QUARTER_PI,PI+QUARTER_PI); 
    fill(0);
    arc(eyeRR,height/2, 3*eyeSize+5,3*eyeSize+5,PI+QUARTER_PI+HALF_PI,HALF_PI+QUARTER_PI); 
    fill(250);
    stroke('black');
    strokeWeight(1.5);
    arc(eyeRR,height/2, 3*eyeSize,3*eyeSize,PI+QUARTER_PI+HALF_PI,HALF_PI+QUARTER_PI); 
    fill('red');
    rect(3*width/4 - bodyWide/2,height/2+faceHigh/2,bodyWide,bodyHigh,40);
    //Body
    fill('black');
    quad(3*width/4 - bodyWide/2, height/2+faceHeight/2+45, 
         3*width/4 - bodyWide/2, height/2+faceHeight/2+bodyHigh/3+45, 
         3*width/4 + bodyWide/2,  height/2+faceHeight/2+45,
         3*width/4 + bodyWide/2,  height/2+faceHeight/2+bodyHigh/3+45);

    ellipse(3*width/4, height/2+faceHeight/2+40+bodyHigh/6, 40 );
    fill('red');
    rect(width/4+bodyWidth/2-40,height/3+faceHeight/2+130,(3*width/4-bodyWide/2)-(width/4+bodyWidth/2-40),50,40);
}

function mousePressed() {
    faceWidth = random(100, 150);
    faceHeight = random(100, 150);
    eyeSize = random(10, 25);
    bodyWidth=random(150,200);
    bodyHeight=random(300,350);
    armLength=random(120,185);
    bodyWide=random(100,150);
    bodyHigh=random(200,250);
    c1= random(0,225);
    c2= random(0,222);
    c3= random(0,255);
    faceWide= random(100,150);
    faceHigh= random(100,150);
}

I was inspired to do a Spider-man vs Venom scene after seeing clips of them on YouTube. I wanted to use the variables to choreography some sort of fight scene. But due to the large amount of details, I simplified the designs of both characters and applied a changing variable on there arms to hint the “fight”.

Erin Fuller – Looking Outwards 02

Screen Shot 2016-03-06 at 2.58.59 PM — People Viewing “KNBC”

Casey Reas is an American digital artist who uses programming to create artwork that is conceptual, procedural and minimal. The piece I am talking about “KNBC”, done in late 2015, is a continuously generated collage that distorts audio and video television signals. He used a tower located at his artist’s studio in Los Angeles to collect electromagnetic wave frequencies between 602-608 MHz. The signals are collected and used as variables and are output into a “stochastic” audiovisual stream, meaning the visuals have random probability distribution or pattern that might be able to be analyzed statistically not be precisely predicted.

I find this kind of work beautiful because there is a sense of logic underlying it. A lot of why people do not like modern art is because they think it is “random” or “meaningless”, and I appreciate how this new medium of generative art has something lying underneath it that the viewer may not see or understand, but it is there.

Screen Shot 2016-03-06 at 2.59.17 PM — “KNBC”, 2015