Author: Miranda

Miranda-Project-02-Variable-Face

sketch

/* Miranda Luong
Section E
mluong@andrew.cmu.edu
Project-02-Variable-Face
*/

var eyePupil = 25;
var faceWidth = 200;
var faceHeight = 200;
var eyeX = 5
var eyeY = 5
var bodyColor = 80;
var mouthHeight = 10;
 
function setup() {
    createCanvas(300, 300);

}

function draw() {
    background(156, 190, 215);
    //hair
    fill(bodyColor, 150, 231)
    rect(width/3, height/3 + 100, 100, 100);
    //head
    strokeWeight(5);
    fill(252,221,201);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    //eyes
    strokeWeight(1.5);
    fill(255);
    ellipse(eyeLX, height / 2, faceWidth/2,faceWidth/2);
    ellipse(eyeRX, height / 2, faceWidth/2,faceWidth/2);
    //eyeIris
    strokeWeight(0);
    fill(223,108,107);
    ellipse(eyeLX+eyeX,height/2+eyeY,eyePupil,eyePupil);
    ellipse(eyeRX+eyeX,height/2+eyeY,eyePupil,eyePupil);
    //eyePupil
    fill(0);
    ellipse(eyeLX+eyeX,height/2+eyeY,eyePupil/2,eyePupil/2);
    ellipse(eyeRX+eyeX,height/2+eyeY,eyePupil/2,eyePupil/2);
    //eyeReflection
    fill(255);
    ellipse(eyeLX+eyeX+1,height/2+eyeY,eyePupil/5,eyePupil/5);
    ellipse(eyeRX+eyeX+1,height/2+eyeY,eyePupil/5,eyePupil/5);
    //mouth
    strokeWeight(1.5);
    fill(255)
    ellipse(width/2+faceWidth/4 - 20, height/2+faceHeight/4 + 5, 30, mouthHeight);

}
 
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 110.
    faceWidth = random(75, 110);
    faceHeight = random(100, 200);
    eyeX = random(-9,9);
    eyeY = random(-9,9);
    bodyColor = random(150, 250);
    mouthHeight = random(10,30)




}

It was fun to make animated faces. I found it to be a lighthearted exercise that helped in practicing coding using variables.

Miranda Luong -LookingOutwards-1

Expansive view of Connected Worlds at NYSCI.
Visitors interacting with the digital environments projected on the walls.
Children use gestures to plant seeds. 

Connected Worlds at the New York Hall of Science is a large-scale immersive and interactive digital ecosystem. Visitors are invited to make gestures, movements and decisions to manipulate the environment around them. As visitors explore and play, they learn to realize that their actions have both short and long-term effects on their surrounding world. Upon visiting, I read that the installation was designed to encourage participants to adopt a more systems thinking approach to sustainability. In this space, users contribute first hand to feedback loops, create casual links and influence the equilibrium of the environment. Connected Worlds is a great example of an effective project that is fun but very educating. The task of educating children on the core concepts of sustainable science is not an easy one. I’ve encountered many exhibits that try to educate children on sustainable science such as the Carnegie Museum of Natural History’s “We are Nature: Living in the Anthropocene.” While these exhibits show a lot of effort to educate visitors on the need to think of local and global effects of their actions, the strongest feelings taken are guilt, rather than real understanding. The creators of Connected Worlds understood that the best way to teach someone something is to have them do it themselves. By providing children the chance to “build” their own environments, they could see the direct effects their actions had on the micro and macro level— no complicated explanation necessary.

Miranda Luong Project-01-Face

sketch

/*Miranda Luong
Section E
mluong
Project-01-Face
*/

function setup() {
    createCanvas(500, 525);
    background(9,0,255);
}

function draw() {
	//hair
	fill(20);
	noStroke();
	ellipse(250, 250, 380, 430);
	//body
	fill(60);
	noStroke();
	ellipse(250,500,420,500)
	//head
	fill(220);
	noStroke();
	ellipse(250, 250, 300, 320);
	//ears
	noStroke();
	fill(220);
	rect(370,230,50,60,30);
	noStroke();
	rect(80,230,50,60,30);
	//left eye
	fill(51);
	noStroke();
	ellipse(190, 245, 30, 30);
	//right eye
	fill(51);
	noStroke();
	ellipse(310, 245, 30, 30);
	//nose
	fill(51);
	noStroke();
	ellipse(250,280,40,40);
	fill(220);
	noStroke();
	ellipse(250,280,20,20);
	fill(220)
	noStroke();
	rect(230,260,40,22)
	//mouth
	fill(51);
	ellipse(250,350,40,40);
	//mouse
	fill(120);
	noStroke;
	ellipse(150,490,100,100)
	//left hand
	fill(220);
	noStroke();
	rect(100,450,20,20,30);
	rect(120,430,20,30,30);
	rect(140,430,20,30,30);
	rect(160,430,20,30,30);
	ellipse(200,470,20,20);
	//keyboard
	fill(120)
	rect(280,463,20,12)
	rect(310,470,20,5)
	rect(340,463,20,12)
	rect(370,463,20,12)
	rect(400,463,20,12)
	rect(270,480,160,15)
	//right hand
	fill(220);
	noStroke();
	rect(370,430,20,20,30);
	rect(350,420,20,30,30);
	rect(330,420,20,30,30);
	rect(310,440,20,30,30);
	ellipse(290,440,20,20);
	//desk
	fill(220)
	rect(0,495,500,30);
}

I thought it would be funny to create a self-portrait of myself hunched over a computer coding and clicking away on a keyboard and mouse. It was supposed to be very meta-I’m happy with the way it turned out.