Category: Section E

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.

ifv-LookingOutwards-06

pieces from Dodaro’s project Divide+Conquer

Artist: Jen Dodaro

Project: Divide + Conquer

Dodaro used processing to make randomized collages of works from all the artists featured in Stedelijk Museum in Amsterdam. When the user interacts with the piece (by clicking) a new image is generated and projected on the gallery wall. I think the interactivity was good not only for making the viewing experience fun but also for proving the complexity of the program. I admired the posters created by this process because they are visually complex and put an emphasis of aesthetics over legibility. The contrast between the organic marks created through randomness and the utilitarian font is particularly interesting. The artist’s sensibility shows through in how the program collages pieces together and the choice to use pieces from the show.

 

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.

ifv-Project-06-Clock

sketch

//Isabelle Vincent
//Section E
//ifv@andrew.cmu.edu
//Project-06
function setup() {
  createCanvas(480,480);
  var H = hour();
  var cChange = map(H,0,23,0,50)
  background(31+cChange,30+cChange,72+cChange);
}


function draw() {
  var H = hour();
  var M = minute();
  var S = second();
    //change color in relation to hours
    var cChange = map(H,0,23,0,50)
    background(31+cChange,30+cChange,72+cChange,20);
    var c=color(200+cChange,134+cChange,54+cChange);
    fill(c)

    //SunRays
    for(var i=0; i < 60;i++){
      strokeWeight(3);
      var col = color(c);
      if(minute() == i) {
        col = color(200+cChange,134+cChange,54+cChange,40);
      }
      drawRay(i, color(col));
    }
    //sun center
    noStroke();
    ellipse(width/2,height/3,width/8,height/8);

    //Glare
    push();
    translate(width/2,height/3);
    var secondz = map(S,0,59,0,360);
    rotate(radians(secondz));
    fill(255,255,255,70);
    ellipse(width/3.5,0,15,15);
    ellipse(width/3.7,0,10,10);
    pop();
      //triangle
      fill(255,255,255,40);
      noStroke();
      var hgt =0;
      var sc = map(S,0,59,0,height/7);
      hgt +=sc
      triangle(0,height,width/2,height-hgt,width,height)

}
//Instruction on how draw Ray
function drawRay(count,col) {
  push();
  translate(width/2,height/3);
  rotate(radians(count*6));
  stroke(col);
  var H = hour();
  var rayH = map(H,0,0,140);
  line(0,0,(width/10),height/5);
  pop();
}

The color of the sun and the background color are affected by the hour. One of the rays changes color according to the minute. The white “flare” circles around the sun in relation to the passing seconds. The triangle and flare leave a ghostly trail because a semi-transparent background is being drawn on top of past iterations. My result was very different from my original idea, I made some compromises for simplicity. I was happy with the changes I met and the result has the same general tone I originally intended when making my sketch.

agusman-LookingOutwards-06-Randomness

IAAC-Institute for Advanced Architecture of Catalonia
STIGMETRIC SYSTEMS by the Advanced Architecture Group

Stigmetric Systems Simulation

This project is an exploration of stigmetric systems and multi-agent based systems. Using a group of agents, which are often used to represent organically behaviored bodies in a larger “flock” (birds, bees, fish, etc.), the program randomly distributes these across different surfaces, spinning forces, and vectors with specific targets are applied to them.

What’s excellent about agent-based computational design is that it is a field that merges the seemingly arbitrary and random nature of the organic and the mechanized, calculated nature of computer software. Randomness fits well into computational design because in a simulation, random values can fill in the unimportant blanks and can be used the emphasize the algorithm over the results. In that way, we can enhance the seemingly arbitrary patterns in nature through very calculated, yet somewhat random, simulations.

mstropka-Project-06-E

sketch

//Max Stropkay
//Section E
//mstropka@andrew.cmu.edu
//Project-06

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

function draw(){
  background(225);
  //variables for hours, minutes, and seconds
  h = hour();
  m = minute();
  s = second();

  //display text under clock
  text(h%12 + ':' + m + ':' + s, 220, 400);
  //rotate entire canvas -90 degrees so 0 degrees is pointing up
  push()
  translate(width/2, height/2);
  rotate(-90);
  //draw arc
  strokeWeight(2);
  //end of arc is defined by the value of seconds
  var sAngle = map(s, 0, 60, 0, 360);
  fill(255, 51, 51, 40);
  arc(0, 0, 250, 250, 0, sAngle);

  //draw a smaller arc where the end is defined by the value of minutes
  var mAngle = map(m, 0, 60, 0, 360);
  fill(51, 153, 255, 50);
  arc(0, 0, 200, 200, 0, mAngle)

  //instead of mapping the value of hours, map the value of h%12,
  //so 12 hours fits into 360 degrees instead of 24
  //draw arc where the end point is defined by h % 12
  var hAngle = map(h % 12, 0, 12, 0, 360);
  fill(128, 128, 128, 70);
  arc(0, 0, 150, 150, 0, hAngle)

  pop();

}

For this project, I started with the code I used for assignment C, which drew arcs that formed completed circles as the values for hours, minutes, and seconds increased. In the assignment I hid the arcs and drew lines that pointed to the endpoints to create the hands of a clock. For this, I got rid of the hands and filled in the arcs with transparent colors.

rmanagad-project06-abstractclock

sketch

//Robert Managad
//Section E
//rmanagad@andrew.cmu.edu
//Project-06

//color directory
	// background and papercrease(2, 53, 61);
	// paperlightred(187, 42, 47)
	// paperdarkred(160, 42, 56)
	// earthocean(65, 200, 225)
	// earthland(6, 181, 153);
	// earthcloudlight (204, 204, 204)
	// earthclouddark (178, 178, 178);
	// LightCometStreak(195, 215, 216);
	// medCometStreak (129, 166, 176)
	// darkCometStreak (37, 60, 84);

//earth parameters
var earthWH = 128; 
var earthX = 240;
var earthY = 240;
var landXY1 = 0;
var landXY2 = 0;
var landXY3 = 0;
var landXY4 = 0;

//movement parameters
var dirX = 1; 
var dirY = 1;
var dirXComet = 1;
var dirYComet = 1;
var speed = 0.1;
var speedComet = 0.1


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

function draw() {
	rectMode(CENTER);
	angleMode(DEGREES);
	var mil = millis();
	var sec = second();
	var min = minute();
	var h = hour();
	var revert = h % 12 // to make hour go back to 0 position at 12:00

	background(2, 53, 61);
	noStroke();
		fill(65, 200, 225);
		ellipse(earthX, earthY, earthWH, earthWH);
				earthX += dirX * speed/2; // motions the x cooridnate
				earthY += dirY * speed/2; // motions the y coordinate
		//constraining wiggle movement
		if (earthX > width/2 + 0.5 || earthX < width/2 - 0.5) {
			dirX = -dirX; 
		} 
		else if (earthY > height/2 + 0.5 || earthY < height/2 - 0.5) {
			dirY = random(-1, 1);
		}

	//land masses start
			push();
			translate(width/2, height/2)
			rotate(revert);
				push()
				rotate(12.45);
				fill(6, 181, 153);
				ellipse(landXY1-50, landXY1, 16.8, 39.5);
					landXY1 += dirX * (speed/2); // speed cut to modify motions
					landXY1 += dirY * (speed/2); 
				pop();
				push()
				rotate(1);
				fill(6, 181, 153);
				ellipse(landXY2-10, landXY2-25, 12.725, 21.3);
					landXY2 += -dirX * (speed/4); // directions reversed to modify motions
					landXY2 += -dirY * (speed/4); 
				pop();
				push()
				rotate(20);
				fill(6, 181, 153);
				ellipse(landXY2-13, landXY2-14, 21.21, 26.1);
				pop();
				push()
				rotate(-10);
				fill(6, 181, 153);
				ellipse(landXY2-1, landXY2-15, 15.9, 20.4);
				pop();
				push()
				rotate(0);
				fill(6, 181, 153);
				ellipse(landXY2-3.4, landXY2-7.6, 15.9, 20.4);
				pop();
				push()
				rotate(20);
				fill(6, 181, 153);
				ellipse(landXY3+36, landXY3+18.7, 30, 46.12);
					landXY3 += dirX * (speed/3); 
					landXY3 += -dirY * (speed/3); //direction reversed to modify motion 
				pop();
				push()
				rotate(-20);
				fill(6, 181, 153);
				ellipse(landXY4+30, landXY4-40, 18, 18.5);
					landXY4 += -dirX * (speed/6); // direction reversed to modify motion
					landXY4 += dirY * (speed/6); 
				pop();
			pop();

	// paper airplane start
		push();
		translate(width/2, height/2); // translates starting point to center of canvas
		for (var i = 0; i < sec/3; i++) {
		rotate(mil/30); //motion produced via rapid milliseconds
		stroke(160, 42, 56)
		strokeWeight(1)
		line(230-width/2, 140.3-height/2, 220-width/2, 140.3-height/2);
		}
		pop();
		push();
		translate(width/2, height/2); // translates starting point to center of canvas
		for (var i = 0; i < 10; i++) {
		rotate(mil/30); //motion produced via rapid milliseconds
		stroke(160, 42, 56)
		strokeWeight(2)
		line(230-width/2, 140.3-height/2, 220-width/2, 140.3-height/2);
		}
		pop();
		push();
		translate(width/2, height/2); // translates starting point to center of canvas
		rotate(sec*6); //Dividing function to rotate in a full revolution in 60 ticks
		fill(160, 42, 56)
		triangle(240-width/2, 135.8-height/2, 234-width/2, 140.4-height/2, 240-width/2, 144.8-height/2);
		fill(187, 42, 47)
		triangle(240-width/2, 130.7-height/2, 264-width/2, 140.5-height/2, 240-width/2, 150.43-height/2);
		stroke(2, 53, 61)
		strokeWeight(1)
		line(240-width/2, 140.3-height/2, 251-width/2, 140.3-height/2)
		pop();

	//comet start
		push();
		translate(width/2, height/2); // translates starting point to center of canvas
		rotate(min); //Dividing function to rotate in a full revolution in 60 ticks
		noStroke();

		//darkStreaks
		fill(129, 166, 176);
		rect(247.2-width/2, 67.3-height/2, 34.06, 2, 30);
		fill(129, 166, 176);
		rect(242.7-width/2, 73.635-height/2, 34.06, 2, 30);
		fill(129, 166, 176);
		rect(249.16-width/2, 81.05-height/2, 34.06, 2, 30);

		//lightStreaks
		fill(195, 215, 216);
		rect(252.66-width/2, 62.941-height/2, 35.35, 3.05, 30);
		fill(195, 215, 216);
		rect(230.14-width/2, 69.33-height/2, 38.04, 2, 30);
		fill(195, 215, 216);
		rect(243.5-width/2, 78.22-height/2, 38.04, 2, 30);
		fill(195, 215, 216);
		rect(233.8-width/2, 82.06-height/2, 38.04, 2, 30);
		fill(195, 215, 216);
		rect(252.66-width/2, 86.25-height/2, 35.35, 3.05, 30);

		//cometBackLayer
		fill(195, 215, 216);
		ellipse(269.83-width/2, 74.6-height/2, 27.66, 26.07);

		//cometMidLayer
		fill(129, 166, 176);
		ellipse(270.8-width/2, 74.6-height/2, 22.76, 23.33);

		//cometBase
		fill(37, 60, 84)
		ellipse(272.4-width/2, 74.6-height/2, 20.64, 20.64);
			push();
			//comet craters
			translate(272.4-width/2, 74.6-height/2);
			rotate(mil/1.5); // rotates craters within the comet
			fill(195, 215, 216);
				push();
				rotate(20);
				ellipse(1.2, -7, 6, 1.6)
				pop();
				push();
				rotate(-20);
				ellipse(0.75, 8, 6, 2.5)
				pop();
				push();
				rotate(50);
				ellipse(-1, 8, 6, 2)
				pop();
			pop();
		pop();

	fill(163, 77, 47);
	textSize(15);
	text(nf(revert, [2], [0]) + " : " + nf(min, [2], [0]) + " : " + nf(sec, [2], [0]), width/2 - 35, 470); // added nf to second function to get two digits. 
}

My idea stemmed around a nuanced, playful version of the act of orbiting — I wanted to show the journey of a paper airplane flying around the world, placing it at a scale similar to a handful of satellites. The plane’s movement represents seconds, the comet’s orbit’s minutes, and the rotation of the land masses on the earth represents hours, while the smaller dashed line are a creative play on figuring out how to use milliseconds to display agile, not-jittery movement.

After sketching my initial ideas down, I used Adobe Illustrator to plan out the look of the elements as well as the program’s composition.

mstropka-Looking Outwards-06-E

Artist Jason Salavon made these digital works of art that appear to depict blurred out women. The women depicted are actually an amalgamation of all of the Playboy centerfolds from each decade. He creates these images by inputting all of the data from the centerfolds into an algorithm that averages all of the images. You could look at the data from the centerfolds as random information. His algorithm organizes this “random” data to create the image. It is particularly interesting to see these works next to each other because, despite the blurriness of the image, you can see a pattern of how the centerfold girls have become whiter and thinner over the years. This creative method of data visualization makes a statement about how people’s concept of attractiveness and beauty have changed over the last couple decades.

gyueunp – Project-06: Abstract Clock

Abstract Clock

//GyuEun Park
//15-104 E
//gyueunp@andrew.cmu.edu
//Project-06

var maxDiameter = 120;
var theta = 0; 
var x = []; // every variable now starts out as an empty array
var y = [];
var dx = []; // velocity in x direction (d for "delta" meaning change or difference)
var dy = []; // velocity in y direction
var col = [];


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

// the radius of the circle
  	r = height * 0.3;
  	speed = 10; 
  	theta = 0;
  	startTime= second();
  
  	for (i = 0; i < 50; i++) {
  		  x[i] = random(width);
        y[i] = random(height);
        dx[i] = random(-5, 5);
        dy[i] = random(-5, 5);
        col[i] = color(255,50);
    }
    
    frameRate(50);
} 

function draw() { 
  	background(117, 2, 21, 10);
  
  	push();
  	var diam = 150 + sin(theta) * maxDiameter ;
  
  	stroke(117, 2, 21,80);
  	strokeWeight(10);
  	fill(255,13);
  	ellipse(width/2, height/2, diam, diam);
  
  	theta += 10;
  	pop();
  
 	push();
  	angleMode(DEGREES);
  
  	translate(200,200);
 	  rotate(-90);
  
// time variables
  	var hr = hour();
  	var mn = minute();
  	var sec = second();
 
  	stroke(0);
  	var secAngle = map(sec,0,60,0,360);
  
 	stroke(0);
  	var mnAngle = map(mn,0,60,0,360);
  
// restart once it gets to 12 and 13 becomes 1 o'clock
  	stroke(0);
 	  var hrAngle = map(hr%12,0,12,0,360);
  
// second hand, highlight on iris
  	push();
  	rotate(secAngle);
  	translate(5,5);
  	stroke(255);
  	fill(255);
  	ellipse(0,0,3,3);
  	pop();

// minute hand, iris 
    push();
  	if (mn % 2 == 0){
      stroke(255);
      ellipse(0,0,40,40);
    } else {
      stroke(158,3,29);
      fill(158,3,29,10);
      ellipse(0,0,40,40);
    }
  	pop();

// hour hand, sclera
  	push();
    if (hr % 2 == 0){
      stroke(157,8,32);
      strokeWeight(10);
      noFill();
      ellipse(0,0,385,385);
  	} else {
      stroke(157,8,32);
      strokeWeight(10);
      noFill();
      ellipse(0,0,280,280);
    }
    pop();
  
  	pop();

// stagnant pupil in the center of canvas
  	push();
  	fill(158,3,29)
  	stroke(158,3,9,30);
  	strokeWeight(10,2);
  	ellipse(width/2,height/2,10,10);
  	pop();
 
// swimming rectangles 
    noStroke();
    for (i = 0; i < 20; i++) {
        fill(col[i]);
        rect(x[i], y[i], 10, 10);
        x[i] += dx[i];
        y[i] += dy[i];

        if (x[i] > width) x[i] = 0;       
        else if (x[i] < 0) x[i] = width;
        if (y[i] > height) y[i] = 0;
        else if (y[i] < 0) y[i] = height;
    }  
}

This abstract clock resembles an eye in that it is composed of various circular forms that are distinct from one another. The rapid blink-like movement and the gliding objects do not represent the time, but instead add a sense of agitation and discomfort. In fact, the subtle alterations of object positions and colors are the components that represent time. In short, this project portrays not only the repetitive nature of time, but also the sense of tension that is created by the limitation of time.

katieche-project-06

katieche-06

/*
katie chen
section e
project 06
katieche@andrew.cmu.edu
*/

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

function draw() {
	var h = hour();
	var m = minute();
	var s = second();
	angleMode(DEGREES);

	// make it 12 hours!
	if (h > 11) {
		h = h - 12;
	}

	else {
		h=h;
	}

	background (196, 220, 255);
	textAlign(CENTER);
	text(h+":"+m+":"+s, width/2, 40);

	noStroke();

	// minute / rabbit rising
	push();
	fill (250);
	ellipse (150, 370-m, 100, 170);
	ellipse (125, 290-m, 20, 90);
	ellipse (175, 290-m, 20, 90);
	fill (250, 210, 196);
	ellipse (120, 325-m, 10, 10);
	ellipse (180, 325-m, 10, 10);
	fill (0);
	ellipse (125, 320-m, 7, 7);
	ellipse (175, 320-m, 7, 7);
	pop();

	//hour / sun
	push();
	fill (255, 235, 127);
	ellipse (260*h/11, 100, 40, 40);
	noFill();
	stroke(255, 236, 170);
	strokeWeight (2);
	ellipse (260*h/11, 100, 55, 55);


	pop();
	//seconds / clouds 
	push();
	fill (250);
	ellipse(300*s/59, 100, 30, 30);
	ellipse(300*s/59, 105, 50, 20);
	ellipse(370*s/59, 140, 40, 30);
	ellipse(380*s/59, 145, 80, 20);
	ellipse(220*s/59, 125, 60, 20);
	ellipse(210*s/59, 120, 40, 20);
	ellipse(260*s/59, 140, 40, 10);
	pop();


}

I wanted to do something completely different from the traditional rotating clock. I tried to create more of a story, where the sun and clouds move horizontally like in real life and the rabbit rises and sinks.