Project 06 – Aquarium Clock

For this project, I was inspired by the week’s lab. At first, I thought it would be simple to convert the fish code to a clock but this was not the case. I had to play around with the arrays and indexes to make everything work. The number of fish represent the minutes as well as the level of water. The color of the water represents the hour of the day to show the tank getting dirtier until it is finally cleaned. Lastly, the clam opening and closing represents seconds.

sketchDownload
var x = [];
var y = [];
var dx = [];
var c = [];
//var numFish = minute()
function setup() {
    createCanvas(480, 480);
    background(220);
    //stores values for 59 fish in an array
    for (var i=0; i<59; i++) {
        //random x position for fish array
        x[i] = random(50, width-50);
        //y position so fish will only be spawned within the water
        y[i] = 3/4*height-i*((5/12/60)*height)
        //random speed of the fish
        dx[i] = random(-5, 5);
        //random color of the fish
        c[i] = color(random(255), random(255), random(255));
    }
}

function draw() {
    //variables to keep track of time
    var s = second();
    var h = hour();
    var m = minute();

    background(220);
    stroke(0);

    //fish tank with water level
    //creates background rectangle of water based upon the hour
    fill(0, 255, 255-(75/23)*h);
    rect(10, 1/4*height, width - 20, 3/4*height)
    //matches the background color and shrinks to reveal more water
    fill(220);
    rect(10, 1/4*height, width - 20, 1/3*height-(1/4*height/60)*m);
    //creates fish
    //creates the number of fish based upon minutes (+1 fish each minute)
    //resets to zero fish every hour
    for (i=0; i<m; i++) {
        fish(x[i], y[i], dx[i], c[i]);
        x[i] += dx[i];
        //makes the fish turn within the aquarium
        if(x[i] >= width - 25) {
            dx[i] = -dx[i]
        } else if(x[i] <= 25) {
            dx[i] = -dx[i]
        }
    }
    //sand
    fill(237, 201, 175);
    rect(10, 410, width-20, height-405);
    //open and closes the clam every second (logic is based upon even/odd
    //seconds)
    if(s%2 == 1) {
        openClam();
    } else {
            closedClam();
      }

}
//used two functions to open and close clam
function closedClam() {
    fill(199, 176, 255);
    //top half of clam
    arc(385, 400, 70, 30, PI, 0, CHORD)
    //bottom half of clam
    arc(385, 400, 70, 30, 0, PI, CHORD);
    noStroke();
    //back of clam
    quad(430, 410, 430, 390, 410, 400, 410, 400);
}

function openClam() {
    fill(255);
    //creates the pearl
    circle(390, 400, 20);
    fill(199, 176, 255);
    push();
    //allows for rotation around back of clam
    translate(420,400)
    //rotates the top half of the clam
    rotate(radians(30));
    //top half of clam
    arc(385-420, 400-400, 70, 30, PI, 0, CHORD)
    pop();
    //bottom half of clam
    arc(385, 400, 70, 30, 0, PI, CHORD);
    noStroke();
    //back of clam
    quad(430, 410, 430, 390, 410, 400, 410, 400);
}

//creates the fish based on the following parameters
function fish(x, y, dx, c){
    //fills fish with the color from the array
    fill(c);
    //initial position of the fish based on the array
    ellipse(x, y, 20, 10);
    //logic for whether the fish tail is on the right or left side of fish
    if(dx >= 0) {
        triangle(x - 10, y, x - 15, y - 5, x - 15, y + 5);
    }
    else if(dx < 0) {
        triangle(x + 10, y, x + 15, y - 5, x + 15, y + 5);
    }
}

LO 6 – Randomness in Art

Artist: Dane Clark
Project: Coding Architecture 2: Randomness Project

I admire the project because while it was created with randomness, the values were stored to create a repeatable art piece. The artist described his piece as appearing random, but it was in fact a pre-conceived final product. It is interesting to show many of the random possibilities then the selection of the actual element. This was done through different shading and opacities. The artist described the randomness as the appearance of many different possibilities and through deletion and rearrangement the creation of the final product. The algorithms showed the many possibilities of randomness, but the algorithms all led to the planned out piece. The artistic sensibilities are shown through the dynamic movement and flow of the piece. Additionally, the scaling and connection between the opacity of pieces add to the art. The most interesting aspect is the “revealing” of the possible randomness. For each additional branch several possibilities are shown, but only some are added before the next branch is created. The project shows that while some things may appear random, they are in fact not at all.


http://lostritto.com/risd2015spring-seminar/?p=255

Project-05: Hexagrams

The creation of optical illusions has always intrigued me. Hexagrams have always been a favorite geometric pattern of my and most importantly, the ability to create depth by underlaying and overlaying different portions. This ended up being more difficult than I had hoped as with p5js, drawings always layer based upon where in the function each element is created. For this reason, I had to separate one side of the hexagram into two pieces to actually create the illusion I wanted which resulted in a lot of calculations and math.

sketchDownload
//side length of the hexagon that a hexagram is based upon
var s = 50
function setup() {
    createCanvas(3.5*3*s, 12*s*sqrt(3)/2);
    background(150);
    noLoop();
}

function draw() {
    //translates the center of the canvas to the center of the first hexagram
    translate(3/2*s, 2*s*sqrt(3)/2);
    //loop creates the gradient effect of the background
    for (var i = 0; i<width/10; i++) {
        for (var j = 0; j<height/10; j++) {
            push();
            //translates to start at the top left corner of the canvas
            translate(-3/2*s, -2*s*sqrt(3)/2);
            //varies the color based on the variables of the loop
            fill(255/height*j*10+50, 255/height*j,255/height*j*10+50, 255);
            noStroke();
            //draws squares based upon the variables of the loop
            rect(i*10, j*10, 10, 10);
            pop();
        }
    }
    //loops creates the repeating pattern of hexagrams
    for(var i = 0; i<width/(3*s); i++) {
        for (var j = 0; j<height/(4*s*sqrt(3)/2); j++) {
            push();
            //translates based upon variables to draw the grid of hexagrams
            translate(150*i, 4*s*sqrt(3)/2*j);
            //rotates the hexagrams to create the hourglass patterns
            rotate(radians(60*i));
            rotate(radians(60*j));
            //draws the hexagram
            opticHexagram();
            pop();
        }
    }
}

//I acknowledge code that is unused should be deleted, however the following
//block comment is necessary to show the math done to create the visual.
//Each function is a building block to the final opticHexagram
/*function hexagon() {
    line(-s/2, -s*sqrt(3)/2, s/2, -s*sqrt(3)/2)
    line(s/2, -s*sqrt(3)/2, s, 0)
    line(s, 0, s/2, s*sqrt(3)/2)
    line(s/2, s*sqrt(3)/2, -s/2, s*sqrt(3)/2)
    line(-s/2, s*sqrt(3)/2, -s, 0)
    line(-s, 0, -s/2, -s*sqrt(3)/2)
}

function spikes() {
    triangle(-s/2, -s*sqrt(3)/2, s/2, -s*sqrt(3)/2, 0, -2*s*sqrt(3)/2);
    triangle(s/2, -s*sqrt(3)/2, s, 0, 3/2 * s, -s*sqrt(3)/2);
    triangle(s, 0, s/2, s*sqrt(3)/2, 3/2 * s, s*sqrt(3)/2);
    triangle(s/2, s*sqrt(3)/2, -s/2, s*sqrt(3)/2, 0, 2*s*sqrt(3)/2);
    triangle(-s/2, s*sqrt(3)/2, -s, 0, -3/2 * s, s*sqrt(3)/2);
    triangle(-s, 0, -s/2, -s*sqrt(3)/2, -3/2 * s, -s*sqrt(3)/2);
}

function hexagram() {
    noFill();
    triangle(0, -2*s*sqrt(3)/2, 3/2 * s, s*sqrt(3)/2, -3/2 * s, s*sqrt(3)/2);
    triangle(3/2 * s, -s*sqrt(3)/2, 0, 2*s*sqrt(3)/2, -3/2 * s, -s*sqrt(3)/2)
    line(0, -2*s*sqrt(3)/2, 3/2 *s, s*sqrt(3)/2);
    line(3/2 * s, s*sqrt(3)/2, -3/2 * s, s*sqrt(3)/2);
    line(-3/2 * s, s*sqrt(3)/2, 0, -2*s*sqrt(3)/2);
    line(3/2 * s, -s*sqrt(3)/2, 0, 2*s*sqrt(3)/2);
    line(0, 2*s*sqrt(3)/2, -3/2 * s, -s*sqrt(3)/2);
    line(-3/2 * s, -s*sqrt(3)/2, 3/2 * s, -s*sqrt(3)/2);
}
*/

//creates a hexagram with interlacing sides to create an optical illusion
function opticHexagram() {
  push();
  noStroke();
  //half of the white side of the lighter triangle
  //this needed to be broken into two pieces in order for the optical illusion
  //to work
  fill(255);
  quad(0, 2*s*sqrt(3)/2,0, .8*2*s*sqrt(3)/2, .8*-3/4 * s, .8*s*sqrt(3)/4,
      -3/4*s, s*sqrt(3)/4);
  //black side of the dark triangle
  fill(0);
  quad(.8*-3/2*s, .8*s*sqrt(3)/2 , -3/2*s, s*sqrt(3)/2, 3/2*s, s*sqrt(3)/2,
      .8*3/2*s, .8*s*sqrt(3)/2)
  //medium side of the lighter triangle
  fill(255-50);
  quad(.8*3/2 * s, .8*-s*sqrt(3)/2, 3/2 * s, -s*sqrt(3)/2, 0, 2*s*sqrt(3)/2,0,
      .8*2*s*sqrt(3)/2)
  //medium side of the darker triangle
  fill(0+50);
  quad(0, -2*s*sqrt(3)/2, 0, .8*-2*s*sqrt(3)/2,.8*3/2*s, .8*s*sqrt(3)/2 ,
      3/2*s, s*sqrt(3)/2);
  //darkest side of the lighter triangle
  fill(255-100);
  quad(-3/2 * s, -s*sqrt(3)/2, .8*-3/2 * s, .8*-s*sqrt(3)/2,.8*3/2 * s,
      .8*-s*sqrt(3)/2, 3/2 * s, -s*sqrt(3)/2);
  //lightest side of the darker triangle
  fill(0+100);
  quad(0, -2*s*sqrt(3)/2, 0, .8*-2*s*sqrt(3)/2,.8*-3/2*s, .8*s*sqrt(3)/2 ,
      -3/2*s, s*sqrt(3)/2);
  //other half of the white side of the lighter triangle
  //completes the illusion
  fill(255);
  quad(.8*-3/2 * s, .8*-s*sqrt(3)/2, -3/2 * s, -s*sqrt(3)/2, -3/4 * s,
      s*sqrt(3)/4, .8*-3/4*s, .8*s*sqrt(3)/4)
  pop();

}

LO 5: 3D Rendered Art

Art Piece: Glasses, pitcher, ashtray and dice
Artist: Oyonale
Year: 2006

The piece depicts a rather typical scene for painting. Similarly to conventional art, the point of the scene is to show realistic elements such as shadows, reflections, and depth. I most admire how the artist used a generally practiced technique from conventional art and converted it into 3D computational art. The artist stated he utilized Ray Tracing as the primary technique to create the visual. Ray Tracing has become a much more utilized tool in 3D graphics as it creates the most realistic renderings possible. Currently, the technology is beginning to become more prevalent in the world of video games to create the most realistic graphics. The reason it has taken so long for the widespread use of this technology is because it is rather demanding on computers. Before now, typical computers simply did not have the computational power to run more than a simple image. Amazingly, this image was created nearly 15 years ago, showing the artist’s innovative nature as this was not a widely popular technique. The artist’s sensibilities are obvious as he creates a realistic image that can be seen in all sorts of paintings, but rather he converted it to a computational format. Artists like Oyonale are the ones who have paved the way to CGI and other 3D rendered art that we see in our daily lives.

Glasses, pitcher, ashtray and dice

http://www.oyonale.com/modeles.php?lang=en&page=40

String Art Geometry

I wanted to use string art and math to create a geometric pattern. The more I was able to understand the math, the easier the designs were to make.

Strings and GeometryDownload
//used to rotate the center shapes
var angle = 0

function setup() {
    createCanvas(300, 400);
    background(0);
}

function draw() {
    background(0);
    //creates the 45 degree rotated blue/green square
    push();
    //draws square in the center of canvas
    translate(width / 2, height / 2);
    //rotates square with mouse click clockwise
    rotate(radians(45 + angle));
    //for loop creates the square / lines that appear to curve
    for (var i = 0; i <= 25; i++) {
        stroke(110, 215, 255);
        line(100, -100 + 8 * i, 100 - 8 * i, 100)
        stroke(110, 255, 224);
        line(100 - 8 * i, 100, -100, 100 - 8 * i);
        stroke(110, 255, 177);
        line(-100, 100 - 8 * i, -100 + 8 * i, -100);
        stroke(110, 255, 144);
        line(-100 + 8 * i, -100, 100, -100 + 8 * i)
    }
    pop();
    //creates the 22.5 degree rotated blue/green square
    push();
    translate(width / 2, height / 2);
    //rotates square with mouse click counterclockwise
    rotate(radians(-45/2 - angle));
    //creates the square and lines that appear to curbe
    for (var i = 0; i <= 25; i++) {
        stroke(110, 215, 255);
        line(100, -100 + 8 * i, 100 - 8 * i, 100)
        stroke(110, 255, 224);
        line(100 - 8 * i, 100, -100, 100 - 8 * i);
        stroke(110, 255, 177);
        line(-100, 100 - 8 * i, -100 + 8 * i, -100);
        stroke(110, 255, 144);
        line(-100 + 8 * i, -100, 100, -100 + 8 * i)
    }
    pop();
    //creates the purple/pink square
    push();
    translate(width / 2, height / 2);
    //rotates counterclockwise
    rotate(radians(-angle));
    //loop creates the square and the grid lines
    for (var i = 0; i <= 25; i++) {
        stroke(255, 106, 213);
        line(100, -100 + 8 * i, 100 - 8 * i, 100)
        stroke(199, 116, 232);
        line(100 - 8 * i, 100, -100, 100 - 8 * i);
        stroke(173, 140, 255);
        line(-100, 100 - 8 * i, -100 + 8 * i, -100);
        stroke(135, 149, 232);
        line(-100 + 8 * i, -100, 100, -100 + 8 * i)
    }
    pop();
    //creates the purple/pink square starting at a 22.5 degree angle
    push();
    translate(width / 2, height / 2);
    //rotate clockwise
    rotate(radians(angle + 45 / 2));
    //loops creates the square and grid lines
    for (var i = 0; i <= 25; i++) {
        stroke(255, 106, 213);
        line(100, -100 + 8 * i, 100 - 8 * i, 100)
        stroke(199, 116, 232);
        line(100 - 8 * i, 100, -100, 100 - 8 * i);
        stroke(173, 140, 255);
        line(-100, 100 - 8 * i, -100 + 8 * i, -100);
        stroke(135, 149, 232);
        line(-100 + 8 * i, -100, 100, -100 + 8 * i)
    }
    pop();
    //creates one center triangle
    push();
    translate(width / 2, height/ 2);
    //rotates counterclockwise
    rotate(radians(-angle));
    //loop creates the actual triangle and lines
    for (var i = 0; i <=10; i++) {
        stroke(0, 255, 255);
        line(-50 + 5 * i , 40 - 10 * i, 5 * i, -60 + 10 * i);
        line(5 * i, -60 + 10 * i, 50 - 10 * i, 40);
        line(50 - 10 * i, 40, -50 + 5 * i, 40 - 10 * i)
    }
    pop();
    //creates other center triangle rotated 180 degrees
    push();
    translate(width / 2, height/ 2);
    //rotates clockwise and initially rotated 180 degrees
    rotate(radians(180 + angle));
    //creates the triangle and line art
    for (var i = 0; i <=10; i++) {
        stroke(0, 255, 255);
        line(-50 + 5 * i , 40 - 10 * i, 5 * i, -60 + 10 * i);
        line(5 * i, -60 + 10 * i, 50 - 10 * i, 40);
        line(50 - 10 * i, 40, -50 + 5 * i, 40 - 10 * i)
    }
    pop();
    //creates the bordering "curves"
    for (var i = 0; i <= 25; i++) {
        stroke(134, 4, 163);
        line(300, 200 + 8 * i, 300 - 6 * i, 400);
        line(150 - 6 * i, 400, 0, 400 - 8 * i);
        line(0, 200 - 8 * i, 6 * i, 0);
        line(150 + 6 * i, 0, 300, 8 * i);
        line(6 * i, 100 - 6 * i, 150 + 6 * i, -50 + 6 * i);
        line(0, 200 - 8 * i, 12 * i, 0);
        line(300, 200 - 8 * i, 300 - 12 * i, 0);
    }
    //rotates center shapes while mouse is pressed
    if (mouseIsPressed) {
        angle += 2

    }

}

LO 04 – Music and Art

Art Title: Expressions
Artists: Kenichi Yoneda and Yu Miyashita

The art piece is a video compilation that ties art to music. The art itself sometimes appears like a physical painting and others as a computer generated piece. This is the most admirable part in my opinion as it combines so many forms of art and can even generate realistic painting using rendering. There were many maps drawn to create the realistic rendering which shows the extensive work put into the piece. The artistic sensibilities are manifested in mocking traditional art styles using more modern techniques. The algorithms used to create the art were most likely very complicated not only to just make the pictures and designs, but the animations as well. Additionally, I am unsure if the music was created to match the animations of if the motion was based upon the music. In either case, the logistics of matching the two art forms was probably extremely difficult and tiresome. The beauty of the art is using so many different techniques and mediums to give the final result.

link: https://www.creativeapplications.net/sound/expressions-paint-and-pixel-matiere-at-micro-scale/

Expressions – Paint and pixel matière at micro-scale

Project 03 – Dynamic Flower

Originally, I had no design in mind for my project. After creating some elements, I realized I had the base for a flower. I used differing opacities to create an aesthetic design.

Dynamic FlowerDownload
var x = -225;
var y = -300;
/*d was used as a variable for translation as the artwork was originally
created with a grid*/
var d = 50;
var r = 50;
var angle = 45;
var colorChange = 255;

function setup() {
    createCanvas(450, 600);
    background(255);
}

function draw() {
    var colorReduce = mouseX / 50
    background(255);
    var extend = 3 * d;  //stretches dimensions on varying shapes
    translate(width / 2, height / 2);  //makes the center the origin

    extend -= .3 * mouseX;  //modifies the stretching variable
    //determines whether an RGB value should be increased or decreased
    if (mouseX <= width / 2){
      colorChange -= colorReduce
    } else {
      colorChange = 255
      colorChange += colorReduce;
      }
    /*creates the triangle-circle combination and rotates according to
    mousePressed*/
    push();
    fill(0, 0, colorChange, 60);
    rotate(radians(45 - 2 * angle)); //rotates the shapes around the center
    translate(-4.5 * d, -6 * d); //simplifies the location of each combo
    circle(7 * d + extend, 6 * d, 50);
    triangle(5 * d, 6.5 * d, 5 * d, 5.5 * d, 7 * d + extend, 6 * d);
    circle(4.5 * d, 9 * d + extend, 50);
    triangle(5 * d, 6.5 * d, 4.5 * d, 9 * d + extend, 4 * d, 6.5 * d);
    circle(2 * d - extend, 6 * d, 50);
    triangle(4 * d, 6.5 * d, 2 * d - extend, 6 * d, 4 * d, 5.5 * d);
    circle(4.5 * d, 3 * d - extend, 50);
    triangle(4 * d, 5.5 * d, 4.5 * d, 3 * d - extend, 5 * d, 5.5 * d);
    pop();

    /*creates the tilted petals of the flower and rotates them with the center
    when the mouse is pressed*/
    push();
    rotate(radians(45 + angle));
    fill(120, 30, 220, 35);
    circle(140, 0, 280);
    circle(0, 140, 280);
    circle(-140, 0, 280);
    circle(0, -140, 280);
    pop();
    //creates the non-tilted petals and rotates around the center with mouse
    push();
    rotate(radians(angle));
    fill(255, 176, 221, 120);
    circle(140, 0, 280);
    circle(0, 140, 280);
    circle(-140, 0, 280);
    circle(0, -140, 280);
    pop();
    /*creates the ellipses in the center of the petals and rotates them around
    the center*/
    push();
    fill(colorChange, 192, 176, 200);
    rotate(radians(2 * angle));
    ellipse(0, 100 + r, r, 2 * r);
    ellipse(0, -100 - r, r, 2 * r);
    ellipse(100 + r, 0, 2 * r, r);
    ellipse(-100 - r, 0, 2 * r, r);
    pop();
    //changes the size of the ellipses based on mouse position
    if (mouseY >= height / 2) {
      r = 45 + .05 * mouseY;
    } else {
      r = 50
      }
    //creates the green center square and rotation for mousePressed
    push();
    rotate(radians(angle - 45));
    rectMode(CENTER);
    fill(0, 255, 0, 80);
    rect(0, 0, 2 * d - 0.6 * extend, 2 * d - 0.6 * extend);
    pop();
    //creates the red center square and rotation for mousePressed
    push();
    rotate(radians(angle));
    rectMode(CENTER);
    fill(255, 0, 0, 80);
    rect(0, 0, 2 * d - .6 * extend, 2 * d - .6 * extend);
    pop();
    //creates the blue gradient when the y-mouse position changes
    let i=3;
    while (i<15) {
      noStroke(); //produces a graident effect based on ellipses
      fill(168, 235, 255, 10);
      ellipse(width / 3, height + i, mouseY + 50 * i, mouseY + 50 * i);
      ellipse(-width / 3, -height, mouseY + 50 * i, mouseY + 50 * i);
      ellipse(width / 3, -height, mouseY + 50 * i, mouseY + 50 * i);
      ellipse(-width / 3, height + i, mouseY + 50 * i, mouseY + 50 * i);
      i += 1; //increases the modifier as long as i<15
    }
}

function mousePressed() {
    //for when mouseX is less than the width, the angle of rotations increase
    if (mouseX < width) {
      angle += 45
    }
  }

LO 03: Computational Fabrication

Artwork: Thallus
Creator: Zaha Hadid Architects

Thallus is a complex 3D-printed sculpture. The form is mesmerizing as an open, expending, and curved piece. The “walls” of the sculpture are created by intricate webbings of curves resembling roots. Not only does this create an aesthetic design, the complexity of it truly impressed me. The generation of the art was done through extensive computational geometry. Additionally, more algorithms had to be created for the printing robots to create the spiraling effect and create the artwork in a single piece. A large amount of research was done by the Zaha Hadid to not only create the design with computations, but also to enable the actual printing. The artistry of the designers is apparent with the expansive, yet open spiral that creates a flow to the work. Every part of the piece perfectly coincides with each other to create a balance of elegance and abstractness. The art itself is impressive, however, the most substantial part to me is the complex mathematics and robotic algorithms that actually allowed for the design to come to life in the 3D format.

/http://zaha-hadid.com/design/thallus-installation/

Variable Faces

The idea behind my code was to use randomization as well as variable-relations to create any number of faces on its own. The random variables include colors as well as the sizes of some aspects, like the eyes and face size. The eyes I made separately in order to create an abstract feel, along with the randomly changing background.

Abstract FacesDownload
//Variable Faces

    var strokeSize = 1;

    var faceWidth = 400;
    var faceHeight = 600;
    var faceColor = 135;

    var eyeColor = 30;
    var lEyeWidth = 100;
    var lEyeHeight = 100;
    var rEyeWidth = 100;
    var rEyeHeight = 100;
    var pupilColor = 135;

    var noseColor = 200;

    var mouthColor = 185;
    var mouthWidth = 180;
    var mouthHeight = 80;

    var backTri = 220;
    var backSquare = 220;
    var backCirc = 220
    var backEllipse = 220;
    var backRect = 220;


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

function draw() {
//randomizes the color of the background square
    var colorRA = random(0, 255);
    var colorGA = random(0, 255);
    var colorBA = random(0, 225);
//randomizes the color of the background triangle
    var colorRB = random(0, 255);
    var colorGB = random(0, 255);
    var colorBB = random(0, 225);
//randomizes the color of the background circle
    var colorRC = random(0, 255);
    var colorGC = random(0, 255);
    var colorBC = random(0, 225);
//randomizes the color of the background ellipse
    var colorRD = random(0, 255);
    var colorGD = random(0, 255);
    var colorBD = random(0, 225);
//randomizes the color of the background rectangle
    var colorRE = random(0, 255);
    var colorGE = random(0, 255);
    var colorBE = random(0, 225);
//randomizes the color of the background
    var colorRF = random(0, 255);
    var colorGF = random(0, 255);
    var colorBF = random(0, 225);

//creates a random background color
    background(colorRF, colorGF, colorBF);

    noStroke();
    frameRate(3);   //slows looping speed
    fill(colorRA, colorGA, colorBA);
    square(width - 300, 0, 300);    //background square
    fill(colorRB, colorGB, colorBB);
    triangle(0, 0, 100, 200, 400, 100);   //background triangle
    fill(colorRC, colorGC, colorBC);
    circle(width - 100, height - 100, 250);   //background circle
    fill(colorRE, colorGE, colorBE);
    rect(0, height * .3, width, .4 * height);   //background rectangle
    fill(colorRD, colorGD, colorBD);
    ellipse(.25 * width, height - 80, 225, 400);    //background ellipse


    strokeWeight(strokeSize);
    stroke(0);    //makes the strokes black

//creates the face with a random strokeWeight
    fill(faceColor);
    ellipse(width / 2, height /2 , faceWidth, faceHeight);


//creates the left eye
    fill(eyeColor);
    ellipse(width / 2 - 0.2 * faceWidth, height / 2 - .1 * faceHeight, lEyeWidth, lEyeHeight);
    ellipse(width / 2 + 0.2 * faceWidth, height / 2 - .1 * faceHeight, rEyeWidth, rEyeHeight);
//creates the right eye
    fill(pupilColor);
    ellipse(width / 2 - 0.2 * faceWidth, height / 2 - .1 * faceHeight, .3 * lEyeWidth, .3 * lEyeHeight);
    ellipse(width / 2 + 0.2 * faceWidth, height / 2 - .1 * faceHeight, .3 * rEyeWidth, .3 * rEyeHeight);

//creates the nose
    fill(noseColor);
    beginShape();
    curveVertex(width / 2, height / 2);
    curveVertex(width / 2, height / 2);
    curveVertex(width / 2 - .05 * faceWidth, height / 2 + .1 * faceHeight);
    curveVertex(width / 2 - .1 * faceWidth, height / 2 + .15 * faceHeight);
    curveVertex(width / 2, height / 2 + .2 * faceHeight);
    curveVertex(width / 2, height / 2 + .22 * faceHeight);
    endShape();

//creates the mouth
    fill(mouthColor);
    arc(width / 2, height / 2 + faceHeight * .3, faceWidth * .2, faceHeight * .2, 0, PI, CHORD);

}

//creates the randomization when mouse is clicked
function mouseClicked() {
    strokeSize = random(1, 5);    //randomizes the stroke size of the face

    faceWidth = random(250,400);    //randomizes face width
    faceHeight = random(250, 600);    //randomizes face height
//randomizes the color of the face
    faceColor = color(random(0, 255), random(0, 255), random(0, 255));

//randomization of eye sizes and colors
    eyeColor = color(random(0, 255), random(0, 255), random(0, 255));
    lEyeWidth = random(20, .3 * faceWidth);
    lEyeHeight = random(20, .3 * faceHeight);
    rEyeWidth = random(20, .3 * faceWidth);
    rEyeHeight = random(20, .3 * faceHeight);
    pupilColor = color(random(0, 255), random(0, 255), random(0, 255));

//randomizes nose color
    noseColor = color(random(0, 255), random(0, 255), random(0, 255));

//randomizes mouth color
    mouthColor = color(random(0, 255), random(0, 255), random(0, 255));
}

Generative Art

cinemagraphs_02

Artists: William Mincy and Dr Woohoo!
Piece: “The Portrait”

The project in general uses still images and animates them to create interesting and artistic effects. I admire the specific piece as it takes a famous still painting and puts a modern and unique twist on it. The website states the
algorithms used to create the various pieces of art use face tracking technology to pinpoint areas that can be animated. The technology makes lines and joints that can be manipulated to create motion. Additionally, the technology can put overlays of animation over areas of the still art. In my opinion, the artists are using technology in an attempt to modernize and update both pictures and old artwork. The technology is similar to filters on my social media platforms, but the artists use it on various mediums (i.e. pictures, paintings, etc.) with more extravagant uses. The artist states the project is similar to that of GIFs, but can be made using any face and can have any level of animation added. The technology is common among platforms but I admire the specific art pieces chosen and the extent to which they are modified.