Author: Hanna Jang

hannajan-LookingOutwards-02

                           Video above depicts demonstration of The Classyfier

I reviewed some of the recommended blogs and websites on generative art and stumbled upon one called The Classifier (2017) by Benedict Hubener, Stephanie Lee, and Kelvyn Marte. It is a table with AI that detects the situation and the sounds of beverages being consumed to choose music that fits the situation accordingly.

The algorithm that generates this art, takes into account the different sound patterns that are characteristic for each drink from pre—trained examples. The creator’s artistic sensibilities are manifest in the algorithm through how well each situation or drink type is detected and the type of music that then ensues to fill the ambiance.

                                               Pictured above: The Classifier

I chose to review this particular art piece because I think it is one that was created for a useful purpose. It can be used to elevate relaxing, improve socializations, and ease events that take place in everyday citizens’ lives. It reminded me that the skills I learned in this class can be used in a similarly useful way. Also, for future projects, I can think more about the usability of my designs and codes for the user and their experiences.

Project-02-Variable-Face

sketch

//Hanna Jang 
//hannajan@andrew.cmu.edu 
//Section B 
//Project 2: Variable Faces

var BGcircleSize=250;
var BGcircleSize2=280;
var UpperFaceWidth=100; 
var UpperFaceHeight=80; 
var SmileX=300; 
var SmileY=245;
var Smilewidth=15; 
var SmileHeight=15; 
var anglestart=0; 
var LowerFaceWidth=150; 
var LowerFaceHeight=100;
var EyeSize=27;
var PupilSize=7;
var NostrilWidth=5;
var NostrilHeight=15; 
var EarSize=25;
var InnerEarSize=13;

function setup() {
    createCanvas(640, 480);
    background(245, 196, 224);
}

function draw() {
	//Background Circles
	fill(27, 71, 128);
	ellipse(width/2, height/2-45, BGcircleSize2, BGcircleSize2);
	fill(255);
	noStroke();
	ellipse(width/2, height/2-45, BGcircleSize, BGcircleSize);
	
	//ears 
	fill(202, 197, 245);
	var LXear =width/2-UpperFaceWidth*0.40; 
	var RXear =width/2+UpperFaceWidth*0.40; 
	ellipse(LXear, height/2-105, EarSize, EarSize);
	ellipse(RXear, height/2-105, EarSize, EarSize);
	
	//innerears
	fill(157, 141, 187); 
	var LXear =width/2-UpperFaceWidth*0.40; 
	var RXear =width/2+UpperFaceWidth*0.40; 
	ellipse(LXear, height/2-105, InnerEarSize, InnerEarSize);
	ellipse(RXear, height/2-105, InnerEarSize, InnerEarSize);
	
	//UpperFace
	fill(202, 197, 245); 
	ellipse(width/2, height/2-75, UpperFaceWidth, UpperFaceHeight);
	
	//LowerFace 
	fill(202, 197, 245);
	ellipse(width/2, height/2-20, LowerFaceWidth, LowerFaceHeight);

	//eyes 
	var LXeye =width/2-UpperFaceWidth*0.27;
	var RXeye =width/2+UpperFaceWidth*0.27;
	fill(255);
	noStroke();
	ellipse(LXeye, height/2-83, EyeSize, EyeSize);
	ellipse(RXeye, height/2-83, EyeSize, EyeSize);
	
	//pupils
	var LXpupil =width/2-UpperFaceWidth*0.27; 
	var RXpupil =width/2+UpperFaceWidth*0.27;
	fill(0);
	ellipse(LXpupil, height/2-81, PupilSize, PupilSize);
	ellipse(RXpupil, height/2-81, PupilSize, PupilSize);
	
	//nostrils
	var LXnostril =width/2-LowerFaceWidth*0.30;
	var RXnostril =width/2+LowerFaceWidth*0.30;
	ellipse(LXnostril, height/2-30, NostrilWidth, NostrilHeight);
	ellipse(RXnostril, height/2-30, NostrilWidth, NostrilHeight);
	
	//smile 
	fill(198, 73, 59);
	arc(SmileX, SmileY, Smilewidth, SmileHeight, anglestart, PI+QUARTER_PI, OPEN);
	}
	
function mousePressed() {
	//when the user's mouse clicks, these variables are reassigned
	//to random variables within specified ranges 
	
	BGcircleSize2=random(270, 350);
	EyeSize=random(20, 35);
	LowerFaceWidth=random(100, 180);
	LowerFaceHeight=random(90, 120);
	NostrilWidth=random(5, 15);
	NostrilHeight=random(15, 30);
	SmileX=random(280, 330);
	SmileY=random(240, 250);
	EarSize=random(25, 35); 
	
}

When I first saw the project assignment, I knew I wanted to make my character a hippo, one of my favorite animals. I then sketched up different ideas to make different changes on the hippo’s face when the mouse was clicked. This included variations in eyes, nostrils, ears, and the lower mouth area.

I then experimented with the different variations of sizes and movement of face structures. I was pleased to see that each time the mouse was clicked, a completely new hippo identity appeared, by random variation.

Hanna Jang-Looking Outwards-01

‘Paris” in David Hoe’s Modern Map Art Prints’

I explored some of the suggested blogs and stumbled upon modern map art that was created by David Hoe (Mini Cloud Studios). What struck me the most about his art was that they were made up of various simple elements such as rectangles and squares. This also reminded me of our first project assignment for 15-104.

Although the small individual elements were rather simple, they made up to produce a very intricate and detailed masterpiece. David Hoe’s modern map art was compared to jigsaw puzzles. The artist himself deconstructed the puzzle to individually color each piece before assembling altogether again with his own custom designed software. The art is made using tools such as Node.js, Google Maps API and node-canvas package.

I had only seen such similar patterns found in modern map art from actual printed maps in my Geology class before. David Hoe’s works made me appreciate maps as a form of art for the first time, since I had only seen it as a tool for navigating purposes before. The additional care to color and shapes in the modern map art compared to regular maps is crucial. However, maybe using a wider variety of patterns could increase the art’s individuality. Overall, I really enjoyed the sense of harmony that the art seems to express.

hannajan-Project01-Face

 

sketch.js

//Hanna Jang
//Section B 
//hannajan@andrew.cmu.edu
//Assignment-01

function setup() {
    createCanvas(600, 600);
    background(246, 184, 184);
}

function draw() {
    //Background Circles
    fill(255, 255, 255);
    ellipse(300, 260, 450, 450);
    fill(248, 218, 226);
    ellipse(300, 260, 410, 410);
	
    //Hair
	fill(187, 107, 48);
	ellipse(300, 250, 300, 300);
	noStroke();
	fill(187, 107, 48);
	ellipse(300, 300, 300, 300);
	triangle(315, 450, 400, 400, 430, 415);
	ellipse(320, 330, 200, 200);
	triangle(390, 400, 400, 410, 430, 415);
	
	//Face
	fill(255, 214, 187);
	ellipse(300, 250, 250, 200);
	noStroke();
	
	//Left Ear
	fill(255, 214, 187);
	ellipse(170, 260, 30, 40);
	noStroke();
	
	//Right Ear
	fill(255, 214, 187);
	ellipse(425, 260, 30, 40);
	noStroke();
	
	//Blush 
	fill(255, 176, 146);
	ellipse(243, 274, 30, 20);
	fill(255, 176, 146);
	ellipse(380, 274, 30, 20);
	
	//Eyes
	fill(255, 255, 255);
	ellipse(253, 250, 37, 37);
	fill(0);
	ellipse(250, 250, 20, 20);
	noStroke();
	fill(255, 255, 255);
	ellipse(373, 250, 37, 37);
	fill(0);
	ellipse(370, 250, 20, 20);
	noStroke();
	fill(255, 255, 255);
	ellipse(248, 245, 6, 6);
	noStroke();
	fill(255, 255, 255);
	ellipse(368, 245, 6, 6);
	noStroke();
	
	//Left Eyebrow
	fill(129, 70, 21);
	rect(220, 210, 55, 8);
	
	//Right Eyebrow
	fill(129, 70, 21);
	rect(350, 210, 55, 8);
	 
	//Nose
	fill(231, 185, 133);
	ellipse(320, 275, 30, 10);
	
	//Mouth
	fill(225, 81, 88);
	arc(300, 310, 50, 50, 0, PI+QUARTER_PI, OPEN);
	
	
}

Upon reading the instructions for this project, I imagined a face kind of similar to Nintendo Wii’s Mii avatars. I was especially inspired by the Mii avatars for the circular shape of the face I drew. I started with and focused a bit more on my hair, since I wanted a very specific shape for it. I sketched out the shape of the hair first on paper before deciding which shapes would best form the hairstyle in javascript. The gaze of the eyes were a bit time consuming and I moved around the different ellipses before I finally liked what I saw.