Tag Archives: art from code

System: Beyond 184

It’s all been leading up to this.

Beyond 184

Let’s have a little urban fantasy. You’re on top of a skyscraper. You look down, and you see the neon world below. It’s beautiful, it’s alive.

And I wanted to capture that.

To build a living place, just pretty neon buildings alone are not enough. After all, the buildings are nothing without the inhabitants. And so, the streets are full of life. They are filled with traffic, with people going around their lives. An entire system that simulates a small world is behind each pair of these headlights.

City in action

When I first found out about this class and interviewed for it, one of the examples of what I considered “Art from Code” was a beautiful video by baku89 that utilized cellular automata. I found it so fascinating that a mathematical model made out of a grid of cells – all using pretty simple rules that determine if a cell will be “filled” or “empty” in the next generation – could produce something so beautiful.

All the pieces ended up falling together in a way that pushed me to explore cellular automata further: this class’ final prompt being “systems”, and the discrete mathematics’ class’ exploration of logic.

Game of Life

As this class progressed, I found myself exploring and implementing cellular automata rules, and even creating a few of my own, such as this automata, which generates a city grid, similar to Piet Mondrian’s Broadway Woogie Boogie:

Broadway Walkie Talkie

So, for my conference projects – both for Art from Code and Discrete Mathematics – I chose to work with cellular automata.


Having finally returned to New York City after spending a lot time living in suburban hell, Manhattan was all that I had on my mind.

I thought back to other generative projects I’ve seen – and one in particular stood out. Called Pixel City, this screensaver generated an entire city, full of unique buildings and even street traffic. But the traffic wasn’t really “alive”. And I wanted to fix that.

Pixel City

I decided to base my project on a cellular automata called Rule 184, expanding upon it to create a more interesting traffic simulation in two dimensions (hence, I called it “Beyond 184”). The Rule 184 cellular automata simulates vehicles moving on a one-dimensional road with a very simple set of rules:

  • If a cell is occupied, and the next (right) cell is empty, the cell becomes empty
  • If a cell is empty, and the previous (left) cell is occupied, the cell becomes occupied
  • If a cell is occupied, and the next cell is occupied, the cell stays occupied
  • If a cell is empty, and the previous cell is empty, the cell stays empty

I expanded upon these rules, adding a “cooldown” – that is, the ability of cells to stay in place for one or two generations before moving. This gave me the ability to have a city with “cars” that can move at different speeds. Along with that, I made it so that cells with a lower cooldown will not be able to come to a full stop immediately – simulating how actual vehicles in the real world will have different braking distances depending on how fast they are moving.

I brought this rule to two dimensions by creating a “source-destination” structure, which allowed for moving 1-D traffic cellular automata to two dimensions with minimal modifications. With this structure, as applied to the Rule 184 above, a “road” cell’s “source” and “destination” values dictate what a cell considers its “previous” and “next” cell. By requiring the cells to be connected to one another (that is, a cell’s destination value should be equal to the next cell’s source value for the chain to be complete), I gained the ability to control traffic flow.

I added a unique type of road cell that is called an intersection. This cell, instead of using a single “source” and “destination” value, has two of each, and with every generation, determines which values should be used, with the underlying logic attempting to move traffic from busier roads to less busy roads – after all, throwing more cars at a traffic jam doesn’t help anybody.

You can find more detailed information on how this cellular automaton was created in the paper I wrote for my Discrete Mathematics class, which, along with the source code for the simulation, are available at the GitHub repository.

Beyond 184

Believe it or not, that grid filled with squares is the very same simulation you saw at the beginning.

Doesn’t look that great, huh. That’s because it needs a home. It needs to live inside of a city.

Time to put the “art” into “Art from Code”.

The city motif was present in my creations since the very first thing I made for the class:

Scrolling city

I ended up taking a more minimal approach, and before I brought the city and the traffic model together, this is what I ended up with:

3D test

Once I brought the two together, it wasn’t just city-inspired creations that helped me with the process. Little bits of everything I’ve learned this semester all came together to create my neon city.


The alternating colors that I used were obtained using the same method I used to create the random files and folders that I used for a part of my self-portrait.

Continuing experimentsThe random buildings and the way I ended up having them use different colors was born from an experiment for one of my other projects – one that didn’t even make it into the final project.

Yuki machi

One of the wallpapers I’ve made before gave me the idea to reduce my buildings to glowing blocks of neon.

With all that, I eventually ended up with my final result. A living neon city.

As seen from above

And I think it’s pretty nice.

Little Big Lines

Learning to code this semester has been one hell of a journey. I’m not that proud to say I’ve cried about coding, but I have. There are witnesses. But it has been a worthy experience, and an important one. 


My first lines


I have trouble with depth perception. Which is kind of funny because I’m a softball player, but a problem nonetheless. My mom says it’s because she let me play computer games before my brain was finished developing that section. Needless to say, this has affected what I thought I could do in terms of art. I see things and I think I can paint that and then I put paint to canvas and his nose is between his eyebrows. But in growing and developing my art, I eventually learned that I can adjust to my depth perception issue by looking at lines. I started thinking about how subjects are made up of a configuration of lines.


All that being said, I was drawn to the snowflake starter code because the shapes based in clear straight lines that make sense in the part of my brain. I always wanted to draw animals, but I had a lot of trouble with their natural shapes. When looking for tattoo ideas I came across these images of animals created from triangles. I love the interpretation because it looks natural and geometric at the same time.



My fave Mondrian

This is much of why I liked Mondrian. He uses lines to create these interesting and engaging pieces and I wanted to do something in that vein. Though mine is much more chaotic than most of his.

Coding this was easy because I learned early on that I like working with triangles in a system. Their shape is so dynamic to me and they have such a practicality in them. So I decided to code this elephant triangle by triangle in code. And I decided I wanted to tie it into my system. I thought the movement that came with the manipulations I made to the original code gave the system a unique and exciting texture. It gives the piece movement which it should have.

I found the elephant tedious to code mostly. It was a lot of copy and pasting points and connecting the dots, but also making sure to keep track of which points are where, how long each line, what angle?



I never thought I was going to code a system. I know I didn’t do it myself but even just fixing it and make it do what I want it to do was kind of surprising, at least when I thought about it a few weeks ago. I’m still working on the movement of the lines, but I like the kind of static-ness that makes it more like a background.

The elephant was a natural decision for me. My grandmother collects elephants and she passed on her adoration of the creature to me. I am enamored with their grace, their intelligence, and their might. But they’re also proven to be afraid of mice. I think maybe for me coding was the mouse. I had no reason to be afraid of it, I’m kinda smart, and figuring out how to work a code wasn’t going to hurt me but it terrified me. The prospect of coding a system made me want to quit before I even started. But I’ve made it work for me and I’m proud of what it’s going to be.

Screen Shot 2017-12-12 at 9.06.32 AM

A little chaos never hurt nobody!

System: Molnar Lines

For my conference project, I am further exploring the works of Vera Molnar. She was a pioneer in computer based artwork, having first started by using a plotter. A lot of her works represent or came out of gradualism – modifying the form of something known in very slow ways until it turns into something very unknown, and interesting. I was hooked by her works in which Vera helps a viewer imagine what a plausibly different shape could be. I also appreciated how Vera abstracts away from known legible features in our world (such as handwriting) and studies it with rigor in order to extract the most visually fundamental qualities to handwriting. This is well represented in her 1987 work, Lettres de Ma Mere:

Lettres de ma Merre (1987)

Lettres de ma Merre (1987)

The piece of hers that has been my greatest inspiration in my conference work is Interruptions (1968):

Interruptions (1968)

Interruptions (1968)

It was easy to get a straight forward replication of Molnar’s work, disregarding the empty patches in her composition. It looked something like:

an early verison of Interruptions, with some color.

an early version of Interruptions, with some color. an even earlier draft was monochrome: a simple off-white/grey background and black lines

The lines in the given picture are actually all rotating. After meeting for conference in which we talked about an earlier version of my conference work, I learned that Vera Molnar’s style of work involves thinking of a simple rule and formalizing it. The class made some simple suggestions that should theoretically have some powerful effects for the system. Thus came my first ‘formalized’ rule: adding random length to lines if they were shorter than a certain length:

adding length to certain lines

The next few rules I added modified the rotation of the lines and also the color of the lines. It took me a while to figure out how to randomly assign color to each of the lines independently. While doing this, I certainly learned about the weird quirks of Processing as a library. Even though it intuitively makes sense to color a shape when you create it, you actually have to tell Processing what color to use for this shape every frame. Processing is kind of like an artist who only holds one pen, but draws very very quickly, so it needs to swap pens to draw each line, each time it draws that line. So to fix this, you instead tell the shape to remember what color it should be, and have it set the stroke() color (tell Processing what color pen to pick up) on each iteration of .display(). For the first several implementations of my sketch with the introduction of the new rules, I had coded something so that the color for all the lines was randomly assigned. It took me a while to figure out that I had to tell Processing to change colors in the .display() function of the Line object. Finally I had something that looked like this:

randomly colored individual lines

randomly colored individual lines

After learning this, I think color really went right in my system. I was able to then modify the color with more control. This also addressed one of the criticisms about my rules when she saw my work in open-studio: my rules were looking too random. The point of gradualism is for the viewers to get some intuitive sense that a systematic rule is at place. I was finally starting to get systems that look more like:

more controlled color

more controlled color

The way color is implemented is very special – it isn’t actually hard-coded into the system. Actually, the system decides for itself what colors to use for its lines (actually each line decides for itself, creating a complex system out of simple individual decisions) , and this part of the program is recursive. A line modifies its color based on the colors in the lines surrounding it. (Specifically, based on the color of the line previous to it in the array.)

Before I talk about what went ‘easy’ or ‘right’ and what went ‘difficultly’ or ‘wrong,’ I want to comment on how there isn’t always a relationship between how easy or hard something is to conceive of, imagine, and see in your head, and how easy or hard it is to code.  Some things that sounded or looked simple in the conceptualizing stages were complicated to implement in code, and it also turned out to be simple to implement some seemingly complex concepts / behaviors. For example, It was very easy to populate an array with lines. It was also easy to create a line object. Probably one of my favorite things talked about in a discussion in conference was about the point or goal of our class, which is to enable students to see visual work and feel encouraged and confident to be able to replicate it in code, or to execute one of their own imagined ideas.

For starters: I was not able to get as much visible interactivity in my system as I had hoped. In some ways, it still looks random. And in other ways, it does not look random enough. Some of this has to do with how many exact rules are turned on at a given time. Being able to set a randomSeed and to toggle the frameRate of my system have been very helpful, because it has allowed me to see what would happen to my system over time in more controlled settings. Even with all the rules turned on at once, it is easy to see with accelerated frameRate that my system seems to fall back into a mostly regular loop. That does not mean that it is not mesmerizing to look at – it definitely is, especially when you realize it is a simple system of only Line objects.

My class suggested writing my system with a randomSeed in place. This also turned out to be a lot easier than I expected or was familiar with from my previous coding experiences.

For randomSeed, I had to learn that a random number generator essentially is “only random on the outside”: inside, it deterministically creates numbers based on the given seed. So the specific sequence of numbers that it will return from the seed ’99’ is always the exact same sequence, regardless of how many times we run it. That’s why it’s called the ‘seed’: ALL of the randomness grows out of just that initial seed, like how an entire tree grows out of a seed.

I will definitely continue to work on my sketch, specifically in trying to make interaction and gradualism more apparent.

Perfect Weather


beggining scrollpaper

Final Realized Collage

Like many of my classmates I thrust myself into the great unknown when creating my wallpaper. My process didn’t begin with any fancy sketches or a long overdrawn brainstorm, instead I went straight to the internet and began perusing wallpapers and patterns created by other digital artists. Some of the patterns and wallpapers that really spoke to me include:


After collecting a sizable folder on my desktop of patterns and wallpapers, my own wallpaper began to coalesce. I was intrigued by the intersection of natural and obtuse shapes in a repeating sequence to create a wallpaper, and when creating my own wallpaper I wanted to incorporate the idea of nature vs. a pristine, human-generated pattern. Thinking about these things, I moved to create my own wallpaper.

Beginning with a repeating pattern: zig-zag lines

Beginning with a repeating pattern: zig-zag lines

Perhaps the most challenging part of my code (save animation) was creating the pattern that would serve as my background: a horizontally repeating zig-zag line. Even using a loop to repeatedly generate the lines, I found I was having trouble with the positioning of the vertex-drawn shape I created. While I considered scrapping the lines altogether at one point because of time, I was possessed with having the zig-zag lines as my background and finding a solution to my coding problems. When I finally got the code to work and properly run along the length of my canvas, I felt incredible satisfaction and triumph. One thing this coding assignment has taught me is that every individual coder has his or her own “mountain” to overcome. For some people, loops and animations are incredibly tricky, or for someone well versed in loops, composition and design pose a challenge. Each assignment has given me a new set of tools to put to use, and another challenge which to overcome. After triumphing over the creation of my background pattern, I moved on to creating and flushing out other graphic elements.

Adding clouds and a sun

Adding clouds and a sun

When creating my wallpaper I thought a great deal about nature and perfection, and the ugliness of nature colliding with the structure and perfection of repeating patterns on a wallpaper. While most of the shapes on my wallpaper ended up being geometric, I tried to create some more organic and custom shapes with the coding tools at my hands (vertex drawing and arc to be specific). With arc, I was able to create clouds, and soon I was well on my way to creating a weather pattern. As I was coding, I reflected on how the proximity of shapes with one another created a new shape, or familiar objects we all know. Using arc, ellipse, and rectangle I was able to create a cloud and generate symbolic weather underneath using rectangles. However, if I were just to put all of my shapes in a horizontal line, they would have no meaning to one another. As I’ve spent over half my the first semester coding art, I’m surprised at how art and coding are both about relationships.

beggining scrollpaper

One hang-up with my project is that I was unable to achieve animation. I wanted my rectangular raindrops to oscillate up and down, and the background pattern to loop and move upward, creating tension between the piece. I wasn’t able to achieve animation primarily because of the way I coded my objects’ x and y positions. When trying to return and introduce animation, I found it difficult to do so when I was already using the x and y in my for loops. I would really love to return to this piece and add animation!

On the subject of composition, while I generally like the colors I was able to achieve and the overall aesthetic, there is something very bland and head-on about my wallpaper which I don’t especially like. After looking at my finished wallpaper, I shook my head a bit because the pattern I created reminded me of a blanket. I’ve noticed in much of my artwork a level of “coherence” or comprehension that turns my art “flat”. As I’m just beginning to dive into art, especially art created from code, I would love to develop my sense of composition and creating more organic artwork not so rigid and heavy-handed. Overall I am pleased that I was able to solve some personal problems with my code, but I still think there is much to learn and improve upon!


Happy Accidents


This project has been one of my favorites thus far.This project came entirely from experimenting with code I was familiar with. I originally only had one pattern that would infinitely expand. My original intention was to create a perimeter for the pattern, however, after my conference, the project became a pattern that evolved into an infinitely changing pattern.



new wall paper is created and expands



I really enjoy the almost 3D effect that the some of the patterns have. If you look at the screen for long enough you can start seeing new and more elaborate combinations. I would have liked to be able to include changing colors in each pattern. Each pattern ends after reaching a distance of 400 and a new pattern is generated by the object-angle and continues to expand until eventually being replaced.




wallpaper 2

wallpaper 3





For this assignment, I spent most of my time just experimenting. I went in with no real idea of what I was going to do, but I just wanted to explore. I really didn’t sketch much because I jumped right into the code. One of the most intriguing things we’ve worked on in the last few weeks was the pattern of small lines. I was fascinated by them and knew that I wanted to use them as the background for my wallpaper. They create visual interest without distracting from the other elements. Later in the design, I realized that the colors of the lines were being lost on an entirely black background, so I coded a loop that creates a gradient through the multiplication of the coordinates. This change came late in the design, but it let me entirely redesign my color palette into something more interesting.

The next part that I experimented with was the Riley Circles we did in class. The ability to create overlapping patterns made them ideal for the aesthetic I was going for in this piece. I decided to use different colors on the top/bottom and the sides because the shape of the canvas is already irregular. With a canvas shaped this way, I thought it would be advantageous to draw attention to the oddity instead of trying to hide it. I liked the color results of the green/blue generator more than the red/blue generator so I put that one on the area with the larger area. I eventually decided to make them slightly translucent in order to create an effect like a mosaic or a stained glass window.


This border, while pretty, presented somewhat of a problem. In order for it to have clean edges, it would have either required me to let the corners overlap or to find a way to cover it up. This lead an idea about rotating squares. The problem with rotating squares is that the edges don’t travel consistently. So in order to have a consistent edge, I filled those corners with a stationary circle. It created movement of a different kind and, while I still think it looks strange, I enjoy it for that.

In my initial plans, I didn’t have the small lines in the draw section. They were part of the set up, which made it more difficult to put moving objects on top of them. This created the idea for what I have been calling the “runners” and the “track”: the yellow circles moving along the purple shape. Putting the runners on top of the track would have allowed me to have moving objects without leaving a trail behind. Eventually, I decided to just put the lines in the draw section, but I still liked the visual of the track.


The grid was all experimentation. I went in with no plan other than I wanted the center to be a grid. I probably spent more time on the color of the shapes than on coloring any other part of this. When I changed from a black background to a gradient, it allowed me to have more fun and to put a wider variety of color without being afraid that it would get entirely lost. Additionally, one of my favorite effects is a shape whose stroke randomly changes widths. I had originally included this effect on every part of the grid, but it got very busy so I restricted it to the orange circles.

By the end of this wild exploration, I was surprised to find a clearer image than I expected. While spending hours staring at wallpaper, I managed to make a door. I think it started, again, with the shape of the canvas. As soon as I drew a shape that mirrored the canvas, I started thinking about doors. And that influence made its way into the design: the heavy frame, the squares to mimic panelling. Even the circle-square decorations at the corners of the canvas are reminiscent of the metal plates put on the corners of doors. The door theme may have been an accident. But I still think it fits.


Modulated Synthesis

My attitude towards this assignment was radically different from my attitude towards the previous assignment. I was inspired by our classroom experiments in combining both for-loops and the mod function. I was also inspired by Josef Albers’ usage of colors and tiling to make a statement about both shape and color. The for-loop and mod functions lend themselves to accomplishing something similar to Albers’ goals.

sample of Albers' work

I spent several hours just experimenting with different shapes, colors, and insertions of randomness and determination in my code. At first I had a background with ellipses that moved within columns, remained similar colors, and seemed to shimmer (due to the addition of an overlay of darker ellipses floating through the screen.) This really reminded me of my childhood bedroom, which had a beaded curtain over the doorway and a shimmer curtain by the window. It seemed like I had created a synthesis of the two.

Screen Shot 2017-10-26 at 12.08.07 AM

first experiments

I decided to experiment with the circular motion assignments we were given in class, while still utilizing the color scheme and grid concepts I had established in my first sketch. This way, I was able to get a band of ellipses radiating in a circular way from a central foci. And I was even able to control the color of the ellipses, depending on where in the grid they were falling into.

Screen Shot 2017-10-29 at 6.56.56 PM

adding a JS object that utilizes circular motion

I realized that where the horizontal bands and vertical bands intersected, I got an unpredictably cool pattern, so I decided to have the bands overlap uniformly. While doing this, I realized I could modify the color (again, using mod, hence producing a gradient.) The circular_circles object remained in this iteration of the code, but I realized that it was aesthetically unpleasant to have 2 radically different shapes (ellipses and rects) overlap in an non-meaningful way.

Screen Shot 2017-10-29 at 7.06.40 PM

inserting a tiled background

So, for the moment, I forwent the inclusion of the circular-circles and instead played with the tiling background more. I added another function to my tile constructor, that allowed the gradient itself to change over time. And, through experimentation, I was able to have it so that the manner in which the gradient changed mimicked tiling itself. The picture below demonstrates multiple quadrants of graduated tiling. At this point in the process, I thought my work resembled a bit of Mondrian’s work, because of the juxtaposition of differently-colored ’tiles’. It especially resembled the work of other students’ in the class after they completed the animated Mondrian assignment. Screen Shot 2017-10-31 at 12.18.10 AMAt this point, the fact that the assignment encourages using a JS object that has a parameter passed through it, I decided to abstract even the size of the tiles. Below is an image showing the result of modifying the size of the tiles. At this point, the repetitive element determined by the dark-purple background is completely omitted, which has its own implications. I think this is beautiful and smooth in its own right; but I did appreciate the repetitive nature of the purple color, as it gives the entire wallpaper its own sense of continuity.

changing the size of the tiles

changing the size of the tiles after adding changing colors to the tiles

Since I was not so pleased with this outcome, I decided to re-introduce the circular motion aspect into the tiles I decided I had liked, except instead of using ellipses, I used rectangles (as this would better fit with the current scheme.) This is my final product for now, but I could definitely use revisions. And with better understanding of coding, I could do a lot more.

final product for now

current “final”

Circling Pink


Circling Pink

“Circling Pink”

I began the process of creating my scrolling wallpaper by setting up the initial elements I would utilize for the final product. I was inspired by a 70’s aesthetic of looping circles. As a fan of the French New Wave, I set out to create a wallpaper I might find in a Jean-Luc Godard film.

Initial sketch

Being that the interiors of his films typically include solid colored walls, I wanted to create what I imagined to be a wallpaper one might find in Ana Karina’s kitchen.

Initial Wallpaper

Initial wallpaper

I was drawn to the idea of circular repetition and created a moving wheel to compliment the flow of the existing circular pattern.

Wheel on wallpaper

Wheel on wallpaper

As I added the code of the wheel to my sketch containing the initial pattern, I had the idea to add motion to the background in order to create a more unified visual. I utilized the random tool, creating a tie-dye like pattern.

Randomized wallpaper

Randomized wallpaper

This inspired my later use of the random tool in my placement of shapes. As I felt drawn to the circular aesthetic, I wanted the rest of the shapes to blend into the background, initially appearing to be a part of the circular pattern and at further glance taking their true shape.

I struggled with integrating the wrap and bounce function into the overall sketch.   At first I used a simple ellipse, then morphed it into a triangular shape composed of randomized lines. This shape, in addition to the wheel, suggested a ferris wheel visual, which I found distracting from the overall piece.  I then reverted back to the ellipse, utilizing the random tool to create a spherical motion.

Image 5

Ferris wheel

I had a very positive experience creating this wallpaper. Through the prompt, I was encouraged to put to use many different tools I’ve acquired throughout the course thus far. I feel I’ve gained a better understanding of how the various functions work in relation to one another, resulting in a stronger grasp on the basics of coding. I was also able to express my interest in the color pink, experimenting with different shades and combinations to produce my scrolling wallpaper “Circling Pink”


Circling Pink

“Circling Pink”

Nice to Look At

Okay, so loops have kicked my ass. Well, coding is kicking my ass, but here I am, trying. And not trying hard enough, but trying nonetheless. This project seemed like a fun idea, but when introduced to all the new ways to code things, I was second-guessing.

In trying to understand concepts, I recalled struggling in math when I was in high school. I eventually came to a realization that I was trying to memorize formulas rather than understand why they work. I wish I could give a concrete example of this, but I have blocked all memories of math after my second year in geometry.

Anyway, with the prompt, I immediately thought about my summer job at the Hudson River Museum in Yonkers. Their summer show featured artist, Robert Zakanitch, and pulled from the museum’s archives to produce a collection of pieces with the theme of flowers. Zakanitch is a little obsessed with floral patterns, and more broadly the idea of patterns.

Zakanitch's Soaring Gardens Grow

Zakanitch’s Soaring Gardens Grow

He is a founder of the Pattern and Decoration movement, actually, and he talked about how he was inspired by things like the floral linoleum pattern of his kitchen floor. This has little to do with what I actually produced, but I had in my head that I wanted to do something floral-like. I never for a second thought I could code a flower, I have to be realistic with myself.

What I did come up with draws inspiration more from Bridget Riley in that her designs like Natajara are simple shapes turned into a more complex pattern. So when I sat down to code this thing, I realized I don’t know what I’m doing. I have a starting idea, and maybe that’s all I really finished with, but I struggled, needless to say.

I couldn't communicate what I was trying to achieve to my friend, but here is a rough rough sketch

I couldn’t communicate what I was trying to achieve to my friend, but here is a rough rough sketch

I got my software engineer friend on FaceTime to try to help me, and he kind of helped. I don’t know what I’m missing, besides time and practice and patience. What I ended up producing is a cop out. I’m pretty sure there was a much easier way to code what I did, but I wanted to produce something that if nothing else is nice to look at, and I did that.

Something Nice to Look At

Something Nice to Look At

I haven’t given up exactly, but I have hit a wall, and I’m trying to motivate myself to push through it. What I like about this is its simplicity, and that’s not a cop-out. I like the vintage colors, that I can’t even take credit for. It reminds me of Thanksgiving and birds.  I can do better.

Rainbow Madness

download (2)

This one is all color, and a whole lot of experimentation.

While with my last prompt, I had an idea from the beginning, the only thing I knew about this one is that I’d like to have a lot of color in it.

My starting point was a small experiment I made earlier, a little grid where colors flow from one to another.

Color experiment

Color experiment

After some messing around, I decided to go with a scrolling motion (it is a scrolling wallpaper, after all). The colors were going from left to right, scrolling through all the hues. This eventually turned into a grid:

Continuing experiments  download (12)  download (13)

 I put another moving grid on top of that first one, creating an illusion of rotation, and I started adding more objects to emphasize this illusion.

download  download (1)

And then I accidentally removed the background, and what I was originally calling “Neon Madness” became “Color Madness”.

download (2)  download (4)  download (7)

I love how that turned out. Every part took an entirely different role. The grid is now an ever-changing colorful background, and the objects that originally would’ve been the focus were left to struggle for their survival – only barely clinging to their existence, always about to be erased by the strange rainbow that they live on. Each grid’s fading corners went from guiding the viewer towards the center, to specifically drawing attention to the other grid’s colors.


When we got the assignment to create a collage, it took me a long time to decide what theme I wanted to work with. But after several hours of watching a playthrough of the game Cuphead, in which a queen bee is a primary boss, I became fixated on the complex and rich imagery of bees. The hexagon shape sounded like a worthwhile challenge to construct through code. The hexagonal background was the first, and most technically challenging, thing I worked on for this collage. My original plan for the hexagon was to have it flat-side up, but when I went to hang it up in class, I found that I much preferred it the other way. Which caused me to spend a few more hours reworking the hexagon. The eventual solution I found was to over a transparent outline of a hexagon and to trace the points. Then I constructed triangles to cut out that part of the canvas. This technique of using the image of a hexagon to construct one came in handy for the hexagons in the corners, too.


The specific imagery that I was working on was juxtaposing the modern and the ancient views of bees. In the modern day, bees are often considered a pest and something to be afraid of. Older, more specifically Greek, views associated bees with divinity and the Oracle of Delphi. I personally find bees and their hives beautiful, so I found it fun to show these two perceptions side by side.


Then I started layering images and text. I tried to use modern words in more decorative fonts and ancient words in more modern fonts. Part of how bees communicate is through movement, so I included a moving bee. The moving background both acknowledges this and creates an almost hypnotic background that also connects to the divination aspect of the Oracle.



Screen Shot 2017-10-10 at 12.19.04 AM

I knew at the beginning that I wanted to have my collage be about this new headspace I feel that I’m in right now. After a serious car accident in January that forced me to take a semester off, and now that I’m back in New York after spending so much time immobile in Texas, I feel that my feeling about being in New York is different, and I think that when I explain my car accident to my friends I tend to have a somewhat lighthearted or even humorous slant to not bring the mood down. I wanted a car to be at the center of this, and so initially I cut out a photo of a silver Prius in Photoshop, because that was the car we were hit in.




Then, I took photos that I had saved from my Snapchat since the beginning of the year as well as downloading the photo of the wheelchair and the woman using the walker from the internet. I played around with where I wanted to place these,and eventually placed them into what ended up feeling like nodules around the center car, moving some pieces that I felt were important to be in motion, like the car, the woman using the walker, and the statue from the library. After my conference, I realized how I had separated all of the elements, and wanted to increase the size of individual pieces and change colors to make the collage make the viewer feel the dichotomy between the violence of the car crash with the familiarity of the art pieces from on campus, Mr. Softee, and the snow (none of which I can access while home in Texas). I initially enlarged my face in the corner.


Screen Shot 2017-10-09 at 2.31.45 PM

After some more photo editing where I changed the colors and edited some of the photos, I think that the piece came together in its cohesion. I also repeated the photo that says “Cliffs of Depression” in the background to add to the business and make it feel more connected to the rest of the piece.


Screen Shot 2017-10-09 at 11.10.46 PM

I decided to name this collage anti-violence, which is also one of the text blocks in the collage, because that was a term I put in a poem I wrote, and I think that it really represents the third space I’m trying to evoke. While this violent car crash and broken leg did happen to me and are on my mind, I’m also still living in a world of art and sweet things, which makes for a strange mental state.

I think that I could still improve this collage by making the pieces from the library more clear in what they are to a person looking at the piece who has not been to Sarah Lawrence or someone who doesn’t remember the pieces of art in the library. I also think that while I tried to clear up the colors and use that to make the piece more cohesive, I think I fell short in that regard. Overall though, I am proud of how this piece turned out.


Screen Shot 2017-10-10 at 12.19.04 AM

Virtue and Vice

Finished Realized Collage

Finished Realized Collage


My collage began with a brainstorm of words and associations, held together by the single narrative of vice and virtue. Having just finished the Odyssey in my literature seminar, I was struck by the physical and psychological pleasures and seductions the narrative protagonist Odysseus had to temper himself against to make it back home after ten long years of war, and another ten years spent as a vagabond on the sea. While a handful of the seductions he has to overcome are supernatural, many of the “vices” Odysseus must ward himself against are almost impossible to overcome, simply because he is human. There were many personal lessons I could distill from reading the story of Odysseus and his battle homeward, as well as the the internal struggle that sometimes proved even harder than whatever his divine antagonists could cook up. With this in mind, I set off to make a collage to capture my interests in Greek myth, modern graphic design, vice, virtue, and the journey from adolescence into adulthood.


Initial Brainstorming and Layout sketches

Initial Brainstorming and Layout sketches

After brainstorming, I went in search of iconography and inspiration to guide the tone and mood of the collage. Creating a “third space” was not an easy task, and creating a specific tone and unique texture evolved constantly at every step in the collage process. Beyond just the images I selected for the collage, I had to be very careful about position and relationships. Questions such as: where do I want my audience to focus on? what elements of the collage am I naturally drawn to? what doesn’t look right? continually popped into my head. Many images or changed or discarded, and one of the hardest parts of this assignment was finding the correct typography to convey the tone I was seeking. Perusing through Google Fonts, some of there selection was either too comical or didn’t add to the atmosphere of the piece. Or worse, I would gather together a collection of fonts that practically looked the same. I found that I could spend hours browsing images and fonts online, but until I took the leap forward and threw the paint on the wall, I wouldn’t know if my design decisions would stick or not. Needless to stay, creating a collage was an exhaustive effort that felt even more meticulous than my self portrait. However, I also recognized after brainstorming that as long as I held onto the essence of my collage, the elements and imagery would naturally insert or subtract itself. The creation of the collage itself guiding my artistic selection.


Background: Topographical Lines with Cyan Purple Gradient

Background: Topographical Lines with Cyan Purple Gradient

Central Images And Color Palette

Central Images And Color Palette

There was a host of digital and graphic icons and imagery I drew inspiration from. Since Robert Rauschenberg, collage has only been aided by the advance of digital imaging and processing. While I didn’t have very many fancy applications at my hands besides Photoshop, p5.js is a very robust drawing program that allowed me to edit, translate, rotate, scale, and manipulate in many other fashions the images i inserted into my digital canvas. After creating this collage, I come away with an even greater appreciation for the subtle art of position and placement. For example, I struggled as a beginning collage artist diversifying the placement of squares which gave my collage a very rigid and structured look. I can say I spent as much time thinking about where I was going to place and translate an image on the canvas as I did coding that translation, if not more. Even still using a great deal of squares and rectangles, I think I begun to achieve some diversity and nuance in the drawing the audiences’ attention to specific portions of the collage.


reduce text

If there is one part of my collage I can latch onto and say that I am happy with, I would argue I am very happy with the color scheme and palette I was able to achieve. I love working with conflicting, opposite, and opposing colors, and in my brainstorm I was latched onto the idea of a gradient. While that original gradient changed in some dimensions, I really fell in love with the background I created using a topographical map and an overlay of color. While I sometimes felt the ideas of vice and virtue I was playing with didn’t always shine through, the highly pigmented color palette and hues cinch the collage together and keep the viewer constantly searching for information and creating inferences from association.

collage image

My creation of this collage comes from my own appreciation for the story of Homer’s Odyssey, my love fro graphic design, strong color palettes, and my own musings about mortal temptation. While not directly hitting the bullseye, I think I landed somewhere close.

The L Words

The L Words

I’ve made many collages in my life. I’ve always enjoyed cutting out images from magazines or flyers, taping them to the lid of a shoebox and finding satisfaction in the collection of visuals. Making collages always felt very personal, I was unknowingly trying to represent a part of myself through the images I was cutting and pasting.

As a student of media, my life has been a path woven together by the television and films I’ve consumed. I’ve always looked to digital story telling to inform my own narrative. Out of the hundreds of series’ and films I have watched throughout my life, nothing has made as big of an impact on me as Showtime’s The L Word. This is not a unique narrative; many people attribute The L Word to their own coming out stories, as many people, like myself, need references when beginning their road to self-discovery.

Initial plans

Initial sketch

Graphics sketch

Graphics sketch

Considering the fact that The L Word (2004-2009) was and remains to be the only American television series with a cast of lesbian characters, it has played an enormous role in the lesbian community. Though I cherish The L Word, I also find extreme disappointment in the fact that this affection I hold towards the show stems from the reality that it is the only one of its kind.

Initial layout

Initial layout

My collage is simple. I’ve included portraits of the main characters, symbols of the central themes, and recognizable sounds and dialogue from the series.   I’ve approached the aesthetic with an early 2000’s lens to mimic the visuals found in The L Word.  My collage reads as obvious and straight forward because unfortunately, in 2017, this is the extent of lesbian representation on television. I wanted to highlight the absurdity in the fact that this is all there is. These few women, these representations of the “l words”, are the only ones the lesbian community has to identify with on television. These women, these terms, hold so much meaning because of their extreme rarity in media.

I juxtaposed the smiling faces of The L Word cast members with an image of traditional lesbian representation on television. So often do we find queer representations of women through the male gaze, something The L Word addresses and successfully avoids. I also emphasized lesbian hashtags, a concept that both unites and devalues.

Traditional representations

Traditional representations

Throughout this process, I’ve found the creative elements, the selecting of sounds and images to be very straightforward and satisfying, while the construction of the collage itself has been more of a challenge. As this is the first project I’ve attempted to code without a direct reference, I’ve struggled with taking the tools I’ve learned through the readings and in class exercises and putting them to use without an outline. While this has been a struggle, it has also been a great learning experience. I’ve had to exercise problem-solving strategies, spending time testing different methods to reach my end goal.

Flag by vertex drawing

Flag by vertex drawing

Though I managed to solve most of the issues that arose with coding this piece, I have yet to be able to get rotations to work. I was unable to get the three animated elements to follow a center rotation. Every time I tested different rotation examples, my entire collage rotated along with the element I was trying to isolate. This is something I hope to address in class.

Issues with rotation

Issues with rotation

The L Words is a collage I’ve made to showcase the few lesbians on television, both in disappointment for their lack of company and deep appreciation for their existence.

The L Words

The L Words

A Hedgehog Goes on a Walk in a Big Forest

Screenshot from 2017-10-09 21-05-00

Once upon a time, there was a Hedgehog who wanted to go on a walk.

Why did the Hedgehog want to go on a walk? He didn’t really have a reason.

It’s just what the Hedgehog wanted to do for as long as he could remember.

And so, he set out to walk, perhaps to learn something, perhaps to find his perfect forest.

Screenshot from 2017-10-09 21-10-59

The Hedgehog first walked through the forest he grew up in.

The familiar trees were as beautiful as ever, but the Hedgehog kept walking anyway.


The old forest gave way to a new one, filled with trees the Hedgehog has never seen before.

This forest seemed so big, and so amazing.

But it was not quite what the Hedgehog hoped it would be.

So the Hedgehog decided to keep walking.

download (1)

Soon, the Hedgehog found himself in a yet another forest.

“The trees in this forest are similar to the trees back at home,” the Hedgehog thought.

Would this be a good place for the Hedgehog to be?

Only time will tell.


This is a small planet, filled only with places the Hedgehog is familiar with.

The Forest Planet is divided into three parts, each populated by beautiful trees from every forest the Hedgehog has seen. As the Hedgehog continues to walk in search of something, this small planet is there to keep all the memories of every forest he has seen.

When the Hedgehog revisits one of those places on the Forest Planet, he recalls a familiar thought he had while he lived there, familiar sounds of each forest play, and out in the distance, the fog seems to form a mirage that makes the forest seem even closer to reality than it already is.

While this project does not share a lot thematically with Richard Hamilton’s work, his collages were my main inspiration. I really enjoyed the way “Just what is it that makes today’s homes so different, so appealing?” blends together textures and cutouts of various objects and people to create a very coherent room.

In my collage, I tried to achieve a similar effect by combining colored polygons that make up the world with various images to create the little planet.

download (2)

I really enjoyed creating the polygons that make up the planet and the sky. To make it easier to visualize the parts, I created a small tool that showed me the necessary x and y coordinates to make the shape fit what I have in mind.

My favorite part, however, was creating the sky.


I’m very pleased with how this effect turned out, and I hope I will be able to use it in the future. To create it, I found a picture of a landscape, and used actual colors from it. I made each polygon of the sky slightly transparent, so that color from the one behind it bled through. I also made each polygon “rough” to give the sky a bit of a handmade feeling, as if I cut out a bunch of pieces of colored paper to create the sky.

Danger Zone

What is finished (for now)

My first instinct with this assignment was to write “this is a collage” and turn that in, in true Rauschenberg style. But then I decided to give it a shot and see what I could come up with.

The assignment came right after the country’s biggest modern mass shooting in Las Vegas, so I was thinking about gun control and mass shootings and terrorism and things, and it made me consider fear and danger, and that was the theme I went with.

Playing around with some ideas

It’s a weird time to be an American. I suppose it’s kind of a weird time to be anyone or anything because we have so much stuff. We have more information at our fingertips than ever. Technology is insane. Politics are absurd. But we still have time to think about Kim Kardashian’s butt?

When I think about fear, this week I’ve thought about coding (haha). And assignments, and the future, and relationships, and money, and and and++. Then I thought about what other people are afraid of and how big of a spectrum that is. People are afraid of spiders sometimes, and sometimes they’re afraid of nuclear warfare. There’s so many different tiers too. I suppose it’s all psychological, but in a sense I think they’re a difference between being afraid of a constant thing like a spider, and being afraid of the dangers of cultural appropriation (hence, Kim K’s butt).


There’s a lot going on in my piece, because there’s a lot to be afraid of. However, there are images on there that people shouldn’t be afraid of or think are dangerous. But that points out a larger discussion about who’s to say who can be afraid of what?

Hole in the Sky

Already having been behind in Art from Code, I realized that my outlook towards this assignment stipulated an effective strategy. After talking with some people, I decided to try to capture a poem that I had already written in the form of a collage. Poetry naturally contains a lot of contradictory and sometimes overlapping images, motifs, and concepts. I first started by simply gathering all my images, taking suggestions from my poem, and putting them down on a canvas.

Screen Shot 2017-10-07 at 10.56.52 PM

Using push(), pop(), and translate() to simply get images down on the canvas.

I then moved some of the images around to be more compositionally pleasing, and tried to incorporate more of the requirements to the prompt by utilizing the rotate methods and also starting to add text from the poem – focusing on reiterating the central symbols. The translate method was extremely useful in helping me work through revisions as I changed the placement of images.

adding rotation

adding rotation and text from the poem

After adding some more text, I began to use the arrow shown in Chapter 3 of Make as it is an example of a vertex drawing.

adding arrows

adding arrows

I quickly realized that arrows were not actually what I wanted. When I think of collage, or my experiences with collage, I am reminded heavily of using tape. So I decided to make several ‘tape’ pieces. But I think playing with the alpha channel of each of these pieces of tape was fun. The tape elements remain fixed in the canvas, whereas the three images behind it are animated to center-rotate. I think the fact that these pieces of tape remain fixed is a cool reference to antiquated practices of collage.

pieces of tape

pieces of tape

I added the sound elements of: waves breaking, the apollo moon landing, and a dog howling. I also applied the collage idea to my usage of sound, by having the sounds all play at once, but at different relative volumes, if the mouse is clicked. Poems are sort of like dreams or are a literary method where several related images are interwoven. I think collage might conceptually allow something similar to happen.

For reference, the inspirational poem can be found here.

In retrospect, I think I would have liked to learn how to resize images within the p5.js library itself, if possible. Making a collage is difficult; it is hard to make the images cohere or speak to one another. My final result does not satiate my own expectations. While it contains vector graphics, sound, rotation, animated rotation, text, colors (though only within a contained palette), and fonts, this piece seems still too disorganized for me. And I am afraid that it may not be very accessible to others.




When I began working on this assignment, I wanted to create a dynamic and interactive image that reflected a part of my personality while taking inspiration from Paul Klee. I noticed that in Klee’s self-portrait, his face is divided into geometric pieces of different shapes and colors. In my self portrait, I tried to echo that fragmentation using the arc() function. I created a face of different colors out of quarter circles. The division of a face into four sections seems to allude to facets of one’s personality by depicting them abstractly. I made the eyes with ellipses and then used a rectangles to form the neck and the mouth. The mouth is divided horizontally into two separate rectangles, which is an allusion to the way that Klee divided his own mouth into two tiny rectangles.





Initially, I considered creating a few sets of palettes out of chosen colors to depict different moods and emotions, but decided to experiment with randomness instead after considering the tedium of compiling upwards of twenty variables for different colors in the different palettes. Instead, I declared six random color variables and assigned them to different shapes. All the shapes are different colors except for the facial features. I wanted to keep the facial features one color to keep them somewhat stable throughout the iterations of the image. I used the mousePressed() function to reassign those variables to different random colors.




I was pleasantly surprised by the interesting palettes the random color variables created. I wasn’t expecting the image’s colors to look as cohesive as frequently as they do. For this post, I took about thirty screenshots and included my favorite ones. The colors definitely work to affect the mood and personality of the face. To me, the quarter circles represent different areas of my psyche circling through different processes and emotions as the colors change. I’m glad that I chose not to use preset palettes for different moods, because I think that ultimately would have led to simpler expressions of emotions (a blue palette for sadness, a red palette for anger, etc.) In reality, human beings don’t usually experience one emotion at a time – we experience multiple emotions across an array of actions and reactions.



After conference, I decided to further diversify the expressions of the iterations by adding randomness to the dimensions of the mouth and eyes. I made a few more variables for width and height of the eye ellipses so that the eyes could change expressions. The mouth was a little more tricky, because the usual rectMode controls the upper left corner of the rectangle along with the width and the height, which meant that the left hand mouth rectangle didn’t stay aligned with the center of the image and connected to the other mouth rectangle. I changed to the rectMode(CORNERS), which controls the upper left hand corner and the opposite lower right hand corner. This allowed me to keep the inner side of both rectangles at the same x value throughout the iterations.



I started this project by trying to build a semi-realistic representation of my facial structure. But, after some experimentation I decided that a simple representation would serve the same purpose without the mess of ellipses and triangles. The square with eyes and a mouth portrays the “idea” of a face while also providing a straightforward foundation I could build on.


Initial Version, no added Features

Next, I tried to add character with hair and a beard. I may not be able to grow decent facial hair, but through the power of artistic license my portrait can.


Template Version

A regular portrait captures a person or persons in one instant, and preserves that image unchanged by time. My portrait falls behind in terms of accuracy, but is possess an advantage in its ability to change. Instead of portraying an instant, my portrait  displays me for the next forty years or so (provided I don’t shave or cut my hair).

sketch(6) sketch(2) sketch(3) sketch(4)

In essence, my self-portrait is an attempt to combine the ideas of both my face and time into one dynamic image.


Gabrielle Gonzalez, Self-Portrait

Gabrielle Gonzalez, Self-Portrait

Gabrielle Gonzalez, Self-Portrait

Gabrielle Gonzalez, Self-Portrait


When I began this project I was unclear about how I wanted to represent myself. As I started the coding I realized I wanted to use unrealistic colors rather than conventional skin tones. Initially the hair was a basic arc but later I decided to add the curls to frame my face. I added the small white freckles because their are very unnoticeable freckles under my eyes. Finally my favorite part of this was the eyes and mouth, they move to show a wide range of emotions. They can show shock, indifference or, anger. I really enjoyed playing around with the interactive features and getting a better sense of the canvas.




Gabrielle Gonzalez, Self-Portrait ggg