The lecture I watched was given by Darius Kazemi. Darius is a video game developer, computer programmer, and generative artist. He graduated from Worcester Polytechnic Institute. He hoped to get a master degree, but eventually dropped out to work on independent projects. Darius worked on generative art created from several websites such as twitter and google maps. His most popular project was a bot on Amazon which bought random books, CDs, and movies each month. I admired his work because his programs took small and inconsequential things and put them together to make something bigger. His presentation style was very interesting. One of the main points that he brought up that generative art would be boring without the human input. His best example of this was a program that would give the definition of random words. Darius realized that there was nothing interesting with this whatsoever. He decided that he would turn it into a joke generator. I also like that he gave examples outside his own creation. The best example he gave was a twitter account intended to mimic a teenage girl. It was actually, so good that there was a boy who spent three hours hitting on it.
Sources:
“Darius Kazemi.” Wikipedia, Wikimedia Foundation, 20 Aug. 2017, en.wikipedia.org/wiki/Darius_Kazemi.
To be completely honest, it was somewhat hard for me to find interest in this looking outward report. This probably isn’t what you wanted me to write about, but I simply don’t find it very interesting. However, one program that was able to engage me was Fathom by Ben Fry. In particular, I enjoyed looking at the No Ceilings video which showcased statistics on how women’s rights have progressed over the years. They had statistics on things such as teenage pregnancy, child brides, and female entrepreneurship. I also found the Connected China video to be somewhat interesting. The website offered a look into the inner workings of the Chinese government, and a large amount of information on their leaders. As for the algorithms they used, likely had to create a lot of computer graphics. In addition, it seems like they had to program a large amount of mouse interactions. These helped the website feel more alive, as well as make for an incredibly intuitive experience.
// Matthew Erlebacher
// Section B
// merlebac@andrew.cmu.edu
// Project-07
function setup() {
createCanvas(480, 480);
}
function draw() {
background(125);
var angR = map(mouseX, 0, 6.28318, 0, width);
// Controls the rotation of the points
var stem = map(mouseY, 0, 10, 0, height);
// Determines the amount of stems
push();
translate(width/2, height/2);
beginShape();
for (var ang = 0; ang <= 6.28318; ang += 0.001) {
var radius = 200 * cos(stem * ang);
// Sets the radius
var flowerX = radius * cos(ang);
var flowerY = radius * sin(ang);
// I found the equation from Dan Shiffman and decided to crank it up to 11
// https://www.youtube.com/watch?v=f5QBExMNB1I
strokeWeight(5);
rotate(angR);
point(flowerX, flowerY);
// This creates points which create a flower pattern I used points instead of vertex because vertex looked unappealing
}
endShape(CLOSE);
pop();
}
I am really glad with how this project turned out. At first I was pretty overwhelmed by the code and equations. However, after I watched Dan Shiffman’s video “Coding Challenge #55: Mathematical Rose Patterns” I had a much better understanding of the assignment. I decided that my two aspects of variability would be the amount of stems in the flower, and the rotation. I started out using vertex, but decided to change it to point since it had a much smoother look. I also wanted to make it so that it could rotate as much as possible, and have a massive amount of stems. I opted out of using color because I thought that it gave the image a more simplistic look.
The piece of music that I chose for this looking outward was very soothing. It goes really well with the randomly generated backgrounds. The artist likely programmed the backgrounds and the music to complement each other. This is clearly demonstrated in the final product, which could be described as a soothing combination of relaxing music and striking imagery. The video was pre-recorded, so it unfortunately doesn’t show a large amount of randomness. One criticism that I have is that the piece goes on for a bit too long (for my taste). It isn’t something that I would listen to for the sake of listening to, but I might play it while reading or before I go to bed. In the end, while the piece may have its flaws it overall beautiful on an audio and visual level.
// Matthew Erlebacher
// Section B
// merlebac@andrew.cmu.edu
// Project-06
function setup() {
createCanvas(480, 480);
}
function draw() {
background(125);
var H = hour();
var M = minute();
var S = second();
// Sets up variables for time
var mappedH = map(H, 0, 23, 20, 240);
var mappedM = map(M, 0, 59, 0, width);
var mappedS = map(S, 0, 59, 0, width / 2);
// Maps time variables to different values
fill(255);
ellipse(width / 2, height / 2, width, height);
// Creates giant circle in the background
fill(75);
rect(width / 2 - 5, 0, 10, mappedS);
// Creates rectangle that extends downward length is connected to seconds
fill(0);
rect(0, height - 20, mappedM, 20);
// Creates rectangle at the bottom extends rightward lenght is connected to minutes
fill(0);
ellipse(width / 2, mappedS, mappedH, mappedH);
// Creates circle in the middle of canvas radius connected to hours
fill(125);
text(H, width / 2, 3 * height / 4 + 40);
text(M, width / 2, 3 * height / 4 + 60);
text(S, width / 2, 3 * height / 4 + 80);
// Creates texts that list time
}
The end design was definitely very abstract. The design was a circle that lowers as each second passes. The radius of the circle increases by the hour, and there is a bar at the bottom that increases by the minute. I also included the time in text since I thought it might be unclear as to what everything meant. Originally the circle was supposed to come from the bottom, but I realized that it would be easier to implement, and it also looked better in the end. While I would have liked to make a more interesting design, I didn’t have the time since I was already struggling with arrays, and the time variables. Despite this, I enjoyed what I came up with, and its overall simplicity.
One piece of 3D art that I found to be very interesting was “I am no Chuck Close” by Patrick Gunderson. I find the piece to be strangely mesmerizing. It is obvious that it is supposed to be a face, but the disjointed appearance of the piece gives it a feeling of unease. A big part of this is how the eyes are obscured. I also feel that the green background gives me the impression that the face is lost in time. This is further enforced by the random crescent moon shapes put around the canvas. The algorithms used to create this were likely very complex. I assume he used a large amount of loop variables to create lines, as well as geometric shapes. It is also possible that he worked on this in a modeling program such as maya or blender.
Gunderson, Patrick. “I Am No Chuck Close.” Flickr, Yahoo!, 11 Mar. 2009, www.flickr.com/photos/gunderson/3345620341/in/photostream/.
// Matthew Erlebacher
// Section B
// merlebac@andrew.cmu.edu
// Project-05
function setup() {
createCanvas(450, 450);
noStroke();
}
function draw() {
background(0);
for (var centerX1 = 25; centerX1 < width; centerX1 += 100) {
for (var centerY1 = 25; centerY1 < height; centerY1 += 100) {
// Creates pattern for upper left area
fill(0, 0, 255);
ellipse(centerX1, centerY1, 40, 40);
// Creates blue circle
fill(255, 0, 0);
rectMode(CENTER);
rect(centerX1, centerY1, 22.5, 22.5);
// Creates red square
fill(0, 255, 0);
push();
translate(centerX1, centerY1);
rotate(radians(45));
rectMode(CENTER);
rect(0, 0, 20, 20);
pop();
// Creates green rotated square
fill(0);
ellipse(centerX1, centerY1, 10, 10);
// Creates black circle
}
}
for (var centerX2 = 75; centerX2 < width; centerX2 += 100) {
for (var centerY2 = 75; centerY2 < height; centerY2 += 100) {
// Creates pattern for lower right area
fill(0, 0, 255);
ellipse(centerX2, centerY2, 40, 40);
// Creates blue circle
fill(255, 0, 0);
rectMode(CENTER);
rect(centerX2, centerY2, 22.5, 22.5);
// Creates red square
fill(0, 255, 0);
push();
translate(centerX2, centerY2);
rotate(radians(45));
rectMode(CENTER);
rect(0, 0, 20, 20);
pop();
// Creates rotated green sqare
fill(0);
ellipse(centerX2, centerY2, 10, 10);
// Creates black circle
}
}
for (var centerX3 = 75; centerX3 < width; centerX3 += 100) {
for (var centerY3 = 25; centerY3 < height; centerY3 += 100) {
// Creates pattern for upper right area
fill(125);
push();
translate(centerX3, centerY3);
rotate(radians(45));
rectMode(CENTER);
rect(0, 0, 30, 30);
pop();
// Creates rotated gray square
fill(0);
rectMode(CENTER);
rect(centerX3, centerY3, 20, 20);
// Creates black square
fill(255);
ellipse(centerX3, centerY3, 15, 15);
// Creates white circle
}
}
for (var centerX3 = 25; centerX3 < width; centerX3 += 100) {
for (var centerY3 = 75; centerY3 < height; centerY3 += 100) {
// Creates pattern for lower left area
fill(125);
push();
translate(centerX3, centerY3);
rotate(radians(45));
rectMode(CENTER);
rect(0, 0, 30, 30);
pop();
// Creates rotated gray square
fill(0);
rectMode(CENTER);
rect(centerX3, centerY3, 20, 20);
// Creates black square
fill(255);
ellipse(centerX3, centerY3, 15, 15);
// Creates white circle
}
}
noLoop();
}
Sketch
Doing this was a bit tricky for me. I don’t have a very good taste in decoration. In addition, I am bad at coming up with patterns. However, in the end I think that I did alright. I thought it would be interesting to give the background a chess board formation, as I find it to be aesthetically appealing. The coding itself wasn’t very difficult. I only needed to set the coordinates as variables in the for loops, and the rest of the assignment practically did itself. I didn’t have much of a sketching phase, mainly because it just feels more natural for me to start coding right away.
One piece of sound art that I found to be interesting was the Hexome. The device sound beautiful while also looking aesthetically appealing. I think that what sells the look is its hexagonal shape. It is said that hexagons are the shape of nature, (many things in nature come in that for e.g. bee nests and turtle shells) and the shape is used to make this device incredibly attractive. The creator likely encoded each light with specific instructions on how to interact with each other using “if” and “else” statements. I think that the programmer’s creativity was able to manifest in the final project just by how much you can interact with it. The device can even do a small light show making it a highly versatile instrument. It also just looks fun to uses and see how many different combinations of sounds you can come up with.
// Matthew Erlebacher
// Section B
// merlebac@andrew.cmu.edu
// Project-04
function setup() {
createCanvas(400, 300);
background(0);
var verticalY = height
// Creates variable for verticle lines
var horizontalX = width
// Creates variable for horizontal lines
var graphSpace = 25
// Creates space for grid lines
var SpaceX = 10
// Creates spacing between
for (var verticleX = 25; // Gives a variable for the x-coordinate of each line
verticleX <= 375; // Makes the lines stop at the end of the canvas
verticleX += graphSpace /* Increases the x-coordinate of each line */) {
stroke(255);
line(verticleX, 0, verticleX, verticalY);
} // Creates white verticle lines across the canvas
for (var horizontalY = 25; // Gives a variable for the y-coordinate of each line
horizontalY <= 275; // Makes the lines stop at the end of the canvas
horizontalY += graphSpace /* Increases the y-coordinate each line */) {
stroke(255);
line(0, horizontalY, horizontalX, horizontalY)
} // Creates white horizontal lines across the canvas
for (var greenX = 0; // Creates a variable for the green lines
greenX < width / 2; // Sets a limit on the green lines
greenX += SpaceX /* Increases the variable greenX */) {
stroke(0, 255, 0);
line(greenX /* Varies the first point */, height / 2, width / 2,
height / 2 - 10 - greenX /* Makes it so the second point increases and is always over the midpoint */);
} // Creates pattern of green lines
for (var redX = 0; // Creates a variable for red lines
redX < width / 2; // Sets a limit on the red lines
redX += SpaceX /* Increases the variable redX */) {
stroke(255, 0, 0);
line(redX /* Varies the first point */, height / 2, width / 2,
height / 2 + 10 + redX /* Makes it so the second point increases and is always under the midpoint */);
} // Creates pattern of red lines
for (var grayX = 400; // Creates a variable for the gray lines
grayX > width / 2; // Sets a limit on the gray lines
grayX -= SpaceX /* Decreases the variable grayX */) {
stroke(125);
line(grayX /*Varies the first point */, height / 2, width / 2,
height / 2 + 410 - grayX /* Makes it so the second point increases and is always under the midpoint */);
}
for (var blueX = 400; // Creates a variable for the blue lines
blueX > width / 2; // Sets a limit on the blue lines
blueX -= SpaceX /* Decreases the variable blueX */) {
stroke(0, 0, 255);
line(blueX /* Varies the first point */, height / 2, width / 2,
height / 2 - 410 + blueX /* Makes it so the second point increases and is always over the midpoint */);
}
}
When I started this assignment I had no idea what to do for this project. However, after I reviewed the lecture notes and looked at some examples on the internet I eventually figured out what I wanted to do. I decided to have the lines create a diamond formation since it seemed visually appealing. I also decided to include grid lines in the background since it made the lines pop more.
The piece of generative art that I found to be the most interesting was Lustre. I have never been a big fan of fashion but this image struck me. Using a 3D printer to add accessories to a dress is something that I never would have thought of. The algorithms used to create the model were likely set up to create multiple triangular pyramids that were all interconnected. On the whole the piece is mesmerizing to look at and I can’t help but admire how much work went into it.
This was worked on by Carolina Tamayo, Alyssa Hamilton, and Rehan Butt. Unfortunately, the only thing on the piece that I could find was this picture.
![[OLD FALL 2017] 15-104 • Introduction to Computing for Creative Practice](https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2020/08/stop-banner.png)
