Author: Hae Wan Park

HaeWanPark-LookingOutwards-2

I AM By Sergio Albiac, 2016

I am Portraits by Sergio Albiac

“I am portrait” is a generative collage portrait project by Sergio Albiac. The main source of this project is personal data of one who is portrayed. With his generative custom computer code, Sergio transforms gathered data into a portrait which is an identity metaphor. The portrait which is depicted in the typographic illustration consists of all the personal data that tells stories about the person who is portrayed. He intended his generative computer code to become a medium to tell someone’s personal story and to represent his or her identity. He also developed his own generative techniques and sentiment analysis to have his own artistic style. His generative technique uses machine learning networks trained by only him in order to prevent imitating other artist’s style.

This artwork is incorporated with machine learning. It includes a system being trained from an artist who executes. What I think interesting is he only uses one person’s data at once and also trains machine learning networks alone. So, the portrait is made out of unique personal data within the uniquely trained machine learning networks. In my opinion, this artist understands that visual representation conveying personal meaning must be unique. It is pretty successful to illustrate someone’s unique identity within artist’s own expression and style.

haewanp – Project 01 – Self Portrait

haewanp_self_portrait

//Hae Wan Park
//15104-A
//haewanp@andrew.cmu.edu
//Assignment-01

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

function draw() {
    background (95, 197, 191);
    stroke (92, 52, 103);
    strokeWeight (2.5);
    //Ear
    fill (255, 239, 201);
    ellipse (200, 280, 50, 50);
    ellipse (400, 280, 50, 50);
    //Face
    ellipse (300, 280, 206, 250);
    //Eyebrows
    line (278, 235, 237, 225);
    line (316, 235, 359, 225);
    //Eyes
    fill (255);
    ellipse (255, 270, 40, 20);
    ellipse (345, 270, 40, 20);
    fill (92, 52, 103);
    ellipse (255, 270, 12, 12);
    ellipse (345, 270, 12, 12);
    //Eyelash
    line (260, 260, 264, 249);
    line (250, 260, 245, 249);
    line (350, 260, 354, 249);
    line (340, 260, 335, 249);
    //Nose
    noFill ();
    beginShape ();
    vertex (299, 288);
    vertex (295, 308);
    vertex (281, 315);
    vertex (298, 322);
    endShape ();
    //Mouth
    fill (239, 65, 54);
    strokeJoin (ROUND);
    beginShape ();
    vertex (280, 358);
    vertex (288, 344);
    vertex (295, 354);
    vertex (300, 347);
    vertex (313, 358);
    vertex (297, 374);
    vertex (280, 358);
    vertex (313, 358);
    endShape ();
    //Hair
    fill (255, 231, 102);
    beginShape ();
    vertex (295, 115);
    bezierVertex (340, 140, 300, 205, 250, 200);
    bezierVertex (220, 200, 210, 240, 210, 260);
    bezierVertex (210, 300, 160, 290, 140, 270);
    bezierVertex (170, 280, 160, 260, 155, 240);
    bezierVertex (140, 160, 200, 140, 220, 150);
    bezierVertex (210, 130, 255, 90, 295, 115);
    endShape ();
    beginShape ();
    vertex (315, 130);
    bezierVertex (280, 170, 320, 205, 350, 200);
    bezierVertex (380, 200, 390, 240, 390, 260);
    bezierVertex (390, 300, 440, 290, 450, 270);
    bezierVertex (420, 280, 425, 260, 430, 240);
    bezierVertex (450, 160, 400, 170, 390, 160);
    bezierVertex (390, 160, 385, 160, 375, 140);
    bezierVertex (370, 130, 345, 100, 315, 130);
    endShape ();
    //cheek
    fill (250, 188, 150);
    noStroke ();
    ellipse (245, 310, 40, 40);
    ellipse (355, 310, 40, 40);
    //glasses
    noFill ();
    stroke (92, 52, 103);
    strokeWeight (6);
    ellipse (255, 270, 70, 66);
    ellipse (345, 270, 70, 66);
    line (290, 270, 310, 270);
    //body
    strokeWeight (2.5);
    fill (236, 0, 240);
    beginShape ();
    vertex (171, height);
    vertex (178, 500);
    bezierVertex (179, 500, 180, 450, 235, 450);
    vertex (380, 450);
    bezierVertex (380, 450, 415, 450, 420, 490);
    vertex (425, height);
    endShape ();
    fill (255, 239, 201);
    beginShape ();
    vertex (295 ,490);
    vertex (260, 450)
    vertex (275, 450);
    vertex (285, 405);
    vertex (310, 405);
    vertex (315, 450);
    vertex (335, 450);
    vertex (295 ,490);
    endShape();
}

It was fun to explore various methods in drawing shape with p5.js. Certain shapes were more difficult to control. Those shapes has more complicated rules than other simpler ones. Also, in the process, I had to understand and utilize geometry to place graphic elements to the exact spot that I want.

 

 

HaeWanPark-LookingOutwards-1

Ok Go Tour Visual by Reza Ali 

Reza Ali, a computational designer and engineer was asked to create six pieces of music videos by Ok Go, a rock band from Chicago. These videos were planned to be presented in OK Go’s summer/spring 2014-2015 concert. So, Reza created the motion graphic sequence videos that go along with the Ok Go’s music during a month. The sequences display geometric shape and pattern within generative systems. He utilized his custom software called ‘Rezanator’ in this project. His works were inspired by optical illusion, visual music, OP Art, hyper-sensory immersive media, and synaesthesia.

The Writing’s on the Wall Music Video by Reza Ali / Optical illusion

Reza took a special process to design these videos based on the context. In the concert, Two large V shape of project screen was installed behind the band. He tried to accord with this screen arrangement. So, during this project, he worked on not only a regular screen but also two screens that he put together in a V. As a result, he created a design that V screen enhances the visual effects in a music video.

Development Process of graphic sequence

I pretty much enjoyed how those simple geometric elements in his videos create decent visual effects. For me, the one with optical illusion is especially mesmerizing. All the video pieces even go along with this their music really well.

http://www.syedrezaali.com/#/okgo/