Author: xiaoyinm@andrew.cmu.edu

Xiaoying Meng- Project 2- Variable Faces

sketch

var earSize = 80;
var faceWidth = 300;
var faceHeight = 155;
var blushSize = 90;
var eyeSize =70;
var mouthHeight=122;
var y = 179;
 
function setup() {
    createCanvas(640, 480);
}
 
function draw() {
    background(0,0,0);
var earLX = width / 2 - faceWidth /2;
var earRX = width / 2 + faceWidth /2;



//ears
fill(0,0,0);
stroke(255,255,255);
strokeWeight(6);
ellipse(earLX, 180, earSize, earSize);
ellipse(earRX, 180, earSize, earSize);

//insideear
fill(255,255,255);
noStroke();
ellipse(earLX, 180, earSize/2, earSize/2);
ellipse(earRX, 180, earSize/2, earSize/2);

//head
stroke(255,255,255);
strokeWeight(6);
fill(0,0,0);
beginShape();
  curveVertex(87, 480); // the first control point
  curveVertex(87, 480); // is also the start point of curve
  curveVertex(115, 410);
  curveVertex(earLX, 200);
  curveVertex(width/2, faceHeight);
  curveVertex(earRX, 200);  
  curveVertex(525, 410);
  curveVertex(553, 480);// the last point of curve
  curveVertex(553, 480); // is also the last control point
  endShape();
//mouth
fill(255,255,255);
noStroke();
var mouthY = height-faceHeight+faceHeight/3;
ellipse(width/2,mouthY,170,mouthHeight);


//blush
fill(228,31,41);
noStroke();
ellipse(earLX-5,mouthY-5, blushSize,blushSize);
ellipse(earRX+5, mouthY-5,blushSize,blushSize);

//eyes
fill(255,255,255);
noStroke();
ellipse(width/2-80,mouthY-100,eyeSize,eyeSize);
ellipse(width/2+80,mouthY-100,eyeSize,eyeSize);

//insideeyes
fill(0,0,0);
noStroke();
ellipse(width/2-80,mouthY-100,eyeSize/3,eyeSize/3);
ellipse(width/2+80,mouthY-100,eyeSize/3,eyeSize/3);

//nose
var noseY =mouthY-mouthHeight/2+10;
quad(width/2, noseY, width/2+20, noseY+10, width/2, noseY+30,width/2-20, noseY+10);

//mouthinside
ellipse(width/2,mouthY+25,mouthHeight/5,mouthHeight/3);

//eyebrows
stroke(255,255,255);
noFill();
strokeWeight(6);
arc(width/2-80, mouthY-y, 40, 30, PI+1/3, TWO_PI-1/3);
arc(width/2+80, mouthY-y, 40, 30, PI+1/3, TWO_PI-1/3);
}

function mousePressed(){
	faceWidth = random(280, 310);
    faceHeight = random(140, 160);
    earSize = random(50, 90);
    blushSize = random(0,110);
    eyeSize =random(60,90);
    mouthHeight = random(100,130);
    y =random(150,180);
}

I first found a picture of Kumamon online and follow the basic shapes of its features. It’s a very interesting project for me. I started by locating the head, using three points on the top as variables. And go from there to describe its other features.

Xiaoying Meng-Looking Outward-02

Algorithm Generated Japanese-Inspired Construction Joints

Wood joineries were very difficult to learn in history. The information was only accessible to people who study and master this traditional technique. The ways to explore and use this type of construction were very limited.

Aryan Shahabian, a researcher from the University of Applied Arts in Vienna used algorithms to record and demonstrate wood joineries. It allows more people to learn and use this information. This algorithm can also generate countless combinations of these joineries and create resultant free-form structures. It creates new possibilities in construction methods and expands the future of architecture. It is a step further in the field of parametric design.

I find this project very admiring because it uses modern technology to expand the possibility of traditional crafts. It is perhaps the new way of using ancient methods, so the traditions can live and grow.

Xiaoyinm-Project-01-Face

sketch

function setup() {

    createCanvas(500,700);
    background(0,24,124);
}

function draw(){
//canvas
  noSmooth();
  noStroke();
  fill(252,123,145);
  rect(0,100,500,500);

//face.left
  strokeWeight(3);
  noFill();
  stroke(255,27,143);
  beginShape();
  curveVertex(219, 100); // the first control point
  curveVertex(219, 100); // is also the start point of curve
  curveVertex(208, 149);
  curveVertex(211, 195);// the last point of curve
  curveVertex(211, 195); // is also the last control point
  endShape();

  beginShape();
  curveVertex(232, 100); // the first control point
  curveVertex(232, 100); // is also the start point of curve
  curveVertex(230, 145);
  curveVertex(225, 182);
  curveVertex(216, 225);
  curveVertex(221, 270);
  curveVertex(237, 302);
  curveVertex(273, 350);// the last point of curve
  curveVertex(273, 350); // is also the last control point
  endShape();

  line(197,152,195,165);
  line(195,165,197,216);
  line(197,216,216,225);
  line(232,100,486,100);

  noFill();
  stroke(0,24,124);
  beginShape();
  curveVertex(222, 100); // the first control point
  curveVertex(222, 100); // is also the start point of curve
  curveVertex(220, 145);
  curveVertex(215, 182);
  curveVertex(206, 225);// the last point of curve
  curveVertex(206, 225); // is also the last control point
  endShape();

  line(208, 149,199,180);


//face.right
  strokeWeight(3);
  noFill();
  stroke(255,27,143);
  beginShape();
  curveVertex(486, 100); // the first control point
  curveVertex(486, 100); // is also the start point of curve
  curveVertex(472, 198);
  curveVertex(465, 229);
  curveVertex(456, 260);// the last point of curve
  curveVertex(456, 260); // is also the last control point
  endShape();

  line(471,219,456,260);

  stroke(0,24,143);
  beginShape();
  curveVertex(471,270);
  curveVertex(471,270);
  curveVertex(460,295);
  curveVertex(439,317);
  curveVertex(439,317);
  endShape();
  
  noStroke();
  fill(0,24,124);
  quad(486,100,472,198,500,214,500,100);
  triangle(465,229,472,198,491,199);
  triangle(480,195,500,213,471,270);

//eyebrows
  triangle(251,129,294,115,298,129);
  quad(294,115,298,129,340,145,330,128);
  quad(390,148,392,158,435,147,432,137);
  quad(464,150,463,158,435,147,432,137);

//eyes
  noFill();
  stroke(0,24,124);
  strokeWeight(10);
  arc(290, 153, 80, 50, PI/6, 5*PI/6);
  arc(420, 170, 80, 50, PI/6, 5*PI/6);

  noFill();
  stroke(255,27,143);
  strokeWeight(3);
  arc(290, 155, 80, 50, PI/6, 5*PI/6);
  arc(420, 173, 80, 50, PI/6, 5*PI/6);

//nose
  noStroke();
  fill(0,24,124);
  triangle(324,257,355,260,341,242);

//mouth
  noStroke();
  fill(0,24,124);
  ellipse(276,290,10,8);
  ellipse(383,309,15,10);
  triangle(288,295,331,304,323,312);
  triangle(365,307,331,304,323,312);

  fill(255,27,143);
  ellipse(250,270,20,18);
  ellipse(430,280,30,20);
//neck
  strokeWeight(3);
  noFill();
  stroke(255,27,143);
  beginShape();
  curveVertex(243, 312);// the first control point
  curveVertex(243, 312);// is also the start point of curve
  curveVertex(236, 332); 
  curveVertex(224, 358);
  curveVertex(208, 379);
  curveVertex(185, 395);// the last point of curve
  curveVertex(185, 395); // is also the last control point
  endShape();

//clothes
  stroke(0,24,124);
  line(218,429,142,378);
  line(37,402,142,378);
  line(37,402,0,450);
  line(451,414,500,430);
  line(299,353,327,355);
  fill(0,24,124);
  triangle(331,480,451,414,438,407);

//hair
  noStroke();
  fill(0,24,124);
  quad(218,100,207,148,170,155,173,100);
  triangle(207,148,173,100,172,175);
  triangle(194,200,173,100,172,175);
  quad(233,336,192,344,202,373,225,355);

//earings
  ellipse(195,220,10,10);
  ellipse(199,233,10,10);
  ellipse(206,241,10,10);
 }

I first created a picture in photoshop first and then found the coordinates to create the code.

Xiaoying Meng-LookingOutwards-1

(The ABC of Architects: a list of the most important architects and their buildings)

The ABC of Architects is a motion graphic video introducing some of the most famous architects and their iconic buildings in an alphabetical order. It was created by Andrea Stinga and Federico Gonzalez. The creators did a good job trying to include architects/architecture from countries around the world. They also have other architectural videos and graphics on OMBU Architecture, such as this one about Pritzker winners. I find the ABC of Architects intriguing and informative. The motion graphics simplify the forms and represent the characteristics of the architectures very well, making it easier for people to remember the buildings. The graphics move according to the music. This feature can better engage the audience and make the video more interesting. My only complaint with this feature is that sometimes the graphics move too fast. It might be difficult for people to follow. I think the same type of motion graphics can be used to create educational videos about building constructions and design ideas.