## 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 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); //"______________________________"

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

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 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 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 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
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 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;
//mouth variables
var width_mouth = 200;
var height_mouth = 40;
var color_mouth = 190;
var strokeColor_mouth = 235;
//eyes variables
var x_eye1 = 23

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

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

}

function mousePressed(){
R_bg = random(0,40);
G_bg = random(200,245);
B_bg = random(245,255);
width_mouth = random(210,290);
height_mouth = random(10,30);
color_mouth = random(180,220);
strokeColor_mouth = random(235,255);
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.