Author: ifv@andrew.cmu.edu

Isabelle LookingOutwards-02

Mario Klingemann:

Artificial Neural Artmaking Networks

Video and Audio generated by Klingemann’s program

Image Generated by Klingemann’s program

Image Generated by Klingemann’s program

Klingemann uses machines to generate art, he does this by feeding visual information into the code of generative adversarial networks, which can teach themselves how to create digital images that look like ones a human would create. What immediately struck me were the the pieces created by the machine. The embedded video struck me as particularly haunting (the program generated the music as well). Also the quality exceeded my expectations of computer generated content, before seeing this work I imagined pieces of this nature to follow grid structures/patterns.The algorithm mimics a neural network which responds to images by learning and creating. All of the works displayed follow a surrealist style with darker undertones. Since Klingemann did some of his work in continued collaboration with Google I am excited to see what the future holds for his work with the resources made available by Google.

Source: https://www.wired.com/story/neurographer-puts-the-art-in-artificial-intelligence/

Isabelle Vincent Project-02

sketch

var eyeSize = 20;
var faceWidth = 100;
var faceHeight = 150;
var earWidth = 10;
var earHeight = 10;
var FacecolorPt1 = 100;
var FacecolorPt2 = 100;
var FacecolorPt3 = 100;
var StrokecolorPt1 = 0;
var StrokecolorPt2 = 0;
var StrokecolorPt3 = 0;
var thic = 1;
var y1 = 220;
var y2 = 260;
function setup() {
    createCanvas(640, 480);
}

function draw() {
    background(51, 153, 102);
    //body
    fill(0);
    stroke(0);
    triangle(320 - faceWidth/2 - 40 , 480 , 320 , 240 , 320 + faceWidth/2 + 40,480);
    //face elliplse
    fill(FacecolorPt1, FacecolorPt2, FacecolorPt3);
    stroke(StrokecolorPt1, StrokecolorPt2, StrokecolorPt3);
    ellipseMode(CENTER);
    ellipse(320, 240, faceWidth,  faceHeight);
    //eye ellilpse
    fill(0);
    var eyeLeftX = width / 2 - faceWidth * 0.25;
    var eyeRightX = width / 2 + faceWidth * 0.25;
    ellipse(eyeLeftX, height / 2, eyeSize, eyeSize);
    ellipse(eyeRightX, height / 2, eyeSize, eyeSize);
    //nose
    stroke(0);
    strokeWeight(thic);
    line(320,y1,320,y2);
    //hat
    triangle(320 - faceWidth/2 , 240 - faceHeight/2, 320, 0, 320 + faceWidth/2, 240 - faceHeight/2);
    rectMode(CORNERS);
    rect(320 - faceWidth/2 - 30, 240 - faceHeight/2 - 20, 320 + faceWidth/2 + 30, 240 - faceHeight/2 + 20);
    //Cauldron
    stroke(0);
    strokeWeight(5);
    fill(0);
    ellipseMode(CORNER);
    ellipse(10,430,50,50);
    rectMode(CORNER);
    rect(5,425,60,20);
    //Cursor Egg
    fill(255);
    strokeWeight(3);
    stroke(255);
    ellipse(mouseX,mouseY,20,30);
}

function mousePressed() {
    faceWidth = random(50, 400);
    faceHeight = random(100, 340);
    eyeSize = random(10, 30);
    earHeight = random(10,25);
    FacecolorPt1 = random(10,255);
    FacecolorPt2 = random(10,255);
    FacecolorPt3 = random(10,255);
    StrokecolorPt1 = random(0,255);
    StrokecolorPt2 = random(0,255);
    StrokecolorPt3 = random(0,255);
    thic = random(1,10);
    y1 = random(240 - eyeSize, 240 - eyeSize);
    y2 = random(y1 + 5,y1 + 30);
}

I used the given template as my basis; I changed some of the original framework and built on top of it. After randomizing the skin color I decided to make the faces into witches because most of the randomized skin colors look non-human and similar to a cartoon witch.

Isabelle Looking Outwards 01

Creator: Umbrellium

Project: Assemblance

Video demonstrating the project.

In this project participants use their hands, feet and bodies to control and guide lasers. The laser beams create light structures that participants can manipulate and fortify. Umbrellium Designs is the group behind this project, the group focuses on projects that encourage people to participate in design. This project was partially supported by the sponsorship of Kvant Laser Systems and Pangolin Laser Systems who provided the materials necessary for the project’s execution. Umbrellium consists of “a team of architects, designers, tactical urbanists and creative technologists”. They are Based in London so most of their projects are hosted in the UK. The lasers users interacted with were computer controlled so code was required to follow the motions of users hands, feets and bodies and control the interaction between different users lasers. Prior works that utilized motion tracking, such as the kinect which has drawing capabilities, may have partially inspired this piece.

Sources:

Project Page

About Umbrellium

Isabelle-Project-01-Face

sketch

//Isabelle Vincent
//15-104 E
//ifv@andrew.cmu.edu
//Project-01-Face
function setup() {
    createCanvas(600, 600);
    background(76,143,193);
}
function draw() {
//Back of hair Oval
    fill(245,120,44);
    stroke(245,120,44);
    ellipseMode(CENTER);
    ellipse(300,150,430,250);
//Back of hair rectangle
    fill(245,120,44);
    stroke(245,120,44);
    rect(85,150,430,500);
//Main Head Ellipse
    fill(255, 229, 204);
    stroke(255, 229, 204);
    ellipseMode(CENTER);
    ellipse(300,280,330,430);
//Chin Defining Quad left
    fill(245,120,44);
    stroke(245,120,44);
    quad(135,420,300,495,135,495,125,420);
//Chin defining Quad Right
    fill(245,120,44);
    stroke(245,120,44);
    quad(465,420,475,420,475,495,300,495);
//Forehead Hair Right
    fill(245,120,44);
    stroke(245,120,44);
    quad(320,45,465,150,465,270,300,63,);
//Forehead Hair Left
    fill(245,120,44);
    stroke(245,120,44);
    quad(125,150,280,45,300,63,125,270);
//Nose Line Left
    fill(255,210,153);
    stroke(255,204,153);
    strokeWeight(6);
    line(283,240,283,320);
//Nose Line Right
    fill(255,204,153);
    stroke(255,210,153);
    strokeWeight(6);
    line(317,240,317,320);
//Nostril left
    fill(255,204,153);
    stroke(255,210,153);
    strokeWeight(6);
    line(290,335,270,330);
//Nostril Right
    fill(255,204,153);
    stroke(255,210,153);
    strokeWeight(6);
    line(310,335,330,330);
//Eye Left
    fill(253,251,244);
    stroke(255,210,153);
    strokeWeight(6);
    ellipseMode(CORNER);
    ellipse(173,240,90,40);
//Eye Right
    fill(253,251,244);
    stroke(255,210,153);
    strokeWeight(6);
    ellipseMode(CORNER);
    ellipse(337,240,90,40);
//Iris Left
    fill(76,143,193);
    stroke(76,127,193);
    strokeWeight(6);
    ellipseMode(CENTER);
    ellipse(218,260,33,33);
//Iris Right
    fill(76,143,193);
    stroke(76,127,193);
    strokeWeight(6);
    ellipseMode(CENTER);
    ellipse(382,260,33,33);
//Eyebrow Left
    fill(245,120,44);
    stroke(245,120,44);
    strokeWeight(6);
    line(173,215,263,215);
//Eyebrow Right
    fill(245,120,44);
    stroke(245,120,44);
    strokeWeight(6);
    line(337,215,427,215);
//Lips Ellipse
    fill(255,180,143);
    stroke(235,139,91);
    strokeWeight(6);
    ellipseMode(CENTER);
    ellipse(300,390,74,30);
//Mouth Middle line
    fill(235,139,91);
    stroke(235,139,91);
    strokeWeight(6);
    line(263,390,337,390);
//Mouth Left line
    fill(235,139,91);
    stroke(235,139,91);
    strokeWeight(6);
    line(263,390,218,360);
//Mouth Right Line
    fill(235,139,91);
    stroke(235,139,91);
    strokeWeight(6);
    line(337,390,382,360);
//Freckles Left Side
    fill(194,96,47);
    stroke(194,96,47);
    strokeWeight(6);
//Freckles
    fill(194,96,47);
    stroke(194,96,47);
    strokeWeight(6);
    point(185,300);
    point(410,300);
    point(356,300);
    point(242,300);
    point(213.5,313);
    point(383,313);

}

I started this project by planning out which shapes would overlap in which order by sketching a rough sequential draft in my sketchbook. I used the center point of my main hair ellipse as an anchor for the rest of my shapes so when needed i could calculate the required points to make certain elements symmetrical. I am happy with my final product because it bears resemblance to me and has its own style.