Month: September 2019

Siwei Xie – Looking Outwards – 02

Human dancing motions developed by machine learning and GAN technology.

“Blackberry Winter” is an AI artistic project developed by Christian Mio Loclair. Loclair first trains a computer designer GAN (Generative Adversarial Network) by a curated dataset of visual arts and 120.000 body postures, then GAN uses textures, colors and gradients to create continuous artificial human motions (“dance”).

What inspires me about the project is that, AI is able to synthesize science (how human body coordinates) and arts (creation of elegant movements). Loclair’s creation provides inspiration for choreographers as well as scientists who try to study human motions. To be more effective, the creator can have a larger database of human postures and dancing inspirations, which can help GAN create more sophisticated motions. 

Loclair has started to code and to dance since 1992. His long-time observations on the two worlds motivate his ongoing desire to digitize human actions and to humanize digital procedures, which lead to this beautiful AI project.

A series of dancing motions generated in “Blackberry Winter” project.

Original Source Here.

Siwei Xie-Project-02-Variable Face

variable face

//Siwei Xie
//Section 1-B
//sxie1@andrew.cmu.edu
//Project-02-variable face

var mouthHeight = 60;
var eyeHeight = 40;
var hatAdjustor = 2.5;
var hatColor = (0,0,196);
var eyebrowHeight = 200;
var pupilSize = 16;


function setup() {
    createCanvas(480,640);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {

    //re-draw background to avoid "previous hats" when hat moves
    background(220);

    //hair
    fill(0);
    rect(115,120,270,300);

    //clothes
    fill(122,35,76);
    noStroke();
    quad(150, 391, 345, 390, 450, 640,100, 640);

    //face
    fill(232,196,131);
    noStroke();
    ellipse(250,250,250,300);

    //left eye
    fill(3,3,3);
    ellipse(200,250,40,eyeHeight);

    //right eye
    fill(3,3,3);
    ellipse(300,250,40,eyeHeight);

    //nose
    fill(179,149,85);
    triangle(250,260,240,300,260,300);

    //mouth
    fill(208,68,61);
    ellipse(250,345,35,mouthHeight);

    // left pupil
    fill(255)
    noStroke();
    square(195, 245, pupilSize);

    // right pupil
    fill(255)
    noStroke();
    square(295, 245, pupilSize);

    // right earring
    fill(128,194,233);
    arc(370, 300, 60, 60, 15, HALF_PI);

    // left earring
    fill(128,194,233);
    arc(120, 300, 60, 60, 15, HALF_PI);

    //hat
    var hatPosition = width / 2 + hatAdjustor;
    fill(hatColor,0,196);
    ellipse(hatPosition,130,290,125);

    // left eyebrow (new, using curveVertex)
    stroke(0);
    strokeWeight(5);
    point(215, 220);
    point(195, eyebrowHeight);
    point(170, 210);
    point(160, 220);
    strokeWeight(5);

    noFill();
    beginShape();
    curveVertex(215, 220);
    curveVertex(215, 220);
    curveVertex(195, eyebrowHeight);
    curveVertex(170, 210);
    curveVertex(160, 220);
    curveVertex(160, 220);
    endShape();

    //right eyebrow (new, using curveVertex)
    stroke(0);
    strokeWeight(0);
    point(350, 220);
    point(340, 210);
    point(310, eyebrowHeight);
    point(290, 220);
    strokeWeight(5);

    noFill();
    beginShape();
    curveVertex(350, 220);
    curveVertex(350, 220);
    curveVertex(340, 210);
    curveVertex(310, eyebrowHeight);
    curveVertex(290, 220);
    curveVertex(290, 220);
    endShape();

}

function mousePressed() {
    // when the user clicks, these variables are reassigned
    // to random values within specified ranges. For example,
    // 'mouthHeight' gets a random value between 15 and 55.
    mouthHeight = random(15, 60);
    eyeHeight = random(20, 50);
    hatAdjustor = random(-30,30);
    hatColor = random (0,196);
    eyebrowHeight = random (200,220);
    pupilSize = random (8,16);

}

I had fun creating a face which includes emotions such as “surprised”, “angry” and “calm.” The story is that the hat accidentally moves and changes color, which surprises the girl. She then becomes angry, since the hat is very out of place.

Jai Sawkar – Looking Outwards – 02

komorebi is a Platform that uses a robotic projector and generative projections to replicate the natural reflections and shadows of sunlight.

This week, I learned about Komorebi, a project created by designer Leslie Nooteboom. Through this projector, sunlight & natural reflections are generated and shown on surfaces, mimicking daylight in a room. I spent most of my adolescent life in the Seattle Area and then moving to Pittsburgh for school; moreover, this year, my room is located in the basement of my house. It is through these experiences that I can attest that daylight, or lack of it, can play a large impact on how you feel. Dwindling amounts of sunlight in the winter and simply minimal daylight staying in a basement can drastically change how you feel; hence, through this platform that generates real-time data (anywhere in the world) can enhance the day-to-day lives of its users, boosting there mood and energy anytime they are in the same room as it.

From my understanding of how the platform works, Kopmorebi uses data of sunlight patterns throughout its available cities and relays the info to the platform itself. It is there that light and its “random shadows” are signaled to mimic the illusion of light through a window.

What I admire about the artist is they saw a need for sunlight that many of us are seeing less & less of; they used both design & computation to create a solution and made it beautiful.

Article

Jina Lee – Looking Outwards 02


Robert Hodgin is an interactive director and co-founder of Rare Volumes. His project “Taxi, Taxi!” shows NYC Open Data taxi against routes created with Open Street Map. This digital installation is shown through a 3D model of New York City. This project was shown in Samsung 837 which is a three story display. He used Cinder C++.

This photo shows the digital installation that is shown in Samsung 837.

I admire how inclusive this project is. Everyone can relate to looking on their smartphone to find the fastest and shortest way to get to their destination. This digital installation can help people understand the main routes for taxis so they can decide whether it is a good idea or not to take it. In addition, because it is 3D it makes it easier to understand the map. I feel like sometimes when I am on on the Apple Maps it is difficult to read because it is flat and I can not comprehend the map as well. I understand that right now the design is only an installation, but I feel like in the future they could create for smartphones so that everyone can use. I think I have slight knowledge about the algorithm that was used to generate this work. In high school, I took Geospatial Analysis, so we would create various routes depending on the prompt with Open Street Maps. In order to do so, we had to collect data points so that it was easier to create on the software. Through that program you could create buffers, paths, and other ways of identifying data points on a map. I really enjoyed how clean and simple the design was. Usually, it feels like maps are so overwhelming with so much information, but this one didn’t.

People looking at the map.

Website Link

SooA Kim: Looking Outwards – 02

Google PAIR’s project, Waterfall of Meaning

I saw this installation by Google PAIR’s project in the AI: More than Human exhibition at the Barbican Centre in UK over the summer. Waterfall of Meaning is based on generative machine learning system that translates sentences to create a “map” of word meanings. It shows how a machine absorbs human associations between words and analyze them into categories by using the algorithms. I remember putting a word “theater” into the machine and the word travelled from the top of the installation in a style of word embedding where you can also see all the other words that associates with “theater.” As the word travelled down, it went through different level of categories in certain direction where the machine identifies which category the word belongs in. (i.e. good vs bad, human vs machine, female vs male)

Ankitha Vasudev – Project 02 – Variable Face


sketch

// Ankitha Vasudev
// Section B 
// ankithav@andrew.cmu.edu
// Project-02-Variable Face

//global variables
var faceWidth = 200; 
var faceHeight = 150;
var earH = 50;
var earW = 40;
var eyeW = 20;
var eyeH = 30;
var eyeColor = 0;
var r = 255;
var g = 217;
var b = 255;
var cheekw = 20;
var cheekh = 20;


function setup() {
    createCanvas(640, 480);
    background(167, 220, 200);
}

function draw() {

    //background
    noStroke();
    fill(r, g, b);
    rect(0, 0, 640, 480);
    fill(167, 220, 200);
    rect(20, 20, 600, 440);

    //ears
    noStroke();
    fill(110, 59, 0);
    ellipse(237, 240, earW, earH);
    ellipse(402, 240, earW, earH);

    //face
    fill(110, 59, 0);
    ellipse(width / 2, 220, faceWidth - 50, faceHeight);
    ellipse(width / 2, 300, faceWidth, faceHeight);
    fill(229, 222, 180);
    ellipse(width / 2, 220, faceWidth - 80, faceHeight - 30);
    ellipse(width / 2, 300, faceWidth - 30, faceHeight - 30);

    //eyes
    stroke(255);
    strokeWeight(12);
    fill(eyeColor);
    ellipse(295, 240, eyeW, eyeH);
    ellipse(345, 240, eyeW, eyeH);

    //mouth
    noFill();
    stroke(255, 160, 255);
    strokeWeight(4);
    beginShape();
    curveVertex(280, 300);
    curveVertex(300, 320);
    curveVertex(340, 320);
    curveVertex(360, 300);
    endShape();

    //cheeks
    noStroke();
    fill(255, 180, 255);
    ellipse(265, 300, cheekw, cheekh);
    ellipse(375, 300, cheekw, cheekh);
}

function mousePressed(){
    faceWidth = random(200, 230); 
    faceHeight = random(150, 180);
    earH = random(30, 100);
    eyeW = random(20, 40);
    eyeH = random(35, 60);
    eyeColor = random(0, 200);
    r = random(190, 250);
    g = random(190, 250);
    b = random(230, 255);
    cheekw = random(20, 40);
    cheekh = random(20, 40);
}

I wanted to make something that was fun and creative. I used the face shape and features of a monkey for this project. It was interesting to play around with different variables that allowed me to change the colors and shapes in the program. 

Ian Kaneko-Project 02-Variable Face

For this project I did a simple cartoon face that I could exaggerate features on. I experimented a bit with curveVertex’s for the mouth and I think it turned out pretty good. The hardest part about this was deciding what needed to randomized and what I could lock in place.

ikaneko Variable Faces

// Ian Kaneko
// Section D
// ikaneko@andrew.cmu.edu
// Project-02 Variable Face


var headWidth = 250;
var headHeight = 250;
var noseWidth = 80;
var noseHeight = 80;
var noseY = 160 + noseHeight / 2;
var mouthTopLeftX = 175;
var mouthTopLeftY = 260;
var mouthTopRightX = 225;
var mouthTopRightY = 260;
var mouthBottomLeftX = 160;
var mouthBottomLeftY = 300;
var mouthBottomRightX = 240;
var mouthBottomRightY = 300;
var outsideBrowY = 120;
var insideBrowY = 120;


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

function draw() {
  background(140, 100, 80);
  noStroke();
  
  // Head
  
  fill(200, 230, 250);
  ellipse(200, 200, headWidth, headHeight);
  
  // Mouth
  fill(230, 200, 230);
    
    point(mouthTopLeftX, mouthTopLeftY);
    point(mouthBottomLeftX, mouthBottomLeftY);
    point(mouthTopRightX, mouthTopRightY);
    point(mouthBottomRightX, mouthBottomRightY);
  
  beginShape();
    curveVertex(mouthBottomLeftX, mouthBottomLeftY);
    curveVertex(mouthBottomLeftX, mouthBottomLeftY);
    curveVertex(mouthTopLeftX, mouthTopLeftY);
    curveVertex(mouthTopRightX, mouthTopRightY);
    curveVertex(mouthBottomRightX, mouthBottomRightY);
    curveVertex(mouthBottomRightX, mouthBottomRightY);
  endShape();
  
  // Nose
  
  fill(150, 200, 230);
  ellipse(200, 160 + noseHeight / 2, noseWidth, noseHeight);
  
  // Eyes
  
  fill(130, 100, 150);
  circle(150, 150, 30);
  circle(250, 150, 30);
  
  strokeWeight(7);
  stroke(150, 200, 230);
  line(120, outsideBrowY, 175, insideBrowY);
  line(280, outsideBrowY, 225, insideBrowY);
  
  // Randomize
  
}
function mousePressed() {
  headWidth = random(245, 290);
  headHeight = random(245, 290);
  mouthBottomLeftX = random(150, 180);
  mouthBottomLeftY = random(290, 310);
  mouthBottomRightX = random(230, 250);
  mouthBottomRightY = random(290, 310);
  noseWidth = random(30, 70);
  noseHeight = random(70, 180);
  outsideBrowY = random(100, 140);
  insideBrowY = random(100, 140);
}

Jai Sawkar – Project 02 – Variable Face

Portrait_Jai

//Jai Sawkar
//Section C
//jsawkar@andrew.cmu.edu
//Project-02: Variable Face 

var milkBody = '#99dfff';
var milkDark = '#008bcc';
var milkDark1 = '#80d7ff';
var mouth1 = 44;
var mouth2 = 131;
var mouth3 = 171;
var compli1 = 179;
var compli2 = 231;
var compli3 = 255;
var pupil = 9.5;
var pupilLeft2 = 274;
var pupilRight = 321;
var eyeLeft = 0;
var eyeRight = 0;
var bg1 = 230;
var bg2 = 247;
var bg3 = 255;
var m1 = 299;
var m2 = 239;
var m3 = 42;
var m4 = 17;

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

function draw() {
    background(bg1, bg2, bg3);

    stroke(1)

    //milkcarton
    fill(milkBody);
    quad(217.4, 132.1, 301.1, 127.4, 307.8, 142.3, 225.4, 147.7);
    quad(225.4, 147.7, 257.9, 190.7, 339.4, 179.6, 307.8, 142.3);
    quad(257.9, 190.7, 339.4, 179.6, 339.3, 283.5, 261, 298);

    //shadow1
    fill(milkDark1);
    quad(183.5, 178.6, 185.4, 280.4, 261.1, 298.1, 257.9, 190.7);
    triangle(257.9, 190.7, 183.5, 178.6, 225.4, 147.6);

    //shadow2
    fill(0, 139, 204, 80);
    noStroke()
    triangle(183.5, 178.7, 231.1, 154.9, 225.4, 147.7);

    //shadow3
    fill(0, 139, 204, 80);
    triangle(183.5, 178.7, 242.7, 171.9, 231, 154.8)
    stroke(1)
    line(183.5, 178.7, 242.7, 171.9)

    //faces

    noStroke()
    //face1
    fill(milkDark)
    //left and right eye
    ellipse(278, 215, eyeLeft)
    ellipse(323, 210, eyeRight)


    //pupil1
    noStroke()
    fill(compli1, compli2, compli3)
    ellipse(pupilLeft2, 213, pupil)
    ellipse(pupilRight, 208, pupil)

    //mouth1
    fill(milkDark)
    ellipse(m1, m2, m3, m4)
}

function mousePressed() {
    pupil = random(9.5, 14)
    pupilLeft2 = random(274, 280)
    pupilRight = random(321, 328)
    eyeLeft = random(25, 30)
    eyeRight = random(25, 30)
    bg1 = random(102, 240)
    bg2 = random(0, 204)
    bg3 = random(204, 255)
    m1 = random(290, 310)
    m2 = random(239, 250)
    m3 = random(30, 50)
    m4 = random(10, 24)

}

When beginning the project, I wanted to start with something normal and bland, but once clicked, it would turn into an unexpected reaction. It is for this reason I chose a milk carton and made the initial face quite neutral; once activated, a sense of euphoria fills the little carton, changing his expression & the background with every click.

Raymond Pai-Looking Outwards-02

LIA created a generative application which expresses feelings of summer. Slow-moving zigzag lines are generated as bands going across the screen. These colors and textures are sampled from images of beaches and ocean waves. LIA herself is based in Australia. She is considered a pioneer in the medium of generative art on the internet. Although the work is created with code, many traditional drawing and painting concepts are employed to create an artwork. The ‘Summer’ series should give the audience feelings of calmness and heat. The lines simulate ocean waves as they roll into the shore where you sit watching. Lines cross in these bands, which appear like reflections in the water and waves. It is important to note that perspective is considered in the widths of the bands in order to convey the depth and distance of the ‘waves.’ LIA also created 3 other versions: Spring, Fall, and Winter, which employ their own pallets to express their respective season. Together, the series is called Four Seasons, which all use live generative art to create a moving image. Below is a random still from ‘Summer’.

‘Summer’ a randomly generated image to express feelings of summer

Emma N-M LO-02

Generative Knitting Design Tools by Dr. Woohoo (2016)

Dr. Woohoo created a generative work where it captured color palettes and turned them into patterns and applied it to a knitted design, such as sneakers. I enjoy the fun color palettes that are created and the patterns the come about from those colors. The patterns are typically wavy lines intersecting to create an interesting visual. I think it is really cool how the pattern that is created gets interpreted another way when it is knitted into a shoe. You can see the colors are the same, but the knitted pattern is not clearly the same as the generative pattern. The color palettes are captured through colors in the world, and then an algorithm is used to generate a pattern from those colors to knit onto a design. I think Dr. Woohoo’s artistic sensibilities comes from knowing how to create interesting color palettes and know when he has an eye-catching pattern.