Month: September 2017

dayoungl – LookingOutwards02

Kyuha Shim’s Formation (2016) commissioned by Alliance Graphique Internationale (AGI).

I found this project on his portfolio website. Q is currently here at School of Design teaching communication design. Q is famous for creating his projects using the concept of data visualization. There isn’t a lot of description about this project other than “Commissioned by Alliance Graphique Internationale (AGI) for the Special Project Exhibition during AGI conference in Seoul 2016. A generative system that presents a critical view of responsive systems through multitudinous transitions and scaling of graphic forms.” What I found interesting about this work was that it transformed simple elliptical shapes into something more interesting by randomizing proportion and colour. I was also amazed by despite how random the colours are, no one colour seems unfitting.

thlai-Project-02-Variable-Face


thlai-project02

// Tiffany Lai
// 15-104 Section A
// thlai@andrew.cmu.edu
// Project-O2

var eyeSize = 0;
var mouth1 = 60;
var mouth2 = 120;
var skinR = 210;
var skinG = 210;
var skinB = 210;
var eyebrows = 275;
var eyebrowStroke = 10;
var snout = 115;
var jaw1 = 240;
var jaw2 = 200;

function setup() {
    createCanvas(480, 640);
    angleMode(DEGREES);
}

function draw() {
    background(255, 250, 230);
    noStroke();

    fill(skinR, skinG, skinB);
    beginShape(); // left ear
        curveVertex(220, 260);
        curveVertex(220, 260);
        curveVertex(180, 100);
        curveVertex(120, 100);
        curveVertex(170, 280);
        curveVertex(170, 280);
    endShape(); 

    beginShape(); // right ear
        curveVertex(250, 280);
        curveVertex(250, 280);
        curveVertex(300, 100);
        curveVertex(350, 100);
        curveVertex(310, 280);
        curveVertex(320, 280);
    endShape();

    ellipse(width/2, height/2, 200, 200); // head top
    ellipse(width/2, height/2+40, jaw1, jaw2); // head bottom

    fill(255);
    ellipse(width/2, height/2+60, snout, snout); // snout

    fill(70);
    ellipse(width/2-50, height/2, eyeSize+20, eyeSize+30); // left eye
    ellipse(width/2+50, height/2, eyeSize+20, eyeSize+30); // right eye

    push();
    stroke(skinR-20, skinG-20, skinB-20);
    strokeWeight(eyebrowStroke);
    line(178, eyebrows, 198, eyebrows-5); // left eyebrow
    pop();

    push();
    stroke(skinR-20, skinG-20, skinB-20);
    strokeWeight(eyebrowStroke);
    line(300, eyebrows, 280, eyebrows-5); // right eyebrow
    pop();

    fill(250, 225, 235);
    triangle(width/2-10, height/2+30, width/2+10, height/2+30, width/2, height/2+50); // nose

    fill(255, 100, 140);
    arc(width/2, height/2+60, 80, 80, mouth1, mouth2); // mouth
}

function mousePressed() {
    eyeSize = random(-10, 20);
    mouth1 = random(-10, 80);
    mouth2 = random(100, 190);
    skinR = random(200, 240);
    skinG = random(200, 240);
    skinB = random(200, 240);
    eyebrows = random(240, 300);
    eyebrowStroke = random(5, 20);
    snout = random(95, 150);
    jaw1 = random(220, 250);
    jaw2 = random(175, 210);
}

 

monicah1-LookingOutward-02

This is Serpentine Gallery Pavilion 2002 by Toyo Ito and Cecil Balmond. The structure is constructed based on algorithm of a cube, providing a geometrical pattern. Then Ito and Balmond re-interpreted the pattern, considering the function and spatial structure. I am instrigued by the combination of an individual design intention and the quantitative and qualitative computer generated data, create such beautiful structure. I am interested in the design process interrelate with the new tool: computer generated data. How computer generated data influence the design and how design process affect the how the computer data was generated and analyzed. Moreover, I am interested in the possibilities of applying algorithms inspired by natural process, translating numbers into computational patterns, to sculpture, and to living space. I love seeing living space integrated back to nature, which is where everything begin with.

http://www.bcs.org/upload/pdf/ewic_ev14_s2paper2.pdf

Jdbrown – Project 2: Electric Boogaloo

JdbrownProject02

// Joshua Brown
// Jdbrown@andrew.cmu.edu
// Section C
// Project 2: Face Generation

var faceWidth = 200;
var faceHeight = 150;

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

function draw () {
    background (190, 50, 90);
    noStroke ();

    fill (random (30, 60), random (60, 120), random (90, 180));

    // Drawing background triangles

    triangle (0, 480, 240, 480, 240, 240);  // idk why not
    triangle (640, 480, 400, 480, 400, 240);  // idk why not
    triangle (0, 0, 240, 0, 240, 240);  // idk why not
    triangle (640, 0, 400, 0, 400, 240); // idk why not

    // Drawing actual face

    fill (255);
    ellipse (width / 2, height / 3 + 50, width / 4, height / 3);    // drawing face outline

    fill (200);
    ellipse (width / 2, height / 3 + 50, width / 6, height / 5);    // drawing face outline

    stroke (0);
    strokeWeight (5);

    fill (255);
    ellipse (width / 3 + 75, height / 3 + 25, width / 12, height / 9);    // drawing eye socket (L)
    ellipse (width / 3 + 140, height / 3 + 25, width / 12, height / 9);    // drawing eye socket (R)
    
    noFill ();

    ellipse (width / 3 + 75, height / 3 + 25, width / 16, height / 12);     // drawing eyeball Ring1 (L)
    ellipse (width / 3 + 140, height / 3 + 25, width / 16, height / 12);    // drawing eyeball Ring1 (R)
    ellipse (width / 3 + 75, height / 3 + 25, width / 24, height / 20);     // drawing eyeball Ring2 (L)
    ellipse (width / 3 + 140, height / 3 + 25, width / 24, height / 20);    // drawing eyeball Ring2 (R)

    fill (random (30, 60), random (60, 120), random (90, 180));

    ellipse (width / 3 + 75, height / 3 + 25, width / 52, height / 40);     // drawing eyeball Ring1 (L)
    ellipse (width / 3 + 140, height / 3 + 25, width / 52, height / 40);    // drawing eyeball Ring1 (R)

    ellipse (width / 2, height / 3 - 65, faceWidth / 10, faceHeight / 6);   // drawing third eye

    ellipse (width / 2, height / 3 + 185, faceWidth / 10, faceHeight / 6);   // drawing third eye blind

    fill (0);
    arc (width / 2, height / 2, width / 6, faceHeight / 6, 90, PI); // drawing mouth

}

function mousePressed () {

    width = random (160, 1280) + random (10, 50);
    height = random (120, 920) + random (10, 50);

}

This project went through a few iterations, but the most challenging aspect was that I discovered “random” commands. As you can see, I couldn’t help myself, and there’s a psychedelic quality to the overall presentation. Sorry ’bout it.

Josh

merlebac Project-02 Section B

merlebac Project-02

// Matthew Erlebacher
// Section B
// merlebac@andrew.cmu.edu
// Assignment-02-A

/* For this assignment I used the example provide in the assignment
description as a starting point. I then used what I learned from
that to add my own details and variation to the assignment. */

// Global Parameter Variables

var eyeWidth = 30
var eyeHeight = 30
// Determines width and height of eyes

var faceWidth = 150
var faceHeight = 150
// Determines width and height of face

var lipWidth = 100
var lipHeight = 10
// Determines width and height of lip

var noseP1X = 315
var noseP1Y = 265
// Determines 1st point of triangle nose

var noseP2X = 320
var noseP2Y = 255
// Determines 2nd point of triangle nose

var noseP3X = 325
var noseP3Y = 265
// Determines 3rd point of triangle nose

var hornX = 250
var hornY = 150
// Determines last point of horns

var fangP3 = 300
// Determines fang length

// Global color Variables

var faceColorR = 255
var faceColorG = 255
var faceColorB = 255
// Determines the color combination of face

var eyeColorR = 255
var eyeColorG = 255
var eyeColorB = 255
// Determines color combination of eyes

var lipColorR = 255
var lipColorG = 255
var lipColorB = 255
// Determines color combination of lip

var noseColorR = 255
var noseColorG = 255
var noseColorB = 255
// Determines color of nose

var hornColorR = 255
var hornColorG = 255
var hornColorB = 255
// Determines color of the horns

var fangColorR = 255
var fangColorG = 255
var fangColorB = 255
// Determines color of the fangs

function setup() {
    createCanvas(640, 480);
    // Creates a black canvas
}

function draw() {
    background(0);
    
    fill(hornColorR, hornColorG, hornColorB);
    triangle(320, 270, 320, 210, hornX, hornY);
    // Creates left horn

    fill(hornColorR, hornColorG, hornColorB);
    triangle(320, 270, 320, 210, width - hornX, hornY);
    // Creates right horn

    fill(faceColorR, faceColorG, faceColorB);
    ellipse(width / 2, height / 2, faceWidth, faceHeight);
    // Creates a circle for the face
    
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    // Chooses a coordinate for the eyes

    fill(fangColorR, fangColorG, fangColorB);
    triangle(280 + 0.1 * faceWidth, 280,
        290 + 0.1 * faceWidth, 280, 285 + 0.1 * faceWidth, fangP3);
    // Creates left fang

    fill(fangColorR, fangColorG, fangColorB);
    triangle(360 - 0.1 * faceWidth, 280,
        350 - 0.1 * faceWidth, 280, 355 - 0.1 * faceWidth, fangP3);
    // Creates right fang
    
    fill(lipColorR, lipColorG, lipColorB);
    rectMode(CENTER);
    // Centers rectangle
    rect(width / 2, height / 2 + 40,
        lipWidth, lipHeight);
    // Creates and chooses parameters of lip

    fill(eyeColorR, eyeColorG, eyeColorB);
    ellipse(eyeLX, height / 2, eyeWidth, eyeHeight);
    // Creates a left eye for the face
    
    fill(eyeColorR, eyeColorG, eyeColorB);
    ellipse(eyeRX, height / 2, eyeWidth, eyeHeight);
    // Creates a right eye for the face

    fill(noseColorR, noseColorG, noseColorB);
    triangle(noseP1X, noseP1Y, noseP2X, noseP2Y, noseP3X, noseP3Y);
    // Creates triangle as a nose

}

function mousePressed() {
// Shape randomizers

    eyeWidth = random(10, 50);
    eyeHeight = random(10, 50);
    // Randomizes the width and height of the eyes
    
    faceWidth = random(100, 200);
    faceHeight = random(100, 200);
    // Randomizes the width and height of the face

    lipWidth = random(75, 150);
    lipHeight = random(5, 15);
    // Randomizes the width and height of the lip

    hornX = random(150, 250);
    hornY = random(50, 150);
    // Randomizes the last poing of the horn

    noseP1X = random(305, 315);
    noseP1Y = random(255, 265);
    // Randomizes the 1st point of the nose

    noseP2X = random(315, 325);
    noseP2Y = random(245, 255);
    // Randomizes the 2nd point of the nose

    noseP3X = random(325, 335);
    noseP3Y = random(255, 265);
    // Randomizes the 3rd point of the nose

    fangP3 = random(300, 400);
    // Randomizes the bottom of the fang

// Color Randomizers

    faceColorR = random(0, 255);
    faceColorG = random(0, 255);
    faceColorB = random(0, 255);
    // Randomizes the color of the face

    eyeColorR = random(0, 255);
    eyeColorG = random(0, 255);
    eyeColorB = random(0, 255);
    // Randomizes the color of the eyes

    noseColorR = random(0, 255);
    noseColorG = random(0, 255);
    noseColorB = random(0, 255);
    // Randomizes the color of the nose

    lipColorR = random(0, 255);
    lipColorG = random(0, 255);
    lipColorB = random(0, 255);
    // Randomizes the color of the lip

    hornColorR = random(0, 255);
    hornColorG = random(0, 255);
    hornColorB = random(0, 255);
    // Randomizes the color of the horns

    fangColorR = random(0, 255);
    fangColorG = random(0, 255);
    fangColorB = random(0, 255);
    // Randomizes the color of the fangs

}

Working on this project was an interesting experience for me. I started out by just creating a regular face, and sort of hit a creativity block after that. I decided that it would be cool if the colors would constantly change against a black background so I made each color a variable. Finally, I decided to give the face fangs and horns in order to increase the variability, as well as make it more visually interesting.

jwchou-LookingOutwards-2

This post features the work of an artist/designer right here at CMU! His name is Kyuha Shim, or “Q” for short. He teaches communication design in the School of Design.

Q has done multiple projects based on generative typography. He used custom software to patterns and forms to create and present traditional letterforms/type in interesting and unique ways.

His work on generative type: http://generativetypography.com

Typography is very delicate. It depends on a set of somewhat-flexible rules that govern letterforms, thickness of strokes, and how close characters should be to each other. I assume that in order for Q’s type to look like type, the algorithms he used included many rules and boundaries to ensure that the generated type still contained many of the important characteristics of standard type.

Q’s artistic sensibilities are reflected in the different typefaces, colors, textures, and patterns he used. As an extension, the sensibilities of type designer who might’ve designed a typeface he used also influenced the piece.

This project inspires me because it is still incredibly dynamic and beautiful, even though typography has a reputation for having a lot of intricate rules! If I were to change something, I would’ve loved to see some generative type in a bigger scale. A lot of his projects focus on a word or a short phrase. What would a paragraph look like if it was pushed through his algorithm?

 

aboyle-Sect D-Project 2-Variable Face

aboyle Var Face

//Anna Boyle
//aboyle@andrew.cmu.edu
//Section D
//Project 2


//variables
    var eyeWidth =20
    var eyeHeight=20
    var faceWidth=100
    var faceHeight=100
    var pupil=170
    var noseWidth=5
    var noseHeight=130
    var nosePosition=80
    var browthickness=2
    var brow=80
    var hairLength=150
    var mouth;

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


function draw() {
    background(157,242,171);
    strokeWeight(0);
//hair
    fill(71,44,21);
    ellipse(195,80,faceWidth+20,faceHeight-20);
    rect(115,110,160,hairLength);
    //black rectangle gives hair more depth
    fill(0);
    rect(130,110,130,hairLength);
//shirt
    fill(0,204,204);
    ellipse(195,230,150,50);
    rect(120,230,140,190);
    fill(6,142,142);
    rect(145,270,7,150);
//pants
    fill(19,38,112);
    rect(140,420,120,220);
    fill(0)
    rect(195,450,7,220)
//neck
    fill(142,88,51);
    rect(175,150,40,70);
//button
    fill(114,4,4);
    ellipse(400,330,100);
    fill(255,0,0);
    //gives the effect of button being pushed
    if (mouseIsPressed)
      ellipse(400,330,100);
    else
      ellipse(400,320,100);
//head
    fill(198,147,111);
    ellipse(195, 120,faceWidth,faceHeight);
//hands
    rect(120,420,35,40);
    //slight change makes button movement look more natural
    if (mouseIsPressed)
      rect(385,304,33,38);
    else
      rect(385,304,35,40);
//ears
    strokeWeight(0);
    ellipse(190-faceWidth/2,120,30);
    ellipse(200+faceWidth/2, 120, 30);
//nose
    fill(142,88,51);
    triangle(190,nosePosition,190-noseWidth,noseHeight,190+noseWidth,noseHeight);
//eyes
    strokeWeight(2);
    fill(256);
    ellipse(210,95,eyeWidth,eyeHeight);
    ellipse(170,95,eyeWidth,eyeHeight);
//pupils
    fill(0);
    ellipse(pupil,95, eyeWidth/2, eyeHeight/2);
    ellipse(pupil+40, 95, eyeWidth/2, eyeHeight/2);
//mouth
    noFill()
    //switches the mouth between smile and straight
    if (mouth<=0.5)
      curve(200,50,170,160,215,160,200,50);
    else
      line(170,160,215,160);
//earrings
    fill(236,200,21);
    strokeWeight(0);
    rect(183-faceWidth/2, 127, 10,10);
    rect(197+faceWidth/2,127,10,10);
//eyebrows
    strokeWeight(browthickness);
    line(155, 75, 185, brow);
    line(195,brow,225,75);
//arm
    fill(0,204,204);
    strokeWeight(0);
    rect(300,310,85,30);
    translate(width/5, height/5);
    rotate(PI/3.0);
    rect(165,-100,120,30);
}


function mousePressed(){
  faceWidth=random(130,170);
  faceHeight=random(150,190);
  eyeWidth=random(10,37);
  eyeHeight=random(15,35);
  pupil=random(165,175);
  noseWidth=random(5,10);
  noseHeight=random(130,150);
  nosePosition=random(95,120);
  browthickness=random(2,9);
  brow=random(60,92);
  hairLength=random(75,230);
  mouth=random(0,1)
}

I thought this was a cool assignment! I had a lot of fun playing with the variables, even though I couldn’t add as many details as last time. For some reason when I refresh the page the face looks pretty weird, but once I start clicking the mouse it looks like how I want it to.

I also decided to give my subject apparent agency over her own face changes by making it look like she’s pressing a button. Though rather simple, I hope it’ll help me remember the difference between mousePressed and mouseIsPressed in the future.

In retrospect, I wish I had done more with curves and more complicated shapes, but overall I’m okay with how it turned out.

abradbur-Project-02-Variable Face

facegenerator 

//global variables
var eyeSize = 20;
var faceWidth = 200;
var faceHeight = 200;
var pupilSize = 10;
var noseLength = 30;
var noseHeight = 30;
 
function setup() {
    createCanvas(640, 480);
    rectMode(CENTER);
}
 
function draw() {
    noStroke();
    background(108, 207, 246);

    //hair + torso
    fill(112, 102, 119);
    rect(width/2, height/2 + 30, faceWidth + 10, faceHeight - 30);
    ellipse(width/2, height/2 - faceHeight/4, faceWidth + 10, faceHeight - 40);

    //face shape
    fill(204, 183, 174);
    ellipse(width/2, height/2, faceWidth, faceHeight);

    //eyeballs + pupils
    var eyeLX = width/2 - faceWidth * 0.25;
    var eyeRX = width/2 + faceWidth * 0.25;
    var eyeLH = height/2 - faceHeight * 0.25;
    var eyeRH = height/2 - faceHeight * 0.25;
    fill(255);
    ellipse(eyeLX, eyeLH, eyeSize, eyeSize);
    ellipse(eyeRX, eyeRH, eyeSize, eyeSize);
    fill(186, 199, 190);
    ellipse(eyeLX, eyeLH, pupilSize, pupilSize);
    ellipse(eyeRX, eyeRH, pupilSize, pupilSize);

    //mouth
    fill(166, 128, 140);
    arc(width/2, height/2 + faceHeight * 0.25, 100, 50, HALF_PI, PI);

    //nose
    fill(255, 202, 177);
    rect(width/2, height/2, noseLength, noseHeight);
    
    }

function mousePressed() {
    // when the user clicks, these variables are reassigned
    // to random values within specified ranges. 
    faceWidth = random(100, 400);
    faceHeight = random(70, 300);
    eyeSize = random(55, 70);
    pupilSize = random(5, 50);
    noseLength = random(20, 70);
    noseHeight = random(20, 70);
}

At first I wanted to make this a lot more complex than the way it turned out, but I definitely didn’t give myself enough time. I was going to make the shape of the nose switch between a circle, square, and triangle, in addition to having randomized proportions. I was also going to go with three different hairstyles and mouth options.

Alas, abandoned plans.

Unfortunately, I ended up only messing around with the proportions of the face, so I’m a little disappointed in the result. I might play with it more on my own.

jwchou-Project-02-VariableFace

sketch 2

//Jackie Chou
//Section E
//jwchou@andrew.cmu.edu
//Project 2

var eyeSize = 20;
var pupilX = 268;
var pupilY = 124;
var pupilSize = 6.5;
var armRotation = 0;
var MouthWidth = 50;
var MouthHeight = 30;
var RightEyeY = 120;
var mouth = 1;
var mouthExpressions = [1,2];


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

function draw() {
	//background will change color based on mouseX coordinates
	background(172, 230, 226); // blue
    if(mouseX < (width/3)){
      background(226, 225, 163); // yellow
    }
    if(mouseX > (2/3)*width){
      background(244,189,100); //orange
    }

	noStroke();

	//right eye
	fill(0);
	ellipse(349, RightEyeY, eyeSize, 1.5*eyeSize);

	//head
	fill(43, 132, 212);
	beginShape();
	curveVertex(228, 169);
	curveVertex(228, 169);
	curveVertex(267, 85);
	curveVertex(330, 41);
	curveVertex(355, 78);
	curveVertex(350, 146);

	//torso
	curveVertex(347, 178);

	//legs
	curveVertex(358, 261);
	curveVertex(359, 311);
	curveVertex(367, 369);
	curveVertex(387, 409);
	curveVertex(404, 417);
	curveVertex(417, 437);
	curveVertex(386, 440);
	curveVertex(352, 435);
	curveVertex(343, 422);
	curveVertex(315, 365);

	//pelvis
	curveVertex(296, 337);

	//left leg
	curveVertex(286, 358);
	curveVertex(276, 396);
	curveVertex(273, 402);
	curveVertex(282, 416);
	curveVertex(289, 432);
	curveVertex(272, 438);
	curveVertex(246, 436);
	curveVertex(234, 429);
	curveVertex(236, 378);
	curveVertex(238, 340);
	curveVertex(238, 298);
	curveVertex(238, 298);
	curveVertex(229, 230);
	curveVertex(229, 230);
	endShape();

   
    //left eye
    fill(255)
    ellipse(267, 130, eyeSize, 1.5*eyeSize)
    fill(0);
    ellipse(264, 130, eyeSize, 1.5*eyeSize);
    fill(255);
    ellipse(pupilX, pupilY, pupilSize, pupilSize);


     //white body
    fill(255);
    rotate(0*PI);
    beginShape();
    curveVertex(300, 307);
    curveVertex(265, 232);
    curveVertex(265, 192);
    curveVertex(277, 143);
    curveVertex(292, 104);
    curveVertex(309, 72);
    curveVertex(334, 55);
    curveVertex(338, 57);
    curveVertex(344, 87);
    curveVertex(344, 113);
    curveVertex(342, 149);
    curveVertex(340, 177);
    curveVertex(337, 201);
    curveVertex(340, 227);
    curveVertex(327, 264);
    curveVertex(312, 293);
    endShape();

    //mouth
    fill(0);

    //frown
    if(mouth == 1){
      arc(309, 155, MouthWidth, MouthHeight, PI, 2*PI);
    }
    //smile
    if(mouth == 2){
    	arc(309, 135, MouthWidth, MouthHeight, 0, PI);
    }

    //left arm
    fill(43, 132, 212);
    rotate(armRotation*PI);
    beginShape();
    curveVertex(258, 251);
    curveVertex(251, 280);
    curveVertex(232, 270);
    curveVertex(218, 240);
    curveVertex(201, 218);
    curveVertex(182, 180);
    curveVertex(162, 138);
    curveVertex(152, 120);
    curveVertex(151, 112);
    curveVertex(156, 107);
    curveVertex(162, 106);
    curveVertex(152, 120);
    curveVertex(151, 112);
    curveVertex(156, 107);
    curveVertex(162, 106);
    curveVertex(172, 114);
    curveVertex(183, 126);
    curveVertex(204, 144);
    curveVertex(226, 166);
    curveVertex(256, 196);
    curveVertex(260, 224);
    endShape();

    //right arm
    beginShape();
    curveVertex(340, 118);
    curveVertex(342, 205);
    curveVertex(345, 224);
    curveVertex(345, 256);
    curveVertex(347, 267);
    curveVertex(360, 243);
    curveVertex(366, 234);
    curveVertex(376, 220);
    curveVertex(388, 206);
    curveVertex(398, 191);
    curveVertex(410, 176);
    curveVertex(417, 167);
    curveVertex(430, 145);
    curveVertex(446, 118);
    curveVertex(453, 102);
    curveVertex(447, 96);
    curveVertex(439, 100);
    curveVertex(424, 108);
    curveVertex(409, 122);
    curveVertex(390, 134);
    curveVertex(370, 153);
    curveVertex(340, 188);
    endShape();
}

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.
    pupilX = random(258, 271);
    pupilY = random(122, 138);
    pupilSize = random(6.5, 15);
    armRotation = random(-0.01, 0);
    MouthWidth = random(15, 50);
    MouthHeight = random(15,40);
    RightEyeY = random(105,135);
    mouth = random(mouthExpressions); //mouth will change from frown to smile

}

For this project, a friend gave me the suggestion that I should recreate left shark, who was took over the internet after Katy Perry’s 2015 Super Bowl Halftime Show.

To plot all the distinct points, I opened an image file in Adobe Illustrator and used the “info” window to find the pixel coordinate for the various different shapes.

Most everything was pretty straightforward, but I did have a hard time getting the arms (fins) to move and the color of the background to change.  In fact, I couldn’t figure out how to make the colors change on click, so I made it change based on mouse movement. I got the fins to rotate, but I need to learn how to change the point of rotation from the origin to another point.

serinal (section C) – project 02

*i’m not sure why the thing is getting cut off, but TECHNICALLY if you zoom out, it should work out*

sketch

// Serina Liu 
// Section C
// serinal@andrew.cmu.edu
// Project 02, Changing Faces

var eye = 40;
var faceWidth = 150;
var faceHeight = 200;
var mouthSize = 25;
var featherwidth = 30;
var featherheight = 60;
var beaklength = 160;
var pupilsize = 10;
var buttfeathers = 495;
var brow = 5; 
var browtilt = 130; 
//colors
var cR = 240;
var cG = 100; 
var cB = 192; 
//eyebrow
var eyebrows = 10;
 
function setup() {
    createCanvas(640, 480);
}
 
function draw() {
    background(178, 255, 102);
    //head
    fill(256, 256, 256);
    rect(320, 240, faceWidth,  faceHeight);
    //top part of head 
    fill (220);
    rect (320, 240, faceWidth, faceHeight/2);
    //eyes
    fill(0, 0, 0);
    var eyeLX = 320 - faceWidth * 0.1;
    var eyeRX = 320 + faceWidth * 0.2;
    ellipse(eyeLX +10, height / 2, eye, eye);
    ellipse(eyeRX +10, height / 2, eye, eye);
    //eyepupils
    fill(256, 256, 256);
    ellipse (eyeLX+5, height/2, pupilsize, pupilsize);
    ellipse (eyeRX+5, height/2, pupilsize, pupilsize);
    //mouth
    fill(255, 255, 0);
    triangle(200, height/2 + 40, 360, 280, 360, 330);
    //mouthpiece2
    fill(255, 255, 0);
    triangle(beaklength, height/2 + 60, 360, 330, 360, 380);
    //head piece
    fill (255, 0, 0);
    ellipse(460, 240, featherwidth, featherheight);
    ellipse (470, 250, featherwidth, featherheight);
    ellipse (480, 260, featherwidth, featherheight);
    //butt feathers
    fill (256, 256, 256);
    triangle (buttfeathers, height/2 +120, 420, 390, 490, 4000);
    //underchin 
    fill (255, 0, 0);
    ellipse (350, 390, featherwidth, featherheight);
    ellipse (330, 390, featherwidth, featherheight);
    ellipse (370, 390, featherwidth, featherheight);
    //text
    fill(250, cG, cB);
    textSize(20);
    text("hello i am a chicken", 235, 145, 500, 500);
    //text
    fill(cR, 180, cB);
    textSize(20);
    text("hello i am a chicken", 450, 145, 500, 500);
    //text
    fill(cR, cG, 180);
    textSize(20);
    text("hello i am a chicken", 20, 145, 500, 500);
    //text
    fill (76, 153, 0);
    textSize (100);
    text("i am a chicken", 1, 30, 700, 700);
    //eyebrows
    fill(0,0,0);
    rect(eyeLX+7, 203, 30, eyebrows);
    rect(eyeRX+7, 203, 30, eyebrows);
}
 
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.
    faceWidth = random(130, 165);
    faceHeight = random(300, 400);
    eye = random(10, 30);
    mouthSize = random(80, 100);
    featherwidth = random(30,60);
    featherheight = random(30, 60);
    beaklength = random(40, 120);
    pupilsize = random(7, 15);
    buttfeathers = random(40, 150);
    cR = random(1, 256);
    cG = random(1, 256);
    cB = random(1, 256);
    eyebrows = random(5, 15);
}

This particular project was kind of a challenge for me just because I was having trouble really understanding variables in general. However, once I started to understand the meaning of a variable, I was more easily able to code something. I knew I wanted to do an animal and I wanted to keep the colors of the chicken stable so I tried to manipulate all the other stuff that is involved with it. The text changing color was a fun little thing. Overall, I guess that I would love to have a bit more time to explore and refine my ideas. I think it would probably be helpful to actually sketch out my ideas prior to making it, but as of now and as of the level I am at, I think that it satisfies my standards.