Trying to get the curve was pretty difficult. The website had a lot of equations on it and I picked through them to get the information I needed. Once I got the curve I wanted, the issue rose of how to implement it in the code. After experimenting for a bit and looking at the code given on the assignment instructions for reference, I eventually figured it out. After getting the curve to work, I changed some values so that it changed along with the mouse, making it interactive. I also added and changed other elements to make the image prettier, such as adding colors and flowers.
var num_points = 100;//number of points being drawn
function setup() {
createCanvas(480, 480);
frameRate(25);
}
function draw() {
var hW = width / 2;//half of width
var hH = height / 2;//half of height
background("pink");
for(var i = 0; i < 3; i++){//draws rows of elements
for(var g = 0; g < 3; g++){//drawns columns of elements
ellipse((width / 2) * i,(height / 2) * g, (mouseX / 4) * 1,
(mouseX / 4) * 1);//circles being drawn
}
}
//circles
noStroke();
fill(255, 232, 232);
ellipse(120,120, 10,10);//upper left
ellipse(360,120, 10,10);//upper right
ellipse(120,360, 10,10);//lower left
ellipse(360,360, 10,10);//lower right
//flowers
fill(255, 69, 69);
ellipse(120,120, 5,15);//upper left
ellipse(360,120, 5,15);//upper right
ellipse(120,360, 5,15);//lower left
ellipse(360,360, 5,15);//lower right
fill(255, 117, 117);
ellipse(120,120, 15,5);//upper left
ellipse(360,120, 15,5);//upper right
ellipse(120,360, 15,5);//lower left
ellipse(360,360, 15,5);//lower right
fill('red');//makes circles red
stroke(0);//makes everything outlined
//draw curve (Astroid)
push();
translate(width / 2, height / 2);//(240,240)
drawAstroid();
pop();
}
function drawAstroid() {//function that draws curve
var x;//calls x
var y;//calls y
var vx = mouseX / 5.0;//value of mouseX divided by 5
fill(255, 200, 200);//pink
beginShape();//makes it so that the lines don't stay after being drawn
//(there isn't a bunch of overlapping blackness)
for (var i = 0; i < num_points; i++) {//increments elements from 0 to 100
var t = map(i, 0, num_points, 0, TWO_PI);//runs curve from 0 to 2 pi
x = vx * pow(cos(t * vx),3);//formula for x values
y = vx * pow(sin(t * vx),3);//formula for y values
vertex(x, y);
}
endShape(CLOSE);//ends shape
}
Herald Harbinger is a piece created by Jer Thorp in 2018. The piece is a number of columns made up of bars of screens. These screens visualize both the human activity that occurs outside the plaza (ie: movements of people and of vehicles) and the real-time activity of the Bow Glacier located in the Canadian Rockies, and the glacier activity is made audible outside the plaza as well. These visualized data feeds are supposed to contrast with and show the relationship between each other (human activity vs. natural activity).
I admire how much effort is put into the project to get it to work. Not only did they have to go all the way to an iceberg to get the sounds, but instead of just getting a recording and leaving, they decided to set up their equipment so that the sound is collected in real time. I also like the idea of humans vs. nature. The way Thorp used moving lights to portray this relationship was interesting, and resulted in a pretty piece. I like their decision to play the sounds of the glacier outside the building. Since it’s an urban area, there isn’t much of a chance for interaction with nature, especially nature of this type, making the choice much more impactful and interesting.
I don’t know much about the algorithms that generated the work, but I assume it’s relatively complicated. The algorithms would need to be able to convert the information they are receiving from the two very separate areas into lights to be portrayed on the screens. I’m not sure if specific sounds got specific positions and/or colors on the screens, or whether it was all random, but this would have to have been written in the algorithms as well. This conversion would also have to be done in real time.
Thorp’s work revolves around data, and he is one of the world’s most well-known data artists. Herald Harbinger uses data collected from the equipment near the glacier and the urban area outside the plaza the piece is in to create the piece itself. The data is what is shown interacting on the screens.
Video demonstrating the art piece Herald Harbinger. It shows the piece in action, lights changing in correspondence to the changes in the sound that are being played during the video. It also shows outside the building where the sounds of the glacier is being played and where the sounds of human life are being taken from.
Equipment used to gather the sound data from the Bow Glacier in the Canadian Rockies. Pictured is a number of crates with wires and other equipment inside, along with a stand holding up pannels.
Because of the time of year, I decided to make mine about Halloween. I based my design on the Charlie Brown Halloween special “It’s The Great Pumpkin, Charlie Brown”. I looked up a bunch of photos from this special and started taking what I liked from them and mixing them into my sketch. I had my sketch be of the pumpkin patch where the kids would wait for the Great Pumpkin, and would have the sun and moon tell what time of day it was. I also decided to have the sky change color in response to these. I used if statements and the hour() variable in order to accomplish this. I then went about creating the patch, using for loops to create lots of leaves and also the lines dividing a fence. I individually created each pumpkin in the patch, making the main one the kids are behind the largest and bumpiest.
The work is called Schotter (Gravel Stones) by Georg Nees, created in 1966. It is a vertical piece with a slightly tilted rectangle made of little clear squares that slowly separates and comes apart as the viewer looks further down it. It was meant to show the effects of change and relationship between order and disorder.
I really like the simplicity of the piece. It’s hard to explain why, I just like how Nees was able to do what he did with so little. I also like how despite the simplicity, he was able to still convey his message about order developing into disorder and vice versa (depending how the viewer looks at it). A lot of times, art this simple, if it has any meaning at all, tends to be very obscure, leaving it all up to the viewer. Here, the piece is still simple and leaves some interpretation, but there is still pretty clear intention and meaning behind it.
According to Media Art Net, the piece was produced by the programming language ALGOL, and was created by random generators. It was made by “invoking the SERIE procedure” (which controls the composition process), with the “non-parametric procedure QUAD”. QUAD is located in lines four through 15 of the generator and generates the squares with constant lengths and random locations along with varying angles. The position of the squares at certain points are influenced by random generators, such as J1, and the angles by J2. Counter index 1, invoked by each QUAD call, controls the “successively increasing variation between the relative coordinates P and Q, and the angle position PSI of a given square…” So essentially, Nees had influence over his work, creating an outline for what it would look like, but the end result was left up to the pseudo-random numbers.
Georg Nees is considered a founder of computer art and graphics. He seemed to experiment with what he was given, using languages like ALGOL, made for scientific computers, to create his works. He experimented quite a bit with random numbers. A lot of his work seemed to involve basic clear shapes and/or lines, along with a little pseudo-randomness. This can all be seen in Schotter, since the shapes being used are simple squares, and there is a bit of randomness to things like their placement and angles.
var dx = (500/4);//width divided by # of lilies per row
var dy = (500/4);//height divided by # of lilies per column
function setup(){
createCanvas(500,500);
noLoop();
}
function draw() {
//background(66, 85, 255);
background(35, 57, 252);//blue
noStroke();
//for loops
for(var w = 0; w < 4; w++){ //draws horizontal rows of lilies
for(var h = 0; h < 4; h++){ //draws vertical columns of lilies
//lily pads
fill(101, 224, 150);//green
arc((dx / 2) * (2 * w + 1),(dy / 2) * (2 * h + 1), dx / 1.3, dy / 1.3,
-0.4, 1.4 * PI + QUARTER_PI, PIE);//main lily pads (largest)
fill(58, 201, 168);//bluer green
arc((dx / 2) * (2 * w + 1) + 30,(dy / 2) * (2 * h + 1) + 55, dx / 5, dy / 5,
-0.3, 1.4 * PI + QUARTER_PI, PIE);//lily pads 1 (largest of the side ones)
fill(58, 201, 191);//bluer bluer green
arc((dx / 2) * (2 * w + 1) + 48,(dy / 2) * (2 * h + 1) + 35, dx / 8, dy / 8,
-0.3, 1.4 * PI + QUARTER_PI, PIE);//lily pads 2
fill(58, 196, 201);//light blue
arc((dx / 2) * (2 * w + 1) + 56,(dy / 2) * (2 * h + 1) + 17, dx / 10, dy / 10,
-0.3, 1.4 * PI + QUARTER_PI, PIE);//lily pads 3
fill(58, 175, 201);//blue
arc((dx / 2) * (2 * w + 1) + 57,(dy / 2) * (2 * h + 1) + 0, dx / 12, dy / 12,
-0.3, 1.4 * PI + QUARTER_PI, PIE);//lily pads 4 (smallest)
//lily pad flowers (pink)
fill(255, 199, 217);
ellipse((dx / 2) * (2 * w + 1) + 30,
(dy / 2) * (2 * h + 1) + 55, 25,10);//horizontal lily pads 1
ellipse((dx / 2) * (2 * w + 1) + 30,
(dy / 2) * (2 * h + 1) + 55, 10,25);//vertical lily pads 1
fill(255, 140, 177);
ellipse((dx / 2) * (2 * w + 1) + 48,
(dy / 2) * (2 * h + 1) + 35, 15,7);//horizontal lily pads 2
ellipse((dx / 2) * (2 * w + 1) + 48,
(dy / 2) * (2 * h + 1) + 35, 7,15);//vertical lily pads 2
fill(255, 105, 153);
ellipse((dx / 2) * (2 * w + 1) + 56,
(dy / 2) * (2 * h + 1) + 17, 10,5);//horizontal lily pads 3
ellipse((dx / 2) * (2 * w + 1) + 56,
(dy / 2) * (2 * h + 1) + 17, 5,10);//vertical lily pads 3
fill(255, 66, 127);
ellipse((dx / 2) * (2 * w + 1) + 57,
(dy / 2) * (2 * h + 1) + 0, 8,4);//horizontal lily pads 4
ellipse((dx / 2) * (2 * w + 1) + 57,
(dy / 2) * (2 * h + 1) + 0, 4,8);//vertical lily pads 4
//lily pad flower (white)
fill(255);
ellipse((dx / 2) * (2 * w + 1),
(dy / 2) * (2 * h + 1), 28,13);//horizontal lily pads 1
ellipse((dx / 2) * (2 * w + 1),
(dy / 2) * (2 * h + 1), 13,28);//vertical lily pads 1
}
}
}
I decided to make my designs plant based and chose ferns as one of the plants. I then realized those would be complicated, so I chose lily pads and flowers instead. I decided to vary the sizes of my lilies to make them prettier and give my design variation. I then varied the colors as well. After, I added flowers and also varied the colors and sizes of them. I changed the colors throughout to make them complement each other more and make the piece as a whole more aesthetically pleasing. For example, my background was originally very dark brown.
The piece I chose to discuss wasn’t really given a name, but was described as procedural mesh splitting using tyFlow, created in 2019 by Tyson Ibele. tyFlow being a particle simulation tool used for 3ds Max and created by Ibele (instagram username _tyflow_). The work is a video showing a series of limbs and a face. These are slowly torn apart to reveal the insides, which are a gold substance that acts like a balloon.
I really enjoyed the work for the imagery. It starts off with what looks like a pretty realistic limb with a long gold cut on it. But then expectations are subverted as the limb pulls apart into two. This goes on throughout the video, with the only things really changing being the parts being ripped and the angle of the shot. So I guess what I admire about it is the subversion of expectations and what it’s caused by. Ibele takes something familiar like body parts and then makes them act very differently from how they’re supposed to act. I like how this kind of idea can be applied to so many different things and be taken in so many different directions. It allows interesting imagery. No one would be able to see an arm or face act like this anywhere else. The way the gold parts reform really caught my as well eye since the result was stuff like a leg with three feet on the end, again, something that couldn’t really be see in real life.
I suppose the algorithms that generated/rendered the work must have been pretty complicated. The imagery in the video was very detailed, and the “jiggling” physics of the body parts seemed realistic, with a lot of different movements having to be generated.
The creator Ibele works a lot with 3D graphics, and his artistic sensibilities can be seen in the similarities between these works. Looking at his his pieces, it seems many of them kind of deal with “subverting expectations”. What I mean by this is that he’ll show something like a person or objects like Legos, and then he’ll make them act in unexpected ways. For example, he’ll have the person be made of ribbons, and as they walk they’ll unravel and fall apart. Or he’ll show water being poured or a small explosion taking place, but they will be made of Legos.
My process started with trying to figure out how to get the strings to “curve” (or have the illusion to curve). After drawing a bunch of hatch marks didn’t work, I studied the photos on the blog of the 7th grade teacher until I understood the pattern. After a bit of experimentation, I was able to get the formula for my for loop. Then I just kept modifying it and adding colors till I was satisfied.
var lx = 20;//width divided by 20
var ly = 15;//height divided by 20
function setup(){
createCanvas(400,300);
}
function draw() {
background(255, 150, 213);
//red heart
fill("red");
noStroke();
ellipse(width/2 - 23, height/2, 50,50);//left heart bulb
ellipse(width/2 + 23, height/2, 50,50);//right heart bulb
triangle((width / 2) - 55,height / 2 + 10, width / 2,(height / 2)
+ 60, (width / 2) + 55,height / 2 + 10);//base of heart
//makes curve on top right
for(var i = 0; i < lx; i += 1){//sets up increment and # of elements
stroke(247, 25, 25);
line(width - lx * i,0, width,height - ly * i);//draws lines
}
//makes curve on top left
for(var j = 0; j < lx; j += 1){//sets up increment and # of elements
stroke(250, 90, 96);
line(0 + lx * j,0, 0,height - ly * j);//draws lines
}
//makes curve on bottom left
for(var t = 0; t < lx; t += 1){//sets up increment and # of elements
stroke(255, 150, 175);
line(width - lx * t,height, 0,height - ly * t);//draws lines
}
//makes second curve on bottom right
for(var z = 0; z < lx; z += 1){//sets up increment and # of elements
stroke(255, 201, 201);
line(height - lx * z,height, 0,height - ly * z);//draws lines
}
//makes second curve on top right
for(var z = 0; z < lx; z += 1){//sets up increment and # of elements
stroke(255, 201, 201);
line(height - lx * z,0, width,height - ly * z);//draws lines
}
}
The project I chose to write about is Weather Thingy by Adrien Kaeser. It was made in 2018 with help from Cyril Diagne, Gaël Hugo, Christophe Guignard, Laura Perrenoud, Tibor Udvari, Pietro Alberti, and Marc Dubois. The project is a sound controller that uses the weather to make music. The device converts things like rain, wind, and sunlight into midi data which instruments can then interpret. It gets this data with its rain gauge, brightness sensor, and wind anemometer and vane. The other part of the piece is a controller that’s responsible for the transforming of the weather data.
I really like the idea of incorporating natural events into manmade activities. The device allows for there to be input from the musician but also allows for a significant amount of randomness from the weather. I like the idea of mixing natural and manmade things because they are essentially opposite things, so having them brought together to create something pretty is a nice idea to me. The random aspect to some of the music is interesting as well. Leaving some stuff up to chance is exciting because no one can really guess what the end product will sound like.
I don’t know much about the algorithms that generated the work. However, I assume they are moderately complicated. Kaeser would have had to assign certain notes and other musical aspects to certain wind speeds, direction, and brightness.
The artist seems to have a minimalist aesthetic. I assume this because the final form is very simple yet effective. The video demonstrating is also minimalist looking (although I don’t know how much creative power he had over that). If the music he creates is counted as part of the final product, then it also shows his artistic sensibilities. He is able to play his own notes on the keyboard that he came up with, with the weather music added to it. Also, the different weather events cause different kinds of sounds, so he obviously imagined those events sounding a certain way and then incorporated that into the product.
My project was pretty tricky to make. Trying to get the ellipses to expand and stop at different points took a while, and I had to settle for them all moving at once, and there was a lot of trial and error. My end result is a Day to Night transition.
The project Wanderers from 2014 is a collaboration between Christoph Bader, Neri Oxman and the Mediated Matter Group. The first part is a video demonstrating a computational growth process they designed. The video shows a series of computational objects that transform in very interesting ways as time goes on. They then used this growth process to create a sort of “clothing”. This clothing looks almost like glass sculptures except they seem almost organic and are made for wearing.
I enjoy a lot about this project. First off, the pieces look very beautiful. The designs are varied and interesting, and look like glass sculptures found in museums. The experimentation with organic things like intestines gave the pieces a very unique look. Some of them, especially “Otaared”, looked like an exotic plant or creature found creeping along the darker parts of the ocean. The colors were also very aesthetically pleasing, with a tendency towards bright colors and pretty gradients as well. The mix of clear and opaque material also added something nice to the pieces. I admire this because I like art, so seeing how much effort was put into their looks makes me enjoy them even more, especially considering the looks were unnecessary. I say unnecessary because apparently the aim of the pieces was to have organic matter embedded into them in order to help sustain humans. They could have just been for practical use and not look pretty, but the creators still decided to put effort into the artistic side of the project. It’s also smart since it will cause people to want to buy them more. Their goal was very interesting to me. I liked the little descriptions for each of the four pieces, how each one was for a different planet or for the moon, and then how the pieces were made to fit the specific environments of those places. Most clothing doesn’t have a greater purpose like that. The idea of creations where the environment interacts beneficially with humans is also one I think is great. Whenever there is talk about humans and the environment, it always seems negative, like a one versus the other relationship. So the idea of having organic matter like algae live in clothing to help humans breath is a nice change.
I haven’t seen the algorithm that generated the work. However, I do know it was meant to imitate natural growth behavior. I assume it is a pretty advanced algorithm considering the results it created, especially since the results vary greatly in their looks.
The artistic sensibilities of the artist are pretty much all mentioned above in the “what I admire about it” section. Their interest in organic forms can be seen in the final products. Instead of following the colors of these organic forms, they brightened up the pieces with varied color use and use of gradient.
One of the pieces from “Wanderer” called “Otaared”
![[OLD FALL 2019] 15-104 • Introduction to Computing for Creative Practice](https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2020/08/stop-banner.png)
