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

LO-06

I really like the columns designed by Michael Hansmeyer. He is an architect which is what compelled him to make these columns. I find it really interesting that he took a very simple architectural form and and embellished it through his generative design. He used Javascript to make each layer’s pattern for the column and cut them out with an industrial mill according to one source, but I could easily see these being laser cut. Each layer is made out of cardboard or graybeard and stacked on top of each other to build the final form. The randomness used for creating this design isn’t “super” random because the program used probably limits how narrow and wide it can get in general and how much each layer can vary from the last so that it can still produce a sturdy column. So even though they’re not completely random, I would say this is very impressive within the realm of architecture in which things are usually very precise that he was able to make pieces that not only were functional/would stand, but also looked very beautiful in a surprisingly precise way.

http://www.michael-hansmeyer.com/subdivided-columns

Looking Outwards -06

For this week’s Looking Outwards, I chose to look at the work titled “bbccclll” by Manolo Gamboa Naon (https://www.behance.net/gallery/66986781/bbccclll) . In this piece of generative art, the aspects that I admire about it are the color schemes, and the way the beams of color sprout in random directions from the centers of the dots. Additionally, I like how the opacities are layered and create an overlapping effect for the shapes. In this work, the aspects of randomness are probably the colors of the center dots. They range from shades of red, yellow and blue and I feel like that is controlled by restricting the range of the r,g,b values for the colors of the circles. For each of the circles there are also multiple rings around it and the diameters and thicknesses were also probably randomized as well. I like how the artist used simple overlapping geometries to create an interesting abstract piece, and I think the artist would have been inspired by something blossoming, or exploding, and something colorful, for example fireworks. Starting form centers and bursting out is the effect that the artist was able to create, and the random changes in thickness and color are what helped produce an interesting, surprising result.

Project-06-Abstract Clock

For this project I wanted to create a hospital scene to demonstrate time, and how lucky we are to experience time and have a beating heart. The IV drip represents minutes with markers indicating mid and quarter points. The heart monitor represents seconds, and the window scene outside indicates if it is morning or evening. Additionally, I threw in some moving clouds and spinning stars to make the window view more dynamic! Below are also pictures of how it looks during day and night time.

graanak-06

//Graana Khan
// Section B
// graanak@andrew.cmu.edu
// Porject-06

/* Seconds is shown by the heart monitor, minutes are shown by the blood bag IV decreasing,
and hours are shown by whether the window displays a nighttime or daytime scene. */

function setup() {
    createCanvas(480, 480);
    background(220);
    var x = 0;   
}

function draw() {
    let h = hour();
    let m = minute();

	background(237, 237, 239);
	noStroke();
	fill(56, 46, 35);
	rect(0, 407, 481, 73);

	//window frame 
	noStroke();
	fill(190, 195, 198);
	rect(164, 268, 258, 20);
	rect(175, 30, 235, 241);

	//iv drip
	fill(216);
	rect(18, 457, 80, 5, 10);
	rect(56, 127, 5, 333, 10);
	rect(59, 134, 48, 5, 10);
	rect(103, 135, 4, 9, 10);

	//iv drip bag and wire  
	stroke(225, 224, 252);
	strokeWeight(2);
	noFill();
	rect(88.5, 144, 34, 62.5, 10);
	strokeWeight(1);
	fill(147, 6, 6);
	beginShape();
	curveVertex(103, 206);
	curveVertex(103, 206);
	curveVertex(103, 293);
	curveVertex(106, 322);
	curveVertex(128, 342);
	curveVertex(182, 357);
	curveVertex(291, 357);
	curveVertex(292, 353);
	curveVertex(182, 353);
	curveVertex(129, 338);
	curveVertex(109, 319);
	curveVertex(107, 293);
	curveVertex(107, 206);
	curveVertex(107, 206);
	endShape();

	//iv blood with changing minutes 
	noStroke();
	fill(147, 6, 6);
	rect(90, 145+m, 30, 60-m, 10);
   
    // iv bag lines showing mid points of the minutes
    stroke(225, 224, 252);
	strokeWeight(2);
	line(89, 160, 93, 160);
	line(89, 175, 99, 175);
	line(89, 190, 93, 190);

    //window appearance
	if(h < 18 & h > 5){
		daytime();
	} else{
		nighttime();
	}

	//table
	noStroke();
	fill(255);
	rect(92, 308, 6, 141, 10);
	rect(338, 308, 6, 141, 10);
	rect(92, 305, 252, 12, 10);

	//flower vase
	stroke(50, 132, 50);
	strokeWeight(2);
	line(312, 302, 312, 243);

	stroke(225, 224, 252);
	strokeWeight(1);
	noFill();
	rect(298, 263, 28, 46, 7);

    //water 
	fill(187, 201, 249, 100);
	noStroke();
	rect(298, 280, 28, 29, 7);

	//flower
	noStroke();
	fill(244, 132, 196);
	ellipse(307, 244, 11, 2);
	ellipse(318, 244, 11, 2);
	push();
	translate(308, 247);
	rotate(radians(-40));
	ellipse(0, 0, 11, 2);
	pop();
	push();
	translate(317, 247);
	rotate(radians(40));
	ellipse(0, 0, 11, 2);
	pop();
	push();
	translate(310, 249);
	rotate(radians(-70));
	ellipse(0, 0, 11, 2);
	pop();
	push();
	translate(314, 249);
	rotate(radians(70));
	ellipse(0, 0, 11, 2);
	pop();
	push();
	translate(308, 242);
	rotate(radians(20));
	ellipse(0, 0, 11, 2);
	pop();
	push();
	translate(317, 242);
	rotate(radians(-20));
	ellipse(0, 0, 11, 2);
	pop();
	push();
	translate(310, 239);
	rotate(radians(60));
	ellipse(0, 0, 11, 2);
	pop();
	push();
	translate(320, 260);
	rotate(radians(-60));
	ellipse(0, 0, 11, 2);
	pop();
	fill(255, 223, 87);
	ellipse(312, 244, 4, 3);    

	//heart monitor 
	fill(255);
	rect(143, 202, 135, 103, 20);
	fill(49, 49, 51);
	rect(147, 206, 128, 97, 20);
	fill(194, 255, 69);
	rect(240, 290, 19, 8, 10);
	fill(72, 72, 255);
	ellipse(233, 294, 8, 8);

	//hospital bed 
	fill(180, 178, 191);
	rect(73, 364, 310, 16, 20);
	rect(73, 331, 15, 45, 20);
	push();
	translate(450, 268);
	rotate(radians(45));
	rect(10, 0, 18, 134, 20);
	fill(199, 221, 239);
	rect(-17, 15, 27, 117, 40);
	pop();
	fill(199, 221, 239)
	rect(89, 337, 285, 27, 20);

	fill(180, 178, 191);
	rect(80, 368, 5, 93, 10);
	rect(378, 368, 5, 93, 10);
	
	stroke(216);
	strokeWeight(3);
	fill(255);
	ellipse(82, 461, 18, 18);
	ellipse(380, 461, 18, 18);

	//heart monitor seconds tracker
	let sec = map(second(), 0, 60, 0, 120);
	var x = sec;
	heartmonitor(x);

}

function daytime(){
	noStroke();
	fill(213, 231, 247);
	rect(186, 42, 211, 217);
	fill(255, 255, 255, 150);
	rect(210 + (mouseX/50), 55, 52, 21, 20);
	rect(238 + (mouseX/50), 68, 39, 21, 10);
	rect(331 + (mouseX/50), 86, 48, 28, 10);
	rect(261 + (mouseX/50), 168, 38, 21, 10);
	rect(244 + (mouseX/50), 179, 38, 21, 10);
    fill(247, 221, 109, 100);
    circle(292, 80, 63);
    fill(247, 221, 109);
    circle(292, 80, 50);
}

function nighttime(){
	noStroke();
	fill(12, 33, 48);
	rect(186, 42, 211, 217);
	noFill();
	stroke(234, 234, 139, 200);
	strokeWeight(2);
	push();
	translate(360, 75);
	rotate(radians(mouseX));
	line(0, -5, 0, 5);
	line(-5, 0, 5, 0);
	pop();
	push();
	translate(357, 166);
	rotate(radians(mouseX));
	line(0, -5, 0, 5);
	line(-5, 0, 5, 0);
	pop();
	push();
	translate(226, 121);
	rotate(radians(mouseX));
	line(0, -5, 0, 5);
	line(-5, 0, 5, 0);
	pop();
	push();
	translate(292, 80);
	noStroke();
	fill(255, 255, 255, 100);
    circle(0, 0, 63);
    fill(255);
    circle(0, 0, 50);
    pop();
}

function heartmonitor(x){
	noStroke();
	fill(247, 8, 162);
	beginShape();
	curveVertex(149 + x, 255);
	curveVertex(149 + x, 255);
	curveVertex(148 + x, 254);
	curveVertex(147 + x, 255);
	curveVertex(149 + x, 258);
	curveVertex(151 + x, 255);
	curveVertex(150 + x, 254);
	curveVertex(150 + x, 254);
	endShape();
}

Project 06- Abstract Clock

sketch Download



//Shruti Prasanth
//Section C
//Project 6 - Abstract Clock

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

    
    push(); 
    background(175, 298, 173); //mint green
    translate(width / 2, height / 2); //origin now center canvas
    pop(); 

    var s = second(); 
    var m = minute(); 
    var h = hour();

    let sAngle = map(s, 0, 60, 0, 360); 
    let mAngle = map(m, 0, 60, 0, 360);
    let hAngle = map(h, 0, 24, 0, 360); 

    translate(width / 2, height / 2); 
    
    //drawing the second hand ring 
    fill(255);
    noStroke(); 
    push(); 
    for (var i = 0; i < s; i ++){
        rotate(radians(sAngle)); //creates a pattern based on current second 
        ellipse(0, -200, 20, 20); 
    }
    pop(); 

    //drawing the minute hand ring 
    push();
    fill(207, 187, 208); //purple
    for (var j = 0; j < m; j ++){
        rotate(radians(mAngle)); // pattern based on what minute it is 
        ellipse(0, -130, 30, 30); 
    }
    pop(); 

    //the hour hand ring
    push();
    fill(43, 97, 109);
    for (var k = 0; k < h; k ++){ 
        rotate(radians(hAngle)); // pattern based on hour 
        ellipse(0, -50, 40, 40); 

    }
    pop();

// drawing the middle clover
    circle(0,0,20);
    circle(0,15,20);
    circle(0,-15,20);
    circle(15,0,20);
    circle(-15,0,20);
     
}

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-06

Chance music (leaving one or more aspect of the music up to random chance) is known to have existed in some form since Mozart, who is said to have used dice to determine the order of measures and musical phrases in some of his works. The genre really emerged and broadened during the 1900’s, however, when John Cage pioneered music that uses chance throughout the whole work. Music of Changes (for solo piano) is one of Cage’s earlier works in which he used the I Ching to compose the piece.

When composing this work, Cage wrote parts of the music such as melodies and chords, then he used the I Ching to arrange what he had written. After he had arranged the notes and had an overall sound concept, Cage restarted and used the I Ching to assign note durations, tempos, dynamics, and other musical elements.

Undergraduate music majors commonly study this piece in their music history and theory classes because it is one of the most randomized pieces in the literature. It brings about the question of whether or not it is music: there are no coherent melodic or harmonic lines, and a toddler could probably bang out something similar if seated in front of a piano. The composition style and intent behind it, however, is what makes it art. Cage predetermined notes and harmonies, then intentionally and methodically randomized and organized them. The piece might make a better talking point than listening experience, but it is interesting to know that it is out there.

Music of Changes (1951) by John Cage

Project 6 – Abstract Clock

I was inspired by the idea of the lunar cycles and the moon’s effect on the oceans for this project.

sketch

//hollyl
//abstract clock assignment
//section D

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

function h(){								//hour wave
	var x = hour()*20;
	var y = width/2;
	noStroke();
	fill(58, 63, 139);
	rect(x-120, y/2, 240, y/2);
	ellipse(x, y/2, 120, y);
	rect(0, y, 480, y);
	fill(30, 30, 75);
	arc(x-120, y/2, 120, y, 0, PI);
	arc(x+120, y/2, 120, y, 0, PI);
}

function mn(){								//minute wave
	var x = minute()*8;
	var y = 180
	noStroke();
	fill(58, 91, 139);
	rect(x-90, height/2, y, y/2);
	ellipse(x, height/2, 90, y);
	rect(0, 330, 480, y);
	fill(58, 63, 139);
	arc(x-90, height/2, y/2, y, 0, PI);
	arc(x+90, height/2, y/2, y, 0, PI);
}

function s(){								//second wave
	var x = second()*8;
	var y = 120;
	noStroke();
	fill(59, 104, 172);
	rect(x-(y/2), 330, y, y/2);
	ellipse(x, 330, y/2, y);
	rect(0, height-90, 480, 90);
	fill(58, 91, 139);
	arc(x-(y/2), 330, y/2, y, 0, PI);
	arc(x+(y/2), 330, y/2, y, 0, PI);
}

function draw(){
	background(30, 30, 75);
	h();
	mn();
	s();
	fill(54, 146, 169);						//remnants of the millisecond wave that
	rect(0, height-45, 480, 45);			//moved way too fast
}

Notes:

LO 6

An artist I follow, Geoffrey Bradway, creates computational art that is randomly generated through AI. Most of his work is a series of layered repetitive lines that create dynamic and fluid images, but other works include generated works that are based on other artists.

His process is writing software that utilizes ML to generate the patterns that are then drawn using his plotters.