creyes1-LookingOutwards-02

IBM’s The Cognitive Photobooth from Justin Au on Vimeo.

Back in April 2017, IBM hosted an “Art with Watson” exhibit in New York City, featuring a photobooth powered by the eponymous AI that would create a data visualization of the user’s personality in the form of a portrait. With IBM being a large company, I’m surprised that this is the first time I’m seeing this project, but there’s something charming and admirable about creating a warm, human experience with artificial intelligence.

The photobooth asks questions such as the user’s favorite artist or to tell them about their childhood friend, then using text-to-speech and tone analyzers, figures out the user’s personality traits to then be integrated into their portrait. While the personality analysis is entirely up to the AI, the portraits do bear the mark of their creators – icons representing each traits are premade, it’s the algorithm that determines where to place them, in what quantity, and at what size.

Usually personality tests feel somewhat arbitrary, requiring to choose between bubbles that say “Agree” or “Somewhat Agree,” but IBM’s Cognitive Photobooth seems to encourage its users to speak freely on topics that one wouldn’t expect a computer to understand, and it’s admirable to see that human element being worked into technology for an experience that’s not only wonderful, but welcoming.

Check out the project on Behance.

Shots of IBM’s Cognitive Photobooth

creyes1-Project-02-Variable-Face

creyes1 Project-02 Variable Faces

//Christopher Reyes
//Section D
//creyes1@andrew.cmu.edu
//Project-02 Variable Faces

var backgroundR = 255;
var backgroundG = 250;
var backgroundB = 221;
var modelNo = "24601";
var antennaHeight = 50;
var antennaWidth = 10;
var antennaColorR = 204;
var antennaColorG = 86;
var antennaColorB = 34;
var bodyWidth = 100;
var headWidth = 200;
var headHeight = 100;
var earWidth = 30
var earHeight = 50
var eyeWidth = 30;
var eyeHeight = 30;
var mouthWidth = headWidth*.75;


function setup() {

    createCanvas(480, 640);
    rectMode(CENTER);
    noStroke();

}

function draw() {

    background(backgroundR, backgroundG, backgroundB);

    //Creates a line of text with a randomized model number
    fill(119, 124, 130);
    textFont("Courier New", 16);
    textStyle(BOLD);
    text("Model No. " + modelNo, 25, 31);

    fill(220);

    //Antenna - draws a rectangle relative to head at a random length
    var antennaTop = height/2 - headHeight;
    var antennaHeight = headHeight*.75;
    push();
    rectMode(CORNER);
    rect(width/2 - antennaWidth/2, height/2 - headHeight,
         antennaWidth, antennaHeight);

    //Antenna Light - draws a circle on top of the antenna,
    //                with a randomly selected fill color
    fill(antennaColorR, antennaColorG, antennaColorB);
    ellipse(width/2, height/2 - headHeight, 50, 50);
    pop();

    fill(100, 104, 109); //Darker gray

    //Body - draws two overlapping rounded rectangles
    //       at a random size relative to the head
    push();
    rectMode(CORNER);
    rect(width/2 - bodyWidth/2, height/2 + headHeight*.75,
         bodyWidth, height/2, 20, 20, 20, 20);

    fill(119, 124, 130); //Lighter gray
    rect(width/2 - bodyWidth/2, height/2 + headHeight*.75,
         bodyWidth*.9, height/2, 20, 20, 20, 20);
    pop();

    //Head - draws two overlapping rounded rectangles at a random size
    fill(100, 104, 109);
    rect(width/2, height/2, headWidth, headHeight, 10, 10, 10, 10);

    push();
    rectMode(CORNER);
    fill(119, 124, 130);
    rect(width/2 - headWidth/2, height/2 - headHeight/2,
         headWidth*.95, headHeight, 10, 10, 10, 10);
    pop();

    //Ears - draws two rounded rectangles at a random size,
    //       relative to head
    var earLX = width/2 - headWidth*.65;
    var earRX = width/2 + headWidth*.65;
    fill(119, 124, 130);
    rect(earLX, height/2, earWidth, earHeight, 10, 10, 10, 10);
    fill(100, 104, 109);
    rect(earRX, height/2, earWidth, earHeight, 10, 10, 10, 10);

    //Eyes - draws two ellipses at a random size, position relative to head
    var eyeLX = width/2 - headWidth/4;
    var eyeRX = width/2 + headWidth/4;
    var eyeY = height/2 - headHeight/4;
    fill(240);
    ellipse(eyeLX, eyeY, eyeWidth, eyeHeight);
    ellipse(eyeRX, eyeY, eyeWidth, eyeHeight);

    //Mouth - draws a rounded rectangle at a random size,
    //        position relative to head
    var mouthY = height/2 + headHeight/4;
    var mouthHeight = headHeight*.15
    rect(width/2, mouthY, mouthWidth, mouthHeight, 20, 20, 20, 20);

}

//Generates a random string of 6 numbers to create a model number for each robot
function makeid() {

    var modelNo = "";
    var possible = "0123456789";

    for (var i = 0; i < 5; i++)
        modelNo += possible.charAt(Math.floor(Math.random() * possible.length));

    return modelNo;
//Credit: https://stackoverflow.com/a/1349426 - user csharptest.net

}

function mousePressed() {

    //Selects a random background color within certain parameters on mouse-click
    backgroundR = random(221, 255);
    backgroundG = random(221, 255);
    backgroundB = random(221, 255);

    modelNo = makeid(); //Creates a new model number

    antennaHeight = random(headHeight/2, headHeight*1.5);

    //Antenna Light Colors, generates a random color on mouse-click
    antennaColorR = random(0, 256);
    antennaColorG = random(0, 256);
    antennaColorB = random(0, 256);

    bodyWidth = random(headWidth/3, headWidth*2);

    headWidth = random(150, 250);
    headHeight = random(70, 200);

    earWidth = random(headWidth*.1, headWidth/4);
    earHeight = random(headHeight/4, headHeight*.75);

    eyeWidth = random(25, 60);
    eyeHeight = random(25, 60);

    mouthWidth = random(headWidth/4, headWidth*.75);

}

My previous project involved a lot of pixel-perfect arc alignments, so I wanted to just work with simple shapes this time around to really focus on the code. A lot of the process was trial-and-error, basing the rest of the body around the robot’s head. Additionally, most of the randomization is set to be a certain proportion relative to the head so that the randomized elements don’t get too out of control and start forming a gray blob instead of communicating a robot.

Christopher Reyes – Project-01 – Self-Portrait (Face)

Christopher Reyes Project-01

/*
Christopher Reyes
creyes1@andrew.cmu.edu
Section D
Project-01
*/

function setup() {

    createCanvas(600, 600); //Sets canvas size
    background(240); //Sets background color to light grey
    angleMode(DEGREES);
    strokeWeight(15);

}

function draw() {

    noStroke();

    //Draws a blue ellipse
    fill(121, 178, 178);
    ellipse(418, 192, 277, 269);

    //Draws a tan circle
    fill(206, 167, 133);
    ellipse(218, 340, 381, 381);

    //Draws a brown ellipse and rotates it 10 degrees
    fill(68, 49, 38);
    push();
    translate(320, 400);
    rotate(10);
    ellipse(0, 0, 280, 112);
    pop();

    //Draws several black shapes
    fill(0);
    ellipse(251, 295, 79, 84);
    ellipse(430, 295, 79, 84);
    rect(303, 401, 50, 31, 4, 4, 25, 25);

    stroke(0);
    strokeCap(ROUND);
    noFill();

    //Black ellipse "ear," no fill, rotated 344 degrees
    push();
    translate(142, 306);
    rotate(344);
    ellipse(0, 0, 60, 116);
    pop();

    //Draws a black arc, hairline
    arc(248, 254, 560, 102, 270, 0);

    //Black arcs for head shape, with rotations
    push();
    translate(420, 200);
    rotate(-11);
    arc(0, 0, 564, 242, -180, 270)
    pop();

    push();
    translate(421, 209);
    rotate(-11);
    arc(0, 0, 300, 260, 270, 0);
    pop();

    push();
    translate(461, 351.5);
    rotate(-343);
    arc(0, 0, 50, 250, 270, 80);
    pop();

    push();
    translate(208, 380);
    rotate(15);
    arc(0, 0, 500, 100, 0, 90);
    pop();

    push();
    translate(198, 394);
    rotate(9);
    arc(0, 0, 50, 68, 90, 180);
    pop();

    //Draws a pair of green glasses
    stroke(28, 91, 40);
    rect(172, 284, 160, 100, 12, 12, 37, 37);
    rect(377, 284, 160, 100, 12, 12, 37, 37);
    arc(360, 305, 90, 10, 190, 340);

}

For the sake of planning, I created a mock-up of what the image would look like using Adobe Illustrator, referencing that image in order to recreate it in JavaScript. However, I was not expecting the standard rotate(); command to rotate an object around the origin rather than the object’s center. To work around this, I utilized push(); and pop();, essentially rotating the canvas itself for a particular object to get it to appear in the desired orientation.

ChristopherReyes-LookingOutwards-1

Samples of Haywood’s work: Resonance, 8/17/17; Rainbow Raindrops, 8/23/17; Lovely Impressions, 8/19/17; Dream Bath, 8/14/17.

Artist Tyler Haywood has been creating GIF art for every day for the past 1583 days. And counting.

What started as a way for him to document his progress with various computer programs eventually turned into a daily creative ritual that has shown no signs of slowing down. Using a blend of Cinema 4D and the Adobe Creative Suite, Haywood diligently creates GIFs that are both hypnotic and satisfying, playing with geometry and light. While the sheer amount of work Haywood has produced is something to be admired, it further opens up the possibilities for a medium born from the internet. Most of his work tends to be non-objective studies, but the medium does seem to have the potential to possess some degree of storytelling.

Meanwhile, Haywood continues to experiment and share his creative journey with the world – have a look for yourself here.