Author: Christine

Christine Chen-Project-02-Variable-Face

Christine Chen-Project-02-Variable-Face

/*
Christine Chen
Section E
cyc1@andrew.cmu.edu
Project-02-Variable-Face
*/


var faceWidth = 200;
var faceHeight = 200;
var eyeSize = 20;
var noseWidth = 20;
var noseHeight = 40;
var noseColorR = 94;
var noseColorG = 135;
var noseColorB = 191;
var mouthSize = 20;

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

function draw() {
    background(142, 232, 255);
    noStroke();

    //hair
    fill(34, 34, 34);
    ellipse(width/2, height/2 - 70, 300, 150);

    //face
    fill(255, 183, 202);
    ellipse(width/2, height/2, faceWidth, faceHeight);

    //brows
    fill(90, 67, 49);
    var browLX = width/2 - faceWidth * 0.25; 
    var browRX = width/2 + faceWidth * 0.25;
    ellipse(browLX, height/2 - faceWidth * 0.2, 40, 10); //left brow
    ellipse(browRX, height/2 - faceWidth * 0.2, 40, 10); //right brow

    //eye
    fill(45, 44, 44)
    var eyeLX = width/2 - faceWidth * 0.25;
    var eyeRX = width/2 + faceWidth * 0.25;
    ellipse(eyeLX, height/2, eyeSize, eyeSize); //left eye
    ellipse(eyeRX, height/2, eyeSize, eyeSize); //right eye

    //nose
    fill(noseColorR, noseColorG, noseColorB);
    ellipse(width/2, height/2 + faceHeight * 0.1, noseWidth, noseHeight);

    //mouth
    fill(189, 27, 27);
    var mouthY = height/2 + faceHeight * 0.35;
    ellipse(width/2, mouthY, mouthSize, mouthSize);
}

function mousePressed(){
    faceWidth = random(100, 250);
    faceHeight = random(110, 210);
    eyeSize = random(5, 25);
    noseWidth = random(10, 35);
    noseHeight = random(10, 40);
    noseColorR = random(0, 255);
    noseColorG = random(0, 255);
    noseColorB = random(0, 255);
    mouthSize = random(5, 20);
}

I enjoyed this project a lot as I did not expect a lot of the faces that the codes generated. Each of the generative face is hilarious to look at. I also really appreciate how variables make the process of writing the codes so much more convenient as I just have to change one specific part to apply changes to multiple parts whenever I change my mind on something.

Christine Chen- Looking Outwards-02

 

Above is Austrian artist LIA’s work, Weaving, that was created in 2018
Source: https://vimeo.com/279291848

After looking at a range of various generative art, I found Austrian artist LIA’s work, Weaving, most fascinating and inspirational. LIA started producing art with softwares and algorithms as early as 1995 and is considered as one of the first developers of the field. She translates concepts into codes which she uses as “machines” to generate multimedia outputs, which are then used to generate art. In her piece Weaving, LIA was inspired by the use of punch card in the Jacquard mechanism that was used to record information in the past to efficiently weave complex patterns for textiles. LIA developed the software to reflect the method of the Jacquard mechanism to develop “digital textiles.”

What interests me most about this piece is how simultaneously different and alike the Jacquard mechanism and LIA’s method of creating the piece is. Both translates aesthetic patterns into codes, yet the output of one is physical while the other one is digital. It is as if one is a newer version of the other. Through this piece, LIA combined traditional art with today’s computer generated algorithms to create a breakthrough of both sides.

Christine Chen- Looking Outwards-01

Above provides a quick glance of one of teamLab’s exhibitions in Tokyo
Source: Creators-TeamLab; Exhibition-TeamLab Planets TOKYO  https://www.youtube.com/watch?v=4UDi_2C04UY

TeamLab is a Japanese design and software collective.  The group consists of small group of around 30 various professionals, such as programmers, architects, engineers, artists, etc., from different fields who collaborate with each other to create forms that join art, science, nature, and technology together.  Creating the project required the group to write computer programs for digital creation and software applications that simulates forms of natures, such as waves. These digital creations are also interactive and reacts to people’s movements. The creators were motivated to create forms that go beyond the boundaries that divides up the nature and the artificial. Through this, they created a successful “first word art.”

What fascinates me most is how well teamLab portrays a “borderless world.” They show how digital forms dissolve the lines between technology and nature. Another boundary that was removed was the one between the artwork and the audiences as the installation pieces were interactive. While I was at the exhibition, I was astonished at how the simulated sounds, visual forms, and interactions made me feel as if I was standing among a natural environment. In there, nature and technology merged into one through the world created with teamLab’s creative output and exist harmoniously with each other.

 

Christine Chen-Project-01-Face

Christine Chen-Project-01-Face

/* 
Christine Chen
Section E
cyc1@andrew.cmu.edu
Project-01-Face
*/

function setup() {
    createCanvas(600, 500);
    background(172, 199, 250);
    noStroke();
    smooth();

    //dark brown hair
    var b=color(73, 48, 33); 
    fill(b);
    ellipse(300, 250, 350, 410);

    //neck
    var n=color(241, 192, 156);
    fill(n);
    rect (250, 260, 100, 100);

    //ears
    fill(n);
    ellipse(185, 220, 40, 60);
    ellipse(415, 220, 40, 60);

    //face
    var f=color(253, 211, 181); 
    fill(f);
    ellipse(300, 200, 240, 250);

    //bangs
    fill(b);
    triangle(370, 70, 220, 90, 130, 250);
    ellipse(270, 80, 110, 20);
    triangle(300, 70, 390, 90, 450, 250);

    //brows
    fill(b);
    ellipse(245, 190, 40, 20);
    ellipse(345, 190, 40, 20);
    fill(f);
    ellipse(245, 195, 40, 20);
    ellipse(345, 195, 40, 20);

    //blush
    fill(254, 158, 158);
    ellipse(230, 260, 45, 45);
    ellipse(370, 260, 45, 45);

    //eyes
    fill(40, 40, 40);
    ellipse(255, 220, 20, 20);
    ellipse(345, 220, 20, 20);

    //pupil
    fill(255, 255, 255);
    ellipse(260, 220, 5, 5);
    ellipse(350, 220, 5, 5);

    //nose
    fill(n);
    ellipse(300, 230, 20, 30);

    //lips
    fill(253, 125, 125);
    ellipse(300, 280, 50, 40);
    ellipseMode(CENTER);
    fill(f);
    ellipse(300, 265, 60, 20);

    //shirt
    rectMode(CENTER);
    fill(199, 88, 88);
    rect(300, 480, 220, 270, 60);

    //flower petals
    fill(255, 204, 67);
    ellipse(232, 150, 20, 20); //bottom right petal
    ellipse(215, 150, 20, 20); //bottom left
    ellipse(223.5, 125, 20, 20); //top center
    ellipse(208, 134, 20, 20); //top left
    ellipse(239, 134, 20, 20); //top right

    //flower center
    fill(227, 67, 67);
    ellipse(224, 140, 20, 20); 
    //
}

This is my very first project for this class. Throughout the process of creating the self portrait, I experimented with utilizing various simple geometric shapes to resemble face features. While I haven’t started learning about writing the codes for more complex shapes that may perhaps show some particular feature better, I realized that I could create more complex shapes by layering simpler shapes together! Overall, I enjoyed creating this piece as it fascinates me how codes can be used to control colors and shapes to create aesthetic images!

Test 2

not sketch

function setup() {
    createCanvas(200, 200);
    background(220, 0, 0);
    ellipse(100, 100, 50, 50) /* 100, 100 is the coordinates, 50, 50 is the radius of the ellipse */
}

function draw() {
    background(220, 0, 0, 0)
    fill(255, 200, 200) /* RGB color of ellipse */
    stroke(0, 255, 200) /* the color of the outline of the circle */
    ellipse(mouseX, mouseY, 50, 50) /* drawing repeating ellipses*/

}

class=”p5-embed” makes thing and code show up
data-width=”x” sets size of canvas to make sure it fits