Category: SectionD

LO: Generative art

This week, I chose Marius Watz’ work called ‘ABSTRACT01js’ created in 2010. I found this computational art piece very interesting because of it’s pseudo-random elements that are the underlying algorithm of the art. The composition of the piece when the mouse is pressed is random but is comprised of the same elements, making the shape and colors somewhat consistent. It’s really cool to think how something as technical as coding can be used to create such an organic and flowing piece; Watz did a really good job at projecting the abstract randomness in a complicated yet sensible way. To do this, my guess would be that he used probability distributions to induce randomness to get this kind of patter. The interactive aspect of this art is what stood out to me; random patterns are created when I press the mouse on the canvas, which is something we learnt to do in class.

Link to ‘ABSTRACT01js’ – http://mariuswatz.com/works/abstract01js/

‘Abstract01js’ by Marius Watz

Project 2: Variable faces

sketchYash-variable faces

//Simple beginning template for variable face
var eyeSize = 40;
var faceWidth = 400;
var faceHeight = 400;
var noseWidth = 3;
var mouth = 1;
var hair = 1;
var body = 100;


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

   background (250);

    fill (239, 230, 131); // hands fill
    ellipse (200, 320, 50, 50); // right hand
    ellipse (440, 320, 50, 50); // left hand

    fill (255, 153, 52); // body fill 
    ellipse (width / 2, height / 2 + 100, body, body + 50); // body

    fill (107, 183, 216);

   ellipse(width / 2, height / 2, faceWidth,  faceHeight); // face shape

   fill ( 0, 0, 0 );
   stroke (254, 211, 66);
   strokeWeight (2);

    var eyeLX = (width / 2 - faceWidth * 0.25); 
    var eyeRX = (width / 2 + faceWidth * 0.25);
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);

    stroke ( 0, 0, 0); 
    strokeWeight(1);
    fill( 228, 129, 203 );

   if (mouth < 0.33) { // rect mouth
        rect ( width / 2 - 10, height / 2 + 30, 40, 20 );

   } else if ( mouth < 0.66 ) { // line mouth
        line (( width / 2 - 20 ),( height / 2 +30 ), ( width / 2 + 30 ),( height / 2 +40));

   } else if ( mouth < 1 ) {  // ellipse mouth
        ellipse ( width / 2, height / 2 + 30, faceWidth / 2, faceHeight / 8);

   }

    fill (49, 50, 52);
    strokeWeight (1);

    if (noseWidth <= 1) { // nose 1
        triangle (width / 2, height / 2, width / 2 + 10, height / 2, width / 2 + 5, height / 2 + 10);

    } else if (noseWidth <=2) { // nose 2
        triangle (width / 2 - 5, height / 2  + 3, width / 2 + 8, height / 2 + 1, width / 2 + 3, height / 2 + 16);

    } else if (noseWidth <=3) { // nose 3
        triangle (width / 2 - 5, height / 2 +5, width / 2 + 6, height / 2 + 2, width / 2 + 15, height / 2 + 7); 

    }

    
}

function mousePressed() {
    // when the user clicks, these variables are reassigned
    // to random values within specified ranges. For example,
    // 'faceWidth' gets a random value between 75 and 150.
    faceWidth = random(75, 350);
    faceHeight = random(100, 250);
    eyeSize = random(10, 30);
    mouth = random(0,1);
    noseWidth = random(0,3);
    body = random (200, 250);
}

I struggled with understanding how to manipulate variables in a randomized order but I had fun writing this code as it was satisfying to see it actually work at the end.

Project-02-Variable-Face

sketch

var faceWidth = 400;
var faceHeight = 270;
var awidth = 640; // width as a variable that can change
var aheight = 480; //height as a variable that can change
var eyeposition = 20;
var eyepositionn = 10;
var mouthheight = 300; //original position of 
var mouthemotion = 1;
var sidefacewidth = 270;
var sidefaceheight = 400;
var definetheface = 1
var topfence = 0

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

//coding for first condition starts
    

    if (0<definetheface & definetheface<1){ //first*condition
    background(242,85,0);
    fill(35, 89, 41);
    rect(50,50, 550, 380);
    fill(255,234,117);//face color
    strokeWeight(1);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);
    var eyeLX = width / 2 - faceWidth * 0.2;
    var eyeRX = width / 2 + faceWidth * 0.2;

    beginShape();
    noFill();
    strokeWeight(2); 
    curveVertex(eyeLX - eyeposition, aheight/2 - eyepositionn);
    curveVertex(eyeLX - eyepositionn , aheight / 2 - eyepositionn);
    curveVertex(eyeLX, aheight / 2);
    curveVertex(eyeLX - 2* eyepositionn , aheight /2 - eyepositionn);
    curveVertex(eyeLX - 2* eyeposition, aheight /2 - eyeposition);
    endShape();

    beginShape();
    noFill();
    strokeWeight(2); 
    curveVertex(eyeRX - eyeposition, aheight/2 - eyepositionn);
    curveVertex(eyeRX - eyepositionn , aheight / 2 - eyepositionn);
    curveVertex(eyeRX, aheight / 2);
    curveVertex(eyeRX - 2* eyepositionn , aheight /2 - eyepositionn);
    curveVertex(eyeRX - 2*  eyeposition, aheight /2 - eyeposition);
    endShape();

    fill(0);
    strokeWeight(1);
    ellipse(width / 2, height / 2, eyeposition,  eyepositionn);

    if(0 < mouthemotion & mouthemotion < 1){
        arc(width/2, mouthheight, 100, 50, 1*Math.PI, 0*Math.PI, CHORD);
    } else if (1 < mouthemotion & mouthemotion < 2){
        arc(width/2, mouthheight, 100, 50, 0*Math.PI, 1*Math.PI, CHORD); 
    } else if (2 < mouthemotion & mouthemotion <3){
         arc(width/2, mouthheight, 100, 50, 0*Math.PI, 0*Math.PI, CHORD);
    }
    //heart
    fill(255,0,0);
    strokeWeight(1);
    arc(100, 100, 20, 20, PI, 0);
    arc(120, 100, 20, 20, PI, 0);
    triangle(90, 100, 130, 100, 110, 130);

    arc(500,200,20,20, PI, 0);
    arc(520,200, 20, 20, PI, 0);
    triangle(490, 200, 530, 200, 510, 230);

    strokeWeight(1);
    fill(255,0,0);
    rect(mouseX, mouseY, 50,50)
    fill(0,0,230);
    beginShape();
    vertex(mouseX,mouseY);
    vertex(mouseX+10,mouseY-30);
    vertex(mouseX+25,mouseY-0);
    vertex(mouseX+40,mouseY-40);
    vertex(mouseX+50,mouseY-0);
    endShape(CLOSE);
    
    


 //coding for second condition starts

    }else if (1<definetheface & definetheface<2){ //second*condition
         background(255,0,106);//background color
         fill(0,255,0);
         ellipse(mouseX, mouseY, 40, 40);
           fill(0,0,255);
            strokeWeight(0);
            circle(0,0,50);
            circle(50,0,50);
            circle(100,0,50);
            circle(150,0,50);
            circle(200,0,50);
            circle(250,0,50);
            circle(300,0,50);
            circle(350,0,50);
            circle(400,0,50);
            circle(450,0,50);
            circle(500,0,50);
            circle(550,0,50);
            circle(600,0,50);
            circle(650,0,50);

         fill(255); //color of the face
         strokeWeight(1);
         ellipse(width / 2, height / 2, sidefacewidth, sidefaceheight);
         strokeWeight(2); //stoke of eye
         if(mouthemotion<1.5){
            line(250, 150, 280, 160);
            line(280, 160, 250, 170);
        }else{
            line(260, 150, 230, 160);
            line(230, 160, 260, 170);
        }
         fill(0); //color of the nose
            ellipse(width/2 - sidefacewidth*0.5, height/2-sidefaceheight*0.1, sidefacewidth/5, sidefaceheight/7);
        if(0 < mouthemotion & mouthemotion < 1){
            arc((width/2-sidefacewidth/2)+10, mouthheight, 100, 50, 0*Math.PI, 0.5*Math.PI, CHORD);
        } else if (1 < mouthemotion & mouthemotion < 2){
            arc((width/2-sidefacewidth/2)+10, mouthheight, 100, 50, 1.2*Math.PI, 0.6*Math.PI, CHORD); 
        } else if (2 < mouthemotion & mouthemotion <3){
            arc((width/2-sidefacewidth/2)+10, mouthheight, 70, 30, 0.5*Math.PI, 1.5*Math.PI, CHORD);
            arc((width/2-sidefacewidth/2)+10, mouthheight+20, 70, 30, 0.5*Math.PI, 1.5*Math.PI, CHORD);
        }
        fill(0,255,0);
         ellipse(mouseX, mouseY, 40, 40);
// coding for third condition starts 

    }else{ // third*condition
        background(180);
        strokeWeight(2);
        fill(0,255,0);
        //clover
        circle(mouseX, mouseY, 30);
        circle(mouseX+30, mouseY, 30);
        circle(mouseX+15, mouseY-27,30)
        noFill();
        arc(mouseX-20, mouseY, 70,70, 0*Math.PI, 0.5*Math.PI);

        fill(255,77,0);
        strokeWeight(0);
        rect(0,0,30,480);
        rect(610,-30,30, 480);


        fill(187,240,252);//color of face
        strokeWeight(1);
        ellipse(width/2-sidefaceheight/2, height/2,50); //ear left
        ellipse(640-(width/2-sidefaceheight/2),height/2,50); // ear right
        ellipse(width/2, height/2, sidefaceheight, sidefaceheight);

        fill(0);
        ellipse (width/2 - sidefaceheight*0.2, 100, 20, 10); //left eye
        ellipse (width/2 + sidefaceheight*0.2, 100, 20, 10); //rught eye
        ellipse (width/2, height/2 - sidefaceheight*0.5, 10,10); //nose
        

        fill(0);
        if(0 < mouthemotion & mouthemotion < 1){
            arc(width/2, height/2, sidefaceheight, sidefaceheight, 0*Math.PI, 1*Math.PI);
        } else if (1 < mouthemotion & mouthemotion < 2){
            arc(width/2, height/2, sidefaceheight, sidefaceheight, 0.25*Math.PI, 0.75*Math.PI);
        } else if (2 < mouthemotion & mouthemotion <3){
            arc(width/2, height/2, sidefaceheight, sidefaceheight, 1.75*Math.PI, 1.25*Math.PI);
        }
        
        strokeWeight(2);
        fill(0,255,0);
        circle(mouseX, mouseY, 30);
        circle(mouseX+30, mouseY, 30);
        circle(mouseX+15, mouseY-27,30)
        noFill();
        arc(mouseX-20, mouseY, 70,70, 0*Math.PI, 0.5*Math.PI);

    }
}

function mousePressed() {
    // when the user clicks, these variables are reassigned
    // to random values within specified ranges. For example,
    // 'faceWidth' gets a random value between 75 and 150.
    faceWidth = random(350, 450);
    faceHeight = random(250, 290);
    eyeposition = random (20,30);
    eyepositionn = random (10,15);
    aheight = random(300,500);
    mouthemotion = random (0,3);
    definetheface = random (0,3);
    sidefacewidth = random (250,300);
    sidefaceheight = random (380,470);
}

Project 2: Variable Faces

sketchDownload
var eyeSize = 35;
var faceWidth = 250;
var faceHeight = 290;
var face = 1; //1 = happy, 2 = surprised, 3 = sad

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

function draw() {
    background(200);
    strokeWeight(0);
    fill(231, 198, 142);
    ellipse(width/2, height/2, faceWidth, faceHeight);
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    var pupilLX = width / 2 - faceWidth * 0.25;
    var pupilRX = width / 2 + faceWidth * 0.25
    var noseLx = width / 2 - faceWidth * 0.15;
    var noseRx = width / 2 + faceWidth * 0.15;
    var nosey = height / 2 + faceWidth * 0.25;
    var cheekL = width / 2 - faceWidth * 0.3;
    var cheekR = width / 2 + faceWidth * 0.3;
    var hairL = width / 2 - faceWidth * 0.75;
    var hairR = width / 2 + faceWidth * 0.45;
    var earLx = hairL + faceWidth * 0.27; 
    var earLy = height / 2;
    var earRx = hairL + faceWidth * 1.23;
    var earRy = height / 2;
    fill(250); //left eye
    ellipse(pupilLX, height / 2.1, eyeSize * 1.7, eyeSize);
    fill(250); //right eye
    ellipse(pupilRX, height / 2.1, eyeSize * 1.7, eyeSize);
    fill(0); //left eye
    ellipse(eyeLX, height / 2.1, eyeSize, eyeSize);
    fill(0); //right eye
    ellipse(eyeRX, height / 2.1, eyeSize, eyeSize);
    fill(202, 176, 131); //nose
    triangle(width / 2, height / 2 - faceWidth * 0.1, noseLx, nosey, noseRx, nosey);
    if (face == 1 || face == 2) {
        fill(250, 148, 178); //cheeks
        ellipse(cheekL, height / 1.8, eyeSize * 1.4, eyeSize * 1.4);
        ellipse(cheekR, height / 1.8, eyeSize * 1.4, eyeSize *1.4);
    } else {
        fill(95, 175, 211); //tears
        ellipse(cheekL, height / 1.8, eyeSize * 0.5, eyeSize * 1.4);
        ellipse(cheekR, height / 1.8, eyeSize * 0.5, eyeSize *1.4);
    }  
    fill(77, 48, 26); //hair
    rect(hairL, height/3.5, faceWidth * 0.3, faceHeight * 1.3);
    rect(hairR, height/3.5, faceWidth * 0.3, faceHeight * 1.3);
    rect(hairL, height/3.8, faceWidth * 1.5, faceHeight * 0.3);
    fill(231, 198, 142); //ears
    ellipse(earLx, earLy, faceWidth * 0.1, faceHeight * 0.15);
    ellipse(earRx, earRy, faceWidth * 0.1, faceHeight * 0.15);
    if (face == 1) {
        fill(250, 148, 178); //mouth
        arc(width / 2, height / 2 + faceWidth * 0.35, 120, 70, 2 * PI, PI, OPEN);
    } else if (face == 2) {
        fill(250, 148, 178); //mouth
        ellipse(width/2, height /2 + faceWidth * 0.4, eyeSize * 2, eyeSize * 1.4);
    } else {
        fill(250, 148, 178); //mouth
        arc(width / 2, height / 2 + faceWidth * 0.45, 120, 70, PI, 2 * PI, OPEN);
    }
}

function mousePressed() {
    if (face == 1) {
        face = 2;
    } else if (face == 2) {
        face = 3;
    } else {
        face = 1;
    }
}

I really enjoyed making this because it was the first time using variables and the mousepressed function. I was really satisfied when I got the function to work.

LO: Generative Art

After looking at many different artists and artworks, I was very fond of Jessica Rosenkrantz’s generative art. Something that I really admired and stood out to me about her artworks is that the shapes she makes are very organic. It almost seems like they didn’t use an algorithm and that Rosenkrantz created the shapes herself. The way that she gets inspired from natural phenomena and uses technology to create computer simulations is an interesting juxtaposition. Another thing that I admire about her artworks is that the artworks Rosenkrantz creates come in many different forms such as digital art, product design, puzzles, accessories, and statues. The algorithm that she uses combines scientific research, computer graphics, mathematics, and digital fabrication. Rosenkrantz crafts computational systems that create a myriad of unique patterns and shapes instead of just designing them. She translates scientific theories and models of pattern formation into algorithms that eventually create an interesting design.

Jessica Rosenkrantz, Floraform, 2014

Floraform

Project 02: Variable Faces; Face Variables

sketch

//Julianna Bolivar, Section D
var eyeSize = 20;
var pupilSize = 10;
var faceWidth = 100;
var faceHeight = 150;
var skinTone = 1;
var mouth = 1;
var nose = 1;

function setup() {
    createCanvas(300, 300);
}
 
function draw() {
    background(180);
    if (skinTone <= 1) {
        fill(230,204,178); //light skin tone
    } 
    else if (skinTone <= 2) {
        fill(221,184,146); //beige skin tone
    } 
    else if (skinTone <= 3) {
        fill(189,143,107); //tan skin tone
    } 
    else if (skinTone <= 4) {
        fill(156,102,68); //medium skin tone
    } 
    else if (skinTone <= 5) {
        fill(127,85,57); //dark skin tone
    } 
    else {
        fill(80,57,43); //deep skin tone
    }
    ellipse(width / 2, height / 2, faceWidth, faceHeight); //head shape
    var eyeLX = width / 2 - faceWidth * 0.25; //left eye size
    var eyeRX = width / 2 + faceWidth * 0.25; //right eye size
    fill(255);
    ellipse(eyeLX, height / 2, eyeSize, eyeSize); //left eye
    ellipse(eyeRX, height / 2, eyeSize, eyeSize); //right eye
    if (mouth <= 1) {
        line(140,180,160,180); //small mouth
    } 
    else if (mouth <= 2) {
        line(125,180,175,180); //medium mouth
    } 
    else {
        line(115,180,185,180); //big mouth
    }
    fill(229,135,118); //pink for nose
    if (nose <= 1) {
        circle(width / 2, 160, 18); //circle nose
    }
    else if (nose <= 2) {
        square(143, 155, 13.5); //square nose
    } else {
        triangle(150, 150, 143, 165, 157, 165); //triangle nose
    }
    fill(0,0,0); //black pupils
    ellipse(eyeLX, height / 2, pupilSize, pupilSize); //left pupil
    ellipse(eyeRX, height / 2, pupilSize, pupilSize); //right pupil

}
 
function mousePressed() {
    faceWidth = random(75, 150);
    faceHeight = random(100, 200);
    eyeSize = random(10, 30);
    skinTone = random (0,6);
    mouth = random (0,3);
    nose = random (0,3);
}

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)
}

LO: Generative Art

I’d like to talk about a video-game called “Little Computer People,” which is also known as “House on a Disc.” I’ve never played it myself, but I heard about it on the podcast “Wonderful!” — episode 95, around 38:35 — and for some reason I’ve never forgotten it. It’s basically like an early version of The Sims or Tamagotchi, released in 1985, and was credited as a source of inspiration for the making of The Sims (though The Sims came out 15 years later). As the player, you were a researcher observing the little person living in your computer. You entered your name, the date, and the time, so the game would address you in real time. You’d always have a male character assigned to you. And there were 256 possible different names that the character could have. The game play was basically typing in instructions for the person, like “take a shower,” “watch TV,” “play the piano,” etc. If you stopped feeding the character or making him sleep, his smiley face would turn into a frown, and then he’d turn green. The character could also send you, the player, correspondence with his little typewriter, like “Low on supplies,” “Would like to have a party,” “Would like to have a cat,” though there would be no result if you instructed him to have a party or get a cat. He could also initiate a game of poker, war, or anagrams with you. So although the gameplay may seem mundane or like it’s not much content, I myself am really impressed with all the different functions and variables working together to respond to the player’s input. And I imagine there are a lot of if/else if/else statements working together to produce those results as well.

Project 2: Variable Faces; Face Variables.

lucacao-02-project

var headwidth = 200
var headheight = 250
var eyewidth = 30
var eyeheight = 30
var pupilwidth = 30
var pupilheight = 30
var mouthwidth = 150
var mouthheight = 50
var bodywidth = 300
var bodyheight = 300
var hairhx = 0
var hairhy = 0


function setup() {
    createCanvas(480, 640);
    background(171, 196, 255);
}


function draw() {
    fill(0)
    rect((width-bodywidth)/2,400,bodywidth,bodyheight)//blazer
    fill(255,255,255)
    rect((width-100)/2,400,100,300)//shirt

    fill(252,210,175)
    ellipse(width/2,height/2, headwidth, headheight)//head

    fill(248, 237, 235)
    ellipse(width/2-40,height/2-20,eyewidth,eyeheight)
    ellipse(width/2+40,height/2-20,eyewidth,eyeheight)//eyes

    fill(51, 53, 51)
    ellipse(width/2-40,height/2-20,pupilwidth-20,pupilheight-20)
    ellipse(width/2+40,height/2-20,pupilwidth-20,pupilheight-20)//pupil

    fill(239, 99, 81)
    ellipse(width/2,height/2+70,mouthwidth-100,mouthheight-25)//mouth

    fill(70, 63, 58)
    triangle(width/2-30,200,hairhx+width/2,hairhy+width/2,width/2,195)
    triangle(width/2,195,hairhx+width/2+50,hairhy+width/2,width/2+45,200)
    triangle(width/2-10,197,hairhx+width/2+20,hairhy+width/2,width/2+20,200)//hair


}

function mousePressed() {
    eyewidth=random(30,50)
    eyeheight=random(30,50)
    pupilwidth=random(30,40)
    pupilheight=random(30,40)
    mouthwidth=random(50,150)
    mouthheight=random(25,50)
    hairhx=random(20,50)
    hairhy=random(80,100)
}

After declaring variables (var) in my code, locating and editing the shapes became more intuitive. However, I struggled with assigning values to my variables and understanding the relationship between each variable. Overall, I feel like adding variables helped my coding process a lot, but I still need more practice to become more efficient.