Author: Jason

Jason Zhu-Looking Outwards-02

Cinemagraphs: When Face Tracking Meets Animated GIFs

View post on imgur.com

View post on imgur.com

Created by Dr. Drew Woohoo. Titled CinemaGraph.Published March 11th, 2016.

CinemaGraph is an algorithm that generates animations around a selfie (picture of the face). I think it is really cool, especially given its relevance in today’s world. In fact, it similarly resembles tools like Snapchat and Instagram in the way it operates. I like to imagine it as a primitive version of the technology being employed, but admirable nonetheless given its context to what we’re learning in class now at an even more primal level.

From what I understand, the algorithm employs facial tracking algorithms that are able to pin certain defining features of any face inputted in order to overlay and appropriately warp certain elements on top of it accurately. I think the creators artistic abilities or sensibilities manifest in the algorithm through the overlays that are involved. Whether that be the ‘hipster’ overlay or the ‘portrait overlay’. Creating these overlays is just as tedious of a task as creating the algorithm that allows for such an overlay to naturally occur.

Jason Zhu-Project-02-Variable-Face

sketch

var eyeSize = 45;
var pupilSize = 15;
var faceWidth = 150;
var faceHeight = 150;
var mouthWidth = 10;
var mouthHeight = 10;
var skinColor = 250;
var hairColor = 142;
var hairHeight = 50;
var hairWidth = 50;
var bodyColor = 100;
var bodyAdjustor = 2.5
function setup() {
    createCanvas(300, 300);
}
 
function draw() {
    background(220,220,240);
    strokeWeight(0);
    //body
    var bodyPosition = width / 2 + bodyAdjustor
    fill(bodyColor, 150, 100);
    ellipse(bodyPosition, (height / 2) * 1.75, 200, 200);
    //Hair
    fill(hairColor, 150, 200);
    ellipse(width / 2, height / 3, faceWidth + 48, faceHeight + 22)
    //Face
    fill(skinColor, 220, 182);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);
    //Eyes
    fill(255);
    var eyeLX = (width / 2) * 1.09 - faceWidth * 0.25;
    var eyeRX = (width / 2) * .91 + faceWidth * 0.25;
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);
    //Pupils
    fill(0);
    var PupilLX = (width / 2) * 1.09 - faceWidth * 0.25;
    var PupilRX = (width / 2) * .91 + faceWidth * 0.25;
    ellipse(PupilRX, height / 2, pupilSize, pupilSize);
    ellipse(PupilLX, height / 2, pupilSize, pupilSize);
    //Mouth
    fill(0);
    arc(width / 2, height / 1.5, mouthWidth, mouthHeight, TWO_PI, PI, OPEN);


}
 
function mousePressed() {
    // when the user clicks, these variables are reassigned
    // to random values within specified ranges. For example,
    // 'faceWidth' gets a random value between 75 and 150.
    eyeSize = random(35, 45);
    pupilSize = random(5, 15);
    mouthWidth = faceWidth / random(3, 10);
    mouthHeight = faceHeight / random(3, 10);
    skinColor = random(225, 255);
    hairColor = random(50, 220)
    bodyColor = random (0, 255)
    bodyAdjustor = random(-30, 30)
}

I found this assignment to be tremendously insightful as well as informative. I learned a lot about various principles such as the usage of variables as well as the randomization factor. Overall, this was an enjoyable and good assignment.

Jason Zhu-LookingOutwards-01

View post on imgur.com

View post on imgur.com

Colorspace is an interactive sculpture that translates text messages into breathtaking animations of colored light. It was created by Sosolimited & White Wing Logic over the course of a few months. When you send a text message to a specified number, the tubes will illuminate along the walls with the color of the corresponding text message. I think this is done through some system of data query. For example, sending a red lipstick emoji will result in red lights being illuminate sequentially along the path.The indoor installation that aims to bring a playful vibe to a community as well as increase community ownership over a space. The tenants of the community are encouraged to stop and interact in a common shared space. The interaction is not only fun but also serves to build and strengthen the users emotional stakehold in that space. The user is in many aspects, communicating with the building in an elegant manner that reinforces positive notions of that community space. This concept can be applied in a multitude of mediums and across a variety of spaces in the present and future, but it seems best suited to be placed in spaces where users have a lack of or no emotional connection to, but spend a significant portion of their time. Other applications could include schools and workplaces.

Jason Zhu-Project-01-Face

sketch

/* Jason Zhu
Section E
jlzhu@andrew.cmu.edu
Project-01L Self Portrait (Face)
*/

function setup() {
    createCanvas(600, 600);
    background(230, 180, 180);
}

function draw() {
	noStroke()

	//Background 2
	fill(150, 100, 100);
	rect(200, 200, 340, 340, 30, 30, 30, 30);

	//Neck
	fill(250, 220, 190);
	rect(300, 430, 60, 250, 90, 90, 90, 90);

    //Body
	fill(180, 220, 200);
	rect(300, 590, 350, 400, 90, 90, 0, 0);

	//Shirt Collar
	fill(250, 220, 190);
	ellipse(300, 385, 60, 60, 90, 90, 90, 90);

	//Arm Left
	fill(190, 230, 205);
	rect(150, 580, 80, 300, 45, 45, 20, 20);

	//Arm Right
	fill(190, 230, 205);
	rect(450, 580, 80, 300, 45, 45, 20, 20);

	//Body Fill
	fill(150, 120, 220);
	ellipse(300, 520, 85, 100, 90, 90, 0, 0);

	//hair
	fill(0, 10, 20);
	ellipse(300, 220, 260, 260, 180, 180, 0, 0);

	//face 1
	fill(250, 220, 190);
	rectMode(CENTER);
	ellipse(300, 250, 250, 250, 90, 90, 0, 0);
 
	//hair 2
	fill(0, 10, 20);
	rectMode(CENTER);
	ellipse(300, 160, 220, 100, 180, 180, 0, 0);

	//ear Left
	fill(250, 220, 190);
	strokeWeight(0)
	ellipse(170, 270, 30, 50);
	ellipse(168, 275, 25, 40);

	//ear Right
	fill(250, 220, 190);
	strokeWeight(0)
	ellipse(430, 270, 30, 50);
	ellipse(432, 275, 25, 40);

    //face 2
    fill(250, 220, 190);
    fill(10);
    arc(254,260,40,40,0,PI,OPEN);
    strokeWeight(0);
    arc(348,260,40,40,0,PI,OPEN);
    fill(255, 227, 215);
    ellipse(255,260,10,10,0);
    ellipse(350,260,10,10,0);

	//Mouth
    fill(255,161,119);
    ellipse(300,330,40,30);
}

I think this assignment really opened my eyes. I thought this was an entertaining assignment that helped me better understand the forms and factors that made me, me. I really enjoyed experimenting and although I could not render every aspect of myself as I had wanted, it was still an informative and introspective experience overall.