September 2017 – Page 87 – [OLD FALL 2017] 15-104 • Introduction to Computing for Creative Practice

mjeong1-Project-01-Face

//Min Young Jeong
//Section A 9:30am
//mjeong1@andrew.cmu.edu
//Project-01

function setup() {
    createCanvas(500,500);
    background(99,82,129);
}

function draw() {

	fill(137,100,61);
	noStroke();	
	rect(80,150,330,300,20);
	//hair

	var c = color(255,235,205);
	fill(c);
	noStroke();
	ellipse(250,250,270,360);
	//face
	ellipse(120,250,60,80);
	//ear

	fill(137,100,61);
	noStroke();	
	rect(110,150,10,150);
	arc(245,170,330,260,PI,0,CHORD);
	fill(255,235,205);
	ellipse(265,150,100,100);
	fill(137,100,61);
	ellipse(300,150,100,100);
	fill(255,235,205);
	rect(250,170,100,30);
	//hair

	fill(78,61,54);
	noStroke();
	quad(145,205,175,185,175,200,145,208);
	quad(175,185,175,200,220,200,220,185);
	//left eyebrow
	quad(270,185,270,200,315,200,315,185);
	quad(315,200,315,185,345,205,345,208);
	//right eyebrow

	noFill();
	strokeWeight(3);
	stroke(82,63,35);
	beginShape();
	curveVertex(250, 250);
	curveVertex(250, 250);
	curveVertex(230, 290);
	curveVertex(230, 300);
	curveVertex(260, 305);
	curveVertex(260, 320);
	endShape();
	//nose

	fill(255,128,128);
	noStroke();
	arc(235,360,50,25,PI,0,CHORD);
	arc(265,360,50,25,PI,0,CHORD);
	arc(250,random(362,370),80,30,0,PI,CHORD);
	//lips

	fill(255,195,195);
	noStroke();
	ellipse(180,300,70,30);
	ellipse(320,300,70,30);
	//blush

	noFill();
	strokeWeight(2);
	stroke(74,44,0);
	curve(160,230,160,240,150,220,170,200);
	curve(170,230,170,240,160,220,180,200);
	curve(340,230,340,240,350,220,330,200);
	curve(330,230,330,240,340,220,320,200);
	//eyelashes

	fill(255,249,250);
	strokeWeight(2);
	stroke(82,63,35);
	ellipse(180,240,60,25);
	ellipse(320,240,60,25);
	fill(74,44,0);
	noStroke();
	ellipse(160,240,22,22);
	ellipse(300,240,22,22);
	fill(0);
	noStroke();
	ellipse(160,240,15,15);
	ellipse(300,240,15,15);
	fill(255,249,250);
	noStroke();
	ellipse(155,235,5,5);
	ellipse(295,235,5,5);
	//eyes

	fill(250,250,250);
	noStroke();
	ellipse(10,10,200,200);
	triangle(100,100,70,70,50,100);
	//textbubble

	fill(0,102,153);
	textSize(15);
	text("Hi My name is",5,30);
	textSize(24);
	text("Min",20,60);
	//text
}

I drew face and ear using ellipse as foundation of my portrait. And I simply used rectangle and semi-circle to illustrate my hair. Eyebrows were a bit more tricky since I had to find exact x and y coordinates to draw the geometry. Nose was created by simple curve. For my portrait, I wanted to put some text in text bubble and make it animated by making bottom lip move based on random y coordinate.

Looking Outwards 01 – Yugyeong Lee

TrussFab is an integrated system that allows one to fabricate sturdy, large-scale structures that are capable of carrying human weight. Created by Phd researcher, Robert Kovacs, with his team from the Human Computer Interaction Lab, TrussFab is interesting in that it is a 3D fabrication process that does not need specialized equipment nor specific engineering knowledge but rather easy and relatively quick to make. Also, TrussFab utilizes easily accessible material – plastic bottles -to act like beams that form triangular shapes to produce trusses as a whole. The Sketchup plugin that Trussfab uses takes an existing 3D model and automatically transforms it into a Trussfab structure while adjusting for structural stability. Architect named Oanh Lisa Nguyen Xuan constructed a pavilion through Trussfab that was 5m high out of 1268 plastic bottles. This Sketchup editor plugin designed by TrussFab create opportunities for other designers to easily fabricate large, structurally-sound forms with only the Sketchup plugin, 3D printer, and easily accessible materials in hand.

article: http://www.archdaily.com/873828/this-sketchup-plugin-can-design-structures-made-from-plastic-bottles-and-3d-printed-joints

Sketchup editor plugin designed by TrussFab

time-lapse of the process of assembly on site

agusman-Project-01-Self-Portrait

sketch.js

/*
* Anna Gusman
* agusman@andrew.cmu.edu
* Section A
*
* This program draws a self portrait out of intersecting circles and lines.
*/
  // Constants
var color1;
var color2;

function setup() {
  createCanvas(770, 830); //sets the canvas size//
  color1 = color(230, 38, 42);
  color2 = color(251, 95, 41);
  background(239, 94, 8);
  angleMode(DEGREES);
}

function draw() {
  //var backgroundcolor = color(239, 94, 8);
  //uses a orange rectangle as the background//
  //fill(backgroundcolor);
  noStroke();
  setGradient(0, 0, 770, 830, color1, color2);
  //rect(0, 0, 770, 800);

  //largest circle//
  stroke(255, 255, 255, 20);
  noFill();
  ellipse(136 + 156,189 + 156,315,314);

  var a = color(255);
  stroke(a);
  noFill();
  arc(136 + 156,189 + 156,315,314, 44, 87);

  //hair tucked behind ear, second largest circle//
  stroke(255, 255, 255, 40);
  noFill();
  ellipse(315 + 142,124 + 142,282,282);

  var a = color(255);
	stroke(a);
  noFill();
  arc(315 + 142,124 + 142,282,282, 97, 168);

  //thirds largest circle//
  stroke(255, 255, 255, 30);
  noFill();
  ellipse(331 + 125,140 + 125,248,248);

  //fourth largest circle//
  stroke(255, 255, 255, 10);
  noFill();
  ellipse(351 + 107,158 + 107,212,212);

  //top of head, fifth largest circle//
  stroke(255, 255, 255, 20);
  noFill();
  ellipse(243 + 116,289 + 116,234,234);

  var a = color(255);
	stroke(a);
  noFill();
  arc(243 + 116,289 + 116,234,234, 250, 333);

  //sixth largest circle//
  stroke(255, 255, 255, 40);
  noFill();
  ellipse(415 + 67,544 + 67,133,133);

  //eyebrow curve, seventh largest circle//
  stroke(255, 255, 255, 40);
  noFill();
  ellipse(277 + 51,350 + 54,91,96);

  //mouth curve, eigth largest circle//
  stroke(255, 255, 255, 40);
  noFill();
  ellipse(251 + 29,413 + 29,56,57);

  var a = color(255);
	stroke(a);
  noFill();
  arc(251 + 29,413 + 29, 56,57, 0, 70);

  //face curve, largest ellipse//
  stroke(255, 255, 255, 40);
  noFill();
  ellipse(281 + 192,180 + 225,384,453);

  //neck//
  var neck = color(255, 40);
  stroke(neck);
  line(439, 415.26, 439, 544.5);

  //right shoulder//
  var rightcollar = color(255, 40);
  stroke(rightcollar);
  line(439, 544, 481, 544);

  var rightshoulder = color(255, 200);
  stroke(rightshoulder);
  arc(415 + 67,544 + 67,133,133, 270, 0);

  //neck curve, second largest ellipse//
  stroke(255, 255, 255, 40);
  noFill();
  ellipse(120 + 133,355 + 133,209,267);

  var a = color(255);
	stroke(a);
  noFill();
  arc(120 + 133,355 + 133,209,267, 0, 90);

  //nose, curve is third largest ellipse//
  stroke(255, 255, 255, 40);
  ellipse(144 + 70,235 + 117,141,234);

  //nosecurve//
  var a = color(255);
	stroke(a);
  noFill();
  arc(144 + 70,235 + 117,141,234, 31, 60);

  //nosebase//
  stroke(255, 255, 255, 200);
  line(262, 437, 282, 437);

  //hair//
  var hairbase = color(255, 40)
  stroke(hairbase)
  line(647.78, 503, 286.35, 503);

  var sidehair = color(255, 200);
  stroke(sidehair);
  line(439, 406.71, 438.89, 504.29);

  var slanthair = color(255, 200);
  stroke(slanthair);
  line(463, 352, 547, 504);
  line(546.83, 504, 439.71, 504); //bottom of hair//

  //eye//
  stroke(255, 255, 255, 40);
  noFill();
  ellipse(292 + 24,366 + 24,47,47);
  var a = color(255);
	stroke(a);
  fill(255);
  //arc(292 + 24,366 + 24,47,47, 0, PI - QUARTER_PI, OPEN);

  //eyeliner//
  var diagonalline = color(255);
	stroke(diagonalline);
  line(301.36, 406.64, 344, 377);

  //ear//
  var c = color(255, 40);
  stroke(c)
  line(406, 410.26, 406, 451);

  stroke(255, 255, 255, 40);
  noFill();
  ellipse(406 + 14.5,395 + 15,28,28);

}

function setGradient(x, y, w, h, color1, color2) {

  noFill();

   //Left to right gradient
   for (var i = y; i <= y+h; i++) {
      var inter = map(i, x, x+w, 0, 1);
      var c = lerpColor(color1, color2, inter);
      stroke(c);
      line(i, y, i, y+h);
  }
}

Using and familiarizing myself with the p5 library for this assignment was an absolute blast. Having very little experience with it, I expected to feel the complete opposite as I’d cowered in fear of programming for years. Instead, setting up this composition felt oddly and incredibly satisfying, from design to debugging.

I composed my portrait from a series of intersecting ellipses and lines. Where these objects overlap is where the features of my profile are formed. I drew arcs atop the objects to highlight the important and recognizable features. I also added a slight horizontal gradient to add a smidgeon of depth.

In hindsight, it would’ve been nice to figure out how to increase the opaqueness of the parts of the objects that form the features rather than redrawing separate arcs on top. I also wish that I iterated further to explore other color relationships. Looking forward, I’d like to make this sketch respond to mouse position, specifically to have the highlighted arc areas glide around the ellipses they are based on, deconstructing and reforming my profile.

Joshua Brown (JDBROWN) – Jellyboi Portrait (Proj. 1)

Jdbrown-Sketch

function setup() {
    createCanvas(1000, 1000);
    background(104, 18, 63);
    text("p5.js vers 0.5.12 test.", 10, 15);
    createDiv("p5.dom.js library is loaded.");
    createDiv("Listen for 2 second tone to confirm p5.sound.js is loaded.");
    osc = new p5.TriOsc();
    osc.freq(220.0);
    osc.amp(0.1);
    osc.start();

    // JDBROWN - JOSHUA BROWN
    // JDBROWN@ANDREW.CMU.EDU
}

function draw() {
    if (millis() > 2000) {
        osc.stop();
        noLoop();
    }

    noStroke()

    fill (175, 80, 100);
    ellipse (520, 350, 250, 370);   // hair (back poof)

    fill (220, 80, 100);
    ellipse (266, 315, 100, 100);   // hair (side poof, back)

    fill (222, 132, 136);
    ellipse (400, 400, 350, 350);   // main face (light pink)

    fill (217, 113, 118);
    ellipse (467, 400, 215, 290);   // face shade (dark pink)

    fill (220, 80, 100);
    ellipse (410, 225, 390, 200);   // hair (main poof, top)

    fill (185, 80, 100);
    ellipse (525, 320, 100, 100);   // hair (side poof, upper right)

    fill (185, 80, 100);
    ellipse (560, 375, 100, 100);   // hair (side poof, lower right)

    fill (180, 80, 100);
    ellipse (455, 226, 300, 190);   // hair shade (main poof, top)

    fill (220, 130, 150);
    ellipse (275, 200, 30, 30);     // hair shine (smol, top)

    fill (220, 130, 150);
    ellipse (230, 300, 20, 20);     // hair shine (smol, side)

    fill (220, 130, 150);
    ellipse (250, 240, 50, 50);     // hair shine (bigger, top)

    fill (0);
    ellipse (300, 405, 15, 15);     // mouth (left)

    fill (0);
    ellipse (400, 405, 15, 15);     // mouth (right)

    fill (0);
    rect (300, 400, 100, 10);       // mouth bridge (center)

    fill (220, 150, 150);
    ellipse (400, 365, 10, 40);    // tear (right)

    fill (190, 120, 120);
    ellipse (300, 365, 10, 40);    // tear (left)

    fill (0);
    ellipse (300, 350, 10, 10);     // eye (left)

    fill (0);
    ellipse (400, 350, 10, 10);     // eye (right)

    fill (0);
    arc (400, 340, 50, 100, 180, PI, PIE);   // eye (right)

    fill (0);
    arc (300, 340, 50, 100, 180, PI, PIE);   // eye (right)

    fill (217, 113, 118);
    ellipse (350, 450, 50, 50);          // chin (dark)

    fill (222, 132, 136);
    ellipse (350, 460, 40, 40);          // chin (light)

}

/* Notes: Wednesday, Aug. 30, 2017

____________________________________________________________

    Week 1 Submission Notes: 
        Submit "Assignments" through AutoLab in a .zip file.
        Submit "Projects" as blogposts, through WordPress.

____________________________________________________________


    Co-ordinates and Drawing:

    For example: "line(1, 0, 4, 5);"
    This expression will draw a line from points (1,0) to (4, 5). These are modeled by (x, y).
    In computing, however, the axes are slightly different. X is conserved, with positive numbers
    going right, and negatives going left. But the Y axis is opposite; negative numbers go up, and 
    positive numbers go down. 

    For example: "rect(1, 2, 4, 3);" which is modeled by "rect(x, y, width, height);" 
    This expression will draw a rectangle from the point (x = 1, y = 2);

    In a more advanced way, you can use Mode commands (rectMode, etc.) to change the way in which
    the program interprets that data. rectMode(center), for instance, will draw the rectange from
    the center instead of the top-left corner, as "rect()" will. 

    When creating a new sketch, input the following code:

    function setup() {
        // put setup code here
        createCanvas(1000, 1000);
    }
 
    function draw() {
        // put drawing code here
    }

    This will allow the sketch to...sketch.

    ___________________________________

    Here is an introduction to shapes:

    in:

    function draw() {
        
        // draw a point:
        ellipse(x, y);                         modeled after "ellipse(x1, y1);"

        // draw a line:
        line(30, 30, 50, 50);                  modeled after "line(x1, y1, x2, y2);"

        // draw a rectangle:
        rect(30, 30, 50, 50);                  modeled after "rect(x1, y1, x2, y2);"
                                               where (x1, y1) is the first point (left, top)
                                               and (x2, y2) is the second (right, bottom).
                                               The rectangle will fill in from the first point
                                               to the second.

        // draw circle:
        ellipse(300, 300, 250, 250)            modeled after "ellipse(x, y, width, height);"
                                               where (x, y) plots the point of the center,
                                               width extends it sideways (width/2) in -x, / +x,
                                               and height entends it upwards (height/2) in -y / +y.

        // draw a triangle:
        triangle(30, 75, 50, 20, 85, 70);      modeled after "triangle(x1, y1, x2, y2, x3, y3);"
                                               where (x1, y1) are the co-ordinates for the first
                                               point (leftmost); (x2, y2) are the co-ordinates
                                               for the second point, and (x3, y3) are the co-
                                               ordinates for the third point (rightmost).
        
        // draw a quadrilateral:
        quad(30, 40, 50, 40, 60, 60, 70, 90);  modeled after "quad(x1, y1, x2, y2, x3, y3, x4, y4);"
                                               where each edge of the point, starting from the top-left
                                               and ending with the bottom-right, are plotted with each 
                                               pair of points (x1, y1), (x2, y2), etc.

        // draw an arc;
        arc(50, 55, 50, 50, 0, half_pi);       modeled after "arc(x, y, width, height, angle, angle, [mode]);"
                                               where (x, y) are the center of the arc's ellipse, (width, height)
                                               are the width and height of the ellipse. "angle, angle" are the
                                               angle values to start and stop the arc, respectively - this value
                                               is expressed in radians. [Mode] is either CHORD or PIE. 
    }
    ______________________________________________________________________________

    Drawing shapes is great, but perhaps we want the shapes to not look like shit?
    You can add many parameters before actually drawing the shape. You must add all
    setup information before drawing the shape, otherwise it will not work. 

    Parameters work top-to-bottom; if you write "fill(0)" on line 5, everything
    after line 5 will be "filled" with that color (in this case, black). 
    To redefine fill colors, you must write more "fill(x)" commands further down.

    Here is an introduction to parameters:

    fill(0);                to fill a shape black
    fill(255, 255, 255);    to fill a shape white
    fill(0, 56, 101);       to fill a shape a random color (RGB values)

    stroke(0);              to outline a shape in black
    stroke(255, 255, 255);  to outline a shape in white
    stroke(0, 0, 255)       to outline a shape in a color

    You can set the stroke weight (how thick the outline "stroke(x)" creates will be), with:

    strokeWeight (10);      in which (x) is a pixel value ("strokeWeight (10)" will create an outline
                            with a thickness of 10 pixels).

    noStroke();             will remove stroke from objects, since objects are stroked by default.
                            i.e. if you do not type 
__________________________________________________________________________________________________

*/

Project-01-Face-Manuelr

sketch

//Manuel Rodriguez Ladron de Guevara
//Section B 10:30am
//manuelr@andrew.cmu.edu
//Project-01

function setup() {
    createCanvas(600, 600);
    background(194,217,76);
    angleMode(DEGREES);
    smooth();
    //text("p5.js vers 0.5.12 test.", 10, 15);
}

function draw() {

    //background
    rectMode(CENTER);
    noStroke();
    fill(169,207,56);
    //fill(255,198,10);
    rect(300,300,300,400,20);

        //ears
    noStroke();
    fill(236,191,153);   
    rectMode(CENTER);
    rect((width/2)+100, (height/2), 30,50, 10);

    rectMode(CENTER);
    rect((width/2)-100, (height/2), 30,50, 10);

     //hair
    if(mouseX<(width/2)|| mouseY<(height/2)){
        fill(50);
    }else {
        noStroke();
        fill(255,216,0);
    }
    
    rect(300,260,220,220,50,50,10,10);
   

    //neck
    strokeWeight(3);
    stroke(216,170,153);
    fill(236,191,153);
    rect(300,450,60,150);



    //face base
    if(mouseX<(width/2) || (mouseY<(height/2))){
        strokeWeight(3);
        stroke(216,170,153);
        fill(236,191,153);
        ellipseMode(CENTER);
        ellipse(width/2, height/2, 200,300);  
    }
        else{
            noStroke();
    rectMode(CORNERS);
    rect((width/2)-80, (height/2)+60,(width/2)+80, (height/2)-80);

    noStroke();
    triangle((width/2)-80, (height/2)+60,300,450,(width/2)+80, (height/2)+60,30);
        }
        
    

    //mouth
    strokeWeight(5);
    stroke(216,170,153);
    line(width/2-10,height/2+100,310,400);

    //beard
    noFill();
    if(mouseX<(width/2)|| mouseY<(height/2)){
        stroke(50);
    }else {
        stroke(255,216,0);
    }
    //noFill();
    rectMode(CENTER);
    //stroke(50);
    //strokeWeight(8);
    rect(300,410,50,45,5);

    //eyes
    noStroke();
    fill(255);
    rect(260,280,35,20,5,5,10,10);
    rect(340,280,35,20,5,5,10,10);

    //shadow eyes
    noStroke();
    fill(230);
    rect(260,288,25,5,5,5,10,10);
    rect(340,288,25,5,5,5,10,10);



    //line below eyes
    strokeWeight(8);
    stroke(193,144,135);
    line(240,300,270,300);
    line(330,300,360,300);


    //eyeballs
    noStroke();
    fill(151,79,0);
    ellipse(260,280,15,15);
    ellipse(340,280,15,15);

    //pupil
    fill(0);
    ellipse(260,280,8,8);
    ellipse(340,280,8,8);

    //hair2
    if (mouseX<(width/2) || mouseY<(height/2)){
        noStroke();
        fill(50);    
    } else {
        noStroke();
        fill(255,216,0);
    }
    /*noStroke();
    fill(50);*/
    ellipse(300,170,100,50);
    arc(250,180,90,70,-60,150,CHORD);
    arc(210,220,80,60,-60,110,CHORD);
    arc(350,180,70,50,-80,150,CHORD);
    arc(390,220,80,60,-60,110,CHORD);
    arc(370,190,80,60,-60,110,CHORD);
    arc(400,260,70,50,-60,110,CHORD);

    //noStroke();
    //fill(0);
    //rect(300,150,220,100,50,50,10,10);

    //eyebrows
    fill(79,28,0);
    rect(260,260,45,10,5,5,10,10);
    rect(340,260,45,10,5,5,10,10);

    //nose
    strokeWeight(1);
    stroke(216,170,153);
    line(width/2-10,height/2+50,295,305);
    //line(310,350,305,305);
    noStroke();
    fill(216,170,153);
    triangle(width/2-10,height/2+50,295,305,310,345);

}

I started creating an ellipse as the base for the face. Then I drew the ears, as I wanted the hair to come in front of them, to cover them a little bit. Eyes were more time consuming as I was filleting the corners of the rectangle and drawing the pupils too. Hair was tricky as well as I used filled arcs and the result was unexpected and interesting at the same time when I did the right side of the forehead. Finally I wanted to add some conditionals and change the hair colour and the face shape depending on the position of the mouse.

manuelr – LookingOutwards1 – THE FUTURE ENERGY LAB

What if we could envisage the future data of our city to give citizens safe feelings in the present?

This project speculates about the possibility of gathering actual data to predict a future data, so we would know the consequences of actual decisions.

Link to the video:

https://vimeo.com/205408902

This is a work done by Superflux for the Government of UAE. The target is to develop a mechanism to experience numerous possible futures around energy, but more importantly, to stress test the opportunities and broader systemic consequences of each future with Cabinet Ministers and key decision makers.

Their main focus for the project was the creation of the Future Energy Zone. Extrapolating insights from the Ministry of Energy’s econometric data and projections, they created a model metropolis from the future that made the data experientially evocative and acted out the implications of new energy policies on the urban landscape.

Physical base model to augment with digital information

The idea of the “augmented physical model” gives us some perspective about different scales. While people recognize physical models quicker (sense of what it is, scale, material,…), it is not enough for a big data analysis. The augmented digital layer gives us the dynamic state and the main information.

This continuous shift between physical and digital generates a great scope of time. They had to come up with new elements, developing a range of artefacts that had to look outwards towards the past. They generated some “future air” to see what it would be to breathe unpolluted air, in a way to concienciate the citizens to change their lifestyle.

This project is obviously expensive to produce, so they involved some public funding, trying to encourage citizens to contribute financially towards a long term investment.

This futuristic project deals with multiple layers of information and scales. It is an urbanistic data project in which different stratum have their word. Because of its nature of “huge scale experimental process”, it is difficult to analyze every single element that completes the synergy. Early stage of a compelling and fundamental project that can create a new paradigm for how cities will work in a near future.

Link to the project website:

http://superflux.in/index.php/work/futureenergylab/#

rsp1-SectionB-LookingOutwards-01

So my research began with the simple search of the words “new media art installations interactive” which led me to discover a project gallery called Teknopolis hosted by a group call BAM. In Teknopolis, a collection of 10 different new media art is displayed, many of them being interactive. One project that caught my eye was the project call Lumarca created by Matt Parker, a new media artist and game designer in collaboration with Albert Hwang. According to his bio, his interests are deeply settled into the exploration of the intersection between both the physical and digital worlds. Lumarca, Latin for “lightbox” is an installation which uses only a computer, a projector, and yard as the projected screen in order to showcase a three dimensional volumetric display of images and motion. And since the materials used were so simple, the cost for the completion of this project was very cheap and affordable.

Below is a short documentary about the project:

According to the documentary, Parker was inspired by his desire to create something three dimensional, something in which the user can experience it instead of viewing solely from a flat two dimensional screen.

In contrast, what inspired me about the project was that this project is cable for any artist to use and create their own versions of new media art using the software and system that Parker and Hwang had developed.

Here are some of the examples of different artists’ works inspired by Lumarca as documented on Parker’s website:

http://lumarca.info/gallery.html

Some critiques that I might have about this project would be that maybe this project was too static? If the creators really wanted to make this a truly three dimensional experience, I feel that it would have been beneficial to incorporate different animations or projections that look like the real world, kind of like the images that one sees in the Oculus rift, but outside of the bulky goggles.

juyeonk-project01-face

sketch

function setup() {
    createCanvas(600, 720);
    
}

    var dir = 1;
    var speed = 0.4;
    var diam = 50;

    
   


function draw() {
    background(140, 196, 249,);
    
    
    //sun and the clouds
    
    

    scale(0.91, 0.91);
    fill(254, 194, 15);
    noStroke ();
    ellipse(158.31,130.26, diam, diam);

    diam += dir * speed;
    if (diam > 147) {
        dir = -dir;
        diam = 147;
    } else if (diam < 120) {
        dir = -dir;
        diam = 120;
    }
    


    
    
    fill (255, 200);
    triangle (56.98, 171.1, 43.35, 222.62, 126.3, 187.65);
    
    fill(39, 170, 225);
    triangle(77, 163, 48, 203, 158, 169);
    
    fill(255, 180);
    triangle(132.6, 221, 92, 177, 204, 154); 
    
    fill (255, 200);
    triangle (56.98, 171.1, 43.35, 222.62, 126.3, 187.65);
    
    fill(122, 199, 226);
    triangle(121, 184, 177, 226, 231, 188);
    
    fill(255, 220);
    triangle(200, 145.5, 151, 221, 278, 183);
    
    fill(30, 67, 132, 140);
    triangle(147, 180, 262, 230, 203, 163);
    
    
    
    //features
    
        //eyes
    fill(0);
    triangle(391.96, 316.21, 413.86, 308.32, 440.01, 321.4);
    
    fill(180, 130, 140);
    triangle(331.78, 295.69, 335.27, 303.7, 348.63, 302.17);
    
    fill(0);
    triangle(331.78, 295.69, 343.28, 290.7, 348.63, 302.17);
    
    fill(0);
    triangle(348.63, 302.17, 343.28, 290.7, 360.7, 305.93);
    
    fill(0);
    triangle(355.2, 294.47, 343.28, 290.7, 360.7, 305.93);
       
    
        //mouth
    
    fill(190, 140, 140);
    triangle(390.92, 333.33, 335.59, 363.51, 400, 389.94);
    
    fill;
    triangle(400, 389.94, 361.67, 398.56, 351.03, 384.26)
    
    fill(78, 49, 30);
    triangle(335.59, 363.51, 335.59, 384.26, 361.67, 398.56);
    
    fill(255);
    triangle(335.59, 363.51, 400, 389.94, 351.03, 384.26);
    
    
    
        //teeth
    
    //hair
    
    fill(0);
    triangle(420.29, 192.24, 442.13, 269.25, 407.64, 216.38);
    
    fill(38, 33, 29);
    triangle(420.29, 192.24, 442.13, 269.25, 522.29, 312.93);
    
    fill(20, 20, 17);
    triangle(420.29, 192.24, 482.36, 211.78, 522.29, 312.93);
    
    fill(0);
    triangle(482.36, 211.78, 522.29, 312.93, 537.53, 269.25);
    
    fill(53, 33, 26);
    triangle(537.53, 269.25, 522.29, 312.93, 619.14, 541.67);
    
    fill(77, 37, 23);
    triangle(522.29, 312.93, 515.69, 433.62, 619.14, 541.67);
    
    fill(93, 47, 25);
    triangle(442.13, 269.25, 522.29, 312.93, 515.69, 433.62);
    
    fill(42, 18, 13);
    triangle(515.69, 433.62, 507.32, 482.99, 580.06, 500.85);
    
    fill(93, 47, 25);
    triangle(515.69, 433.62, 496.15, 473.85, 492.49, 570.4);
    
    fill(68, 40, 27);
    triangle(469.3, 329.96, 515.69, 433.62, 496.15, 473.85);
    
    fill(29, 16, 13);
    triangle(469.3, 329.96, 496.15, 473.85, 453.62, 457.76);
    
    fill(47, 21, 18);
    triangle(469.3, 329.96, 457.16, 360.83, 453.62, 457.76);
    
    fill(102, 66, 48);
    triangle(442.13, 269.25, 434.99, 290.62, 469.3, 329.96);
    
    fill(73, 50, 40);
    triangle(434.99, 290.62, 469.3, 329.96, 457.16, 360.83);
    
    fill(94, 62, 48);
    triangle(442.13, 269.25, 434.99, 290.62, 469.3, 329.96);
    
    fill(121, 75, 60);
    triangle(434.99, 302.17, 457.16, 360.83, 434.99, 290.62);
    
    fill;
    triangle(457.16, 360.83, 453.62, 457.76, 453.62, 398.56);
    
    fill;
    triangle(434.99, 290.62, 457.16, 360.83, 434.99, 290.62);
    
    fill;
    triangle(434.99, 302.17, 442.13, 329.96, 457.16, 360.83);
    
    fill(20, 20, 17);
    triangle(407.64, 216.38, 352.47, 211.78, 361.67, 230.75);
    
    fill(38, 33, 29);
    triangle(352.47, 211.78, 361.67, 230.75, 331.78, 295.69);
    
    fill(50, 24, 14);
    triangle(311.09, 338.22, 327.3, 514.91, 300.26, 581.47);
    
    fill(0);
    triangle(364.07, 440.22, 339.05, 443.49, 380.06, 502.01);
    
    fill(53, 33, 26);
    triangle(407.64, 216.38, 442.13, 269.25, 434.99, 290.62);
    
    fill;
    triangle(339.05, 443.49, 380.06, 502.01, 367.41, 524.43);
    
    fill(76, 51, 41);
    triangle(320.29, 389.94, 331.78, 593.39, 367.41, 524.43);
    
    fill;
    triangle(311.09, 338.22, 320.29, 389.94, 327.3, 514.01);
    
    fill(102, 61, 40);
    triangle(311.09, 338.22, 327.3, 514.01, 300.26, 581.47);
    
    fill(53, 33, 26);
    triangle(327.3, 514.01, 331.78, 593.39, 278.91, 634.77);
    
    fill(76, 51, 41);
    triangle(331.78, 593.39, 283.51, 649.71, 278.91, 634.77);
    
    fill(102, 61, 40);
    triangle(250.17, 641.67, 278.91, 634.77, 283.51, 649.71);
    
    fill;
    triangle(581.17, 662.36, 613.39, 689.94, 613.39, 745.11);
    
    fill(53, 33, 26);
    triangle(581.17, 662.36, 598.45, 757.76, 561.67, 788.79);
    
    
    //face
    
    fill(49, 55, 70);
    triangle(407.64, 216.38, 361.67, 230.75, 345.2, 266.53);
    
    fill(160, 100, 84);
    triangle(407.64, 216.38, 345.2, 266.53, 372.3, 266.53);
    
    fill(198, 144, 118);
    triangle(407.64, 216.38, 390.03, 292.44, 372.3, 266.53);
    
    fill(220, 165, 134);
    triangle(407.64, 216.38, 390.03, 292.44, 434.99, 290.62);
    
    fill(0);
    triangle(335.59, 433.62, 339.05, 443.49, 414.54, 433.62);
    
    fill(49, 55, 70);
    triangle(331.78, 295.69, 311.09, 338.22, 320.29, 351.44);
    
    fill;
    triangle(311.09, 338.22, 320.29, 351.44, 320.29, 389.94);
    
    fill(160, 100, 84);
    triangle(331.78, 295.69, 346.72, 329.96, 320.29, 351.44);
    
    fill(220, 165, 134);
    triangle(337.4, 308.58, 364.07, 312.93, 346.72, 329.96);
    
    fill(49, 55, 70);
    triangle(341.16, 275, 343.28, 290.7, 331.78, 295.69);
    
    fill(160, 100, 84);
    triangle(335.59, 405.46, 361.67, 398.56, 361.67, 433.62);
    
    fill(89, 52, 40);
    triangle(414.54, 433.62, 398.11, 515.26, 380.83, 448.98);
    
    fill(49, 55, 70);
    triangle(320.29, 351.44, 335.59, 363.51, 320.29, 389.94);
    
    
    fill(49, 55, 70);
    triangle(364.07, 440.22, 380.83, 448.98, 398.11, 515.26);
    
    fill;
    triangle(364.07, 440.22, 398.11, 515.26, 380.06, 502.01);
    
    fill(53, 33, 26);
    triangle(364.07, 440.22, 380.83, 448.98, 414.54, 433.62);
    
    fill(198, 144, 118);
    triangle(361.67, 398.56, 361.67, 433.62, 390.03, 433.62);
    
    fill(50, 50, 50);
    triangle(335.59, 405.46, 335.59, 433.62, 361.67, 433.62);
    
    fill(49, 55, 70);
    triangle(335.59, 363.51, 335.59, 433.62, 320.29, 389.94);
    
    fill(39, 20, 20);
    triangle(320.29, 351.44, 335.59, 363.51, 346.72, 329.96);
    
    fill(220, 165, 134);
    triangle(442.13, 329.96, 434.99, 370.69, 404.6, 374.76) ;
    
    fill(198, 144, 118);
    triangle(434.99, 370.69, 404.6, 374.76,394.03, 416.09);
    
    fill;
    triangle(442.13, 329.96, 457.16, 360.83, 453.62, 398.56);
    
    fill;
    triangle(442.13, 329.96, 453.62, 398.56, 434.99, 370.69);
    
    fill(187, 131, 98);
    triangle(434.99, 370.69, 453.62, 398.56, 394.03, 416.09);
    
    fill;
    triangle;
    
    fill(160, 100, 84);
    triangle(394.03, 416.09, 414.54, 433.62, 453.62, 398.56);
    
    fill(160, 100, 84);
    triangle(394.03, 416.09, 414.54, 433.62, 390.03, 433.62);
    
    fill(220, 165, 134);
    triangle(361.67, 398.56, 400, 389.94, 390.03, 433.62);
    
    fill;
    triangle;
    
    fill(110, 62, 40);
    triangle(400, 389.94, 404.6, 374.76, 385.6, 343.1);
    
    
    //eyebrows
    fill(80);
    triangle(390.03, 292.44, 434.99, 290.62, 434.99, 302.17);
    
    fill(50);
    triangle(364.07, 282.3, 355.2, 271.18, 341.16, 275);
    //eyebrows done
    
    
    fill(102, 61, 40);
    triangle(345.2, 266.53, 372.3, 266.53, 341.16, 275);
    
    fill(160, 100, 84);
    triangle(355.2, 271.18, 372.3, 266.53, 364.07, 282.3);
    
    fill(110, 62, 40);
    triangle(335.59, 384.26, 335.59, 405.46, 361.67, 398.56);
    
    fill(160, 100, 84);
    triangle(372.3, 266.53, 390.03, 292.44, 372.3, 308.58);
    
    fill(160, 100, 84);
    triangle(390.03, 292.44, 388.24, 312.93, 413.86, 308.32);
    
    fill(187, 131, 98);
    triangle(390.03, 292.44, 434.99, 302.17, 413.86, 308.32);
    
    fill(251, 204, 171);
    triangle(434.99, 302.17, 440.01, 321.4, 413.86, 308.32);
    
    fill;
    triangle;
    
    fill(251, 204, 171);
    triangle(442.13, 329.96, 407.64, 338.67, 404.6, 374.76);
    
    fill;
    triangle(372.3, 308.58, 385.6, 343.1, 355.2, 334.23);
    
    fill;
    triangle(385.6, 343.1, 360.37, 343.1, 389.15, 354.66);
    
    fill;
    triangle(360.37, 343.1, 362.41, 352.36, 389.15, 354.66);
    
    fill(220, 165, 134);
    triangle(453.62, 457.76, 398.11, 515.26, 496.15, 473.85);
    
    fill(187, 131, 98);
    triangle(414.54, 433.62, 453.62, 457.76, 398.11, 515.26);
    
    fill(89, 52, 40);
    triangle(453.62, 398.56, 453.62, 457.76, 414.54, 433.62);
    
    fill(198, 144, 118);
    triangle(398.11, 515.26, 369.49, 573.14, 496.15, 473.85);
    
    fill(0);
    triangle(380.06, 502.01, 398.11, 515.26, 331.78, 593.39);
    
    fill(53, 42, 48);
    triangle(398.11, 515.26, 331.78, 593.39, 369.49, 573.14);
    
    fill;
    triangle;
    
    fill(187, 131, 98);
    triangle(495.08, 502.01, 492.49, 570.4, 432.82, 627.72);
    
    fill(198, 144, 118);
    triangle(492.49, 570.4, 509.94, 600.46, 432.82, 627.72);
    
    fill(220, 165, 134);
    triangle(432.82, 627.72, 509.94, 600.46, 509.94, 690.98);
    
    fill(187, 131, 98);
    triangle(507.32, 482.99, 492.49, 570.4, 509.94, 600.46);
    
    fill(45, 40, 38);
    triangle(509.94, 600.46, 509.94, 690.98, 582.67, 666.2);
    
    fill(119, 80, 70);
    triangle(507.32, 482.99, 509.94, 600.46, 661.32, 690.98);
    
    fill(66, 47, 44);
    triangle(509.94, 600.46, 640.23, 718.23, 661.32, 690.98);
    
    fill(187, 131, 98);
    triangle(507.32, 482.99, 661.32, 634.77, 661.32, 690.98);
    
    fill(198, 144, 118);
    triangle(507.32, 482.99, 580.06, 500.85, 661.32, 634.77);
    
    fill(187, 131, 98);
    triangle(580.06, 500.85, 619.14, 541.67, 661.32, 634.77);
    
    fill(160, 100, 84);
    triangle(619.14, 541.67, 661.32, 586.84, 661.32, 634.77);
    
    fill(187, 131, 98);
    triangle(640.23, 718.23, 661.32, 690.98, 661.32, 800);
    
    fill(198, 144, 118);
    triangle(640.23, 718.23, 661.32, 800, 606.55, 800);
    
    
    //face details
    
    fill(160, 100, 84);
    triangle(341.16, 275, 364.07, 282.3, 343.28, 290.7);
    
    fill(187, 131, 98);
    triangle(364.07, 282.3, 369.28, 298.93, 343.28, 290.7);
    
    fill(66, 47, 44);
    triangle(364.07, 282.3, 372.3, 295.69, 372.3, 308.58);
    
    fill(119, 80, 70);
    triangle(372.3, 266.53, 372.3, 295.69, 364.07, 282.3);
    
    fill(198, 144, 118);
    triangle(387.31, 323.56, 385.6, 343.1, 442.13, 329.96);
    
    fill(220, 165, 134);
    triangle(385.6, 343.1, 407.64, 338.67, 404.6, 374.76);
    
    fill(255, 214, 191);
    triangle(390.03, 292.44, 372.3, 308.58, 385.6, 343.1);
    
    fill(198, 144, 118);
    triangle(355.2, 294.47, 369.28, 298.93, 364.07, 312.93);
    
    fill(240, 185, 164);
    triangle(355.2, 334.23, 350.73, 343.1, 385.6, 343.1);
    
    fill(49, 55, 70);
    triangle(346.72, 329.96, 350.73, 343.1, 341.16, 346.73);
    
    fill;
    triangle(346.72, 329.96, 355.2, 334.23, 350.73, 343.1);
    
    fill;
    triangle(346.72, 329.96, 355.2, 334.23, 364.07, 312.93);
    
    fill(119, 80, 70);
    triangle(369.28, 298.93, 372.3, 308.58, 364.07, 312.93);
    
    fill(49, 55, 70);
    triangle(364.07, 312.93, 372.3, 308.58, 355.2, 334.23);
    
    fill(119, 80, 70);
    triangle(337.4, 308.58, 364.07, 312.93, 335.27, 303.7);
    
    fill;
    triangle(350.48, 308.58, 360.7, 305.93, 364.07, 312.93);
    
    fill;
    triangle(335.27, 303.7, 350.48, 308.58, 360.7, 305.93);
    
    fill;
    triangle(348.63, 302.17, 335.27, 303.7, 360.7, 305.93);
    
    fill;
    triangle(388.24, 312.93, 391.96, 316.21, 413.86, 308.32);
    
    fill;
    triangle(388.24, 312.93, 402.29, 325.31, 387.31, 323.56);
    
    fill;
    triangle(391.96, 316.21, 418.48, 327.2, 402.29, 325.31);
    
    fill;
    triangle(440.01, 321.4, 442.13, 329.96, 418.48, 327.2);
    
    fill(240, 185, 164);
    triangle(391.96, 316.21, 418.48, 327.2, 440.01, 321.4);
    
    
    
    //nose and mouth details
    fill(49, 55, 70);
    triangle(341.16, 346.73, 363.75, 358.47, 350.73, 343.1);
    
    fill(189, 130, 100);
    triangle(350.73, 343.1, 360.37, 343.1, 363.75, 358.47);
    
    fill(198, 144, 118);
    triangle(374.76, 353.42, 378.1, 358.47, 389.15, 354.66);
    
    fill(40);
    triangle(362.41, 352.36, 374.76, 353.42, 363.75, 358.47);
    
    fill(40);
    triangle(378.1, 358.47, 374.76, 353.42, 363.75, 358.47);
    
    fill(40, 30, 30);
    triangle(341.16, 346.73, 335.59, 363.51, 363.75, 358.47);
    
    fill(189, 130, 100);
    triangle(335.59, 363.51, 349.67, 367.65, 350.96, 360.76);
    
    fill(198, 144, 118);
    triangle(350.96, 360.76, 349.67, 367.65, 363.75, 358.47);
    
    fill;
    triangle(349.67, 367.65, 363.75, 358.47, 358.29, 372.24);
    
    fill;
    triangle(363.75, 358.47, 358.29, 372.24, 367.41, 370.69);
    
    fill;
    triangle(363.75, 358.47, 367.41, 370.69, 378.1, 358.47);
    
    fill(220, 184, 168);
    triangle(378.1, 358.47, 367.41, 370.69, 390.92, 376.9);
    
    fill(230, 210, 198);
    triangle(378.1, 358.47, 400, 389.94, 389.15, 354.66);
    
    
    
    //inner clothes
    
    fill(21, 24, 29);
    triangle(283.51, 649.71, 266.84, 707.52, 319.19, 800) ;
    
    fill(40, 41, 39);
    triangle(283.51, 649.71, 319.19, 800, 356.28, 627.72);
    
    fill(10, 10, 10);
    triangle(283.51, 649.71, 356.28, 627.72, 331.78, 593.39);
    
    fill(70, 65, 59);
    triangle(356.28, 627.72, 319.19, 800, 391.96, 745.11);
    
    fill(40, 41, 30);
    triangle(331.78, 593.39, 356.28, 627.72, 496.15, 473.85);
    
    fill(70, 65, 59);
    triangle(356.28, 627.72, 432.82, 627.72, 496.15, 473.85);
    
    fill(40, 41, 30);
    triangle(495.08, 502.01, 496.15, 473.85, 432.82, 627.72);
    
    fill;
    triangle(391.96, 745.11, 319.19, 800, 495.08, 800);
    
    fill(76, 67, 60);
    triangle(391.96, 745.11, 495.08, 800, 509.94, 690.98);
    
    fill(30, 31, 29);
    triangle(509.94, 690.98, 582.67, 666.2, 495.08, 800);
    
    fill(10, 10, 10);
    triangle(582.67, 666.2, 567.441, 800, 495.08, 800);
    
    fill(89, 85, 80);
    triangle(432.82, 627.72, 356.28, 627.72, 391.96, 745.11);
    
    fill(71, 68, 64);
    triangle(391.96, 745.11, 509.94, 690.98, 432.82, 627.72);
    
    
    fill(0);
    triangle(400.11, 308.58, 391.96, 316.21, 413.86, 308.32);
}

For this project, I attempted to create a cubist-style self portrait. I wanted to make it look as realistic as possible, but I realized that with the little set of skills that I have at the moment, the only way to do so was to create small areas of different colors using triangles, which I thought would be more appropriate than rectangles or quadrilaterals in depicting small details and color differences among the features.

It was not so hard to write the program since the code consisted mostly of triangles, but it was rather difficult to assign each of them the right color and the appropriate size.

I also made the sun to change its size as a little experiment of what I learned in the lecture today.

kyungak-project-01-Face

kyungak-self-portrait

//Kyunga Ko, 15104E, kyungak@andrew.cmu.edu, Project-01

function setup() {
    createCanvas(500, 675);
    background(230,157,157);
}

function draw() {

    fill(0);
    noStroke();
    quad(0,100,270,70,250,230,0,300);
    quad(270,70,370,400,270,440,250,230);
    quad(350,370,370,400,160,600,0,500);
    //hair

    fill(169,181,223);
    stroke(37);
    arc(0,530,330,730,0,HALF_PI);
    //body

    fill(232,197,162);
    rotate(PI/7);
    stroke(37);
    ellipse(250,260,330,430);
    //face

    fill(227,72,80);
    noStroke();
    triangle(234,300,249,260,263,300);
    //nose

    noFill();
    stroke(227,103,36);
    strokeWeight(10);
    arc(240,350,50,30,3*PI/2,PI/2);
    arc(240,380,50,30,3*PI/2,PI/2);
    //mouth

    fill(237,195,127);
    ellipse(180,237,70,110);
    //left eye

    fill(237,195,127);
    ellipse(320,237,70,110);
    //right eye

    fill(36,35,40);
    noStroke();
    ellipse(320,245,30,70);
    //right eye pupil

    fill(36,35,40);
    noStroke();
    ellipse(180,245,30,70);
    //left eye pupil

    fill(227,103,36);
    rotate(PI/17);
    rect(165,140,100,30);
    //left lower part of eyelid

    fill(227,103,36);
    rotate(PI/270);
    arc(190, 145, 100, 100, PI+QUARTER_PI, TWO_PI);
    //left upper part of eyelid

    fill(227,103,36);
    rotate(PI/270);
    rect(310,115,100,30);
    //left lower part of eyelid

    fill(227,103,36);
    rotate(PI/270);
    arc(340, 118, 100, 100, PI+QUARTER_PI, TWO_PI);
    //left upper part of eyelid


}

Although the face does not exactly synchronize the way I look, I took an artistic approach and experimented with the shapes to produce a self portrait. It was interesting to work and learn about the different features of javascript.

sophiaq-Project-01-Face

sketch

function setup() {
    createCanvas(600, 600);
    background(250,140,171);
    //text("p5.js vers 0.5.2 test.", 10, 15);
}

function draw() {
    //hair
    noStroke();
    fill(0);
    ellipse(300,280,300,400);
    //head
    strokeWeight(0);
    fill(255,232,212);
    ellipse(300,250,250,300);
    //body
    fill(140,217,250);
    ellipse(320,450,140,90);
    //neck
    fill(255,232,212);
    rect(300,380,40,30);
    //eyes
    fill(255,255,255);
    ellipse(250,250,30,30);
    ellipse(350,250,30,30);
    //pupil
    fill(0,0,0);
    ellipse(250,250,10,10);
    ellipse(350,250,10,10);
    //nose
    noFill();
    stroke(255,209,168);
    strokeWeight(2);
    arc(300,290,25,10,0,180)
    //smile
    noFill();
    stroke(255,158,206);
    strokeWeight(2);
    arc(300,330,30,50,290,90);
    //lips
    fill(255,158,206);
    ellipse();
    //cheek
    noStroke();
    fill(0);
    noFill();
    stroke(255,158,206);
    strokeWeight(2);
    ellipse(200,300,40,40);
    ellipse(400,300,40,40);
    //eyebrows
    noFill();
    stroke(0);
    arc(250,250,100,100, PI, 3/2*PI);
    arc(350,250,100,100,PI+QUARTER_PI,0);

}

It was a bit difficult figuring out the geometry of the face, so I tried my best! I think sketching it on photoshop would have been easier for me to code and to create a better looking face