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

sketch


function setup() {
    createCanvas(480, 480);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
	background(0, 150, 250); //sky blue
	var s = second();
	var m = minute();
	var h = hour();
	var d = day();
	noStroke();

	//water
	fill(0, 0, 230); //water blue
	rect(0, 180, 480, 220);
	//waves
    for (var a = 0; a <= width; a = a+1) {
    	for (var b = 200; b <= 450; b = b+50) {
    	stroke(0, 0, 150);
    	strokeWeight(1);
    	point(a, b - 15 * sin(radians(a)));	
        }
    }
    fish(200, 250);
    fish(400, 300);
    fish(60, 275);
    
    //sand
    noStroke();
    fill(170, 100, 20) //darker brown, shows up as water receeds
    rect(0, 380-h*2, 480, 400);
	fill(185, 122, 40); //lighter brown with dots in the sand
	rect(0, 380, 480, 120);
	for (var sx = 20; sx <= width; sx = sx+40) {
		for (var sy = 400; sy <= height; sy = sy + 40) {
        stroke(223, 182, 112); //lightest brown
        strokeWeight(3);
        point(sx, sy);
		}
	}
	for (sx = 40; sx <= width; sx = sx + 40){
		for (sy = 420; sy <= height; sy = sy + 40){
			point(sx, sy);
		}
	}
	crab(s*8, 440);
	sun(m*8, 70);
	cloud(400, 50);
	cloud(50, 75);
	boat(d*13, 170);

}


function crab(x, y) {
	push();
	translate(x, y);
	noStroke();
	fill(230, 0, 0);
	ellipse(0, 0, 30, 20);
	fill(255);
	ellipse(-8, -9, 5, 5);
	ellipse(8, -9, 5, 5);
	fill(0);
	ellipse(-8, -9, 3, 3);
	ellipse(8, -9, 3, 3);
	stroke(230, 0, 0);
	strokeWeight(4);
	line(-10, 5, -25, 20);
	line(10, 5, 25, 20);
	line(-15, 0, -25, 5);
	line(15, 0, 25, 5);
	pop();
}

function fish(x, y) {
	push();
	translate(x, y);
	noStroke();
	fill(225, 0, 225); //light purple
	ellipse(0, 0, 30, 15);
	triangle(15, 0, 25, -10, 25, 10);
	fill(255);
	circle(-8, 0, 5);
	fill(0);
	circle(-8, 0, 3);
	pop();
}

function sun(x, y) {
	push();
	translate(x, y);
	noStroke();
	fill(255, 255, 0);
	circle(0, 0, 45);
	stroke(255, 150, 0);
	strokeWeight(7);
	line(30, 0, 50, 0);
	line(-30, 0, -50, 0);
	line(0, 30, 0, 50);
	line(0, -30, 0, -50);
	rotate(radians(45));
	line(30, 0, 50, 0);
	line(-30, 0, -50, 0);
	line(0, 30, 0, 50);
	line(0, -30, 0, -50);
	pop();

}

function boat(x, y) {
	push();
	translate(x, y);
	noStroke();
	fill(185, 122, 40); //main sand brown
	arc(0, 0, 60, 60, 0, PI, CHORD);
	rect(-5, -50, 5, 50);
	fill(255);
	triangle(0, -50, 0, -10, 30, -10);
	triangle(-5, -50, -5, -10, -30, -10);
	pop();
}

function cloud(x, y) {
	push();
	translate(x, y);
	noStroke();
	fill(240);
	circle(0, 0, 45);
	circle(25, 10, 25);
	ellipse(0, 20, 75, 20);
	pop();
}

I made this based on a beach scene. The crab moves across the sand with the seconds, the sun moves across the sky with the minutes, the water recedes with the hours, exposing the darker brown (wet) sand below it. The boat moves based on the day.

Project-05

sketch
//dmclaugh, Diana McLaughlin, Section A

var s = 60;
var x = 90;
var y;

function setup() {
    createCanvas(600, 600);
    background(52, 225, 235); //light blue
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
    //little background rectangles
	for(var y1 = 2; y1 <= height; y1 += 5) {
		for(var x1 = 2; x1 <= width; x1 += 5) {
		noStroke();
		fill(0, 0, 255);
        rect(x1, y1, 2, 2);
		}
	}
    //pattern
	for (y = 40; y <= height; y += 90){
		for (x = 30; x <= width; x += 90)
		pattern(x, y);
	}
    
}

function pattern(x, y){
	push();
	rectMode(CENTER);
	translate(x, y);
    stroke(255);
    strokeWeight(4);
    fill(random(0, 256), random(0, 256), random(0, 256));
    rect(0, 0, s, s); //background rectangle
    rotate(radians(45));
    rect(0, 0, s, s); //rotated rectangle
    fill(255);
    ellipse(0, 0, 5, 5); //white dots
    ellipse(0, 8, 5, 5);
    ellipse(0, -8, 5, 5);
    ellipse(8, 0, 5, 5);
    ellipse(-8, 0, 5, 5);
    pop();

    noLoop();
}

I made this wallpaper based off of something you might see on Animal Crossing patterns. I played around with which colors to use for the rectangles’ fill, and ended up selecting random colors because I liked how bright and colorful it was and thought it worked best with what I was looking for. I tried doing more subtle shades of blue and purple, but it seemed too dull for what I was looking for.

LO-05

Tesla by Toni Bratincevic uses V-Ray to produce its 3D graphics. The project is dedicated to Nikola Tesla and presents a man (Tesla), standing on the control board with the Tesla coil in an arch above him. I originally picked the project because I did not know what it was depicting, but thought it was humorous. Once I found the creator’s description, the image made more sense.
When creating this image, the author knew that he wanted to depict Tesla and the Tesla coil in the image, but that was all that he started with. The rest of the creation, including how the coil and the Tesla figure are displayed, was up to artistic sense.

Tesla (2014) by Toni Bratincevic

Project-04

sketch
var x1 = 0
var x2 = 0
var y1 = 0
var y2 = 300

var dx3;
var dy3;
var dx4;
var dy4;
numLines = 80;

var dx5;
var dy5;
var dx6;
var dy6;


function setup() {
    createCanvas(400, 300);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
	background(66, 245, 236);

	stroke(255); //white background lines
	for (var p = 0; p <= 400; p += 10) {
		line(p, 0, 1.5*p, 300);
		line(1.5*p, 0, p, 300);
	}
    
    stroke(245, 66, 173); //top left pink lines
    for (x1 = 0; x1 <= 400; x1 +=10) {
    	line(x1, y1, x2, y2);
        y2 -= 10;
    }

    push();
    translate(400, 0); //top right pink lines
    rotate(radians(180));
    for (x1 = 0; x1 <= 400; x1 += 5) {
    	line(x1, y1, x2, y2-200);
    	y2 += 5
    }
    pop();
    
    stroke(0, 150, 0); //green triangle
    line(330, 100, 100, 300);
    line(330, 100, 320, 300);
    dx3 = (100-330)/numLines;
    dy3 = (300-100)/numLines;
    dx4 = (320-330)/numLines;
    dy4 = (300-100)/numLines;

    var x3 = 330;
    var y3 = 100;
    var x4 = 330;
    var y4 = 100;
    for (var i = 0; i <= numLines; i+=1) {
    	line(x3, y3, x4, y4);
    	x3 += dx3;
    	y3 += dy3;
        x4 += dx4;
        y4 += dy4;
    }

    stroke (255, 0, 255); //purple triangle
    line(60, 100, 275, 300);
    line(60, 100, 70, 300);
    dx5 = (275-60)/numLines;
    dy5 = (300-100)/numLines;
    dx6 = (70-60)/numLines;
    dy6 = (300-100)/numLines;

    var x5 = 60;
    var y5 = 100;
    var x6 = 60;
    var y6 = 100;
    for (var j = 0; j <= numLines; j+=1) {
    	line(x5, y5, x6, y6);
    	x5 += dx5;
    	y5 += dy5;
    	x6 += dx6;
    	y6 += dy6;
    }

  
    noLoop();
    

}


I had a color scheme in mind when I started, then I tried messing around with different shapes and line spacing, and this is what I came up with.

LO-04

Stephen Malinowski is a California based software engineer and musician.
He is best known for creating The Music Animation Machine, which is a project that sets graphic visuals to music. This project is very helpful for musicians and nonmusicians alike: for nonmusicians, it gives them a changing visual to go along with orchestra music, which helps keep them engaged. For musicians, this graphic shows all of the notes and rhythms in a piece of music, so it helps them see visually how their part fits in with the rest of the orchestra. Throughout the piece, different shapes and colors appear on the screen. The shapes represent which instrument is playing the line. Ellipses denote flutes, cymbals, and tam-tam; octagons for clarinet and bass clarinet; stars for double reeds; rectangles represent brass, timpani, guiro, and bass drum; and rhombuses are used to represent strings. My guess is that some symbols are also used for percussion because it is fairly clear in a piece of music if the listener is hearing a flute or cymbals, so using the same symbol to represent these two is more distinguishable than using the same symbol for, say, flute and clarinet. The length of all of the shapes represent the note length, or the rhythm. The color represents pitch, with blue as the tonic (the home key of the piece). While Malinowski did not have much artistic wiggle room with animating a piece that someone else composed, he did get to choose how he would animate it in terms of shapes and colors. His creative senses, therefore, are manifest in his animation choices.

Malinowski has animated several orchestral pieces. The piece I chose to link below is his animation of Igor Stravinsky’s The Rite of Spring. In this piece, the recording that Malinowski uses is a digitally performed version by Jay Bacal. Bacal used instrument software by Vienna Symphonic Library to make his recording. While Malinowski does use live orchestral recordings in many of his animations, The Rite of Spring is not yet in the public domain, meaning that licensing can be challenging. Malinowski says on his YouTube channel that he used Bacal’s version because it was the first recording that he was able to get permission to use. He notes that the benefit of using a synthetic recording is that it is note perfect and the articulations and rhythms line up, which increases clarity and creates a better study recording for students who are learning the piece. While nothing will replace the musicality and phrasing of a live orchestra, all orchestral recordings are subject to human error.

The Rite of Spring was a revolutionary and controversial piece when it was premiered. The piece is about a sacrificial ritual and includes musical dissonance and varying rhythm and time signatures that incited a riot during its premier. It is such an involved piece that this is a valuable resource for students who need to learn and distinguish their part while listening to a recording, as well as anyone who would like a better understanding of the piece.

The Rite of Spring, Part 1 (Igor Stravinsky)

Animation by Stephen Malinowski

Recording by Jay Bacal

A list of music animation techniques that Malinowski uses

A list of colors that Malinowski uses to represent pitch


Project-03

sketch3
function setup() {
    createCanvas(600, 450);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
	background(240, 156, 215);
	var h = min(mouseY/3, 50);
	var c = min(mouseY/2, 255);
	var w = max(min(mouseY/3, 50), mouseX/6);
	noStroke();
    fill(c); 
    //perimeter circles
    ellipse(30, 25, w, h);
    ellipse(30, 75, w, h);
    ellipse(30, 125, w, h);
    ellipse(30, 175, w, h);
    ellipse(30, 225, w, h);
    ellipse(30, 275, w, h);
    ellipse(30, 325, w, h);
    ellipse(30, 375, w, h);
    ellipse(30, 425, w, h);
    ellipse(138, 25, w, h);
    ellipse(246, 25, w, h);
    ellipse(354, 25, w, h);
    ellipse(462, 25, w, h);
    ellipse(570, 25, w, h);
    ellipse(570, 75, w, h);
    ellipse(570, 125, w, h);
    ellipse(570, 175, w, h);
    ellipse(570, 225, w, h);
    ellipse(570, 275, w, h);
    ellipse(570, 325, w, h);
    ellipse(570, 375, w, h);
    ellipse(570, 425, w, h);
    ellipse(138, 425, w, h);
    ellipse(246, 425, w, h);
    ellipse(354, 425, w, h);
    ellipse(462, 425, w, h);

	//lots of layered rectangles
	push();
	translate(300, 225);
	rotate(radians(mouseX));
	rectMode(CENTER);
	fill(214, 33, 235, mouseX/2); //purple
	rect(0, 0, mouseX, mouseX);
	fill(48, 167, 246, mouseX/2); //light blue
	rect(0, 0, (mouseX-20), (mouseX-20));
	fill(33, 236, 141, mouseX/2); //light green
	rect(0, 0, (mouseX-40), (mouseX-40));
	fill(236, 33, 101, mouseX/2); //hot pink
	rect(0, 0, (mouseX-60), (mouseX-60));
	fill(236, 128, 33, mouseX/2); //orange
	rect(0, 0, (mouseX-80), (mouseX-80));
	fill(229, 236, 33, mouseX/2); //yellow
	rect(0, 0, (mouseX-100), (mouseX-100));
    fill(214, 33, 235, mouseX/2); //purple (start repeat)
	rect(0, 0, (mouseX-120), (mouseX-120));
	fill(48, 167, 246, mouseX/2); //light blue
	rect(0, 0, (mouseX-140), (mouseX-140));
	fill(33, 236, 141, mouseX/2); //light green
	rect(0, 0, (mouseX-160), (mouseX-160));
	fill(236, 33, 101, mouseX/2); //hot pink
	rect(0, 0, (mouseX-180), (mouseX-180));
	fill(236, 128, 33, mouseX/2); //orange
	rect(0, 0, (mouseX-200), (mouseX-200));
	fill(229, 236, 33, mouseX/2); //yellow
	rect(0, 0, (mouseX-220), (mouseX-220));
	fill(214, 33, 235, mouseX/2); //purple (round 3)
	rect(0, 0, (mouseX-240), (mouseX-240));
	fill(48, 167, 246, mouseX/2); //light blue
	rect(0, 0, (mouseX-260), (mouseX-260));
	fill(33, 236, 141, mouseX/2); //light green
	rect(0, 0, (mouseX-280), (mouseX-280));
	fill(236, 33, 101, mouseX/2); //hot pink
	rect(0, 0, (mouseX-300), (mouseX-300));
	fill(236, 128, 33, mouseX/2); //orange
	rect(0, 0, (mouseX-320), (mouseX-320));
	fill(229, 236, 33, mouseX/2); //yellow
	rect(0, 0, (mouseX-340), (mouseX-340)); 
	fill(214, 33, 235, mouseX/2); //purple (round 4)
	rect(0, 0, (mouseX-360), (mouseX-360));
	fill(48, 167, 246, mouseX/2); //light blue
	rect(0, 0, (mouseX-380), (mouseX-380));
	fill(33, 236, 141, mouseX/2); //light green
	rect(0, 0, (mouseX-400), (mouseX-400));
	fill((236-(mouseX/2)), 33, 101, mouseX/2); //color will change on a scale between hot pink and dark blue
	rect(0, 0, (mouseX-420), (mouseX-420));
	pop();

    //curves
	noFill();
	stroke(255);
	strokeWeight(3);
	bezier(0, 0, 200, mouseY, 400, mouseY, 600, 0);
	bezier(0, 0, 200, (mouseY - 20), 400, (mouseY - 20), 600, 0);
	bezier(0, 0, 200, (mouseY - 40), 400, (mouseY - 40), 600, 0);
	bezier(0, 0, 200, (mouseY - 60), 400, (mouseY - 60), 600, 0);
	bezier(0, 0, 200, (mouseY - 80), 400, (mouseY - 80), 600, 0);
	bezier(0, 450, 200, (450 - mouseY), 400, (450 - mouseY), 600, 450);
    bezier(0, 450, 200, (470 - mouseY), 400, (470 - mouseY), 600, 450);
    bezier(0, 450, 200, (490 - mouseY), 400, (490 - mouseY), 600, 450);
    bezier(0, 450, 200, (510 - mouseY), 400, (510 - mouseY), 600, 450);
    bezier(0, 450, 200, (530 - mouseY), 400, (530 - mouseY), 600, 450);

}

I made this to experiment with different shapes, colors, and shapes. My original idea had a circle in the center instead of the rectangle, but after writing it, I realized that you couldn’t tell that the circle was rotating. I tried adding some lines across the circle to get the effect, but then I tried changing the shape and I liked that a lot more. I was also still able to include ellipses along the perimeter of the canvas. For the colors, I used a color reference website and started layering colors that I liked. Once I settled on the ones that I would use, I experimented with the order and the fade.

LO-03

Bearth & Deplazes Architects designed a building for a winery that was built using a robotic production method that a team developd for this purpose. The technology helps to lay 20,000 bricks at exact measurments for both practical and design purposes. From a practical standpoint, the building allows for a very specific amount of natural light and airflow permeation, considering that a large room in the building is used for fermenation, but that there is also a terrace at the top of the building for wine tastings and social events. The architects are also able to utilize this design precision for their artistic senses as well. They program the bricks to be rotated in a way that looks like grapes. The vertical concrete structural pillars look like a basket, so the artists say that the side of the building is intended to replicate a basket of grapes.
I selected this work because I like how the building combines art and practicality: the winey could have built any box-shaped building for their fermentation room, but they chose something a lot more interesting and visually appealing.

A winery in Switerland; Bearth & Deplazes Architects and Gramazio & Kohler (2006)

Generative Web by Dr. Woohoo

I have enjoyed looking at Dr. Woohoo’s “Generative Web.” piece, which they created while exploring creating art with HTML5 + JavaScript painting Engine. I picked this piece because I really like the color gradient, as well as the design on the lefthand side. I found out from reading the blog post for this piece that the color gradient was selected through a program that Dr. Woohoo wrote that sorts colors based on a number of factors, such as popularity, shade, and brightness. I was inspired by this because I like experimenting with colors and I find it very interesting that someone was able to write a program that sorts colors in this way.
It appears that there were multiple algoithms that generated this work, as the artist wrote different code for the colors, brush, and user interface graphics. The artist appears to have been able to show their creative sense through these algoithms because they wrote and created all of them. They set minimums, maximums, and other parameters that they selected, allowing them creative say in some aspects of the work, while surrending certain controls to chance.

“Generative Art” by Dr. Woohoo

Project 02 – Variable Face

I made this out of curiosity: I wondered what certain aspects of the face would look like with different parameters, and messed around with them until I got this. The ears were the most interesting part to work on; I enjoyed working the variables and trying to get them go move with the face shape

sketch

//Diana McLaughlin, dmclaugh, Section A

var earWidth = 40
var earHeight = 60
var faceWidth = 300
var faceHeight = 350
var eyeHeight =35
var eyeWidth = 35
var pupil = 15
var browlx = 242
var browy =175 
var browlx2 = 277
var browy2 = 180
var browrx = 367
var browrx2 = 402
var mouthWidth = 90
var mouthHeight = 30
var nose =35

function setup() {
    createCanvas(640, 480);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
	background(0, 0, 255);
    fill(0, 200, 0);
    ellipse((width/2 - faceWidth/2), (height/2), earWidth, earHeight); //left ear
    ellipse((width/2 + faceWidth/2), (height/2), earWidth, earHeight); //right ear
    ellipse((width/2), (height/2), faceWidth, faceHeight); //head
    fill(255);
    ellipse((width/2 - 60), (height/2 - 30), eyeHeight, eyeWidth);
    ellipse((width/2 + 60), (height/2 - 30), eyeHeight, eyeWidth);
    fill(1);
    circle((width/2 - 60), (height/2 - 30), pupil);
    circle((width/2 + 60), (height/2 - 30), pupil); //eyes
    line(browlx, browy, browlx2, browy2);
    line(browrx, browy2, browrx2, browy); //eyebrows
    fill(255, 0, 0);
    ellipse((width/2), (height*.67), mouthWidth, mouthHeight); //mouth
    fill(200, 0, 150);
    circle((width/2), (height/2), nose); //nose
}

function mousePressed() {
	earWidth = random(25, 80);
	earHeight = random(25, 100);
	faceWidth = random(200, 450);
	faceHeight = random(200, 450);
	eyeHight = random(20, 55);
	eyeWidth = random(20, 55);
	pupil = random(5, 25);
	browy = random(165, 185);
	browy2 = random(165, 185);
	mouthWidth = random(50, 110);
	mouthHeight = random(20, 45);
	nose = random(20, 40);


}