Author: junfanc@andrew.cmu.edu

Shirley Chen-Project-02-Variable-Face

sketch

// Shirley Chen
// Section B
// junfanc@andrew.cmu.edu
// Project-02

var headWidth = 230;
var headHeight = 230;
var eyeSize = 50;
var diff = 1;
var refSize = 0.2;
var angle = 0;
var blushWidth = 40;
var blushHeight = 20;
var color = 139;
var color2 = 98;

function setup() {
    createCanvas(640, 480);
    angleMode = "degree"
}


function draw() {
	background(239, 163, 163);
	fill(255);
	noStroke();
//head
	ellipse(300, 280, headWidth, headHeight);

//ear1
	stroke(183, 105, 105);
	translate(40, 5);
	rotate(angle);
	beginShape();
	curveVertex(220, 200);
	curveVertex(220, 200);
	curveVertex(170, 100);
	curveVertex(200, 100);
	curveVertex(250, 200);
	curveVertex(250, 200);
	endShape();

// //ear2
	beginShape();
	curveVertex(300, 200);
	curveVertex(300, 200);
	curveVertex(340, 100);
	curveVertex(370, 100);
	curveVertex(340, 200);
	curveVertex(340, 200);
	endShape();
	noStroke();
	fill(244, 212, 212);
	beginShape();
	curveVertex(310, 200);
	curveVertex(310, 200);
	curveVertex(330, 150);
	curveVertex(340, 150);
	curveVertex(330, 200);
	curveVertex(330, 200);
	endShape();
	beginShape();
	curveVertex(230, 200);
	curveVertex(230, 200);
	curveVertex(215, 170);
	curveVertex(225, 170);
	curveVertex(240, 200);
	curveVertex(240, 200);
	endShape();

//bowknot
	fill(247, 211, color);
	beginShape();
	curveVertex(240, 210);
	curveVertex(240, 210);
	curveVertex(260, 150);
	curveVertex(280, 150);
	curveVertex(300, 200);
	curveVertex(300, 200);
	endShape();
	beginShape();
	curveVertex(170, 240);
	curveVertex(170, 240);
	curveVertex(170, 180);
	curveVertex(190, 180);
	curveVertex(240, 210);
	curveVertex(240, 210);
	endShape();
	fill(244, 160, 98);
	ellipse(235, 205, 20, 20);

//eyes
	fill(0);
	ellipse(250, 280, eyeSize * diff, eyeSize * diff);
	ellipse(350, 280, eyeSize * diff, eyeSize * diff);
	fill(255);
	ellipse(250 + diff, 280, eyeSize * refSize, eyeSize * refSize);
	ellipse(350 + diff, 280, eyeSize * refSize, eyeSize * refSize);
	ellipse(260 + diff, 280, eyeSize * refSize, eyeSize * refSize + 5);
	ellipse(360 + diff, 280, eyeSize * refSize, eyeSize * refSize + 5);

//nose
	fill(225, 105, 105);
	triangle(290, 300, 310, 300, 300, 310);

//mouth
	fill(242, 85, 85);
	ellipse(300, 330, 30, 30);
	stroke(196, 138, 138);
	strokeWeight(4);
	fill(255);
	beginShape();
	curveVertex(260, 320);
	curveVertex(260, 320);
	curveVertex(270, 330);
	curveVertex(290, 330);
	curveVertex(300, 310);
	curveVertex(300, 310);
	endShape()
	beginShape();
	curveVertex(300, 310);
	curveVertex(300, 310);
	curveVertex(310, 330);
	curveVertex(330, 330);
	curveVertex(340, 320);
	curveVertex(340, 320);
	endShape()

//blush
	fill(244, 212, 212);
	noStroke();
	ellipse(230, 330, blushWidth, blushHeight);
	ellipse(370, 330, blushWidth, blushHeight);
}

//mouse pressed
function mousePressed() {
    headWidth = random(220, 250);
    headHeight = random(220, 250);
    eyeSize = random(35, 40);
    diff = random(1, 2);
    refSize = random(0.2, 0.4);
    angle = random(0, 0.2);
    blushWidth = random(30, 40);
    blushHeight = random(20, 40);
    color = random(139, 255);
}

For this project, I drew a rabbit face with variation of ears, eyes, blush, and the bow knot. For the ears, I rotate them at various angles, and I also keep the eyes and bow knot moving with the ears so the proportion looks correct. The eye size changes randomly with the reflection in the eyes. The bow knot’s color also change randomly. The blush size also changes, too. I enjoyed this project, it was fun! 🙂

Shirley Chen-Looking Outwards-02

A Berlin-based photographer Polina Efremova found a unique type of datamosh glitch by accidentally running a new video player on a very old PC. As the videos play on the player, glitches come up and she captured these moments as screenshots and turned these scenes into photographs, producing a series of photographs called “Destruction”. It is interesting that this special type of photography is discovered by accident, and the moments that she captures cannot be reproduced again. The randomness and fault generated by the software configuration eventually lead to an unexpectedly, uncontrollable and unique result. Although the glitch effect can be produced artificially nowadays, I think the most valuable thing from her experience is that new type of art or new method of generating art can be found at some interesting moments in our life, and we need to learn how to find and capture them. Computer is a tool for us to process artworks, but it also can be a generator of art that lead to an unexpected result.


Photograph Produced by Polina Running New Video Player on a Old PC


Photograph Series:”Destruction”

Original Source:
https://creators.vice.com/en_us/article/zmmwk4/polina-efremova-glitched-out-photos-vintage-pc

Shirley Chen-Project-01-Face

shirleychen-face

// Shirley Chen
// Section B
// junfanc@andrew.cmu.edu
// Project-01


function setup() {
    createCanvas(600, 600);
    background(255, 171, 187);
}

function draw() {
//hair
	fill(82, 54, 36);
	noStroke();
	rect(151, 182, 299, 298);

//face
	fill(240, 206, 183);
	noStroke();
	rect(190, 150, 230, 230, 20, 20, 80, 80);

//bangs
	noStroke();
	fill(82, 54, 36);
	rect(180, 150, 240, 100);
	fill(82, 54, 36);
	arc(300, 200, 300, 300, PI, 0);
	var x1 = 240,
	x2 = 230,
	x3 = 230,
	x4 = 220;
	var y1 = 250,
	y2 = 190,
	y3 = 190,
	y4 = 250;
	fill(240, 206, 183);
	noStroke();
	bezier(x1, y1, x2, y2, x3, y3, x4, y4);
	var x1 = 295,
	x2 = 300,
	x3 = 300,
	x4 = 310;
	var y1 = 250,
	y2 = 197,
	y3 = 197,
	y4 = 250;
	fill(240, 206, 183);
	bezier(x1, y1, x2, y2, x3, y3, x4, y4);
	var x1 = 375,
	x2 = 380,
	x3 = 380,
	x4 = 390;
	var y1 = 250,
	y2 = 220,
	y3 = 220,
	y4 = 250;
	fill(240, 206, 183);
	bezier(x1, y1, x2, y2, x3, y3, x4, y4);

//eyes
	fill(0);
	var c = color(0);
	fill(c);
	ellipse(250, 300, 35, 35);
	ellipse(360, 300, 35, 35);

//blush
	var c = color(249, 177, 177);
	fill(c);
	ellipse(240, 340, 50, 35);
	ellipse(370, 340, 50, 35);

//mouth
	fill(206, 95, 95);
	noStroke();
	rect(290, 345, 30, 20, 0, 0, 10, 10);

//body
	fill(139, 162, 176)
	rect(160, 410, 280, 400, 70, 70, 0, 0);

//neck
	fill(240, 206, 183)
	rect(280, 380, 40, 30);

//hair relection
	noFill();
	stroke(213, 167, 121);
	strokeWeight(9);
	curve(260, 250, 180, 180, 250, 100, 260, 200);
	strokeWeight(15);
	point(180, 200);

//arms	
	stroke(0)
	strokeWeight(2);
	line(200, 500, 200, 600);
	line(400, 500, 400, 600);
}

This project is really fun to work on! The part that I need to be careful about during the process is the order of writing my code because I need to figure out which part is on the top and which is at the bottom. Keeping track with the coordinates is also important during the process. I enjoy this project!

Shirley Chen-Looking Outward-1

Apparatum is an equipment with digital interface that emits purely analogue sound. The users can edit their soundtrack using the digital interface with symbol that conveyed the cues for the production of the piece. This project is interesting because it visualizes different sounds and gives the sound pieces a visual performance. It makes the using experience more interactive and visible. It has the potential to be a teaching or experiencing machine for people want to know about electronic music and how this kind of music being produced. It might be more effective if it can include more various and complicate sounds instead of just have purely analogue sound. Therefore, this machine can create more interesting music pieces. It can also add melodic operation, so people can do music composition on this apparatus.

Demonstrating the Usage of Apparatum


The User Using Apparatum

Printing Score After Finishing Editing