Reading/Viewing: Loops as Visualizations


What really interested me in Lena’s presentation was the music illustration to explain repetition and looping. It was describing how we begin to repeat song lyrics or melodies because we are exposed to it so many times. Our brains then continue repeating the lyrics so that we can recall the next few words. Elements of a song such as a melody, rhythm, beat, and pitch helps us to remember the lyrics. These musical loops harness the power to teach. Loops have power.


Minnie’s Wallpaper


highRes code

This is a geometric wallpaper. To be honest, I was getting quite frustrated and confused when making a different wallpaper before. After starting over 5 times, I decided to do something simple that would help me understand how coding works. This wallpaper is not the greatest. It’s not the most exciting or rememberable. However, I had to look at the assignment from a simpler perspective.


First I created two simple shapes, rect() and circle(). I wrote down exactly what functions would be needed so I could work with written code instead of imagination. Then I created a for()loop. I used variables i and j for the x and y coordinates.  I added a wider additive  (i+60) than the width of the original square (width was 50) so that there would be limited overlapping.  From here I could make any necessary changes with the random function for the width and height of the rect and circle. The next step was color. This took the longest time because I had different values for each group of shapes. I used a color picker to choose specifically which range of colors I wanted. Then when I wanted a more random placement of the second set of circles, I tinkered with the code and used random() again.

From the suggestions, I was able to implement a few.

  • Rhythm
  • Scale: I used variable and the random tool to produce shapes at different sizes.
  • Background, middleground, foreground: I would say the three shapes play around with this concept of layering.
  • Infrequent features: toward the end of the code, I decided I wanted to move some shapes around to a random location. Now that I had a better understanding of how variables work, I tweaked the x coordinate of the second set of circles so that it was still in relation to the variable I. I was surprisingly glad to see that it worked.
  • Color: I played around with variables to define a color range. It hurt my brain a little to try to understand it, but I think the commenting in the code helped me.  I was going for a muted color palette and it seems to have worked somewhat well.
  • Randomness: the randomness is specifically in the sizing, color, and placement.


This is a sketch based off an idea I had.  I wanted the square and circle to have the same origin/center point so I drew what I knew had to occur first. This helped me understand what the code might produce.  I knew that the distance between each center point had to be a fixed number. This would become a variable I use in the code. An important function I use is rectMode(CENTER), which we learned and it was very useful. I had to learn what noLoop() meant so that it wouldn’t keep looping each time I pressed start.


Rune Madsen, Color Models and Color Spaces

I learned from this article that the CIEXYZ color space model displays the color range of many other modern color spaces. If the color space of whatever screen you are using has a different range to the intended color space, then some colors might not be visible. The RGB, HSL, HSV color spaces are all in the range of the sRGB color space. In p5js, I learned that color mode ranges can be changed as well. This means I can choose a number based on a different scale than the original model has.

Tyler Hobbs, Color in Generative Art

I like that Hobbs challenges the reader to discover their own knack for generating color palettes. The intro paragraph spoke directly to me because my wallpaper code became difficult when deciding how to randomize the colors without producing a bunch of palettes that just didn’t work together. I learned about sorting colors based on clustering, shapes, tones, probability, and more. He says that good color is “about placing them strategically,” which I hope to learn more about and use to expand my future artwork.


Response to Katie Compton’s 10,000 Bowls of Oatmeal Problem:

Oatmeal can often be regarded as a  plain and uninteresting meal. For certain people, including me, it is one of my favorite breakfast options. The greatest property of oatmeal is its diversity and ability to mimic your favorite desserts. There is always one distinct element that makes or breaks the oatmeal. For me, it is a creamy flavor. Katie Compton uses an analogy to oatmeal to describe the issue with neglecting a key element to hook the viewer. In the visual sense, each oat could be generated differently every time, but without the ability to perceive the uniqueness of each bowl, the issue rises about whether viewers will truly be able to differentiate each generation.  Oatmeal can have many different flavor profiles and combinations, but ultimately, it can become boring if there is no key flavor or element.  Katie Compton pushes the question of how artists can produce work that can be perceptually unique.



Minnie’s Valentines

In my valentine code, I generated a pattern of hearts from the original one I made. For this, I had to copy and paste my function rather than creating a new one. I’m still a little unsure how I did this, but it worked and all it took was two buttons. The generative aspect is the color. I had to look up how to create a function that would change the red, green, and blue values at random. I incorporated this into the background and also the heart fill command. Each frame, at a frame rate of 2, produces a different background color and heart color in reference to each other.

Three Examples:

Process photographs/sketches:





Zach Lieberman calls this generative artwork  ‘simple’.  I was drawn to this specific artwork because it related to my instructional drawing with the ABC’s. I think the instructions I gave, could be written in code to produce the same image I created. In addition, it would be interesting to apply this to my interest in graphic design.