SectionB – Page 15 – [OLD FALL 2020] 15-104 • Introduction to Computing for Creative Practice

LO-06-Randomness

Jonathan McCabe, Instability Landscapes.

Jonathan McCabe creates a series of imaginary landscapes full of randomized textures, colors, and arrangements. McCabe uses Alan Turing’s reaction diffusion equations to generate these designs. This specific series additionally uses multi-scale Turing instability. This creates the mixing and merging of patterns and colors as it generates Turing patterns of spots and stripes. I find these computation arrangements inspiring in their ability to replicate familiar existing landforms but still manage to make it look like a fantasy with the psychedelic color pattern and mixture of texture. McCabe creates “algorithmic botany” through these formulaic computation operations to create an end result of an image that resembles biological forms.

As an architecture major, using computational randomization to create these landforms would be an interesting challenge for creating sites to build for. They also serve as good visualizations for collage or other methods for representing the landform. Having sources such as the Instability Landscapes for architectural exploration would be a unique way to design for formations that don’t exist in our real world, but are rather digitally man-made. McCabe’s use of shadows, color contrast, and twisting and shape of forms creates a set of stimulating and experimental images.

Project – 06

sketch

//Shaun Murray, Section B

var x
var y
var cDisPos = 0
var cDisNeg = 0


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

function draw() {
	background(0, 200 , 255);

	//ground
	push();
	noStroke();
	fill(0, 150, 50);
	rect(x, y + 145, width, 180);
	fill('Brown');
	rect(x, y + 150, width, 180);
	pop();

	x = width/2
	y = height/2

	//cloud
	push();
    translate(cDisPos, y - 100);
    cloud(0, );
    cDisPos += 1
    if (cDisPos > width + 50) {
    	cDisPos = -50
    }
    pop();

    push();
    translate(cDisNeg, y);
    cloud(0, 0);
    cDisNeg -= 1
    if (cDisNeg < -width) {
    	cDisNeg = width
    }
    pop();

	//pipes
	pipe(x , y + 45);
	pipe(x - 150, y + 45);
	pipe(x + 150, y + 45);

    //stars
	push();
    translate(width * 0.813, height * .15 + second() * 6.8); //6.8 is the scale for seconds on the Y axis of 'pipe'
    rotate(frameCount / 50);
    star(0, 0, 13, 26, 5);

    //eyes
    rotate(radians(50));
    fill(1);
    ellipse(-5, 0, 3, 10);
    ellipse(5, 0, 3, 10);
    pop();

    push();
    translate(width * 0.5, height * .15 + minute() * 6.8);//6.8 is the scale for minutes on the Y axis of 'pipe'
    rotate(frameCount / 50);
    star(0, 0, 13, 26, 5);

    //eyes
    fill(1);
    rotate(radians(50));
    ellipse(-5, 0, 3, 10);
    ellipse(5, 0, 3, 10);
    pop();

    push();
    translate(width * 0.19, height * .15 + hour() * 17);//17 is the scale for hours on the Y axis of 'pipe'
    rotate(frameCount / 50);
    star(0, 0, 13, 26, 5);

    //eyes
    rotate(radians(50));
    fill(1);
    ellipse(-5, 0, 3, 10);
    ellipse(5, 0, 3, 10);
    pop();


    
}


function pipe(x, y) {
	
	rectMode(CENTER);
	push();
	translate(x, y);
	fill(0, 255, 50);
	rect(0, 0, 75, height);
	fill('Green');
	rect(0, 0, 50, height);
    fill(0, 200, 50);
    stroke(1);
    rect(0, -250, 90, 30);
    fill(0, 200, 150);
    noStroke();
    rect(-25, -250, 20, 28);
	pop();
}

function star(x, y, rad1, rad2, points) {
  let angle = TWO_PI / points;
  let halfAngle = angle / 2;
  beginShape();
  fill(255, 255, 0);
  for (let a = 0; a < TWO_PI; a += angle) {
    let sx = x + cos(a) * rad2;
    let sy = y + sin(a) * rad2;
    vertex(sx, sy);
    sx = x + cos(a + halfAngle) * rad1;
    sy = y + sin(a + halfAngle) * rad1;
    vertex(sx, sy);

  }
  endShape(CLOSE);
}


function cloud(x, y) {
	push();
    translate(x, y);

    //cloud 
	noStroke();
	fill(255);
	ellipse(-5, -17, 43, 43);
	fill(245);
	ellipse(-3, -15, 40, 40);
	//eyes
	fill(1);
	ellipse(-10, -25, 3, 10);
	ellipse(0, -25, 3, 10);

	fill(255);
	ellipse(18, -12, 30, 30);
	fill(245);
	ellipse(20, -10, 27, 27);

	fill(255);
    ellipse(-20, -9, 25, 23);
    fill(245);
    ellipse(-17, -6, 23, 20);

	fill(255);
	ellipse(0, 0, 80, 10);
	fill(245);
    ellipse(5, 1, 75, 8);

    pop();

}

Super Clock World. The pipes represent hour, minute, and second.

Looking Outwards – 06

American composer John Cage is well known for his composition 4’33”, which is based on the absence of music. A strange concept for a piece of music intended for performance, Cage’s 4’33” displays an interesting from of randomness. The piece instructs the musicians to sit on stage in silence for the duration of the piece, four minutes and thirty-three seconds. The musical concept behind the piece is not the absence of music, but the sound created in the absence of organized music. This element of randomness is biased in a sense. The possible sounds are limited to the sounds made both intentionally and unintentionally by the performers, audience, and outside influences. While the types of sounds might be predefined to an extent, the pitch, duration, tone, and frequency of each sound shape every individual performance. I admire the creativity and innovation Cage breathed into the art of classical music through his unusual concept. The creation of the piece was partially inspired by his following of Zen Buddhism.

John Cage – 4’33” (1947-48)

LO 6 – Randomness

*A Year From Monday & Empty Words & Roaring Silence* by John Cage

Titled A Year From Monday, Empty Words, and Roaring Silence, these books comprise of collections of lectures and writings by John Cage. In an attempt to resonate with John Cage’s musical compositions while portraying a “sense of progression which culminates in the diagonally cut slip case”, Zhuoshi Xie designed three different, yet visually correlated book covers.

Initially presented by deep, cool colors on the books’ spines that is revealed to incorporate a flood of bright, saturated red on the books’ covers, Xie expresses how randomization does not always have to be a surprise or even “a smack in the face”.

Randomization can be a gradual progression, and sometimes, it can be the more subtle, unexpected touches that are most effective. In this case, Xie’s goal of reflecting a kind of unexpected randomness that alludes to John Cage’s work is successfully achieved through the red color composed from small, random individual red letters that creates an almost eerie effect.

Looking Outwards 06: Randomness

Self-Dividing Line, J. Tarbell, 2003
http://www.complexification.net/gallery/machines/selfdividingline/

This project constructs unique works by recursively dividing initially defined lines. With each subdivision, the algorithm randomizes where the line will fold in and divide. As the line divides, the system tracks this by adding a level of depth and value with each fold, as though you were observing a piece of paper being folded or a fractal pattern being drawn.

These are some of iterations of the Self-Dividing Line project (2003).

These features of the subdividing line, too, serve to prevent the structure from becoming too complex for the system to process. I think the artist does a great job of employing randomness to produce generative work which reflects both arbitrariness and the inevitability of an end, as the initial lines can only divide so many times before they become too complex. While very simple, the aesthetic of these pieces serves to juxtapose the unlimited possibility for subdivision offered by the algorithm.

Project 06 – Mike Pence and Fly Clock

I chose to represent time with the fly from the Vice Presidential debate that landed on Mike Pence’s head. The fly moves each second and crosses the canvas once per minute. Its vertical position represents what minute of the hour it is, and the number of time it says “vote” on the top of the canvas is the hour. If the background is darker than the text, it is PM, and vice versa.

mike pence fly

var FlyY = 5

function setup() {
    createCanvas(480, 480);
    background(220);
}
//draw the fly 
function Fly(){
		var x = 0
		push();
		fill(154, 137, 120);
		rotate(radians(-60));
		ellipse(x - 2, FlyY - 12, 7, 18);	//draw top wing
		rotate(radians(120));
		ellipse(x + 5, FlyY + 8, 7, 18);	//draw bottom wing
		pop();
		stroke(154, 137, 120);
		fill(0);
		circle(x, FlyY, 12);	//draw fly body
	}

//draw mike pence
function Mike(){
	noStroke()
	//shirt
	beginShape();
	fill(241, 237, 234);
	curveVertex(218,346);
	curveVertex(187,374);
	curveVertex(171,395);
	curveVertex(179,479);
	curveVertex(278,479);
	curveVertex(295,391);
	curveVertex(261,351);
	endShape(CLOSE);

	//left shoulder
	fill(0);
	beginShape();
	vertex(172,268);
	vertex(127,282);
	vertex(87,298);
	vertex(44,323);
	vertex(0,331);
	vertex(0,479);
	vertex(193,479);
	vertex(172,380);
	vertex(160,300);
	endShape(CLOSE);

	//right shoulder
	beginShape();
	vertex(325,286);
	vertex(334,294);
	vertex(351,312);
	vertex(396,330);
	vertex(448,354);
	vertex(479,368);
	vertex(479,479);
	vertex(258,479);
	vertex(289,402);
	vertex(316,304);
	endShape(CLOSE);

	//left ear
	fill(236, 166, 133);
	beginShape();
	curveVertex(185,145);
	curveVertex(175,127);
	curveVertex(167,133);
	curveVertex(165,149);
	curveVertex(165,177);
	curveVertex(165,201);
	curveVertex(168,214);
	curveVertex(175,217);
	endShape(CLOSE);

	//right ear
	beginShape();
	curveVertex(363,203);
	curveVertex(378,194);
	curveVertex(388,198);
	curveVertex(387,214);
	curveVertex(371,231);
	curveVertex(359,252);
	curveVertex(349,267);
	curveVertex(339,272);
	curveVertex(331,263);
	endShape(CLOSE);

	//neck
	beginShape();
	curveVertex(181,251);
	curveVertex(172,288);
	curveVertex(183,309);
	curveVertex(195,323);
	curveVertex(223,353);
	curveVertex(242,358);
	curveVertex(279,342);
	curveVertex(309,317);
	curveVertex(317,290);
	endShape(CLOSE);

	//right collar
	fill(255)
	beginShape();
	curveVertex(329,279);
	curveVertex(282,335);
	curveVertex(260,347);
	curveVertex(243,355);
	curveVertex(261,376);
	curveVertex(273,407);
	curveVertex(281,427);
	curveVertex(313,362);
	curveVertex(323,315);
	endShape(CLOSE);

	//face
	fill(244, 180, 150)
	beginShape();
	curveVertex(232,81);
	curveVertex(213,114);
	curveVertex(198,145);
	curveVertex(185,166);
	curveVertex(177,199);
	curveVertex(175,237);
	curveVertex(181,279);
	curveVertex(193,307);
	curveVertex(211,328);
	curveVertex(238,340);
	curveVertex(273,335);
	curveVertex(299,321);
	curveVertex(322,291);
	curveVertex(341,257);
	curveVertex(360,214);
	curveVertex(361,187);
	curveVertex(362,143);
	curveVertex(357,101);
	curveVertex(335,116);
	curveVertex(289,103);
	curveVertex(255,87);
	endShape(CLOSE);

	//right hair
	fill(241, 237, 234);
	beginShape();
	curveVertex(363,74);
	curveVertex(380,95);
	curveVertex(387,130);
	curveVertex(375,171);
	curveVertex(357,217);
	curveVertex(356,122);
	curveVertex(356,104);
	endShape(CLOSE);

	//left hair
	fill(255);
	beginShape();
	curveVertex(254,36);
	curveVertex(219,54);
	curveVertex(199,84);
	curveVertex(190,112);
	curveVertex(184,136);
	curveVertex(180,183);
	curveVertex(209,132);
	curveVertex(233,87);
	curveVertex(277,100);
	curveVertex(323,114);
	curveVertex(341,116);
	curveVertex(358,100);
	curveVertex(363,79);
	curveVertex(352,60);
	curveVertex(327,40);
	curveVertex(295,30);
	endShape(CLOSE);

	//collar
	beginShape();
	curveVertex(177,255);
	curveVertex(165,273);
	curveVertex(162,307);
	curveVertex(170,357);
	curveVertex(178,406);
	curveVertex(181,418);
	curveVertex(209,376);
	curveVertex(231,354);
	curveVertex(195,320);
	curveVertex(177,289);
	endShape(CLOSE);	

	//tie bottom
	fill(184, 14, 18);
	beginShape();
	curveVertex(223,394);
	curveVertex(209,430);
	curveVertex(196,478);
	curveVertex(261,479);
	curveVertex(257,433);
	curveVertex(239,392);
	endShape(CLOSE);

	//tie knot
	fill(229, 25, 30);
	beginShape();
	curveVertex(225,354);
	curveVertex(201,379);
	curveVertex(221,398);
	curveVertex(246,402);
	curveVertex(264,380);
	curveVertex(256,360);
	endShape(CLOSE);

}

function draw(){
	if(hour()>11){
		background(117, 129, 151);	//in PM, set background color to darker blue
	}
	else {
		background(158, 168, 186)	//in AM, set background color to lighter blue
	}
	
	push()
	for(var h = 0; h<(hour()%12); h++){	//this will write'vote' the number of the hour up on a 12 hour scale
		push()
		translate(40*h,0) //space out the'vote' evenly so 12 can fit on the top row
		if(hour()>11){
			fill(158, 168, 186)	//in PM, set text color to lighter blue
		}
		else{
			fill(117, 129, 151)	//in AM, set text color to darker blue
		}
		textFont('Georgia')
		textSize(20)
		text('vote', 2, 25)	//vote text
		pop()
    }
	pop()
	Mike();	//draw mike pence
	push();
	translate(map(second(), 0, 60, -15, width + 10), FlyY);	//translate so the fly moves each second and crosses the canvas once a minute
	translate(0, map(minute(), 0, 60, 0, height));	//translate so the y position of the fly corresponds with the minute of the hour, so the top will be the top of the hour and vice versa
	Fly();	//draw the fly
	pop();
	
}

Project – 06 – clock

Its spooky season so I decided to make a jack-o-lantern clock. With this clock the idea is that the stem counts down the seconds, every minute the knife on the table moves right and at 60 minutes the knife is far right off the screen as if someone picked it up. Every hour a line is carved into the pumpkin so it is like someone picked up the knife and made a cut the n the knife goes back to the left side of the table as if it was put back down. Every 12 hours the jack-o-lantern is fully carved! The background represents AM or PM.

pumpkinclock Download

var knifeX; // changes knife position by min
var stemY; // height of stem
var H; //hour

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

function draw() {
    H = hour();
    knifeX = minute() * 8; // knife moves right every minute
    stemY = -220 + second();
    strokeWeight(1);
    noStroke();
    //set up background so that it changes from am to pm
	if(H < 12){ //am
        background(107, 144, 255);
        fill(237, 214, 100);
        circle(0, 0, 250);
    } else { //pm
        background(28, 37, 74);
        fill(177, 179, 186);
        circle(100, 55, 100);
        fill(28, 37, 74);
        circle(125, 55, 100);
    }
    //clouds
    fill(255);
    //right side cloud
    ellipse(400, 150, 200, 30);
    circle(400, 130, 50);
    circle(350, 125, 75);
    circle(430, 140, 25);
    //left side cloud
    ellipse(100, 250, 200, 30);
    circle(100, 230, 50);
    circle(150, 225, 75);
    circle(70, 240, 25);
	//table
	fill(125, 90, 29);
	rect(0, 350, width, height - 130);
	push();
    translate(240, 240); //changes to center
    stem()
    pumpkin();
    face()
    pop();
    knife();
}

function pumpkin(){
	stroke(214, 129, 58);
	fill(245, 147, 66); //orange
    ellipse(0,0, 300, 250); //pumpkin body
    //pumpkin details
    noFill();
    strokeWeight(5)
    ellipse(0, 0, 100, 250);
    ellipse(0, 0, 200, 250);
}

function stem(){
	//stem 
    noStroke();
    fill(18, 102, 13);
    triangle(-20, -125, 20, -125, 0, -150);
    rect(-15, stemY, 30, 250)
}

function knife(){
    noStroke();
    fill(10);
    rect(knifeX, 410, 6, 50); //knife handle
    fill(100);
    rect(knifeX, 370, 6, 40);
    arc(knifeX, 390, 20, 40, PI/2, (PI/2)*3)
}

function face(){
    H = hour()
    stroke(0);
    strokeWeight(5);
    if (H == 1 || H == 13){ //left eye
        line(-100, 0, -75, -50); // left diag
    } else if (H == 2 || H == 14){
        line(-100, 0, -75, -50);// left diag
        line(-75, -50, -50, 0); //right diag
    } else if (H == 3 || H == 15){
        fill(0);
        triangle(-100, 0, -50, 0, -75, -50); // left eye
    } else if (H == 4 || H == 16){
        fill(0);
        triangle(-100, 0, -50, 0, -75, -50); // left eye
        //right eye
        line(100, 0, 75, -50);// right diag
    } else if (H == 5 || H == 17){
        fill(0);
        triangle(-100, 0, -50, 0, -75, -50); // left eye
        //right eye
        line(100, 0, 75, -50);// right diag
        line(75, -50, 50, 0); //left diag
    } else if (H == 6 || H == 18){
        fill(0);
        triangle(-100, 0, -50, 0, -75, -50); // left eye
        triangle(100, 0, 50, 0, 75, -50); // right eye
    } else if (H == 7 || H == 19){
        fill(0);
        triangle(-100, 0, -50, 0, -75, -50); // left eye
        triangle(100, 0, 50, 0, 75, -50); // right eye
        //start mouth
        line(-120, 30, -75 , 30); // left straight line 
    } else if (H == 8 || H == 20){
        fill(0);
        triangle(-100, 0, -50, 0, -75, -50); // left eye
        triangle(100, 0, 50, 0, 75, -50); // right eye
        //start mouth
        line(-120, 30, -75 , 30); // left straight line 
        //tooth left
        line(-75 , 30, -75 , 50);
        line(-75, 50, -25, 50);
        line(-25, 30, -25, 50);
    } else if (H == 9 || H == 21){
        fill(0);
        triangle(-100, 0, -50, 0, -75, -50); // left eye
        triangle(100, 0, 50, 0, 75, -50); // right eye
        //start mouth
        line(-120, 30, -75 , 30); // left straight line 
        //tooth left
        line(-75 , 30, -75 , 50);
        line(-75, 50, -25, 50);
        line(-25, 30, -25, 50);
        // middle straight line
        line(-25, 30, 25, 30);
    } else if (H == 10 || H == 22){
        fill(0);
        triangle(-100, 0, -50, 0, -75, -50); // left eye
        triangle(100, 0, 50, 0, 75, -50); // right eye
        //start mouth
        line(-120, 30, -75 , 30); // left straight line 
        //tooth left
        line(-75 , 30, -75 , 50);
        line(-75, 50, -25, 50);
        line(-25, 30, -25, 50);
        // middle straight line
        line(-25, 30, 25, 30);
        //tooth right
        line(75 , 30, 75 , 50);
        line(75, 50, 25, 50);
        line(25, 30, 25, 50);
    } else if (H == 11 || H == 23){
        fill(0);
        triangle(-100, 0, -50, 0, -75, -50); // left eye
        triangle(100, 0, 50, 0, 75, -50); // right eye
        //start mouth
        line(-120, 30, -75 , 30); // left straight line 
        //tooth left
        line(-75 , 30, -75 , 50);
        line(-75, 50, -25, 50);
        line(-25, 30, -25, 50);
        // middle straight line
        line(-25, 30, 25, 30);
        //tooth right
        line(75 , 30, 75 , 50);
        line(75, 50, 25, 50);
        line(25, 30, 25, 50);
        // right straight line
        line(120, 30, 75 , 30);
    }else{
        fill(0);
        triangle(-100, 0, -50, 0, -75, -50); // left eye
        triangle(100, 0, 50, 0, 75, -50); // right eye
        //start mouth
        line(-120, 30, -75 , 30); // left straight line 
        //tooth left
        line(-75 , 30, -75 , 50);
        line(-75, 50, -25, 50);
        line(-25, 30, -25, 50);
        // middle straight line
        line(-25, 30, 25, 30);
        //tooth right
        line(75 , 30, 75 , 50);
        line(75, 50, 25, 50);
        line(25, 30, 25, 50);
        // right straight line
        line(120, 30, 75 , 30);
        //whole mouth
        arc(0, 30, 240, 120, 2 * PI, PI);
        fill(245, 147, 66)
        noStroke();
        rect(-75 , 25, 50, 20);
        rect(25, 25, 50, 20);
    }
}

LO – 06

Gerhard Richter is an artist that utilizes randomness in his art. Richter’s “4900 Colours: Version II” was exhibited at Serpentine Gallery back in 2008.
This work consisted of 196 panels each with a 5 x 5 square. The randomness comes from a computer program that assigned colors to each square by random from a 25 color palette. The panels could be hung together to create one large display but in the exhibit they were arranged by random in sets of 4.
The intriguing part about the work is the pure randomness. One may not look at it and immediately see random colors because some panels seemed to be dominated by one certain color, but that is the beauty of pure randomness because in random nature patterns may actually occur.

Project – 06: Abstract Clock

For my abstract clock, I was inspired by scenes of rainy days. First, I did a rough sketch of the various visual elements that I wanted to comprise the scene. Then, I made notes on the sketch of various elements that I wanted to be reactive to time. I decided that the color of the clouds should be reactive to the hour; as such, the cloud color gets darker with each hour of the day. Additionally, I made the sky change color for a range of hours during the day. The rain is generated depending on how many seconds have elapsed in the minute (e.g. 30 seconds into a minute, 30 lines of rain appear). Lastly, the width of the umbrella increases with each minute and resets at the start of each hour.

sketch Download

var rainX = [];
var rainY = [];
var buildingStart = [];

function setup() {
    createCanvas(480, 480);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
    for (i = 0; i < 10; i++){
    	buildingStart[i] = random(height/7,height/2);
    }
}

function draw() {
	noStroke();
	if (hour() < 6){
		background(117,128,181);
	} else if(hour() >= 6 & hour() < 19){
		background(68,117,181);
	} else if (hour() == 19 ){
		//sunset colors
		background(160,24,85); 
		noStroke();
		fill(237,100,21,150);
		rect(0,0,width,3*height/4);
	} else {
		background(8,6,48);
	}
	cityscape();
	//ground
	fill(76,75,62);
	rect(0,360,width,height);
	fill(0,100);
	rect(0,360,width,110);
	baby();
	rock();
	rain();
	cloud();
	push();
	translate(130,330);
	rotate(radians(-30));
	umbrella();
	pop();
}

function cloud() {
	fill(255 - (10*(hour())));
	var circleX = 0;
	var circleY = 0;
	noStroke();
	//cloud gets darker with each hour
	ellipse(width/2,0,width,height/8);
	//for loop was slowing down browser so I wrote out each circle
	circle(circleX,circleY,height/3);
	circle(circleX + 48,circleY - 10,height/3);
	circle(circleX + 48*2,circleY,height/3);
	circle(circleX + 48*3,circleY,height/3);
	circle(circleX + 48*4,circleY,height/3);
	circle(circleX + 48*5,circleY + 10,height/3);
	circle(circleX + 48*6,circleY + 20,height/3);
	circle(circleX + 48*7,circleY + 10,height/3);
	circle(circleX + 48*8,circleY,height/3);
	circle(circleX + 48*9,circleY,height/3);
	circle(circleX + 480,circleY - 15,height/3);
	
	
}

function rain() {
	for(i = 0; i <= second(); i++){ 
		rainX[i] = random(0,480);
		rainY[i] = 0;
		stroke(175,199,216);
		line(rainX[i],rainY[i],rainX[i],height - 10);
	}

}

function baby() {
	//shadow
	fill(0,200);
	ellipse(90,430,220,50);
	//swaddling 
	fill(221,173,218);
	rect(80,400, 60, 40);
	circle(80,420,40);
	circle(140,420,40);
	//face
	fill(173,156,133);
	circle(130,420,38);
	//eyes
	if (hour() >= 20){
		stroke(0);
		strokeWeight(1.5);
		line(130,405,130,415);
		line(130,425,130,435);
	} else {
		fill(0);
		circle(130,410,5);
		circle(130,430,5);

	}

}

function umbrella() {
	//top of umbrella
	fill(102,24,33);
	arc(0,0,150 + minute(),90,PI,0,CHORD); //umbrella width increases with each minute
	fill(25,16,10);
	rect(0,0,3,100);
	//handle
	beginShape();
		vertex(0,100);
		curveVertex(0,110);
		curveVertex(-5,115);
		vertex(-10,105);
		vertex(-10,108);
		curveVertex(-5,118);
		curveVertex(3,110);
		vertex(3,100);
	endShape(CLOSE);
	//top
	triangle(-1,-40,0,-60,1,-40);

}

function rock() {
	fill(31,31,35);
	quad(0,430,10,400,45,380,60,430);
	fill(255,30);
	triangle(10,400,45,380,30,420);


}

function cityscape() {
	for(i = 0; i < 10; i++){
		fill(0,100);
		rect(48*i,buildingStart[i], 48, height);
	}
}

Looking Outwards – 06: Randomness

A work of music that employs randomness and chance is John Cage’s “Music of Changes.” I admire this piece because it introduces a level of objectivity into the creative process. John Cage controlled the randomness in the composition by referencing the Chinese book the I Ching. He previously arranged the chords, notes, etc. of the music, but he took notes from the book to order these elements. He used this method to create four “books” of music which comprise the “Music of Changes.” John Cage’s artistic sensibilities are manifested in the final work because the random conglomeration of the musical phrases he composed amplify and complement the random and erratic feeling the phrases convey.

Performance of John Cage’s “Music of Changes: Book 1”