Author: afukuda@andrew.cmu.edu

afukuda_Project02_VariableFaces_SectionC

afukuda_project02_javaScript

/* 
 * Name | Ai Fukuda 
 * Course Section | C 
 * Email | afukuda@andrew.cmu.edu
 * Project | 02-VariableFaces
 */ 

var r01, g01, b01;      // vase color 

var eyeSize = 20;       // variables related to eyes 
var coordEyeX = 400;
var coordEyeY = 250;

var cheekSize = 20;     // variables related to cheeks 
var coordCheekX = 420;
var coordCheekY = 300;

var widthMouth = 20;    // variables related to mouth 
var heightMouth = 20; 
 
// coordinates for bezier curve 
var coordX1 = 490;      // x-coordinate of vertex 
var coordY1 = 100;      // y-coordinate of vertex 
var coordX2 = 500;      // x-coordinate of first control point of bezier curve 
var coordY2 = 240;      // y-coordinate of first control point of bezier curve 
var coordX3 = 450;      // x-coordinate of second control point of bezier curve 
var coordY3 = 300;      // y-coordinate of second control point 
var coordX4 = 400;      // x-coordinate of second anchor point 
var coordY4 = 380;      // y-coordinate of second anchor point 

function setup() {
    createCanvas(640, 480); // set canvas size 
    r01 = random(255);
    g01 = random(255);
    b01 = random(255);
} 

function draw () {
    background (209, 226, 244);

    noStroke();
    fill(r01, g01, b01, 150);
    beginShape();                                                                                       // create vase geometry 
        vertex (coordX1, coordY1);                                                                      // starting vertex of right curve of vase
        bezierVertex (coordX2, coordY2, coordX3, coordY3, coordX4, coordY4);                            // right curve of vase         
        vertex ((640-(coordX4)), coordY4);                                                              // starting vertex of left curve of vase                                    
        bezierVertex ((640-(coordX3)), coordY3, (640-(coordX2)), coordY2, (640-(coordX1)), coordY1);    // left curve of vase
        vertex (coordX1, coordY1);                                                                      // finishing vertex of vase
    endShape();

    fill(100);
    ellipse (coordEyeX, coordEyeY, eyeSize, eyeSize);                                                   // right eye 
    ellipse ((640-coordEyeX), coordEyeY, eyeSize, eyeSize);                                             // left eye 

    fill(249, 200, 203);
    ellipse (coordCheekX, coordCheekY, cheekSize, cheekSize);                                           // right cheek 
    ellipse ((640-coordCheekX), coordCheekY, cheekSize, cheekSize);                                     // left cheek 

    stroke(100);
    noFill();
    arc (320, 320, widthMouth, heightMouth, 0, PI);                                                    // mouth

    stroke(135, 109, 82);                                                                              // plant branch 
    strokeWeight (4);
    arc (400, coordY1, 150, 150, PI, 0.2*HALF_PI);

    noStroke();                                                                                       // plant leaves
    fill(197, 217, 166);
    arc (500, coordY1, 30, 15, 0, PI); 
    arc (500, coordY1, 30, 15, PI, 0); 

    arc (440, (coordY1-20), 30, 15, 0, PI); 
    arc (440, (coordY1-20), 30, 15, PI, 0); 

    arc (485, (coordY1-45), 30, 15, 0, PI); 
    arc (485, (coordY1-45), 30, 15, PI, 0); 

}

function mousePressed() {
    // when the user clicks, these variables are reassigned random values

    coordX1 = random(400, 490);           // all: varies curvature of vase 
    coordY1 = random(110, 150);           // except for: varies height of vase 
    coordX2 = random(490, 540);
    coordY2 = random(100, 240);
    coordX3 = random(400, 540);
    coordY3 = random(200, 370);
    coordX4 = random(380, 420);   

    r01 = random(255);                    // selects random color for vase 
    g01 = random(255);
    b01 = random(255);

    eyeSize = random(10, 25);             // varies size of eyes 
    coordEyeX = random(350, 420);         // varies location of eyes (x-axis)
    coordEyeY = random(200, 260);         // varies location of eyes (y-axis)

    cheekSize = random(10, 20);           // varies size of cheeks
    coordCheekX = random(380, 420);       // varies location of cheeks (x-axis)
    coordCheekY = random(280, 300);       // varies location of cheeks (y-axis)
  
    widthMouth = random (10, 30);               // varies width of mouth 
    heightMouth = random (10, 30);              // varies height of mouth 

}

For this project I decided to base the variable faces on potted plants. There are several variables – the height of the vase, the curvature of the vase, the color of the vase, the size & distance of the eyes, the size & distance of the cheeks, and lastly the size of the mouth. The biggest thing I noticed while I was coding this graphic was that I could achieve the same visuals by using only half of the variables. Since the pot is symmetrical, I could simply use the negative x-coordinates of the right side of the pot for the left side of the vase, making my code much simpler and cleaner

 

afukuda_LookingOutwards02

Frederik Vanhoutte’s Equivor graphics was inspirational and memorable for its natural yet carefully compositional balance. I appreciate how Vanhoutte attempts to achieve aesthetic beauty through his otherwise algorithmic work; I feel that most people in this field tend to sway towards focusing on perfecting their algorithm and their aesthetic awareness fades with it. From looking at the graphics, there is a strong inclination of a radial composition, most likely with associated degrees of freedom for each petal so as to not create repeated identical petals, maintaining the natural aesthetics of flowers. I also appreciate Vanhoutte’s monochromatic choice of palette; it allows the viewer to focus on his generative art. Reading through his website, it gave an insight as to his way of thinking, which I find it helped my understanding of his work better. He writes, “Code gives me a way to play, to explore the odd behavior of our world, to find the systems beneath it.” He also shows his thought process as to how to define his work. He believes art is too pretentious and algorithm not showing as much of the “art” as he would like. He concludes that constructs seems to be a suitable choice of vocabulary.

 

Project01_SelfPortrait

project01_self portrait

function setup() {
    createCanvas(600, 600);
    background(248, 177, 149);

    var a = color(53, 92, 125); // Hair fill 
    fill(a);  
    noStroke();  
    rect(120, 320, 360, 300);  

    ellipseMode (RADIUS); // Face upper 
    fill (252, 235, 182);
    arc(300, 250, 190, 190, PI, 0);

    ellipseMode (RADIUS); // Face lower 
    fill (252, 235, 182);
    strokeWeight (0);
    arc(300, 250, 190, 250, 0, PI);

    ellipseMode (RADIUS); // Hair upper left 
    noFill ();
    stroke (53, 92, 125);
    strokeWeight (60);
    arc(280, 250, 190, 200, PI, -1.6);

    

    ellipseMode (RADIUS); // Hair upper right
    noFill ();
    stroke (53, 92, 125);
    strokeWeight (60);
    arc(310, 250, 190, 200, -HALF_PI, 0);

    line (90, 250, 90, 600);
    line (500, 250, 500, 600);

    ellipseMode(RADIUS);  // Set ellipseMode to RADIUS
    fill(255);  // Set fill to white
    strokeWeight (2);
    stroke (240, 120, 24);
    ellipse(200, 250, 40, 27);  // Draw white ellipse using RADIUS mode

    ellipseMode(CENTER);  // Set ellipseMode to CENTER
    fill(100);  // Set fill to gray
    strokeWeight (0);
    ellipse(200, 245, 40, 40);  // Draw gray ellipse using CENTER mode

    ellipseMode(RADIUS);  // Set ellipseMode to RADIUS
    fill(255);  // Set fill to white
    strokeWeight (2);
    stroke (240, 120, 24);
    ellipse(400, 250, 40, 27);  // Draw white ellipse using RADIUS mode

    ellipseMode(CENTER);  // Set ellipseMode to CENTER
    fill(100);  // Set fill to gray
    strokeWeight (0);
    ellipse(400, 245, 40, 40);  // Draw gray ellipse using CENTER mode
   
    noFill (); // Eyelash 
    strokeWeight (3);
    arc(150, 245, 20, 5, 0, PI);

    noFill (); // Eyelash 
    strokeWeight (3);
    arc(450, 245, 20, 5, 0, PI);

    noFill (); // Nose line 
    strokeWeight (2);
    stroke (240, 120, 24);
    arc(325, 270, 15, 100, HALF_PI, PI);

    noFill (); // Nose arc
    strokeWeight (2);
    arc(310, 340, 40, 22, 0, PI);

    noFill (); // Upper lip left 
    strokeWeight (2);
    stroke (240, 120, 24);
    arc(285, 400, 60, 22, -3.1, -0.3);

    noFill (); // Upper lip right 
    strokeWeight (2);
    arc(335, 400, 60, 22, -2.9, -0.2);

    noFill (); // Middle lip  
    strokeWeight (2);
    arc(308, 402, 110, 10, 0, PI);

    noFill (); // Lower lip  
    strokeWeight (2);
    arc(308, 406, 110, 45, 0, PI);

    noFill (); // Eyebrow left 
    strokeWeight (4);
    stroke (240, 120, 24);
    arc(200, 200, 85, 25, PI, -0.09);

    noFill (); // Eyebrow right
    strokeWeight (4);
    arc(400, 200, 85, 25, PI, -0.09);

    



}

Being completely unfamiliar and inexperienced with p5.js, I definitely struggled to produce a self-portrait that I was satisfied with. There were moments of frustration as it was difficult to achieve the geometric shapes I wanted, but through experimenting and familiarizing myself with the program I think I would be able to achieve a better outcome.

 

afukuda_LookingOutwards01

Over the summer I visited the ArtScience Museum in Singapore, where they were holding the FUTURE WORLD exhibition. The exhibition consisted of teamLab’s Sketch Town project, designed to engage children to inspire one another to meet the challenges of the urban setting as a shared space. Usually I feel that learning through technology has its negative consequences, however, teamLab’s project showed the capabilities of technology to foster and children’s imagination, creativity and growth, which was an inspirational experience. The biggest factor of this project is the PFU ScanSnap, a scanner which converts 2D drawings to 3D on a virtual screen, allowing a platform in which children could visualize how their drawings can be applied in a global urban system.

Link to work: https://www.teamlab.art/w/sketchtown (Author: teamLab Title: Sketch Town)