Introduction
Semester 1...Creative Coding...a title that struck fear in the hearts of many...well, maybe just me. Prior to CC1, I had one class on coding in 2012. Honestly, I don't remember what program we used, it was certainly not Processing. My teacher at the time was more of a graphic design teacher, not so much a coding teacher. Much like learning math in the 3rd grade from a teacher who was leaving their tenure that year, I didn't learn, well, anything from that class, certainly nothing that stuck. This feeling resurfaced upon hearing we were learning trigonometry. In high school, the class order for math was: Algebra 1, Geometry, Algebra 2, Trig, Calculus. I squeaked by in geometry, and barely passed Algebra 2. This was another subject that even if I had learned it, I would have learned it, as I pointed out, before my classmates were even born (scary thought). The point of all of this is that I was just as intimidated coming in CC2 as I was into CC1.
That being said, as the workshops have gone on, and I have spent some time on my own working on some Processing test runs, I feel a little more confident than last semester. For me, it helps to type out the code from the start, even if I'm copying it letter for letter. I was impressed with myself that I remembered how to not only change frames with a mouse click, but save them, too. It really is the little things.
Research
We ended last semester with Vera Molnar and her squares, so it seemed fitting that we started this one with her, like an old friend easing us back into CC. "Vera Molnár was a Hungarian media artist who lived and worked in Paris, France. Molnár is widely considered to have been a pioneer of the generative art aspect of computer art. She was one of the first women to use computers in her fine art practice" (Wikipedia). Having been born in 1924 and not passing away until 2023, Molnar would have seen every aspect of computers coming to fruition, and would have been old enough to remember all of it as it started happening. To then become one of the forerunners of generative art, and as a woman nonetheless, is incredibly impressive and
inspirational. It wasn't until 1968 that she had access to a computer; prior to that she did writing out the algorithms by hand. "In 1968, Molnár first gained access to a computer in a Sorbonne research lab and taught herself the early programming language Fortran, which allowed her to input endless algorithmic variations into the machine. Using a language of 0s and 1s, she could feed instructions into the computer, which were then outputted to a plotter that produced line drawings with a moving pen. She experimented with repetitions and variations of the letter M – as in Malevich, Mondrian and Molnár – which operates as an abstract sign while also paying homage to her predecessors. Convinced that there is never a single solution to an aesthetic problem, she experiments with serial variations within and across works. She also explores the slippages between order and chaos, deliberately introducing a '1% disorder' to allow for a systematically determined factor of chance to influence her works" (Thaddeus Ropac). The goal in class was to replicate the above piece of her art. The code and result can be seen in the screen shot below.
The next artist we looked at was Georg Nees. He was considered another founder and pioneer of computer generated artwork. "From 1951–85, Nees worked as an industrial mathemetician at Siemens. His academic background in mathematics translated into creating production quality computer programs as early as 1959. During his time at Siemens, they acquired a Zuse Graphomat Z64, and Nees was tasked with figuring out a way to make it useful.
The Z64 was a punched taped controlled automatic drafting table (think plotter), and Nees ended up creating multiple graphic libraries to control the Z64 using the ALGOL language. In these early days, Nees even experimented with randomness to create graphics with the machine." Another interesting fact is that, "Nees was the first generative computer graphic artist to show their work in an exhibition in 1965 at Stuttgart College titled Computer Graphik" (AB 101: Historical Figures in Generative Art — Georg Nees). This was the great grandfather to the Axidraw, it would seem.
Our goal was to recreate the piece seen to the left. Surprisingly, there wasn't a lot of code involved to make this happen. I figured there would be lines and lines of code to get the squares to progressively become more disorderly as they descended, but all it really took was learning about our old friends, push and pop. Below is the code, result, and a handful of examples of varying results.
Another person we looked into during the workshops was Ken Perlin. Perlin developed a type of computer generated imagery called, incidentally, "Perlin noise." He was frustrated by the mechanized look of CGI, so he came up with a code to create smoothed out randomness. "To Ken Perlin for the development of Perlin Noise, a technique used to produce natural appearing textures on computer generated surfaces for motion picture visual effects. The development of Perlin Noise has allowed computer graphics artists to better represent the complexity of natural phenomena in visual effects for the motion picture industry" (Wikipedia: Perlin Noise). So, what's the point of Perlin noise and why does it matter? Well, for starters it gives CGI a more natural appearance, "The primary benefit is its ability to generate seemingly organic patterns with smooth transitions, making computer-generated graphics look more realistic" (Google). Then there is procedural generation, Perlin noise can be used to generate various effects with natural qualities, such as clouds, landscapes, and patterned textures like marble. Perlin noise has a more organic appearance because it produces a naturally ordered (“smooth”) sequence of pseudo-random numbers" (Khan Academy). And finally, there is the application of it, which can be found in places like video games and animations where there are graphics that depict naturally occurring phenomenon such as clouds, water, etc.
Testing...1...2...3...
Lissajous Figure x 3
The next port of call in this journey through Creative Coding 2 was taking different sketches we had done in class and making them my own. I originally looked into expanding on the Vera Molnar, Color Smear, and Bouncing Color Balls we had done in class, but what's life without a little challenge? The Lissajous figures really appealed to me because despite living much of my life in organized chaos, I actually really enjoy the look of symmetry. Celtic knots are some of my favorite things to tattoo because they are essentially organized chaos with symmetrical elements. As seen below, the Lissajous figure is not dissimilar to a celtic knot. Where does the Lissajous figure come from, though? "Lissajous figure, also called Bowditch Curve, pattern produced by the intersection of two sinusoidal curves the axes of which are at right angles to each other. First studied by the American mathematician Nathaniel Bowditch in 1815, the curves were investigated independently by the French mathematician Jules-Antoine Lissajous in 1857–58. Lissajous used a narrow stream of sand pouring from the base of a compound pendulum to produce the curves" (Britannica).
I started with the original sketch we did in class. I screenshotted the code and result from the video recorded during the workshop and kept that as a reference of what the original result and code were. I basically kept the original code the same and just started plugging in random numbers to see what would happen. I ended up with dots instead of lines, which I thought had a neat look to it so I ran with that.
I wanted to build up the singular figure by adding a second one. Upon trying to do this, I ended p with some weird U shape in the middle. I'm not entirely sure how this happened,I feel like it had something to do with the second float in the second figure being 100 as opposed to the second float in the first figure being 200, as that is the only difference. My next step was making all of the floats and the rest of the coding structure the same for the second figure, and just changing the color. I ended up with a Christmas colored set of two figures, which was a good start to what I was going for. For the next figure I made the stroke of the second one smaller and ended up with larger red circles with green dots in the middle.
The next step is where I was impressed with myself. Within the circle function, there is the sin and cos variables, followed by the size of the stroke. I was curious what would happen if I switched the sin and cos within the circle function. The result was the same shape, except flipped on its side. I believe I thrust my fist in the air, very Bender from "Breakfast Club," because I had a breakthrough. It sounds rather silly in retrospect, but considering 6 months ago I was thrilled to have a dot on a screen, this was a milestone success. Now that I had two figures, they needed better colors. For the fill I was using RGB color codes when I remembered that we could use to Color Selector tool to choose Hex colors instead. So I chose, naturally, a purplish/hot pink mix and a teal. The next step was making the second shape bigger to have a bit of variation. And I thought, why stop there? Let's be wild and crazy and add a THIRD figure. This one I decided to make yellow, the biggest of the 3, and set it at the back in the same orientation as the first figure. I really liked the balanced look, complimentary colors, and overall shape of the figure.
I screen recorded the sketch as it drew the figures because I found it so mesmerizing watching the dots chase each other, meet up in spots, and then completely steer clear of each other. It was like watching a dance of sorts.
Mermaid Color Lissajous Figure
Another example we saw in class was another type of Lissajous figure. This one appealed to me because it reminded me of tartan in the way the lines overlapped and created checkered patterns. I started this the same way that I did with the Lissajous x3, by using the original code we wrote in class. Just as an aside, as I mentioned at the start, writing the code letter for letter, even if its copying it exactly, helps me understand what each function does. I ran the original as it was written, and then started by changing the color. I ideally wanted an array of rainbow colors, but ended up with a very red-heavy figure. After meeting with Paul for tutorials, we discovered that this happened because the colors weren't mapped in properly.
I'm going to be real honest here and put my hands up and say I don't fully remember how I ended up with these mermaid-like colors, but I was very happy with that. I also didn't realize that there seems to be a color theme throughout this particular project. For some reason I have always been drawn to what would be called mermaid or peacock colors. I digress.
There really wasn't a lot that needed to be changed in terms of the code itself, but what I did test was the "for (int i = 0; i <40000; i++){". I wasn't entirely confident I knew what this actually did, and I'm still not entirely confident, but what I did discover, is that by increasing the "i<####", the number of lines within the sketch increased. I made contact sheets of the results.
From left to right: <4000,<6000, <8000.
In the end, I chose the <4000. I felt there was a much larger variation between the figures that appeared. I liked the look of the <8000, but it didn't feel varied enough, despite having the most tartan-like look to it.
SinLineLoop
Somewhat in line with the Lissajous figures were the SinLineLoops. I thoroughly enjoyed the organic yet mechanized look to them. As with the other two tests, I started by plugging in the original code. For this one I tried to be a little more adventurous with which which numbers I changed. What I discovered, though is that the figured progressively kept getting more circular the further along I went. Below are the codes I used to test different figures.
Below are the contact sheets, in correspondence with each code above. As you can see, they become more circular, and uglier, as I went along,
After meeting with Paul, we figured out that I was making all the numbers within the code that control the lines the same, which then lead to a circular outcome. Once that was remedied, then it was on to deciding what level of density I wanted for the lines and what color I wanted them to be. I enjoy the random color generation and variations in hue and saturation, so I always seem to lean towards that look. I landed on the mermaid/peacock colors sticking to my inadvertent theme. Something else that Paul taught me was the movie function in Processing. Basically what this does is it takes hundreds, even thousands if you let it do its thing long enough, of still and compile them into a moving visualization. As beautiful as contact sheets are, I feel like for something like this, you don't get the full effect of the true variations that can come from this. So, I ran the code with a handful of numbers and ended up with these 4 videos before landing on my final. I wasn't going to share all 4, but I just find them so beautiful and mesmerizing I couldn't NOT share them.
(Left) This was a test using basically the original example with a tweak to the amount of lines.
(Right) Same for this one, there were less lines.
(Left) No idea what happened here but it yielded an interesting result anyway!
(Right) I almost used this one because I also really enjoy these sunset type colors, but subconsciously I knew it didn't match the aesthetic as the rest of the pieces.
Finals
The heading explains it all. The photos and video below are the final results that I decided to pass in as my project to be assessed, with their accompanying codes. I feel like this module was a real breakthrough for me, in small ways, but sometimes that's all it takes to get a sense of confidence.
Lissajous 3
Lissajous Mermaid Colors
SinLineLoop
Comentários