Author: Emilio

Project 6 – Abstract Clock

Emilio Bustamante

Section D

this is a PNG not the actual clock
sketchDownload
//Emilio Bustamante
//ebustama@andrew.cmu.edu
//Section D
//Project-06-Abstract clock 

function setup() {
    createCanvas(415, 415);
}

function draw() {

//variables for the time 
    var seconds = second();
    var minutes = minute();
    var hours= hour();
  
    background(0)
    push();
    stroke(255);
    strokeWeight(1);
  
// hours
    line(hours*2,0,0,hours*2);
    line(hours*4,0,0,hours*4);
    line(hours*6,0,0,hours*6);
    line(hours*8,0,0,hours*8);
    line(hours*10,0,0,hours*10);
    line(hours*12,0,0,hours*12);
    line(hours*14,0,0,hours*14);
    line(hours*16,0,0,hours*16);
    line(hours*18,0,0,hours*18);
    line(hours*20,0,0,hours*20);
    line(hours*22,0,0,hours*22);
    line(hours*24,0,0,hours*24);
    line(hours*26,0,0,hours*26);
    line(hours*28,0,0,hours*28);
    line(hours*30,0,0,hours*30);
    line(hours*32,0,0,hours*32);
// hours real time line 
    stroke(0,255,0);
    strokeWeight(3);
    line(hours*34,0,0,hours*34);
    stroke(255);
    strokeWeight(1);
    line(hours*36,0,0,hours*36);
    line(hours*38,0,0,hours*38);
    line(hours*40,0,0,hours*40);
    line(hours*42,0,0,hours*42);
    line(hours*44,0,0,hours*44);
    line(hours*46,0,0,hours*46);
    line(hours*48,0,0,hours*48);
    line(hours*50,0,0,hours*50);

// minutes
    line(0,minutes,415,minutes);
    line(0,minutes*2,415,minutes*2);
    line(0,minutes*3,415,minutes*3);
    line(0,minutes*4,415,minutes*4);
    line(0,minutes*5,415,minutes*5);
// minutes real time line 
    stroke(0,255,0);
    strokeWeight(3);
    line(0,minutes*6,415,minutes*6);
    stroke(255);
    strokeWeight(1);
    line(0,minutes*7,415,minutes*7);
    line(0,minutes*8,415,minutes*8);
    line(0,minutes*9,415,minutes*9);
    line(0,minutes*10,415,minutes*10);
    line(0,minutes*11,415,minutes*11);
    line(0,minutes*12,415,minutes*12);
    line(0,minutes*13,415,minutes*13);
    line(0,minutes*14,415,minutes*14);
    line(0,minutes*15,415,minutes*15);
    line(0,minutes*16,415,minutes*16);
    line(0,minutes*17,415,minutes*17);
    line(0,minutes*18,415,minutes*18);
    line(0,minutes*19,415,minutes*19);
    line(0,minutes*20,415,minutes*20);
    line(0,minutes*21,415,minutes*21);
    line(0,minutes*22,415,minutes*22);
    line(0,minutes*23,415,minutes*23);
    line(0,minutes*24,415,minutes*24);
    line(0,minutes*25,415,minutes*25);
    line(0,minutes*26,415,minutes*26);
    line(0,minutes*27,415,minutes*27);
    line(0,minutes*28,415,minutes*28);
    line(0,minutes*29,415,minutes*29);
    line(0,minutes*30,415,minutes*30);
    line(0,minutes*31,415,minutes*31);
    line(0,minutes*32,415,minutes*32);
    line(0,minutes*33,415,minutes*33);
    line(0,minutes*34,415,minutes*34);
    line(0,minutes*35,415,minutes*35);
    line(0,minutes*36,415,minutes*36);
    line(0,minutes*37,415,minutes*37);
    line(0,minutes*38,415,minutes*38);
    line(0,minutes*39,415,minutes*39);
    line(0,minutes*40,415,minutes*40);
    line(0,minutes*41,415,minutes*41);
    line(0,minutes*42,415,minutes*42);
    line(0,minutes*43,415,minutes*43);
    line(0,minutes*44,415,minutes*44);
    line(0,minutes*45,415,minutes*45);
    line(0,minutes*46,415,minutes*46);
    line(0,minutes*47,415,minutes*47);
    line(0,minutes*48,415,minutes*48);
    line(0,minutes*49,415,minutes*49);
    line(0,minutes*50,415,minutes*50);
  
//seconds
    line(seconds,0,seconds,415);
    line(seconds*2,0,seconds*2,415);
    line(seconds*3,0,seconds*3,415);
    line(seconds*4,0,seconds*4,415);
    line(seconds*5,0,seconds*5,415);
    line(seconds*6,0,seconds*6,415);
// seconds real time line 
    stroke(0,255,0);
    strokeWeight(3);
    line(seconds*7,0,seconds*7,415);
    stroke(255);
    strokeWeight(1);
    line(seconds*8,0,seconds*8,415);
    line(seconds*9,0,seconds*9,415);
    line(seconds*10,0,seconds*10,415);
    line(seconds*11,0,seconds*11,415);
    line(seconds*12,0,seconds*12,415);
    line(seconds*13,0,seconds*13,415);
    line(seconds*14,0,seconds*14,415);
    line(seconds*15,0,seconds*15,415);
    line(seconds*16,0,seconds*16,415);
    line(seconds*17,0,seconds*17,415);
    line(seconds*18,0,seconds*18,415);
    line(seconds*19,0,seconds*19,415);
    line(seconds*20,0,seconds*20,415);
    line(seconds*21,0,seconds*21,415);
    line(seconds*22,0,seconds*22,415);
    line(seconds*23,0,seconds*23,415);
    line(seconds*24,0,seconds*24,415);
    line(seconds*25,0,seconds*25,415);
    line(seconds*26,0,seconds*26,415);
    line(seconds*27,0,seconds*27,415);
    line(seconds*28,0,seconds*28,415);
    line(seconds*29,0,seconds*29,415);
    line(seconds*30,0,seconds*30,415);
    line(seconds*31,0,seconds*31,415);
    line(seconds*32,0,seconds*32,415);
    line(seconds*33,0,seconds*33,415);
    line(seconds*34,0,seconds*34,415);
    line(seconds*35,0,seconds*35,415);
    line(seconds*36,0,seconds*36,415);
    line(seconds*37,0,seconds*37,415);
    line(seconds*38,0,seconds*38,415);
    line(seconds*39,0,seconds*39,415);
    line(seconds*40,0,seconds*40,415);
    line(seconds*41,0,seconds*41,415);
    line(seconds*42,0,seconds*42,415);
    line(seconds*43,0,seconds*43,415);
    line(seconds*44,0,seconds*44,415);
    line(seconds*45,0,seconds*45,415);
    line(seconds*46,0,seconds*46,415);
    line(seconds*47,0,seconds*47,415);
    line(seconds*48,0,seconds*48,415);
    line(seconds*49,0,seconds*49,415);
    line(seconds*50,0,seconds*50,415);
  
    pop();
  
// red reference lines
  
  stroke(255,0,0);
  strokeWeight(3);
  var y = 0; 
  var spacing = 7; 
  var len= 7; 
  
//seconds red lines
  for (var x = 0; x <= 415; x += spacing) { 
      line(x, y, x, y + len); 
   }
    
//minutes red lines
  for (var y = 0; y <= 415; y += 7) {
    for (var x = 0; x <=0; x += 7) {
      line(x, y, x + len, y ); 
   }
}
//hours red lines 
  var w = width/24;
  var h = height/24;
  var y = 0;
  for (var x = 0; x < width; x += w) {
    line(x, y, x + len, y );
    y += h;
  }
}

This clock intends to create different forms depending on the time of the day by overlapping different groups of lines oriented by seconds, minutes and hours. Each group of lines would have multiple lines to create a grid but the green lines will determine the time it is.

//Emilio Bustamante
//ebustama@andrew.cmu.edu
//Section D
//Project-06-Abstract clock 

function setup() {
    createCanvas(415, 415);
}

function draw() {

//variables for the time 
    var seconds = second();
    var minutes = minute();
    var hours= hour();
  
    background(0)
    push();
    stroke(255);
    strokeWeight(1);
  
// hours
    line(hours*2,0,0,hours*2);
    line(hours*4,0,0,hours*4);
    line(hours*6,0,0,hours*6);
    line(hours*8,0,0,hours*8);
    line(hours*10,0,0,hours*10);
    line(hours*12,0,0,hours*12);
    line(hours*14,0,0,hours*14);
    line(hours*16,0,0,hours*16);
    line(hours*18,0,0,hours*18);
    line(hours*20,0,0,hours*20);
    line(hours*22,0,0,hours*22);
    line(hours*24,0,0,hours*24);
    line(hours*26,0,0,hours*26);
    line(hours*28,0,0,hours*28);
    line(hours*30,0,0,hours*30);
    line(hours*32,0,0,hours*32);
// hours real time line 
    stroke(0,255,0);
    strokeWeight(3);
    line(hours*34,0,0,hours*34);
    stroke(255);
    strokeWeight(1);
    line(hours*36,0,0,hours*36);
    line(hours*38,0,0,hours*38);
    line(hours*40,0,0,hours*40);
    line(hours*42,0,0,hours*42);
    line(hours*44,0,0,hours*44);
    line(hours*46,0,0,hours*46);
    line(hours*48,0,0,hours*48);
    line(hours*50,0,0,hours*50);

// minutes
    line(0,minutes,415,minutes);
    line(0,minutes*2,415,minutes*2);
    line(0,minutes*3,415,minutes*3);
    line(0,minutes*4,415,minutes*4);
    line(0,minutes*5,415,minutes*5);
// minutes real time line 
    stroke(0,255,0);
    strokeWeight(3);
    line(0,minutes*6,415,minutes*6);
    stroke(255);
    strokeWeight(1);
    line(0,minutes*7,415,minutes*7);
    line(0,minutes*8,415,minutes*8);
    line(0,minutes*9,415,minutes*9);
    line(0,minutes*10,415,minutes*10);
    line(0,minutes*11,415,minutes*11);
    line(0,minutes*12,415,minutes*12);
    line(0,minutes*13,415,minutes*13);
    line(0,minutes*14,415,minutes*14);
    line(0,minutes*15,415,minutes*15);
    line(0,minutes*16,415,minutes*16);
    line(0,minutes*17,415,minutes*17);
    line(0,minutes*18,415,minutes*18);
    line(0,minutes*19,415,minutes*19);
    line(0,minutes*20,415,minutes*20);
    line(0,minutes*21,415,minutes*21);
    line(0,minutes*22,415,minutes*22);
    line(0,minutes*23,415,minutes*23);
    line(0,minutes*24,415,minutes*24);
    line(0,minutes*25,415,minutes*25);
    line(0,minutes*26,415,minutes*26);
    line(0,minutes*27,415,minutes*27);
    line(0,minutes*28,415,minutes*28);
    line(0,minutes*29,415,minutes*29);
    line(0,minutes*30,415,minutes*30);
    line(0,minutes*31,415,minutes*31);
    line(0,minutes*32,415,minutes*32);
    line(0,minutes*33,415,minutes*33);
    line(0,minutes*34,415,minutes*34);
    line(0,minutes*35,415,minutes*35);
    line(0,minutes*36,415,minutes*36);
    line(0,minutes*37,415,minutes*37);
    line(0,minutes*38,415,minutes*38);
    line(0,minutes*39,415,minutes*39);
    line(0,minutes*40,415,minutes*40);
    line(0,minutes*41,415,minutes*41);
    line(0,minutes*42,415,minutes*42);
    line(0,minutes*43,415,minutes*43);
    line(0,minutes*44,415,minutes*44);
    line(0,minutes*45,415,minutes*45);
    line(0,minutes*46,415,minutes*46);
    line(0,minutes*47,415,minutes*47);
    line(0,minutes*48,415,minutes*48);
    line(0,minutes*49,415,minutes*49);
    line(0,minutes*50,415,minutes*50);
  
//seconds
    line(seconds,0,seconds,415);
    line(seconds*2,0,seconds*2,415);
    line(seconds*3,0,seconds*3,415);
    line(seconds*4,0,seconds*4,415);
    line(seconds*5,0,seconds*5,415);
    line(seconds*6,0,seconds*6,415);
// seconds real time line 
    stroke(0,255,0);
    strokeWeight(3);
    line(seconds*7,0,seconds*7,415);
    stroke(255);
    strokeWeight(1);
    line(seconds*8,0,seconds*8,415);
    line(seconds*9,0,seconds*9,415);
    line(seconds*10,0,seconds*10,415);
    line(seconds*11,0,seconds*11,415);
    line(seconds*12,0,seconds*12,415);
    line(seconds*13,0,seconds*13,415);
    line(seconds*14,0,seconds*14,415);
    line(seconds*15,0,seconds*15,415);
    line(seconds*16,0,seconds*16,415);
    line(seconds*17,0,seconds*17,415);
    line(seconds*18,0,seconds*18,415);
    line(seconds*19,0,seconds*19,415);
    line(seconds*20,0,seconds*20,415);
    line(seconds*21,0,seconds*21,415);
    line(seconds*22,0,seconds*22,415);
    line(seconds*23,0,seconds*23,415);
    line(seconds*24,0,seconds*24,415);
    line(seconds*25,0,seconds*25,415);
    line(seconds*26,0,seconds*26,415);
    line(seconds*27,0,seconds*27,415);
    line(seconds*28,0,seconds*28,415);
    line(seconds*29,0,seconds*29,415);
    line(seconds*30,0,seconds*30,415);
    line(seconds*31,0,seconds*31,415);
    line(seconds*32,0,seconds*32,415);
    line(seconds*33,0,seconds*33,415);
    line(seconds*34,0,seconds*34,415);
    line(seconds*35,0,seconds*35,415);
    line(seconds*36,0,seconds*36,415);
    line(seconds*37,0,seconds*37,415);
    line(seconds*38,0,seconds*38,415);
    line(seconds*39,0,seconds*39,415);
    line(seconds*40,0,seconds*40,415);
    line(seconds*41,0,seconds*41,415);
    line(seconds*42,0,seconds*42,415);
    line(seconds*43,0,seconds*43,415);
    line(seconds*44,0,seconds*44,415);
    line(seconds*45,0,seconds*45,415);
    line(seconds*46,0,seconds*46,415);
    line(seconds*47,0,seconds*47,415);
    line(seconds*48,0,seconds*48,415);
    line(seconds*49,0,seconds*49,415);
    line(seconds*50,0,seconds*50,415);
  
    pop();
  
// red reference lines
  
  stroke(255,0,0);
  strokeWeight(3);
  var y = 0; 
  var spacing = 7; 
  var len= 7; 
  
//seconds red lines
  for (var x = 0; x <= 415; x += spacing) { 
      line(x, y, x, y + len); 
   }
    
//minutes red lines
  for (var y = 0; y <= 415; y += 7) {
    for (var x = 0; x <=0; x += 7) {
      line(x, y, x + len, y ); 
   }
}
//hours red lines 
  var w = width/24;
  var h = height/24;
  var y = 0;
  for (var x = 0; x < width; x += w) {
    line(x, y, x + len, y );
    y += h;
  }
}

LO-06

Emilio Bustamante

Randomness in architecture

During my career I have never seen randomness in architecture. A group of fourth year students created a project which uses randomness in their design process. By combining controls and randomness they are able to create forms which have a lot of variations but still have a logical composition. The script does something similar to what we are learning in p5js. They created parameters which the random values needed to follow like how far away can an object be from its origin. Multiple random boxes were stacked to create different megastructures and analyze different compositions. This allowed for fast form making and manipulation.

https://www.sciencedirect.com/science/article/abs/pii/S0142694X14000039?via%3Dihub

Project 05: Wallpaper

Emilio Bustamante

This wallpaper uses patterns inspired from Muslim culture. My main objective was to try to draw the least amount of lines to create the wallpaper. I noticed that if I rotated and repeated the shape shown below 4 times it would create the pattern I wanted without drawing much lines. After that I just repeated and translated the groups of lines four times. The initial group of lines drawn would be repeated 16 times. 

function setup() {
  createCanvas(400, 400); 
} 
function draw() {
  background(204); 
//top left
  pattern2(50, 50);
//top right
  translate(-50,150)
  pattern2(0,0)
//bottom right
  translate(-50,-250)
  pattern2(0,0)
//bottom left
  translate(-50,150)
  pattern2(0,0)
}
function pattern2(x,y){
//top left
  pattern1(50,50) 
//top right
  rotate(radians(90));
  rectMode(CENTER);
  pattern1(0,-100)
//bottom right
  rotate(radians(90));
  rectMode(CENTER);
  pattern1(0,-100)
//bottom left
  rotate(radians(90));
  rectMode(CENTER);
  pattern1(0,-100)
}

function pattern1(x, y) {  
  translate(x, y); 
  stroke(0); 
  strokeWeight(1);
//line 1
  line(50,-33.3,26.5,-40);
  line(26.5,-40,-4.5,-9);
  line(-4.5,-9,-45, -33.3);
  line(-45, -33.3,-50,-25);
  line(-50,-25, -33.3, 7.5);
  line(-33.3, 7.5, 33.3, -7.5);
  line(33.3, -7.5,50,26);
  line(50,26,45,33.3);
  line(45,33.3,4.5,9);
  line(4.5,9,-26.5,40);
  line(-26.5,40,-50,33.3);
//line 2
  line(33.3,-50,40,-26.5);
  line(40,-26.5,9,4.5);
  line(9,4.5,33.3,45.5);
  line(33.3,45.5,26.5,50);
  line(26.5,50, -7.5, 33.3);
  line(-7.5, 33.3, 7.5, -33.3);
  line(7.5, -33.3,-26,-50);
  line(-26.5,-50,-33.3,-45.5);
  line(-33.3,-45.5,-9,-4.5);
  line(-9,-4.5,-40,26.5);
  line(-40,26.5,-33.3,50);
//line 3
  line(-37.5,-37.5,-36.5,10);
  line(-36.5,10,-50,13.3);
  line(-50,13.3,-20,20);
  line(-20,20,-13.3,50);
  line(-13.3,50,-10,36.5);
  line(-10,36.5,37.5,37.5);
  line(37.5,37.5,36.5,-10);
  line(36.5,-10,50,-13.3);
  line(50,-13.3,20,-20);
  line(20,-20,13.3,-50);
  line(13.3,-50,10,-36.5);
  line(10,-36.5,-37.5,-37.5);
}

LO-5

Emilio Bustamante

3D rendering in architecture is now commonly used and normally all projects use it to represent forms, materials and architectural experiences. In the past, representing forms in a realistic way was difficult and time consuming. Now with 3d visualizations it is faster and more accurate but sometimes it does not show the true architect intention. In my opinion an architect firm which creates renders that seem real but with a lot of post editing that make them unique would be Santiago Calatrava architects. Their renderings truly show the architect’s sense of life and space. One good example would be the renderings for the tallest planned structure in the world, the Dubai Creek Tower.

Image sources:

https://www.archdaily.com/781831/santiago-calatrava-wins-competition-to-design-observation-tower-in-dubai

https://me.popsugar.com/technology/Dubai-Creek-Harbour-Tower-Taller-Than-Burj-Khalifa-40875628

Project-04: String Art

Emilio Bustamante

My main objective is to create organic shapes when I overlap different lines groups between each other. 


var dx1;
var dy1;
var dx2;
var dy2;
var numLines = 40;

function setup() {
    createCanvas(400, 470);
    background(200);
    dx1 = (150-50)/numLines;
    dy1 = (300-50)/numLines;
    dx2 = (350-300)/numLines;
    dy2 = (100-300)/numLines;
}
function draw() {
//drawing in the right
  translate(100, 0);
//group of lines in the left
    var x1 = 150;
    var y1 = 300;
    var x2 = 200;
    var y2 = 120;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }
//group of lines in the right
    var x1 = 115;
    var y1 = 300;
    var x2 = 200;
    var y2 = 80;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }
//drawing in the left 
  translate(-200,0); 
//group of lines in the left
    var x1 = 160;
    var y1 = 300;
    var x2 = 200;
    var y2 = 100;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }
//group of lines in the right
    var x1 = 130;
    var y1 = 300;
    var x2 = 200;
    var y2 = 100;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }
//contour for drawing in the left
    translate(100,0);
    stroke(0,255,0);
    strokeWeight(1.5);
    line(125,0,58,300);
    line(58,300,132,470);
    line(132,470,146,0);
//contour for drawing in the right
    translate(200,0);
    line(130,0,50,300);
    line(50,300,119,470);
    line(119,470,146,0);
    noLoop();
}

LO-4

Emilio Bustamante

I have some experience with using sounds and robots for accelerating the
construction process for a sculpture. During a robotics class, we recorded
and coded sounds in teachable machine so the robot could recognize them and
do specific actions based on the sound. We used p5.js to communicate the robot
its actions location, speed, movement type, and words. After the robot would
hear the correct word it would pick up a stick and cut it in the specific
length specified by that word. The sculpture was a mixture of multiple sticks
that created a parametric form made with veroni in grashopper. All the process
was accelerated with algorithms from the design to the construction.

LO: Generative Art

Emilio Bustamante

Section D

Sunrise Tower by Zaha Hadid architects

Parametric architecture in my opinion is one of the best
representations of generative art. Architects now at days
use different programs where parameters such as numbers
and commands are connected to create different forms and
patterns. This type of design process allows for easy and
fast modification. It also allows for connecting different
elements throughout the design making it more efficient.
A good example of parametric architecture would be the work
by Zaha Hadid architects. Their work reaches a level of
complexity and variety that would not be possible or hard
to do without the help of computer algorithmic calculations.
In my opinion, their best design would be the proposed Sunrise
Tower in Kuala Lumpur Malaysia. The design overlays a pattern
in its form to create one of the most unique facades. Parametric
design has also been a crucial design element for some of my
architecture projects.

Parametric Skins – Sunrise Towers by Zaha Hadid Architect

Project-02: Variable faces

Emilio Bustamante

Section D

Right-click, select all and copy then paste in p5js editor and erase the extra lines at the beginning and end. I apologize had some problems importing the html. 

// Maintain pressing the mouse and then release to see the face movement

function setup() {
  createCanvas(425,500);
  strokeWeight(0);
  noLoop();
}

// Profile face  

function draw() {
  background(115,191,69);

// Hair  

       fill(120,100,100)
  
  rect(50,175,25,25)
  rect(50,225,25,25)
  rect(50,250,25,25)
  rect(50,275,25,25)
  
  rect(75,175,25,25)
  rect(75,200,25,25)
  rect(75,225,25,25)
  rect(75,250,25,25)
  rect(75,275,25,25)
  rect(75,300,25,25)
  rect(75,325,25,25)
  
  rect(100,150,25,25)
  rect(100,175,25,25)
  rect(100,200,25,25)
  rect(100,225,25,25)
  
  rect(125,75,25,25)
  rect(125,100,25,25)
  rect(125,125,25,25)
  rect(125,150,25,25)
  rect(125,175,25,25)
  rect(125,200,25,25)
  rect(125,225,25,25)
  
  rect(150,100,25,25)
  rect(150,125,25,25)
  rect(150,150,25,25)
  rect(150,175,25,25)
  rect(150,200,25,25)
  rect(150,225,25,25)
  rect(150,250,25,25)
  
  rect(175,125,25,25)
  rect(175,150,25,25)
  rect(175,175,25,25)
  rect(175,200,25,25)
  rect(175,225,25,25)
  rect(175,250,25,25)
  
  rect(200,100,25,25)
  rect(200,125,25,25)
  rect(200,150,25,25)
  rect(200,175,25,25)
  rect(200,200,25,25)
  
  rect(225,125,25,25)
  rect(225,150,25,25)
  rect(225,175,25,25)
  rect(225,200,25,25)
  
  rect(250,100,25,25)
  rect(250,125,25,25)
  rect(250,150,25,25)
  rect(250,175,25,25)
  
  rect(275,75,25,25)
  rect(275,100,25,25)
  rect(275,125,25,25)
  rect(275,150,25,25)
  rect(275,175,25,25)
  
  rect(300,100,25,25)
  rect(300,125,25,25)
  rect(300,150,25,25)
  rect(300,175,25,25)
  rect(300,175,25,25)
  rect(300,200,25,25)
  
  rect(325,125,25,25)
  rect(325,150,25,25)
  rect(325,175,25,25)
  
  rect(350,125,25,25)
  
// Shadows
    
       fill(23,19,20)

  rect(100,325,25,25)
  rect(100,350,25,25)
  rect(100,375,25,25)
 
  rect(125,275,25,25)
  rect(125,300,25,25)
  rect(125,325,25,25)
  rect(125,350,25,25)
  rect(125,375,25,25)
  rect(125,400,25,25)
  rect(125,425,25,25)
  rect(125,450,25,25)
  rect(125,475,25,25)

  rect(150,275,25,25)
  rect(150,300,25,25)
  rect(150,325,25,25)
  rect(150,350,25,25)
  rect(150,375,25,25)
  rect(150,400,25,25)
 
  rect(175,325,25,25)
  rect(175,350,25,25)
  rect(175,375,25,25)
  rect(175,400,25,25)
  rect(175,425,25,25)
  
  rect(200,250,25,25)
  rect(200,350,25,25)
  rect(200,375,25,25)
  rect(200,400,25,25)
  rect(200,425,25,25)

  rect(225,250,25,25)
  rect(225,375,25,25)
  rect(225,400,25,25)
  rect(225,425,25,25)
  rect(225,450,25,25)
  rect(225,475,25,25)
  
  rect(250,250,25,25)
  rect(250,375,25,25)
  rect(250,425,25,25)
  rect(250,450,25,25)
  
  rect(275,250,25,25)
  rect(275,275,25,25)
  rect(275,375,25,25)
  rect(275,425,25,25)
  
  rect(300,250,25,25)
  rect(300,275,25,25)
  rect(300,300,25,25)
  rect(300,375,25,25)
  
// Skin

      fill(135,62,43)
  
  rect(100,250,25,25)
  rect(100,275,25,25)
  rect(100,300,25,25)
  
  rect(125,250,25,25)
  
  rect(150,425,25,25)
  rect(150,450,25,25)
  rect(150,475,25,25)
  
  rect(175,275,25,25)
  rect(175,300,25,25)
  rect(175,450,25,25)
  rect(175,475,25,25)
  
  rect(200,225,25,25)
  rect(200,275,25,25)
  rect(200,300,25,25)
  rect(200,325,25,25)
  rect(200,450,25,25)
  rect(200,475,25,25)
 
  rect(225,225,25,25)
  rect(225,275,25,25)
  rect(225,300,25,25)
  rect(225,325,25,25)
  rect(225,350,25,25)

  rect(250,200,25,25)
  rect(250,225,25,25)
  rect(250,275,25,25)
  rect(250,300,25,25)
  rect(250,325,25,25)
  rect(250,350,25,25)
  rect(250,400,25,25)
  
  rect(275,200,25,25)
  rect(275,225,25,25)
  rect(275,300,25,25)
  rect(275,325,25,25)
  rect(275,350,25,25)  
  rect(275,400,25,25)

  rect(300,225,25,25)
  rect(300,325,25,25)
  rect(300,350,25,25)  
  
  rect(325,300,25,25)
  rect(325,325,25,25)
  
  rect(350,325,25,25)
}

// 3/4 face

function mousePressed() {
  background(115,191,69);
  
// Hair
  
      fill(120,100,100)

  rect(50,75,25,25)
  rect(50,150,25,25)
  rect(50,175,25,25)
  rect(50,225,25,25)
  rect(50,250,25,25)
  rect(50,275,25,25)
  
  rect(75,75,25,25)
  rect(75,100,25,25)
  rect(75,175,25,25)
  rect(75,200,25,25)
  rect(75,225,25,25)
  rect(75,250,25,25)
  
  rect(100,100,25,25)
  rect(100,125,25,25)
  rect(100,150,25,25)
  rect(100,175,25,25)
  rect(100,200,25,25)
  rect(100,225,25,25)
  rect(100,250,25,25)
  
  rect(125,75,25,25)
  rect(125,100,25,25)
  rect(125,125,25,25)
  rect(125,150,25,25)
  rect(125,175,25,25)
  rect(125,200,25,25)
  
  rect(150,100,25,25)
  rect(150,125,25,25)
  rect(150,150,25,25)
  rect(150,175,25,25)
  rect(150,200,25,25)
  
  rect(175,50,25,25)
  rect(175,125,25,25)
  rect(175,150,25,25)
  rect(175,175,25,25)
  
  rect(200,50,25,25)
  rect(200,75,25,25)
  rect(200,100,25,25)
  rect(200,125,25,25)
  rect(200,150,25,25)
  rect(200,175,25,25)
  
  rect(225,75,25,25)
  rect(225,100,25,25)
  rect(225,125,25,25)
  rect(225,150,25,25)
  rect(225,175,25,25)
  rect(225,200,25,25)
  
  rect(250,100,25,25)
  rect(250,125,25,25)
  rect(250,150,25,25)
  rect(250,175,25,25)
  
  rect(275,75,25,25)
  rect(275,100,25,25)
  rect(275,125,25,25)
  rect(275,150,25,25)
  rect(275,175,25,25)
  
  rect(300,100,25,25)
  rect(300,125,25,25)
  rect(300,150,25,25)
  rect(300,175,25,25)
  rect(300,175,25,25)
  rect(300,200,25,25)
  
  rect(325,75,25,25)
  rect(325,100,25,25)
  rect(325,125,25,25)
  rect(325,150,25,25)
  rect(325,175,25,25)
  
  rect(350,75,25,25)
  rect(350,150,25,25)
  rect(350,175,25,25)
  
// Shadows
  
       fill(23,19,20)
  
  rect(75,275,25,25)
  rect(75,300,25,25)
  
  rect(100,275,25,25)
  rect(100,300,25,25)
  rect(100,325,25,25)
  rect(100,350,25,25)
  rect(100,375,25,25)
  
  rect(125,250,25,25)
  rect(125,350,25,25)
  rect(125,375,25,25)
  rect(125,400,25,25)
  rect(125,425,25,25)
  rect(125,450,25,25)
  rect(125,475,25,25)
  
  rect(150,250,25,25)
  rect(150,275,25,25)
  rect(150,375,25,25)
  rect(150,400,25,25)
  rect(150,425,25,25)
  
  rect(175,250,25,25)
  rect(175,275,25,25)
  rect(175,300,25,25)
  rect(175,400,25,25)
  rect(175,425,25,25)
  rect(175,450,25,25)
  
  rect(200,250,25,25)
  rect(200,275,25,25)
  rect(200,400,25,25)
  rect(200,450,25,25)
  rect(200,475,25,25)
  
  rect(225,250,25,25)
  rect(225,350,25,25)
  rect(225,400,25,25)
  rect(225,450,25,25)
  rect(225,475,25,25)
  
  rect(250,250,25,25)
  rect(250,275,25,25)
  rect(250,350,25,25)
  rect(250,400,25,25)
  rect(250,425,25,25)
  rect(250,450,25,25)
  
  rect(275,250,25,25)
  rect(275,275,25,25)
  rect(275,300,25,25)
  rect(275,375,25,25)
  rect(275,400,25,25)
  rect(275,425,25,25)
  
  rect(300,225,25,25)
  rect(300,250,25,25)
  rect(300,275,25,25)
  rect(300,300,25,25)
  rect(300,325,25,25)
  rect(300,350,25,25)
  rect(300,375,25,25)
  
  rect(325,250,25,25)
  
// Skin
  
      fill(135,62,43)
  
  rect(125,225,25,25)
  rect(125,275,25,25)
  rect(125,300,25,25)
  rect(125,325,25,25)
  
  rect(150,225,25,25)
  rect(150,300,25,25)
  rect(150,325,25,25)
  rect(150,350,25,25)
  rect(150,450,25,25)
  rect(150,475,25,25)
  
  rect(175,200,25,25)
  rect(175,225,25,25)
  rect(175,325,25,25)
  rect(175,350,25,25)
  rect(175,375,25,25)
  rect(175,475,25,25)
  
  rect(200,200,25,25)
  rect(200,225,25,25)
  rect(200,300,25,25)
  rect(200,325,25,25)
  rect(200,350,25,25)
  rect(200,375,25,25)
  rect(200,425,25,25)
 
  rect(225,225,25,25)
  rect(225,275,25,25)
  rect(225,300,25,25)
  rect(225,325,25,25)
  rect(225,375,25,25)
  rect(225,425,25,25)
  
  rect(250,200,25,25)
  rect(250,225,25,25)
  rect(250,300,25,25)
  rect(250,325,25,25)
  rect(250,375,25,25)
  
  rect(275,200,25,25)
  rect(275,225,25,25)
  rect(275,325,25,25)
  rect(275,350,25,25)
 
}

// Front face

function mouseClicked() {
  background(115,191,69);
  
// Hair
  
      fill(120,100,100)

  rect(50,100,25,25)
  rect(50,150,25,25)
  rect(50,175,25,25)
  rect(50,225,25,25)
  rect(50,250,25,25)
  rect(50,275,25,25)
  
  rect(75,100,25,25)
  rect(75,125,25,25)
  rect(75,150,25,25)
  rect(75,175,25,25)
  rect(75,200,25,25)
  rect(75,225,25,25)
  
  rect(100,100,25,25)
  rect(100,125,25,25)
  rect(100,150,25,25)
  rect(100,175,25,25)
  rect(100,200,25,25)
  
  rect(125,75,25,25)
  rect(125,100,25,25)
  rect(125,125,25,25)
  rect(125,150,25,25)
  rect(125,175,25,25)
  
  rect(150,100,25,25)
  rect(150,125,25,25)
  rect(150,150,25,25)
  
  rect(175,50,25,25)
  rect(175,75,25,25)
  rect(175,100,25,25)
  rect(175,125,25,25)
  rect(175,150,25,25)
  
  rect(200,75,25,25)
  rect(200,100,25,25)
  rect(200,125,25,25)
  rect(200,150,25,25)
  rect(200,175,25,25)
  
  rect(225,100,25,25)
  rect(225,125,25,25)
  rect(225,150,25,25)
  rect(225,175,25,25)
  rect(225,200,25,25)
  
  rect(250,75,25,25)
  rect(250,100,25,25)
  rect(250,125,25,25)
  rect(250,150,25,25)
  rect(250,175,25,25)
  
  rect(275,50,25,25)
  rect(275,75,25,25)
  rect(275,100,25,25)
  rect(275,125,25,25)
  rect(275,150,25,25)
  rect(275,175,25,25)
  
  rect(300,100,25,25)
  rect(300,125,25,25)
  rect(300,150,25,25)
  rect(300,175,25,25)
  rect(300,175,25,25)
  rect(300,200,25,25)
  
  rect(325,100,25,25)
  rect(325,150,25,25)
  rect(325,175,25,25)
  rect(325,200,25,25)
  rect(325,225,25,25)

  rect(350,175,25,25)
  
// Shadows

       fill(23,19,20)
  
  
  rect(75,250,25,25)
  rect(75,300,25,25)
  rect(75,325,25,25)
  rect(75,350,25,25)
  
  rect(100,250,25,25)
  rect(100,275,25,25)
  rect(100,350,25,25)
  rect(100,375,25,25)
  
  rect(125,250,25,25)
  rect(125,275,25,25)
  rect(125,300,25,25)
  rect(125,375,25,25)
  rect(125,400,25,25)
  rect(125,425,25,25)
  rect(125,450,25,25)
  rect(125,475,25,25)
  
  rect(150,250,25,25)
  rect(150,275,25,25)
  rect(150,375,25,25)
  rect(150,400,25,25)
  rect(150,425,25,25)
  
  rect(175,250,25,25)
  rect(175,375,25,25)
  rect(175,425,25,25)
  rect(175,450,25,25)
  
  rect(200,250,25,25)
  rect(200,375,25,25)
  rect(200,425,25,25)
  rect(200,450,25,25)
  
  rect(225,250,25,25)
  rect(225,275,25,25)
  rect(225,375,25,25)
  rect(225,400,25,25)
  rect(225,425,25,25)
  
  rect(250,250,25,25)
  rect(250,275,25,25)
  rect(250,300,25,25)
  rect(250,375,25,25)
  rect(250,400,25,25)
  rect(250,425,25,25)
  rect(250,450,25,25)
  rect(250,475,25,25)
  
  rect(275,250,25,25)
  rect(275,275,25,25)
  rect(275,350,25,25)
  rect(275,375,25,25)

  rect(300,250,25,25)
  rect(300,300,25,25)
  rect(300,325,25,25)
  rect(300,350,25,25)
  
  
// Skin

      fill(135,62,43)
  
  rect(75,275,25,25)
  
  rect(100,225,25,25)
  rect(100,300,25,25)
  rect(100,325,25,25)
  
  rect(125,200,25,25)
  rect(125,225,25,25)
  rect(125,325,25,25)
  rect(125,350,25,25)
  
  rect(150,175,25,25)
  rect(150,200,25,25)
  rect(150,225,25,25)
  rect(150,300,25,25)
  rect(150,325,25,25)
  rect(150,350,25,25)
  rect(150,450,25,25)
  rect(150,475,25,25)
  
  rect(175,175,25,25)
  rect(175,200,25,25)
  rect(175,225,25,25)
  rect(175,275,25,25)
  rect(175,300,25,25)
  rect(175,325,25,25)
  rect(175,350,25,25)
  rect(175,400,25,25)
  rect(175,475,25,25)
  
  rect(200,200,25,25)
  rect(200,225,25,25)
  rect(200,275,25,25)
  rect(200,300,25,25)
  rect(200,325,25,25)
  rect(200,350,25,25)
  rect(200,400,25,25)
  rect(200,475,25,25)
 
  rect(225,225,25,25)
  rect(225,300,25,25)
  rect(225,325,25,25)
  rect(225,350,25,25)
  rect(225,450,25,25)
  rect(225,475,25,25)
  
  rect(250,200,25,25)
  rect(250,225,25,25)
  rect(250,325,25,25)
  rect(250,350,25,25)
  
  rect(275,200,25,25)
  rect(275,225,25,25)
  rect(275,325,25,25)
  rect(275,300,25,25)
  
  rect(300,225,25,25)
  rect(300,275,25,25)
}