Author: hqq@andrew.cmu.edu

hqq – secE – LookingOutwards – 06 – randomness

To explore randomness in computational art this week, I decided to look into the work of Rami Hammour, an architect and graduate of the Masters of Architecture program at the Rhode Island School of Design. Rami Hammour’s work often uses computation to derive generative forms that resemble ordinary and analog techniques. For example, the piece above entitled “A Text of Random Meanings” uses computational randomness to create strokes in columns that resemble a list of text. Rami Hammour achieves this using a python scripts that takes in the values of three integers: 9, 11, and 13, as registers to move the drawn line along the canvas. By using a Python script to this degree, Rami Hammour is able to create works that draw and highlight variances in the stroke.

Other pieces in the series use wider and less dense strokes to reveal the binary code beneath the randomness that the script entails. As it zooms in, it reveals a series of right angles in the piece.

hqq – secE – project06 – abstract-clock

hamza

//hamza qureshi
//hqq@andrew.cmu.edu
//section e
//project 6

function setup(){
    createCanvas(480,480);
    ellipseMode(CENTER);
}

function draw(){
    background(210,230,220);
    noStroke();

    //body of oscar the walrus
    fill(170);
    var bodw = 0.75*width;
    var bodh = 0.75*height;
    ellipse(bodw,bodh,width,bodh);

    //mouth
    bodw = width/2;  //redefines variables to allow to draw from center
    bodh = height/2;
    var h = hour(); //calls hour function
    if (h == 12){ //resets the hourly measure to convert to 12-hr clock
        h = 0;
    }
    var xH = map(h,0,11,0,40); //remaps range of hours to translation unit
    fill(180);
    ellipse(bodw,bodh+xH,130,250); // lowers mouth as hour increases
    fill(160,100,100);
    ellipse(bodw,bodh+xH,110,230); //"______________________________"

    //head
    fill(190);
    ellipse(bodw,bodh-70,260,250);

    //eyes
    //black
    fill(0);
    ellipse(bodw-50,bodh-100,30,30);
    ellipse(bodw+50,bodh-100,30,30);
    //white
    fill(255);
    ellipse(bodw-55,bodh-105,15,15);
    ellipse(bodw+45,bodh-105,15,15);

    //blink every other second
    var s = second(); //calls second function
    if (s % 2 == 1){ //modulus to determine odd-count second
        fill(170);
        ellipse(bodw-50,bodh-100,31,31); //draws "blink" over original eye
        ellipse(bodw+50,bodh-100,31,31);
        fill(130);
        ellipse(bodw-50,bodh-100,32,10);
        ellipse(bodw+50,bodh-100,32,10);
        push();
        strokeWeight(2);
        stroke(120);
        line(bodw-68,bodh-100,bodw-32,bodh-100);
        line(bodw+68,bodh-100,bodw+32,bodh-100);
        pop();
    }

    //tusks
    fill(252,246,232); //ivory color
    var m = minute(); //calls minute function
    var xM = map(m,0,59,130,240); //remaps minute range to reflect length of tusk
    beginShape();
    curveVertex(bodw-80,bodh);
    curveVertex(bodw-85,bodh+120);
    curveVertex(bodw-80,bodw+xM); //lowers left tusk according to minute
    curveVertex(bodw-65,bodh+120);
    curveVertex(bodw-60,bodh);
    endShape(CLOSE);
    beginShape();
    curveVertex(bodw+80,bodh);
    curveVertex(bodw+85,bodh+120);
    curveVertex(bodw+80,bodw+xM); //lowers right tusk according to minute
    curveVertex(bodw+65,bodh+120);
    curveVertex(bodw+60,bodh);
    endShape(CLOSE);

    //cheeks
    fill(190);
    ellipse(bodw-70,bodh+40,165,140);
    ellipse(bodw+70,bodh+40,165,140);
        //freckles
        fill(90);
        ellipse(bodw-80,bodh+30,7,7);
        ellipse(bodw-100,bodh+60,7,7);
        ellipse(bodw-60,bodh+50,7,7);
        ellipse(bodw+80,bodh+30,7,7);
        ellipse(bodw+100,bodh+60,7,7);
        ellipse(bodw+60,bodh+50,7,7);

    //nose
    fill(0);
    triangle(bodw,bodh-20,bodw+30,bodh-35,bodw-30,bodh-35);

    //whiskers
    strokeWeight(1);
    stroke(0);
    noFill();
    bezier(bodw-140,bodh+30,bodw-160,bodh+25,bodw-180,bodh+30,bodw-200,bodh+40);
    bezier(bodw+140,bodh+30,bodw+160,bodh+25,bodw+180,bodh+30,bodw+200,bodh+40);
    bezier(bodw-130,bodh+50,bodw-150,bodh+45,bodw-170,bodh+40,bodw-190,bodh+60);
    bezier(bodw+130,bodh+50,bodw+150,bodh+45,bodw+170,bodh+40,bodw+190,bodh+60);
    bezier(bodw-120,bodh+70,bodw-140,bodh+65,bodw-160,bodh+50,bodw-180,bodh+70);
    bezier(bodw+120,bodh+70,bodw+140,bodh+65,bodw+160,bodh+50,bodw+180,bodh+70);
}

For my abstract clock, I wanted to create an image that was fun and playful, and would not immediately read as a clock unless it was meticulously watched for awhile. I thought of walruses as a fun way to create an image that tells time and used subtle aspects of the walrus’ anatomy to show changes in time. In the script, the eyes blink to correspond to the second, the tusks grow longer as each minute passes, and the mouth drops to correspond with the hour. Much like me, the walrus appears to get happier the later in the morning or evening it becomes, much like I do. However, unlike me, the walrus seems to be pretty good at keeping time.

hqq – secE – lookingOutwards05

I’m deeply inspired by Morphogenetic Creations by Andy Lomas, currently on display in the LACDA. This piece uses fractalization and data trees to create masses inspired by genetic code. Lomas’ work uses three-dimensional computer graphics to explore organic and natural forms that express theories behind aggregation and creation. I’m particularly inspired by Lomas’ work in this regard because it uses an architecture backstory to consider the spatial cavities that exist within the forms. As they morph and wither, it creates interesting spaces in the voids that, as an architecture student, I find valuable because much of contemporary architecture is derived from this kind of method. In doing so, Lomas second-handedly explores architectural capacities while using computer-generated graphics to dramatically express an expansion on computer- and genetic-based coding.

hqq – secE – project05 – wallpaper

hamza

//hamza qureshi
//hqq@andrew.cmu.edu
//section e
//project 5: wallpaper
function setup(){
    createCanvas(480, 480);
    background(190, 235, 254);
  }

function draw(){
    noStroke();


    lineitup(); //calls the functions for the three main
    plane1();   //components to the pattern
    plane2();
    noLoop(); //makes sure  nothing is redrawn
  }

function lineitup(){                        //lines running through background
    for (var y = 0; y < 480; y += 3){       //defines spacing between lines
      push();
      if (y%2 == 0){
        var d = .25;
      }
      else if (y%2 == 1){
        d = 0.75;                           //allows for the horizontal lines
      }                                    //to change based on whether the
      strokeWeight(0.5);                   //y-value is even or odd
      stroke(255);
      line(0, y, width, y);                //draws horizontal lines
      stroke(160,165,205);
      strokeWeight(d);
      line(y,0,y,height);                 //draws vertical lines
      pop();                              //used push/pop to change strokes
    }
}

function plane1(){
    for (var x = 0; x < 450; x+= 75){              //draws first set of planes
      for (var y = 0; y < 500; y+= 100){           //restricts it to 5 rows and 6 columns
        var r = random(170,255);                   //allows subtle color change between each
        var b = random(200,250);                   //paper plane
        var p = 30+x;
        var q = 15+y;
        fill(r, 180, b);
        triangle(p+15,q+45, p+30,q, p+55,q+5);
        triangle(p+15,q+45, p+20,q, p,q+10);
        fill(r-50, 150, b-50);
        triangle(p+15,q+45, p+20,q, p+28,q+5);
      }
    }
  }

function plane2(){                               //draws second set of planes
    for (var x = 0; x < 450; x += 75){           //restricts it to 6 columns and 4 rows
        for (var y = 0; y < 400; y+= 100){
          var r = random(160,220);               //subtle color  change
          var b = random(120,200);
          var u = 40 + x;
          var v = 60 + y;
          fill(r, 220, b);
          triangle(u,v+30, u+40,v, u-10,v+15);
          triangle(u+5,v+35, u+40,v, u+30,v+35)
          fill(r-50, 180, r-50);
          triangle(u,v+30, u+40,v, u,v+40);
          triangle(u,v+40, u+5,v+35, u+10,v+35);
          }
        }
}

For this assignment, I was inspired by the whimsicality of paper planes and how evocative their folds can be. I decided to take the opportunity to use lines to mimic a subtle fold in the background, while using tones to exemplify the shading in the folds. Next time, I’d love to figure out a way to turn this into a non-static graphic that flies with the mouse.

hqq – secE – LookingOutwards 04

“With my pictures, I create a musical space. With my music I create a pictorial space. Pictures and music are equivalent. They meet in the head of the beholder and the listener, and they reveal something new in him.” – Rolf Julius

Ash is an installation art piece by Rolf Julius that uses small particles of ash from German fireplaces to help create a medium to visualize soundwaves. Julius recorded a variety of everyday sounds at differing pitches to create a highly diverse soundscape that the piece uses to create imaging. The piece receives reverberations that are sustained within the terra cotta pots that make up the body of the unit. A small fabric drum within the piece holds ash that jumps and separates when vibrations from the sound are generated. This achieves a different image depending on what sounds are picked up.

Computationally, this piece uses an analog system to develop a top-down processing script and, although coding was not directly involved in the process, it uses a computationally-driven inherent logic that allows the image to differ between iterations.

The piece was created in 1991 and is still on display at the Mattress Factory in Pittsburgh, Pennsylvania.

hqq – secE – project04 – string art

hamza

//hamza qureshi
//section e
//project 04
//hqq@andrew.cmu.edu

var x1;
var y1 = 1;
var x2 = 1;
var y2 = 1;
var yDes = 400;

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

function draw(){
    background(30); //dark gray background
    //create a single loop that sets the limits
    //within the x1 variable to allow the curves
    //to stretch horizontally
    for (var x1 = 0; x1 < 4*width; x1 += 5){
        strokeWeight(0.3);
        var y1 = x1 * 0.50;
        var yDev = height/4 + y1;
//outermost lines that are brightest in color
        stroke(180);
        line(x1*4, y1, x1-yDes, y2*0.5);
        line(x1*.10, height, x2, yDev);

//next ring
        stroke(130);
        line(x1*0.4, y1*0.6, x1-yDes, y2*0.5);
        line(x1*2, height*2, x2, yDev);

//next ring
        stroke(80);
        line(x1*0.4, y1, x1-yDes, y2*0.5);
        line(x1*.90, height, x2, yDev);

///next ring
        stroke(60);
        line(x1*0.3, y1, x1-yDes, y2*0.5);
        line(x1*1.7, height, x2, yDev);

//next ring
        stroke(50);
        line(x1*0.2, y1, x1-yDes, y2*0.5);
        line(x1*2.5, height, x2, yDev);

//final ring
        stroke(40);
        line(x1*0.1, y1, x1-yDes, y2*0.5);
        line(x1*3.2, height, x2, yDev);
    }
}

//voila!

For this piece of string art, I wanted to create a piece that used a tunneling effect to show depth. To do this, I used the for loop to change the size, orientation, and stroke color to make it appear as if the sections are getting deeper and deeper. After a few projects where the code became so long, I’m glad that this one uses a much more refined syntax.

hqq-secE-LookingOutwards3

Courtesy of Epiphyte Lab, 2009

 

The M-House was designed by Epiphyte Lab, led by my studio professor, Dana Cupkova. The project considers a traditional building type called a Butler building, where the roof is pitched to a single spine concave to the interior of the building. The practice expanded on this by first conceiving a structural transformation to allow the structure to collect snow, providing greater thermal insulation during the winter.

Then it gets interesting.

A number of computations derived from algorithms that reposition the specific sectional guide points of the structure allow the structure to reposition itself along specific site lines. It then undergoes another transformation to accommodate programmatic requirements relating to any specific needs for interior space, outdoor spaces, larger rooms, etc.

Finally, the structure undergoes computations developed through climate data. This helps determine the number of ribs and panels, the conditions of the site, and other environmental parameters that can help the housing style adapt to the needs of specific requirements of a site.

I appreciate this project a lot because it provides an adaptable solution to a common problem in the northern United States and Canada and poses the possibility of replication anywhere beyond its intended site in Buffalo, New York.

hqq-secE-project03-dynamic-drawing

hamza

//hamza qureshi
//section e
//project 03
//hqq@andrew.cmu.edu

var newX = 320;  //starting point at center
var newY = 240;
var dirX = 1; //directional vector
var speedX = 3; //horizontal speedX
var dirY = 1;
var speedY = 2; //vertical speed
var eyeDy = 0; //additive value for pupil position
var eyeDx = 0;
var drag = false; //calls drag abilities

function setup(){
    createCanvas(640,480);
    //noCursor();
    angleMode(DEGREES);
    cursor(CROSS); //preferred cursor
}

function draw(){
    background(0);
    noStroke();
    rectMode(CORNER);
    ellipseMode(CENTER);
    var newColor1 = mouseX/1;  //these variables are to be used
    var newColor2 = mouseX/2;  //to control how the color changes
    var newColor3 = mouseX/3;  //relative to the mouse position
    var newColor4 = mouseX/4;
    var newColor5 = mouseY/1;
    var newColor6 = mouseY/2;
    var newColor7 = mouseY/3;
    var newColor8 = mouseY/4;

//row 1
    fill(newColor1, newColor2, newColor3);
    rect(0,0,40,40);
    fill(newColor4, newColor5, newColor6);
    rect(40,0,40,40);
    fill(newColor7, newColor8, newColor7);
    rect(80,0,40,40);
    fill(newColor6, newColor5, newColor4);
    rect(120,0,40,40);
    fill(newColor3, newColor2, newColor1);
    rect(160,0,40,40);
    fill(newColor1, newColor8, newColor2);
    rect(200,0,40,40);
    fill(newColor7, newColor6, newColor6);
    rect(240,0,40,40);
    fill(newColor4, newColor5, newColor8);
    rect(280,0,40,40);
    fill(newColor1, newColor8, newColor1);
    rect(320,0,40,40);
    fill(newColor2, newColor7, newColor2);
    rect(360,0,40,40);
    fill(newColor3, newColor8, newColor3);
    rect(400,0,40,40);
    fill(newColor4, newColor5, newColor4);
    rect(440,0,40,40);
    fill(newColor5, newColor4, newColor5);
    rect(480,0,40,40);
    fill(newColor6, newColor3, newColor6);
    rect(520,0,40,40);
    fill(newColor7, newColor2, newColor7);
    rect(560,0,40,40);
    fill(newColor8, newColor1, newColor8);
    rect(600,0,40,40);
    fill(newColor1, newColor7, newColor1);
    rect(640,0,40,40);

//row 2
    fill(newColor2, newColor2, newColor3);
    rect(0,40,40,40);
    fill(newColor1, newColor5, newColor6);
    rect(40,40,40,40);
    fill(newColor1, newColor8, newColor7);
    rect(80,40,40,40);
    fill(newColor1, newColor5, newColor4);
    rect(120,40,40,40);
    fill(newColor1, newColor4, newColor1);
    rect(160,40,40,40);
    fill(newColor3, newColor8, newColor2);
    rect(200,40,40,40);
    fill(newColor1, newColor3, newColor6);
    rect(240,40,40,40);
    fill(newColor1, newColor5, newColor8);
    rect(280,40,40,40);
    fill(newColor2, newColor8, newColor1);
    rect(320,40,40,40);
    fill(newColor1, newColor7, newColor2);
    rect(360,40,40,40);
    fill(newColor1, newColor3, newColor3);
    rect(400,40,40,40);
    fill(newColor1, newColor5, newColor4);
    rect(440,40,40,40);
    fill(newColor1, newColor4, newColor5);
    rect(480,40,40,40);
    fill(newColor1, newColor3, newColor6);
    rect(520,40,40,40);
    fill(newColor1, newColor2, newColor7);
    rect(560,40,40,40);
    fill(newColor1, newColor1, newColor8);
    rect(600,40,40,40);
    fill(newColor2, newColor6, newColor1);
    rect(640,40,40,40);

//row 3
    fill(newColor8, newColor2, newColor3);
    rect(0,80,40,40);
    fill(newColor2, newColor5, newColor6);
    rect(40,80,40,40);
    fill(newColor2, newColor8, newColor7);
    rect(80,80,40,40);
    fill(newColor2, newColor5, newColor4);
    rect(120,80,40,40);
    fill(newColor2, newColor2, newColor1);
    rect(160,80,40,40);
    fill(newColor2, newColor8, newColor2);
    rect(200,80,40,40);
    fill(newColor8, newColor3, newColor6);
    rect(240,80,40,40);
    fill(newColor2, newColor5, newColor8);
    rect(280,80,40,40);
    fill(newColor3, newColor8, newColor1);
    rect(320,80,40,40);
    fill(newColor2, newColor7, newColor2);
    rect(360,80,40,40);
    fill(newColor2, newColor6, newColor3);
    rect(400,80,40,40);
    fill(newColor2, newColor5, newColor4);
    rect(440,80,40,40);
    fill(newColor8, newColor4, newColor5);
    rect(480,80,40,40);
    fill(newColor2, newColor3, newColor6);
    rect(520,80,40,40);
    fill(newColor2, newColor2, newColor7);
    rect(560,80,40,40);
    fill(newColor2, newColor1, newColor8);
    rect(600,80,40,40);
    fill(newColor3, newColor7, newColor1);
    rect(640,80,40,40);

//row 4
    fill(newColor8, newColor2, newColor3);
    rect(0,120,40,40);
    fill(newColor3, newColor5, newColor6);
    rect(40,120,40,40);
    fill(newColor3, newColor8, newColor7);
    rect(80,120,40,40);
    fill(newColor3, newColor5, newColor4);
    rect(120,120,40,40);
    fill(newColor3, newColor2, newColor1);
    rect(160,120,40,40);
    fill(newColor3, newColor8, newColor2);
    rect(200,120,40,40);
    fill(newColor8, newColor3, newColor6);
    rect(240,120,40,40);
    fill(newColor3, newColor5, newColor8);
    rect(280,120,40,40);
    fill(newColor4, newColor8, newColor1);
    rect(320,120,40,40);
    fill(newColor3, newColor7, newColor2);
    rect(360,120,40,40);
    fill(newColor3, newColor6, newColor3);
    rect(400,120,40,40);
    fill(newColor3, newColor5, newColor4);
    rect(440,120,40,40);
    fill(newColor8, newColor4, newColor5);
    rect(480,120,40,40);
    fill(newColor3, newColor3, newColor6);
    rect(520,120,40,40);
    fill(newColor3, newColor2, newColor7);
    rect(560,120,40,40);
    fill(newColor3, newColor1, newColor8);
    rect(600,120,40,40);
    fill(newColor4, newColor7, newColor1);
    rect(640,120,40,40);

//row 5
    fill(newColor5, newColor2, newColor3);
    rect(0,160,40,40);
    fill(newColor8, newColor5, newColor6);
    rect(40,160,40,40);
    fill(newColor4, newColor8, newColor7);
    rect(80,160,40,40);
    fill(newColor4, newColor5, newColor4);
    rect(120,160,40,40);
    fill(newColor4, newColor2, newColor1);
    rect(160,160,40,40);
    fill(newColor4, newColor8, newColor2);
    rect(200,160,40,40);
    fill(newColor4, newColor3, newColor6);
    rect(240,160,40,40);
    fill(newColor4, newColor5, newColor8);
    rect(280,160,40,40);
    fill(newColor5, newColor8, newColor1);
    rect(320,160,40,40);
    fill(newColor4, newColor7, newColor2);
    rect(360,160,40,40);
    fill(newColor4, newColor6, newColor3);
    rect(400,160,40,40);
    fill(newColor4, newColor5, newColor4);
    rect(440,160,40,40);
    fill(newColor4, newColor4, newColor5);
    rect(480,160,40,40);
    fill(newColor8, newColor3, newColor6);
    rect(520,160,40,40);
    fill(newColor4, newColor2, newColor7);
    rect(560,160,40,40);
    fill(newColor4, newColor1, newColor8);
    rect(600,160,40,40);
    fill(newColor5, newColor7, newColor1);
    rect(640,160,40,40);

//row 6
    fill(newColor6, newColor2, newColor3);
    rect(0,200,40,40);
    fill(newColor5, newColor5, newColor6);
    rect(40,200,40,40);
    fill(newColor5, newColor8, newColor7);
    rect(80,200,40,40);
    fill(newColor5, newColor5, newColor4);
    rect(120,200,40,40);
    fill(newColor5, newColor2, newColor1);
    rect(160,200,40,40);
    fill(newColor5, newColor8, newColor2);
    rect(200,200,40,40);
    fill(newColor5, newColor3, newColor6);
    rect(240,200,40,40);
    fill(newColor5, newColor5, newColor8);
    rect(280,200,40,40);
    fill(newColor6, newColor8, newColor1);
    rect(320,200,40,40);
    fill(newColor5, newColor7, newColor2);
    rect(360,200,40,40);
    fill(newColor5, newColor6, newColor3);
    rect(400,200,40,40);
    fill(newColor5, newColor5, newColor4);
    rect(440,200,40,40);
    fill(newColor5, newColor4, newColor5);
    rect(480,200,40,40);
    fill(newColor5, newColor3, newColor6);
    rect(520,200,40,40);
    fill(newColor5, newColor2, newColor7);
    rect(560,200,40,40);
    fill(newColor5, newColor1, newColor8);
    rect(600,200,40,40);
    fill(newColor6, newColor7, newColor1);
    rect(640,200,40,40);

//row 7
    fill(newColor6, newColor2, newColor1);
    rect(0,240,40,40);
    fill(newColor5, newColor5, newColor1);
    rect(40,240,40,40);
    fill(newColor5, newColor8, newColor1);
    rect(80,240,40,40);
    fill(newColor5, newColor5, newColor1);
    rect(120,240,40,40);
    fill(newColor5, newColor2, newColor2);
    rect(160,240,40,40);
    fill(newColor5, newColor8, newColor1);
    rect(200,240,40,40);
    fill(newColor5, newColor3, newColor1);
    rect(240,240,40,40);
    fill(newColor5, newColor5, newColor1);
    rect(280,240,40,40);
    fill(newColor6, newColor8, newColor2);
    rect(320,240,40,40);
    fill(newColor5, newColor7, newColor1);
    rect(360,240,40,40);
    fill(newColor5, newColor6, newColor1);
    rect(400,240,40,40);
    fill(newColor5, newColor5, newColor1);
    rect(440,240,40,40);
    fill(newColor5, newColor4, newColor1);
    rect(480,240,40,40);
    fill(newColor5, newColor3, newColor1);
    rect(520,240,40,40);
    fill(newColor5, newColor2, newColor1);
    rect(560,240,40,40);
    fill(newColor5, newColor1, newColor1);
    rect(600,240,40,40);
    fill(newColor6, newColor7, newColor2);
    rect(640,240,40,40);

//row 8
    fill(newColor6, newColor2, newColor3);
    rect(0,280,40,40);
    fill(newColor5, newColor5, newColor6);
    rect(40,280,40,40);
    fill(newColor5, newColor8, newColor7);
    rect(80,280,40,40);
    fill(newColor5, newColor5, newColor4);
    rect(120,280,40,40);
    fill(newColor5, newColor2, newColor1);
    rect(160,280,40,40);
    fill(newColor5, newColor8, newColor2);
    rect(200,280,40,40);
    fill(newColor5, newColor3, newColor6);
    rect(240,280,40,40);
    fill(newColor5, newColor5, newColor8);
    rect(280,280,40,40);
    fill(newColor6, newColor8, newColor1);
    rect(320,280,40,40);
    fill(newColor5, newColor7, newColor2);
    rect(360,280,40,40);
    fill(newColor5, newColor6, newColor3);
    rect(400,280,40,40);
    fill(newColor5, newColor5, newColor4);
    rect(440,280,40,40);
    fill(newColor5, newColor4, newColor5);
    rect(480,280,40,40);
    fill(newColor5, newColor3, newColor6);
    rect(520,280,40,40);
    fill(newColor5, newColor2, newColor7);
    rect(560,280,40,40);
    fill(newColor5, newColor1, newColor8);
    rect(600,280,40,40);
    fill(newColor6, newColor7, newColor1);
    rect(640,280,40,40);

//row 9
    fill(newColor5, newColor2, newColor3);
    rect(0,320,40,40);
    fill(newColor8, newColor5, newColor6);
    rect(40,320,40,40);
    fill(newColor4, newColor8, newColor7);
    rect(80,320,40,40);
    fill(newColor4, newColor5, newColor4);
    rect(120,320,40,40);
    fill(newColor4, newColor2, newColor1);
    rect(160,320,40,40);
    fill(newColor4, newColor8, newColor2);
    rect(200,320,40,40);
    fill(newColor4, newColor3, newColor6);
    rect(240,320,40,40);
    fill(newColor4, newColor5, newColor8);
    rect(280,320,40,40);
    fill(newColor5, newColor8, newColor1);
    rect(320,320,40,40);
    fill(newColor4, newColor7, newColor2);
    rect(360,320,40,40);
    fill(newColor4, newColor6, newColor3);
    rect(400,320,40,40);
    fill(newColor4, newColor5, newColor4);
    rect(440,320,40,40);
    fill(newColor4, newColor4, newColor5);
    rect(480,320,40,40);
    fill(newColor8, newColor3, newColor6);
    rect(520,320,40,40);
    fill(newColor4, newColor2, newColor7);
    rect(560,320,40,40);
    fill(newColor4, newColor1, newColor8);
    rect(600,320,40,40);
    fill(newColor5, newColor7, newColor1);
    rect(640,320,40,40);

//row 10
    fill(newColor8, newColor2, newColor3);
    rect(0,360,40,40);
    fill(newColor3, newColor5, newColor6);
    rect(40,360,40,40);
    fill(newColor3, newColor8, newColor7);
    rect(80,360,40,40);
    fill(newColor3, newColor5, newColor4);
    rect(120,360,40,40);
    fill(newColor3, newColor2, newColor1);
    rect(160,360,40,40);
    fill(newColor3, newColor8, newColor2);
    rect(200,360,40,40);
    fill(newColor8, newColor3, newColor6);
    rect(240,360,40,40);
    fill(newColor3, newColor5, newColor8);
    rect(280,360,40,40);
    fill(newColor4, newColor8, newColor1);
    rect(320,360,40,40);
    fill(newColor3, newColor7, newColor2);
    rect(360,360,40,40);
    fill(newColor3, newColor6, newColor3);
    rect(400,360,40,40);
    fill(newColor3, newColor5, newColor4);
    rect(440,360,40,40);
    fill(newColor8, newColor4, newColor5);
    rect(480,360,40,40);
    fill(newColor3, newColor3, newColor6);
    rect(520,360,40,40);
    fill(newColor3, newColor2, newColor7);
    rect(560,360,40,40);
    fill(newColor3, newColor1, newColor8);
    rect(600,360,40,40);
    fill(newColor4, newColor7, newColor1);
    rect(640,360,40,40);

//row 11
    fill(newColor8, newColor2, newColor3);
    rect(0,400,40,40);
    fill(newColor2, newColor5, newColor6);
    rect(40,400,40,40);
    fill(newColor2, newColor8, newColor7);
    rect(80,400,40,40);
    fill(newColor2, newColor5, newColor4);
    rect(120,400,40,40);
    fill(newColor2, newColor2, newColor1);
    rect(160,400,40,40);
    fill(newColor2, newColor8, newColor2);
    rect(200,400,40,40);
    fill(newColor8, newColor3, newColor6);
    rect(240,400,40,40);
    fill(newColor2, newColor5, newColor8);
    rect(280,400,40,40);
    fill(newColor3, newColor8, newColor1);
    rect(320,400,40,40);
    fill(newColor2, newColor7, newColor2);
    rect(360,400,40,40);
    fill(newColor2, newColor6, newColor3);
    rect(400,400,40,40);
    fill(newColor2, newColor5, newColor4);
    rect(440,400,40,40);
    fill(newColor8, newColor4, newColor5);
    rect(480,400,40,40);
    fill(newColor2, newColor3, newColor6);
    rect(520,400,40,40);
    fill(newColor2, newColor2, newColor7);
    rect(560,400,40,40);
    fill(newColor2, newColor1, newColor8);
    rect(600,400,40,40);
    fill(newColor3, newColor7, newColor1);
    rect(640,400,40,40);

//row 12
    fill(newColor2, newColor2, newColor3);
    rect(0,440,40,40);
    fill(newColor1, newColor5, newColor6);
    rect(40,440,40,40);
    fill(newColor1, newColor8, newColor7);
    rect(80,440,40,40);
    fill(newColor1, newColor5, newColor4);
    rect(120,440,40,40);
    fill(newColor1, newColor4, newColor1);
    rect(160,440,40,40);
    fill(newColor3, newColor8, newColor2);
    rect(200,440,40,40);
    fill(newColor1, newColor3, newColor6);
    rect(240,440,40,40);
    fill(newColor1, newColor5, newColor8);
    rect(280,440,40,40);
    fill(newColor2, newColor8, newColor1);
    rect(320,440,40,40);
    fill(newColor1, newColor7, newColor2);
    rect(360,440,40,40);
    fill(newColor1, newColor3, newColor3);
    rect(400,440,40,40);
    fill(newColor1, newColor5, newColor4);
    rect(440,440,40,40);
    fill(newColor1, newColor4, newColor5);
    rect(480,440,40,40);
    fill(newColor1, newColor3, newColor6);
    rect(520,440,40,40);
    fill(newColor1, newColor2, newColor7);
    rect(560,440,40,40);
    fill(newColor1, newColor1, newColor8);
    rect(600,440,40,40);
    fill(newColor2, newColor6, newColor1);
    rect(640,440,40,40);

//row 13
    fill(newColor1, newColor2, newColor3);
    rect(0,480,40,40);
    fill(newColor4, newColor5, newColor6);
    rect(40,480,40,40);
    fill(newColor7, newColor8, newColor7);
    rect(80,480,40,40);
    fill(newColor6, newColor5, newColor4);
    rect(120,480,40,40);
    fill(newColor3, newColor2, newColor1);
    rect(160,480,40,40);
    fill(newColor1, newColor8, newColor2);
    rect(200,480,40,40);
    fill(newColor7, newColor6, newColor6);
    rect(240,480,40,40);
    fill(newColor4, newColor5, newColor8);
    rect(280,480,40,40);
    fill(newColor1, newColor8, newColor1);
    rect(320,480,40,40);
    fill(newColor2, newColor7, newColor2);
    rect(360,480,40,40);
    fill(newColor3, newColor8, newColor3);
    rect(400,480,40,40);
    fill(newColor4, newColor5, newColor4);
    rect(440,480,40,40);
    fill(newColor5, newColor4, newColor5);
    rect(480,480,40,40);
    fill(newColor6, newColor3, newColor6);
    rect(520,480,40,40);
    fill(newColor7, newColor2, newColor7);
    rect(560,480,40,40);
    fill(newColor8, newColor1, newColor8);
    rect(600,480,40,40);
    fill(newColor1, newColor7, newColor1);
    rect(640,480,40,40);

//allows newX and newY to be changed to the mouse position when dragged
    if (drag){
      newX = mouseX;
      newY = mouseY;
    }

    ellipseMode(CORNER);
//draws body and eyes of carl
    fill(32,120,240);
    ellipse(newX,newY,100,100);
    ellipseMode(CENTER);
    fill(255);
    stroke(0);
    strokeWeight(2);
    ellipse(newX+30,newY+30,15,15);
    ellipse(newX+70,newY+30,15,15);
    fill(0);
    ellipse(newX+30+eyeDx,newY+27+eyeDy,6,6);
    ellipse(newX+70+eyeDx,newY+27+eyeDy,6,6);
  //divides canvas into quadrants and shifts pupils based on
  //which quadrant it's in
    if (newY < 240){
      eyeDy = 6;
    }
    if (newY > 240){
      eyeDy = 0;
    }
    if (newX < 320){
      eyeDx = 2;
    }
    if (newX > 320){
      eyeDx = -2;
    }
//drawing the mouth and speech bubble
    fill(190,20,86);
    strokeWeight(3);
    stroke(235,30,100);
    rect(newX+20,newY+50,60,10,5);
    fill(255);
    noStroke();
    triangle(newX-10,newY+10, newX-10,newY,newX-20,newY);
    rect(newX-120,newY-40,110,40);

//creating directional text
    fill(0);
    textSize(20);
    text("press any key to accelerate!", 30, 455);
    text("drag carl for a new starting point!", 30, 475);
    textSize(15);

//changes speech bubble statement based on where he is
    if (newY >240){
      text("wow so pretty",newX-110,newY-18);
    }
    if (newY <= 240){
      text("cool, i guess",newX-110,newY-18);
    }
//allows carl to bounce off edges of canvas
    newX += dirX * speedX;
    if (newX > width - 100 || newX < 0){
      dirX = -dirX;
    }
    newY += dirY * speedY;
    if (newY > height - 100 || newY < 0){
      dirY = -dirY;
    }
//accelerates when any key is pressed.
    if (keyIsPressed){
        speedX = speedX + 0.25;
    }

}

//allows carl to be draged to slow him down
function mousePressed(){
    if (dist(newX, newY, mouseX, mouseY) < 150){
    drag = true;
    }
}
function mouseReleased(){
    drag = false;
    speedX = speedX*0.4;  //deccerates
    speedY = speed*0.4;
}

Carl’s back and ready to play in a colorful landscape. Wave your mouse around to adjust the color while Carl bounces around to observe. Press any key to accelerate Carl, and stop and drag him to tell him to slow down.

hqq-secE-project02-variable-faces

hamza

//hamza qureshi
//section e
//project 02
//hqq@andrew.cmu.edu

//here's carl, y'all!

//background color variables
var R_bg = 20;
var G_bg = 225;
var B_bg = 255;
//arm variables
var y_armleft = 400;
var y_armright = 380;
//head variables
var width_head = 280;
var height_head = 90;
var color_head = 120;
//mouth variables
var width_mouth = 200;
var height_mouth = 40;
var color_mouth = 190;
var strokeColor_mouth = 235;
//eyes variables
var rad_eyes = 15;
var rad_pupil = 7;
var x_eye1 = 23

function setup(){
    createCanvas(640,480);
    rectMode(RADIUS);
    ellipseMode(RADIUS);
    angleMode(DEGREES);
}

function draw(){
    //background
    background(R_bg,G_bg,B_bg);
    //arms
    strokeWeight(20);
    stroke(0,0,color_head - 50);
    line(160,445,100,y_armleft + 5);
    stroke(0,0,color_head);
    line(160,440,100,y_armleft);
    line(485,440,545,y_armright);
    //body
    fill(0,0,color_head - 50);
    strokeWeight(0);
    rect(width/2-30,height/2+150,150,150,20);
    fill(210,180,180);
    stroke(0,0,color_head);
    strokeWeight(40);
    rect(width/2,height/2+150,150,150,20);
    //head
    strokeWeight(0);
    fill(0,0,color_head-50);
    rect(width/2-30,height/2+5,width_head+30,height_head+5,20);
    fill(0,0,color_head);
    rect(width/2,height/2,width_head,height_head,20);
    //mouth
    fill(color_mouth,20,86);
    strokeWeight(10);
    stroke(strokeColor_mouth,30,100);
    rect(width/2,height/2+40,width_mouth,height_mouth,20);
    if (width_head >= 0){
      width_mouth = width_head-20;
    }
    //eyes
    fill(255,255,255);
    strokeWeight(3);
    stroke(0,0,0);
    var left_eye = width/3-height_head*0.5
    var right_eye = left_eye + width/2
    ellipse(left_eye,height/2-30,rad_eyes,rad_eyes);
    ellipse(right_eye,height/2-30,rad_eyes,rad_eyes);
    fill(0,0,0);
    strokeWeight(0);
    ellipse(left_eye,height/2-30,rad_pupil,rad_pupil);
    ellipse(right_eye,height/2-30,rad_pupil,rad_pupil);
    if (rad_eyes >= 0){
      rad_eyes > rad_pupil
    }


}

function mousePressed(){
    R_bg = random(0,40);
    G_bg = random(200,245);
    B_bg = random(245,255);
    width_head = random(200,250);
    height_head = random(110,140);
    color_head = random(120,210);
    width_mouth = random(210,290);
    height_mouth = random(10,30);
    color_mouth = random(180,220);
    strokeColor_mouth = random(235,255);
    rad_eyes = random(10,20);
    rad_pupil = random(2,8);
    y_armleft = random(390,460);
    y_armright = random(390,460);



}

For my variable face project, I made Carl, a frantic little buddy who’s a bit nervous about Picture Day. The photographer keeps snapping photographs, and in each one, he expresses his anxiety by how agape his mouth his, h0w dilated his eyes are, and the way he waves his hands.

hqq-secE-LookingOutwards-02

Hi guys!

Generative design is a huge part of what has led to the resurgence of the architecture industry in the past few decades. Methods of parametric modelling and design have monumentally transformed the way that architects develop a formal logic to designing complex buildings.

Photo: Zaha Hadid Architects (ZHA)

One of the pioneering pieces of parametrically designed architecture came just after the turn of the century. Designed by Zaha Hadid in 2003, the Guangzhou Opera House has become a major staple to the community while expressing a generative algorithm derived from an early prototype of a now-popular modelling language called Grasshopper. The algorithm considered various inputs including topography, sunlight, and population density projections to achieve a superfluous design that achieves optimally designed sonic clarity while adapting to environmental conditions in China.

Grasshopper is now used throughout the architecture industry to make important considerations like weather, topography, or mathematical logic a staple in the design process.