Author: haozhez@andrew.cmu.edu

Joseph Zhang – Project – 02

sketch

// JOSEPH ZHANG
// SECTION E
// HAOZHEZ@ANDREW.CMU.EDU
// PROJECT-02

// GLOBAL VARS
var eyeSize = 20;
var faceWidth = 100;
var faceHeight = 150;
var mouthX = 18;
var mouthY = 32;
var mouthPosY = 192;
var bodyW = 150;
var browWeight = 5;
var browHeight = 5;

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

function draw() {
    background('#B4A4D0');
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;

    // BODY
    noStroke();
    fill('#EFB616');
    ellipse(width/2,height/2 + 170,bodyW,265)

    // FACE
    fill('#FFD100');
        noStroke();
        ellipse(width / 2, height / 2, faceWidth,  faceHeight);
        ellipse(width / 2, height / 2 + 40, faceWidth * 1.2,  faceHeight / 1.4);

    // EYES
    fill('black')
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);


    // INNER EYE
    noStroke();
    fill('white')
        ellipse(eyeLX, height / 2, eyeSize / 2, eyeSize / 2);
        ellipse(eyeRX, height / 2, eyeSize / 2, eyeSize / 2);

    // MOUTH
    stroke('#871200');
    strokeWeight(2);
    fill('#FF7D62');
    ellipse(width / 2,mouthPosY + 90, mouthX, mouthY);

    // BROWS
    strokeWeight(browWeight);
        // Left Brow
        line(eyeLX - 10, height / 2 - 20 + browHeight, eyeLX + 10 , height / 2 - 7);

        // Right Brow
        line(eyeRX - 7, height / 2 - 10, eyeRX + 10 , height / 2 - 20 + browHeight);
    
}
 
function mousePressed() {
    
    // FACE WIDTH + HEIGHT
    faceWidth = random(75,150);
    faceHeight = random(100,150);

    //EYE SIZE
    eyeSize = random(10,30);

    // MOUTH RATIOS
    mouthX = random(22,42);
    mouthY = random(22,42);

    // BODY WIDTH
    bodyW = random(50,180)
    
    //BROW WIDTH + HEIGHT
    browWeight = random(3,6);
    browHeight = random(-5,5);
}

Varying Faces

To built this project, I experimented a lot with the manipulation of shapes and how to combine them with others to create more interesting forms; the variables I chose to manipulate included, the eye size, eyebrow form, head shape, body width, and mouth. To begin the process, I mocked up what I wanted to make in Adobe Illustrator and from there, adapted to what actually could and couldn’t be done. Unfortunately, I don’t have the Illustrator file anymore so I can’t attach a screenshot. But I did use the surprised Pikachu meme as initial inspiration!

Image result for pikachu meme

Joseph Zhang – Looking Outwards – 02

The Historical Spiral – By Ramiro Perez

This is a generative art piece called The Historical Spiral by designer Ramiro Perez. This project stood out to me because of its presence in three-dimensional space. Perez’s ability to introduce light and shadow to an object that is so evidently mathematically made is mesmerizing to look at and in many ways, makes me ponder how he did it. It seems like Perez used fractals to create the spiral form, but what makes me go “wow” are the micro details that are in the form. If one compares ring by ring, he or she can see that the orientation alternates from laying down to upright. Within each spiral, you can see mini spirals as well, which shows that scaling in and scaling out really just reveals the same mathematical pattern at a different size.For me, the attention to detail is what convinces me that much tought went into the design of this structure.

www.rfractals.net/historical_spiral.php

Joseph Zhang – Looking Outwards – 01

https://codepen.io/murasaki/pen/BmOzMP

As I browsed projects online, I couldn’t help but stop and admire Murasaki Uma’s Impressionist Blobs – Starry Night. Murasaki Uma is a freelance artist based in Japan who specializes in Computational Design. This digital installation is an individual project by Uma that showcases flowing particles made up of Vincent van Gogh’s Starry Night. When in motion the visuals flow in an organic fashion that mimics the wind patterns in Starry Night. As seen when clicking the link, Impressionist Blobs is built with HTML, CSS, and Javascript.

Project’s Title, Uma’s Twitter Handle, and a few functionality options

Uma implements a “Start” and “Restart” functionality that allows the viewer some control over the animation. Clicking anywhere on the interface shifts the camera perspective to an arbitrary angle. If I were to iterate on Uma’s project, I would offer more control to the user with the ability to fully control camera shifts and movement.

Despite scouring the web, I failed to find any biographies or summaries about his background. However, I did find the few sites he is active on: Github, Twitter, CodePen, and his personal site. Impressionist Blobs really reflects his other pieces of work, that is, its sense of unity and order whole that holds together chaotically random pieces. This project really points to the future of visual design, that is creating generated graphics through coded algorithms.

Joseph Zhang – Project – 01

Project 01 – Self Portrait

//https://p5js.org/reference/

// setup() runs once
// every program should have program setup
function setup(){
	createCanvas(600,600);
	background('#D1C3BA');
	noStroke();

	//black hair
	fill('#191919');
		ellipse(300,274,218.6,288);
		translate(291.6,161.5);
		rotate(-6.1);
		ellipse(0,0,138.9,74.1);
		rotate(6.1);
		translate(-291.6,-161.5);

	//ears + neck
	fill('#C69B7B');
		ellipse(195,312,34,58);
		ellipse(404,312,34,58);
		rect(243,397,114,142);

	//face + facial features
	fill('#E0BA99');
		ellipse(300,307,208,274);
		rect(196,312,208,91);
		triangle(196, 404, 300, 467, 404, 404);
		rect(300,371.5,80,27);
	
	//nose + mouth
	fill('#C69B7B');
		triangle(284, 350, 300, 322.6, 316, 350);
		rect(284,344,32,12);
		ellipse(300,385,80,46);

	//upper mouth
	fill('#E0BA99');
		rect(260,358,80,27);

	//eyes and body
	fill('#191919');
		ellipse(247,299,22,22);
		ellipse(353,299,22,22);
		ellipse(300,644,360,274);

	// ears
	fill('#DDDDDD');
	ellipse(186,332,8,8);
	ellipse(414,332,8,8);
}

Besides understanding the functions available with using p5.js, one of the biggest takeaways I received was understanding the importance of sequencing code properly. Certain lines of code would mess the entire visual composition of the portrait if not put in the right place. I realized that much of the learning process came from working, crashing, revising, and rebuilding.