Author: sha2@andrew.cmu.edu

Shannon Ha – Project 02 – Variable Face

sketch

var bunW = 106;
var bunH = 88;

var bangsShowH = 166;
var bangsShowW = 305;

var bangsHideH = 83;
var bangsHideW = 305;

var faceWidth = 329;
var faceHeight = 267;

var eyesW = 44;
var eyesH = 31;

var pupilsA = 12;
var pupilsB = 12;
var pupilsXL = 235;
var pupilsY = 259;
var pupilsXR = pupilsXL + 140;


var mouthW = 74;
var mouthH = 21;
var mouthX = 336;
var mouthY = 341;

var backgroundR = 102;
var backgroundG = 45;
var backgroundB = 145;

var haircolor = 0;

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

function draw() {

//background
    background(backgroundR,backgroundG,backgroundB);

//face
    fill(240,199,156);
    noStroke();
    ellipse(320 , 267, faceWidth,  faceHeight);

//bun hair
    fill(haircolor);
    noStroke();
    ellipse(208,143,bunW,bunH);
    ellipse(431,143,bunW,bunH);

//bangs hair
    fill(haircolor);
    noStroke();
    ellipse(320,192,bangsShowW,bangsShowH);

    rectMode(RADIUS);
    noStroke();
    fill(240,199,156);
    rect(321,252,bangsHideW/2,bangsHideH/2);

//hair pins
    stroke(238,28,72);
    strokeWeight(3);
    line(172,175,254,120);
    line(386,120,467,175);

//eyes
    fill(255);
    noStroke();
    ellipse(243,256,eyesW,eyesH);
    ellipse(381,256,eyesW,eyesH);

//pupils
    fill(0);
    ellipse(pupilsXL,pupilsY,pupilsA,pupilsB);
    ellipse(pupilsXR,pupilsY,pupilsA,pupilsB);

//nose
    fill(170,134,77);
    ellipse(304,291,30,21);
    fill(240,199,156);
    ellipse(305,285,30,21);

//mouth
    fill(0);
    ellipse(mouthX,mouthY,mouthW,mouthH);
}

function mousePressed() {
    faceWidth = random(245,348);
    faceHeight = random(272,309);
    bangsHideW = random(236,250);
    bangsHideH = random(50,100);
    haircolor = random(0,255);
    eyesW = random(44,60);
    eyesH = random(31,52);
    pupilsXL = random(229,260);
    pupilsY = random(248,267);
    pupilsA = random(11,29);
    pupilsB = random(11,30);
    mouthX = random(284,378);
    mouthY = random(338,364);
    mouthW = random(33,92);
    mouthH = random(15,63);
    backgroundR = random(0,225);
    backgroundG = random(0,225);
    backgroundB = random(0,225);
}

For this project, I explored how to make a variety of expressions using random variables. At first it was a challenge to figure out the relationships between each variable, but it got easier after I made several errors.

Shannon Ha – Looking Outwards 02

Mitchel Whitelaw’s generative art piece, Succession, is a documentation of ‘digital fossils’ that represent the history and growth of the city of Newcastle. What I admire most about this piece of work is that it manages to use an incredibly simple algorithm to convey the complexity of its subject, which centers around visualizations of the city’s role in Britain’s industrialization. 

Rhodendron by Mitchel Whitelaw
Taken from Teemingvoid.blogspot.com

The algorithm is able to condense the representation of Newcastle’s culture by using two thousand images sourced by Flickr commons, then it uses these images to generate composite images using HTML Canvas. The generative process uses 5 randomly selected images and then placed into a frame using semi-random rules for positioning. This creates a palimpsest effect as the opacity of all the images are low and the layers of images seem to work as a whole and by itself at the same time.

 The indistinguishable boundaries between layers synthesizes the different walks of life, ranging from economy to architecture, that make up the city of Newcastle, and essentially preserves it through the IDs and permalinks assigned to these composites.

Sponsor Tunnel by Mitchel Whitelaw
Taken from Teemingvoid.blogspot.com

Shannon Ha- LookingOutwards-01

Image of Poster maker in use by Deeplocal
Image of Poster Maker’s hardware by Deeplocal

Google Poster Maker is a project developed by small creative agency, Deeplocal, and it is able to create unique posters based of off voice commands. It was featured in the annual Google I/O event. The creative team and Deeplocal collaborated with Google to showcase the versatility of the Google Assistant SDK function which allows you to embed Google Assistant in projects and customize them through something called ‘Actions’. The best thing about the Poster Maker is that the software was developed in Github, and since it is open-sourced, it gives anyone an opportunity to develop their own version. As for the hardware of this project, the developers have also considered the accessibility of all the parts which include a Raspberry Pi, a machined aluminium marker changer and a Corian Drawing Surface, to create the frame of the machine. 

 The inspiration behind this piece of design technology was to find a balance between the precision of a robot and the creativity of a human, which is established by the how the Google Assistant SDK receives the voice request of the user and creates a poster that is generated through the users customization of the API. This project is only one of many that showcases the potential of how Google Assistant’s voice control API can be used to create, build and share based off individuality.

https://www.deeplocal.com/google-poster-maker

Shannon Ha-Project 01-Face

Project 01-Self Portrait

//Shannon Ha
//Section D
//sha2@andrew.cmu.edu
//Project 01: Self-Portrait

function setup() {
    createCanvas(600, 600);
    background(209,177,212);

}

  function draw() {
    //hair
    fill('black');
    noStroke();
    ellipse(304,238,330,297);

    fill('black');
    noStroke();
    rect(139,225,330,252);

    //Neck
    fill(193,147,101);
    noStroke();
    rect(275,395,58,54);
    ellipse(304,450,57,22);

    //face
    fill(219,173,125);
    noStroke();
    ellipse(304,256,231,288);

    //brows
    fill('black');
    noStroke();
    quad(274,213,224,216,240,207,274,204);
    quad(330,203,362,205,380,215,331,212);

    //eyes
    fill('black');
    noStroke();
    ellipse(253,254,27,14);
    ellipse(350,254,27,14);

    fill(219,173,125);
    noStroke();
    ellipse(352,259,12,8);
    ellipse(255,259,12,8);

    //glasses
    stroke(247,207,45);
    strokeWeight(3);
    noFill();
    ellipse(249,254,68,68);
    ellipse(353,254,68,68);
    arc(301,265,39,39,PI,TWO_PI);

    //nose
    fill(175,137,88);
    noStroke();
    ellipse(304,310,31,14);
    fill(219,173,125);
    ellipse(304,305,26,14);

    //mouth
    fill(137,69,70);
    noStroke();
    ellipse(303,347,60,32);
    fill(219,173,125);
    ellipse(303,338,67,19);

    //earrings
    stroke(128,130,133);
    strokeWeight(5);
    noFill();
    ellipse(189,301,16,27);
    ellipse(417,309,16,27);

    //clothing
    fill(182,122,43);
    noStroke();
    rect(275,448,58,49);
    triangle(172,497,275,448,275,497);
    triangle(432,497,333,497,333,448);
    triangle(172,497,172,600,143,600);
    triangle(432,497,432,600,463,600);
    rect(172,497,260,121);

    //clothing shade
    fill(153,101,39);
    noStroke();
    triangle(230,533,230,600,215,600);
    triangle(379,533,379,600,394,600);

    fill(193,147,101);
    noStroke();
    ellipse(304,450,57,22);

    //front hair
    fill('black');
    noStroke();
    arc(219,117,160,119,270,360);
    arc(393,117,190,119,-275,-380);

  }

I started out by hand drawing the self-portrait I would like to create using basic shapes that could easily be found using the 2D primitive shapes. I then translated my drawing into illustrator, and added color and line weight in doing so. Planning the drawing in illustrator helped me efficiently locate the coordinates needed for some commands which was very useful when it came to drawing the shapes. I tried exploring more complex shapes by using the ‘arc’ command, even though it was used in my code, a lot of the point plotting was done through trial and error as I still don’t really understand how the function works. Overall it’s been an eye-opening experience for something I have never done before!