sophiec@andrew.cmu.edu – Page 3 – [OLD FALL 2018] 15-104 • Introduction to Computing for Creative Practice

Sophie Chen – Project 02 – Variable Face

var faceSize = 210;
var eyeType = 2;
var noseShape = 1;
var earShape = 1;
var mouthType = 1;
var colorG = 103;
var colorB = 135
 
function setup() {
    createCanvas(480, 640);
    
}
 
function draw() {
    background(189, 200, 234);
    //head
    fill(255, colorG-30, colorB-40);
    ellipse(width / 2, height / 2, faceSize, faceSize);
    fill(245, 155, colorG, 80);
    arc(width / 2, height / 2, faceSize, faceSize, PI, TWO_PI);
  
    //eyes
    if (eyeType == 1){
        fill(0);
        noStroke();
        var eyeLX = width/2-faceSize*0.15;
        var eyeRX = width/2+faceSize*0.15;
        ellipse(eyeLX, height/2, 10, 10);
        ellipse(eyeRX, height/2, 10, 10);
        fill(255, 255, 255);
        ellipse(eyeLX + 3, height/2 - 1, 3, 3); 
        ellipse(eyeRX + 3, height/2 - 1, 3, 3); 
    } else if (eyeType == 2){
        fill(0);
        noStroke();
        var eyeLX = width/2-faceSize*0.15;
        var eyeRX = width/2+faceSize*0.15;
        rect(eyeLX, height/2, 12, 10);
        rect(eyeRX, height/2, 12, 10);
        strokeWeight(2);
        stroke(0);
        fill(0);
        line(eyeLX+1, height/2, eyeLX, height/2-3);
        line(eyeLX+4, height/2, eyeLX+3, height/2-3);
        line(eyeRX+1, height/2, eyeRX, height/2-3);
        line(eyeRX+4, height/2, eyeRX+3, height/2-3);

    } else if (eyeType == 3){
        fill(0);
        stroke(255, 255, 255);
        strokeWeight(2);
        var eyeLX = width/2-faceSize*0.15;
        var eyeRX = width/2+faceSize*0.15;
        ellipse(eyeLX, height/2, 20, 20);
        ellipse(eyeRX, height/2, 20, 20);
    }


    //nose
    if (noseShape == 1){
        fill(230, 223, 255);
        noStroke();
        ellipse(width / 2, height / 2 + 3, 20, 15);
    } else if (noseShape == 2){
        fill(255, 255, 184);
        noStroke();
        triangle(width / 2 - 10, height / 2 + 3, width / 2 + 10, height / 2 + 3, width / 2, height / 2 + 13);
    }
    
    //ears
    if (earShape == 1){
        strokeWeight(7);
        stroke(155, 245, 204);
        fill(155, 255, 234);
        line(240, 250, 240, 190);
        ellipse(width/2+50, 205, faceSize/2.5, faceSize/5);

    } else if (earShape == 2){
        stroke(255, colorG, colorB);
        strokeWeight(20);
        fill(250, colorG-20, colorB-10);
        ellipse(190, 205, faceSize/5, faceSize/1.7);
        ellipse(290, 205, faceSize/5, faceSize/1.7);
    }
    

    //mouth
    if (mouthType == 1){
        noFill();
        stroke(140, colorG, 230);
        strokeWeight(3);
        arc(width/2 - 6.7, height/1.9, faceSize/15, faceSize/16, TWO_PI, PI);
        arc(width/2 + 6.7, height/1.9, faceSize/15, faceSize/16, TWO_PI, PI);
    } else if (mouthType == 2){
        noFill();
        stroke(140, colorG, 230);
        strokeWeight(3);
        arc(width/2, height/1.9, faceSize/12, faceSize/12, TWO_PI, PI);
    }
    

    //cheeks
    fill(245, 245, 245);
    noStroke();
    ellipse(300, 345, faceSize / 42, faceSize / 42);
    ellipse(290, 355, faceSize / 42, faceSize / 42);
    ellipse(280, 345, faceSize / 42, faceSize / 42);
    ellipse(185, 345, faceSize / 42, faceSize / 42);
    ellipse(175, 355, faceSize / 42, faceSize / 42);
    ellipse(170, 345, faceSize / 42, faceSize / 42);

}
 
function mousePressed() {
    faceSize = random(160, 240);
    eyeType = int(random(1, 4));
    colorG = random(150, 245);
    colorB = random(150, 225);
    noseShape = int(random(1,3));
    earShape = int(random(1,3));
    mouthType = int(random(1,3));
}

I found this a lot more challenging than the last project, but I really enjoyed the process and I think I improved a lot through this assignment. The hardest part for me was the ears, and I decided to make it into a little stem so the face can into an apple/orange and a bunny which worked out well. I tried to incorporate curve vertex into this but unfortunately it didn’t work out, hopefully I will have a better grasp next week.

Sophie Chen – Looking Outwards – 02

Markos R. Kay – The Flow

The Flow visually imagines physical processes that we can’t see with our eyes. What initially drew me to this project is when I first saw the prints/screenshots, I didn’t expect it to be generated because of the high level of detail it had. When I watched the piece, I felt like I was watching something out of a documentary that was storyboarded and filmed/animated rather than generated. It didn’t match my expectations of what artwork generated through an algorithm would look like, which was very eye-opening. This piece is created through 3D computer simulations of particle systems, and the unpredicted motions generated are recorded by a virtual camera. Just like molecules, these pieces wind up into walls of code and end up layering and building complex 3D visuals. This is an extremely complex piece with a lot to digest, and I think the artist is especially successful in that the generative method he used to create this piece carries just as much weight (if not more) as the final product itself. If someone just saw the video and prints without knowing the process behind it, they’ve missed the point.

link: http://www.mrkism.com/flow/

artist’s website: http://www.mrkism.com/#about

Sophie Chen-Looking Outward 01

RELOOP – La Mercè Festival in Barcelona (2016)

“Reloop” is an interactive installation that allowed the audience to compose the audio and generate the video content that was being projected onto the Castell dels Tres Dragons (Castle of the Three Dragons) in Barcelona with an armband device, a laser, and a projector. The audience is in control by activating different video loops and sounds with their hand motions/gestures.

A brief but comprehensive video that captured the installation.

I think it’s impressive that this is a large scale installation and yet it’s still able to create meaningful interactions with every individual. Pre-programmed, synchronized wristbands are already widely popular and common at concerts. The Myo armbands used in this installation have great potential for being used at music festivals, concerts, and other large-scale events and get the audience even more involved. If the creators of this project did this installation in different locations, it will create completely different experiences (ex: an enclosed room would make it more immersive, a narrow hallway would create a linear progression/journey, etc).

http://www.onionlab.com/interactive-installation/

Sophie Chen-Project 01-Face

sophiec-sketch

function setup() {
    createCanvas(600, 600);
    background(243, 166, 138);
}

function draw() {
	//body
	noStroke();
	fill(77, 78, 73);
	arc(300, 630, 350, 350, PI, TWO_PI);

	// hair
	noStroke();
	fill(36, 38, 33);
	quad(100, 100, 160, 100, 210, 550, 70, 450);
	quad(360, 100, 460, 100, 520, 450, 390, 550)

	// head
	noStroke();
	fill(255, 224, 182);
	ellipse(300, 250, 300, 350);

	//neck
	rect(275, 400, 50, 80);
	ellipse(300, 477, 50, 50);

	//ears
	noStroke();
	fill(255, 224, 182);
	ellipse(150, 250, 50, 50);
	ellipse(450, 250, 50, 50);
	

	// face
	// mouth
	fill(255, 100, 80);
	arc(300, 300, 70, 80, TWO_PI, PI);
	//nose
	fill(243, 175, 132);
	ellipse(300, 250, 30, 30);
	stroke(243, 175, 132);
	strokeWeight(15);
	line(292, 210, 292, 253);
	//right eye
	fill(0)
	stroke(255, 255, 255);
	strokeWeight(5);
	ellipse(355, 200, 45, 45);
	//left eye
	fill(0)
	stroke(255, 255, 255);
	strokeWeight(5);
	ellipse(240, 200, 45, 45);
	//right eyebrow
	noStroke();
	fill(36, 38, 33);
	quad(330, 170, 330, 160, 375, 160, 396, 170);
	//details
	ellipse(385, 225, 5, 5);
	fill(248, 187, 182, 70);
	ellipse(390, 270, 90, 80);
	ellipse(200, 270, 90, 80);

	//hat
	fill(245, 245, 245);
	arc(300, 160, 350, 350, PI, TWO_PI);
	stroke(245, 245, 245);
	strokeWeight(100);
	line(50, 150, 400, 95);
	noStroke();
	fill(245, 100, 100);
	rect(300, 50, 25, 25);
	fill(255, 255, 255);
	rect(275, 50, 25, 25);
	fill(30, 90, 200);
	rect(275, 40, 50, 10);
	rect(275, 70, 50, 10);
	
}

Overall I really enjoyed creating this self-portrait. I learned that keeping the code clean and organized is super important and allowed me to have a better grasp of what I’m doing and code more effectively. I also found that rather than trying to make every feature look exactly like mine, incorporating one or two specific details made a huge difference.