Category 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.


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”

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.


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




The original version of the self portrait before interactivity was added

The original version of the self portrait before interactivity was added

Second iteration

Second iteration

Third iteration with interactivity

Third iteration with interactivity







For this project, I set out to make basically a face with a random assortment of facial features all around the screed (inside and outside the face). However I became a more interested in just using tons and tons of teeth. I wasn’t really trying to express anything neccesarily about myself with this piece. It’s just what felt right I guess. This piece is obviously an abstract representation of myself and I was kinda inspired by the Klee self portrait. This piece allows a bit of interactivity by letting people put teeth on the screen wherever they want which I think allows for a lot more chaos than just coding in each one individually

Self Portrait

Art From Code- Self Portrait

Art From Code- Self Portrait

I came up with the idea for this piece based off the concept of being two things at once: blank and thinking a lot. But I also wanted it to capture the opposite: very expressive with a blank mind. This represents something that I feel daily. I have a tendency to stare off while my thoughts are overloading (my mom has often called me “the space cadet”). Or be incredibly expressive without putting any thought into. Anyhow, I am new to abstract art and I hope that this successfully captures reserved and intense thought.

Self Portrait

Screen Shot 2017-09-28 at 5.17.09 PM

final portrait without pressing mouse

Screen Shot 2017-09-28 at 5.18.37 PM

final portrait when mouse is clicked

Gabriel Eng

To generate an idea of how I wanted to approach this assignment, I first glanced through the examples posted on the shared google drive.  At first, it was just to figure out a template for my code but by the end, I had a pretty clear picture of what I wanted to create.  I didn’t want to make a completely accurate portrait of my facial features, but rather make it a bit more abstract.  This meant experimenting with unconventional shapes to create a basis for my facial structure and using different color schemes.

The first idea I had was to create a code that switched the facial expression through clicking the mousepad. Another was to create a portrait that cycled through multiple faces, with multiple facial expressions. Both of these influences derived from the examples posted on the google drive.  They are the images shown below.

 Screen Shot 2017-09-24 at 6.55.03 PMScreen Shot 2017-09-24 at 6.55.33 PM

In the portrait on the left, the eye brows are raised and the eyes get bolder through the mousePressed function.  I also like the lack of borders in the facial structure. What I found interesting from the portrait on the right was the split face and color scheme.  I used that split face idea in my piece to create divided sections of the face, enhancing its abstraction. I don’t know the names of these artists or if they were past student work, but both portraits are very unique in their own right.  From these portraits, I realized borders don’t necessarily need to be drawn out, the portrait can look more like a caricature or animation, and that even the slightest improvement, like making an outline bolder, can have a huge impact on the final output. 

 By making it interactive in this way, you can present a wide range of emotions or any representation, and create a more accurate depiction of yourself.  With one picture you are limited in how you display yourself and one picture can not define a person.  With multiple images appearing, you can exhibit more facial expressions or emphasize certain moods you may have. In my final portrait, I tried to show a clear change in expression that resembled aggravation, through the broken glasses and lowered eyebrows.  You can also see how the lips separate and my idea was to go further and place text in between but I was having difficulty with adding that. 

From this assignment, aside from the structure of the portrait, I gained a stronger appreciation for color schemes and their significance.  Thats what catches my eye immediately when I look at other portraits.  It makes it more interactive for the viewer because it gains attention. In past assignments I didn’t place much of an emphasis on the color scheme. I thought it was strictly about the image but from my self portrait, I realized how color schemes can drastically improve a piece.  The lightness of the shades in the face go well with the light greenish background of the canvas. 

What I also found useful for this assignment was the sketchbook. This is the first piece I’ve been using the sketchbook to create an outline or experiment with what I want to code.  Before hand, I was making things up along the way.  Obviously I still had ideas, but I never formulated them on to paper.  Also, by sketching first, I had a smoother time finding the right coordinates to set my code at, and the comparable proportions of the various shapes.

Conference Post-Mortem: Iterative Painting

screen-shot-2016-12-16-at-7-31-21-pm   screen-shot-2016-12-16-at-7-31-08-pm

RGB Grain

Ultimately, I have produced five digital, animated, iterative paintings. This was certainly my intention. Nothing really went wrong. However there are some aspects incorporated into my five pieces that surprised me and there are some aspects that, I think, could have been improved and that I hope to improve.

Initially, I aimed to make five pieces all based off of my original colorbar class, which iterates pixel-high rectangles of variable color along the height of a five-pixel-wide bar that can be moved across the screen, essentially “painting” itself if the background isn’t called. Moving forward with the class, I simply wanted to incorporate the new skills we learned since the early days of for loops. Not so simple, actually. I didn’t have much difficulty understanding individual concepts over the course of the semester, but in attempting to combine them I found that creative use of these skills together is the real challenge and most definitely the thing I have to play with if I really want creative control over my ideas. The final pieces were much more reliant on variations and additions to the original for loop than I wished. However a couple of the pieces I think were very successful in exploring the possibilities of layering simple loops because of this more reduced framework.

RGB Grain (above) is my favorite painting, and it was also the first I coded. It relies on three different colorbars and a basic interactive function to produce semi-predictable color and texture effects and animation. One colorbar moves left, one moves right, and one acts as a shifting color field. The latter is responsible for the more dramatic, intermittent color/texture shifts, as it takes longer to screenwrap and, once it does, it iterates a great number of thin colored lines across the entire canvas at once. A mouse-press function resets this colorbar with a semi-random, red-leaning color-value, and this allows the viewer of the painting to disrupt its semi-predictable loop and introduce more variation, color and texture-wise, into the piece. I titled it RGB Grain because the way the colorbars “ripple” across each other suggests there is a with and against the grain to each of them.

screen-shot-2016-12-16-at-7-31-48-pm   screen-shot-2016-12-16-at-7-33-32-pm

Gross Picnic Blanket and Skywiper

My other pieces tended to involve these three more consistently colored color bars than the more variant ones of Cut Canvas and Heat Scan. My experiments were more with composition, rhythm, shape, and opacity. The biggest challenge was making the pieces appear organic and smooth in their changes. I don’t think I was entirely successful in doing this across all five. Most notably, Flared was a challenge. I attempted to use the colorbar from Cut Canvas to make a piece along the lines of RGB Grain. Though I think the dynamic, lively quality of the colors and shapes is interesting, the piece doesn’t vary and evolve as much as it should. The same goes, I think, for Screenbound Ectoplasm Wipe. On the note of that piece, though, I did uncover a couple avenues I would like to explore further in the future through my failures. For Screenbound, I found it interesting how using a noise field of simple shapes below a semi-transparent color bar can produce a textured “trail” as the bar wipes across canvas. Using noise and transparency to create texture is probably the next thing I want to explore in Processing.

screen-shot-2016-12-16-at-7-32-44-pm   screen-shot-2016-12-16-at-7-35-20-pm

Flared and Screenbound Ectoplasm Wipe

I do wish I had more time to work on most of these. I like to save multiple iterations of a piece as I work on it and discover new avenues. I can make “nice” looking things quickly, but I am ambitious with my ideas and I like to follow through with good execution. Though it’s very easy to get into an improvisatory dialogue with Processing and to get interesting, pretty results in this way, I think having a strong initial idea is very important. Otherwise you can just keep working on one file and it can keep evolving into different things. It’s important to have an idea to work towards. That’s not to say, though, that experimentation in Processing is bad and useless. One of the great things about it is how easy it makes experimentation.

Lastly, overall Processing pushed me to work in a different way. I don’t usually think too much about color, texture, etc. in the production of my work in other media. I tend to be more of a conceptual artist who, nonetheless, likes to have sensual qualities in his work. Processing brought me back to basics in a way. I found out that I really lean towards the color blue. It taught me that good work can come from simple use of specific tools, that I don’t always need conceptual justification for making things. In the past few years I have really felt that digital art is very important and will become increasingly so. Maybe the conceptual tendency of my work can simply be bound up in the simple use of a particular tool that I have reason to believe is important. Instead of coming up with conceptual justifications for my use of a particular medium, just let the use of the medium justify itself.


Conference Post Mortem:: Wave Clocks

The final collection of wave clocks I finished with for my conference work were a much more polished portfolio than I had started out with. In the beginning, I had five sketches, each representing five different themes. In the end I had cut down my collection to four sketches, each still with a separate theme. The finished sketches were also better versions of themselves given that they were more visually coherent. The idea behind this conference project was to create several themed wave clocks that successfully articulated the emotion behind their respective names through color and presentation. As finished pieces, I feel confident that each sketch does exhibit the nature of its real world counterpart.


A still from Pineapple.

A still from Pineapple.

The first sketch I worked on was Pineapple. Given an interesting swatch of browns, greens, and yellows found on Adobe Kuler, I felt inspired to create a wave clock around the tropical fruit. From the start I knew I wanted to use an array to create a background pattern. To me this would reflect the pineapples patterned outer skin. With no other animated components other than the three wave clocks in center, the sketch was very simple, and there wasn’t much to tweak.

A photo of pineapple skin courtesy of Angelina Hills.



A still from Pineapple.

Saltwater was also somewhat straightforward. Already the wave clock motion was fluid so I wanted something else to compliment that motion in the background. I chose to have four different semicircles ebb inwards from the four corners towards the waveclock, simulating waves. With a great combination of rich blues, the sketch in the end was very smooth and peaceful, reflecting a current-like motion.


A still from Sarah.

The color palette for Sarah came from the fact that I had originally searched for Sarah Lawrence in Adobe Kuler, hoping that some art student had uploaded a color combination in light of their school spirit. However, nothing for Sarah Lawrence came up. Instead a vibrant palette for Sarah showed, with some beautiful reds and so I opted for that instead. Like Pineapple, nothing changed much since the first iterations over the course of me tweaking these sketches. The randomly generated lines from the four corners of the sketch mirror the components of Saltwater, but give a different feel. Rather than a pushing motion towards the center, the layered lines illuminates the borders drawing out the center of the piece which is a medley of red variants.


A still from Spider.

A still from Spider.

Spider was initially a sketch called Greyscale, and I feel as if I’ve cut a corner by renaming the whole sketch to reflect its visual components. Upon finding that static polygons did not fit with the whole composition of a wave clock, I used a circle class to create a number of different animated circles that bounced within the borders of the sketch frame. The title ‘Spider’ seemed much more appropriate given the arachnid like motion at the center of the frail white lines that cover the sketch. The most extreme of all my sketches, Spider’s background components actually challenge the fluidity of the center piece by criss crossing the screen with layers of white. There is an actual interaction with both the background and the centerpiece when the rest of my sketches treat both as entirely separate entities. The grey wave clocks in the center actually look entangled in the white web created by the roving spheres.

In the end, I chose to remove the sketch Moth from my compilation. What I wanted to achieve with moth did not fit the central theme of my project and so I left it out. Other than that, there were no other big upsets with the whole project. Every sketch successfully presented a combination of three wave clocks as the centerpiece with background components that complimented the wave clock motion and aesthetic. There was not really any particular final image I had in mind for any of these sketches. Despite the process of going through Adobe Kuler and finding themes for the sketches based on intriguing color palettes, the rest of my method was made up on the spot. I went with my intuition about what I wanted each sketch to have and worked with trial and error. An array for Pineapple, classes for Spider, the random function for Sarah, etc… Each sketch incorporated a different coding lesson we learned this semester. I don’t think it’s fair to say anything went wrong, because in the spirit of generative art, any outcome was accepted. In comparison to analogue installations, working with Processing allows a lot of room for error, and so with no specific end goal in mind, there was no positive or negative way to critically think about mistakes.  

Conference Project Post-Mortem: An American Life

For my conference project I created a series of movies that explored my placement in an American context and the ways in which I could use Processing and generative art to challenge or alter the original narrative of the photograph.

I began by finding photographs of American families in Ithaca. I then photoshopped myself into the images and split them into .jpg and .png files with some transparent portions so that I would be able to code in-between the layers.

The code itself was rendered in pure red to emulate the aesthetic of Barbara Kruger’s work. Many of the aesthetic techniques used were also reminiscent of John Baldessari’s dot series, where the graphic obstructions not only created visual tension, but also added a psychological distance between the viewer and the subjects of the photographs.

When I first began the project, all I knew is that I wanted to use photographs so I would have some tension between the coded graphics and the photographic image. However, I was at a loss for what photographs to use, and the approach I wanted to take. For a while I was browsing through old photos that I had taken. There was no real system, I was just looking for ones that caught my eye. Because there was a lack of purpose, I found it hard to make anything really interesting.


The idea for this slightly more political approach to the project came to me while I was in a thrift store, browsing through various old knick-knacks that, to me, were strongly representative of a specific American narrative. This was just a few weeks after the disheartening election results, and I was questioning my place and future in this country. I had used old found photographs for a previous project whilst I was studying in Berlin, and I knew the existing power and narrative in their composition would provide a fruitful grounding for my project.

Funnily enough, it was the pieces that I hadn’t previously sketched and planned for that turned out to be some of my favorites. Particularly, No.4 and No.5 in my series. I think when I started planning them in my sketchbook first, I was too focused on how to control the code, rather than how to create a system in which the generative nature of my work could create an interesting effect itself.

I also at one point became too reliant on Baldessari’s visual techniques. In No.1, I struggled to manipulate the spirals so that they wouldn’t just end up forming red dots on the faces in the photo, as it would be too similar to the dot series. In the end, I created a piece that changed very incrementally over time, and I think the difference before and after is quite striking. screen-shot-2016-12-14-at-2-49-11-pm screen-shot-2016-12-14-at-2-49-33-pm screen-shot-2016-12-14-at-2-50-10-pm

This change over time was definitely something I wanted to incorporate into my sketches, to make the photographs more dynamic and so that I could take full advantage of the properties of generative art. I was surprised to find that the vertex drawings I did, and changing them incrementally over time, wasn’t as hard as I thought it would be.


For No.2, I assigned variables to each vertex point of each shape, and added a noise incrementation so that they seemed to be expanding and growing in a somewhat organic fashion.

In every sketch, the axes that crossed particular portions of the photograph were very important. Mostly, I aligned the sketches to an axis that crossed over the eyes of the subjects. Though I wanted to differentiate myself from Baldessari, I also recognized that distracting and obstructing the face often had the most jarring effect on the viewer.

I also used loops in most, if not all, of my sketches. The allowed me to create these graphic accumulations onto of the images.

Because I was pretty excited about this project, time management wasn’t too much of an issue. However, I wasn’t quite aware when I started how many steps there would be. The process involved going to a number of thrift stores and flea markets, carefully selecting images, scanning them in, editing myself into them, creating the code, then finally creating the movie files. What took the most time was creating the code, but I did feel myself growing more comfortable with the code. I was much more careful with commenting out which code did what, which gave allowed me to navigate through the code more easily. Though control isn’t the ultimate goal of generative art, the ability to understand my code more easily gave me a certain measure of clarity so I could ensure that my goals would be fulfilled in the project.

One of my main concerns would be whether or not the insertion of myself into the images is fully necessary or even noticeable in many of the pieces. Aside from the wedding photo, I inserted myself into the periphery of the images, purposely out of the main line of site.

With No. 4, I feel as though suddenly it becomes noticeable that, of all the faces turned towards the camera, only mine isn’t obstructed in the end. No.1 also has me in the periphery, and when the image turns red and everyones eyes are marked out, mine is the only one left.

However, with No.2, I inserted myself with my back turned. I’m not sure if my insertion here is done to any effect, really. And the accumulations on the three main subjects, while it erases them, doesn’t distract from them at all. In fact, my focus has mainly stayed on them.

At the end of the day, I’m quite proud of what I accomplished with this project. I like the series as a whole, and I think the pieces do quite well together. I think the red on the high contrast black and white photographs is quite striking, and I think I definitely achieved my goal in changing the narrative and nature of the photographs throughout the series.

Conference Project Post-Mortem: Distortion

doodle-7 doodle-9

What I have finally made are shapes that change.  I played around with different shapes using a call to ellipse and to curveVertex.  I used color, height, noise, and width to change the shapes.  Some pieces changed over time because I was not happy with how they looked.  I wanted more change in certain pieces, so I changed those to reflect that.  In some pieces, I liked how the vertex drawings changed, but the vertex drawings also kept increasing in size as well.  I couldn’t control how the vertex drawings grew over time.  I like how most of my pieces came out.  I like the colors I used for my Pastel drawing.  At first, getting shapes to change was difficult and I couldn’t figure out how to do it, but after messing with the code, I managed to change the shapes.  From there, getting shapes to change was easier.  Overall, I think I managed my time well, although I could have finished my last piece sooner.  I think my pieces turned out well.  I think I was able to show my vision for my project well.

My projects were coded with active mode to bring the shapes to life.  I used variables for conditionals, and to make certain coding easier.  A lot of my pieces have similar color schemes, but in a few I experimented with color more; I used pastel colors and more contrasting colors for a few.  All of my pieces are animated so that they move and add on through time.  I used loops to make my pieces change and to create the vertex drawings.  Noise creates the shapes in curveVertex.  In one of my pieces, I used 3 dimensions to change the shape of the curveVertex.

Conference Project Post-Mortem: Interactive Generative Art

Galaxy (2016) Callum Bayle-Spence

Galaxy (2016) Callum Bayle-Spence

My conference project, entitled Stellar Remnants, investigates the relationship between autonomy and interactivity in generative art through five pieces made in Processing. All of my sketches involve using key presses to influence the variables of a sketch to manipulate amount, size, movement, and color among other things. My first two sketches, Galaxy and Meteor Belt, both use 3D and loops, and expand in a similar way into the x, y, and z dimension. Despite the vast difference in appearance, how the key presses affected the sketch was similar. I used key presses to manipulate the bounding limits of the loops creating the 3D shapes. I also used matrices to rotate each sketch. But what really made the two feel similar was the communication between the interactive keys and the sketch, despite how different the two looked and were modified through interaction. I was worried but as I progressed I attempted different baselines for sketches to influence a different relationship between the interaction and the program. For example the last sketch I made, Shooting Stars, pushed me out of my comfort zone by using classes.

Meteor Belt (2016) Callum Bayle-Spence

Meteor Belt (2016) Callum Bayle-Spence

Involving classes was a difficult, yet worthwhile adjustment that facilitated a different type of interactivity connection. Namely what it allowed was for me to have three interactive bodies, whereas in past sketches only one single object or group would be modified through interaction. How a participant interacts with each of the three “stars” is the same, but the fact that each interaction is local to one body allows for the three simple circles to deviate from one another in a generative manner. Additionally to push the envelope I did not use a call to background, but instead a transparent rectangle the size of the campus that allowed for a feeling of animation, but also allowed for texture which none of my other sketches had yet.

Shooting Stars (2016) Callum Bayle-Spence

Shooting Stars (2016) Callum Bayle-Spence

What was intimidating about working with classes is that variables are kept within the class tab of the document, and all of my key presses up until then were in the main document in the draw function. These key presses were solely used to alter variables, and having to worry about which variables were where was a difficult hurdle. However, what I found out is that having classes actually helped with interactivity, as the key presses associated with the interactive bodies could just simply be kept in the class tab as well. Whereas in the past documents I had to have a multitude of lines of key presses with extensive labeling, the organization of the class tab allowed for a cleaner and easier to maneuver document. I am proud with how my ability to work with interactivity evolved into being multifaceted, and of course this could not have happened without what I consider my transitory sketches, Aurora and Nebulae.

Aurora (2016) Callum Bayle-Spence

Aurora (2016) Callum Bayle-Spence

Aurora was my third sketch, and thus the first one I worked in 2D, which like classes was an intimidating step considering I was losing the ability to work with a whole dimension. To give this sketch the same complexity that the 3D sketches had, I used multiple noise functions and calls to random, which became difficult as random and noise functions are trickier to control with variable changes.  The sketch ended up with a more quiet feeling than the past two for me, which went hand in hand with how I feel this sketch is the one I had the least control of. All of the other sketches have specific variable increases that I can see clearly reflected when displayed, whereas Aurora’s key presses to me are harder to correlate.

Nebulae (2016) Callum Bayle-Spence

Nebulae (2016) Callum Bayle-Spence

After grappling with Aurora for so long, another 2D sketch was daunting, but Nebulae came to fruition in the most broken apart process out of any of the sketches. For the other four I worked at the processing document until I had a foundation I was satisfied with, then I ran with it until 90% completion. Nebulae was quite different in that even after my initial idea of looped transparent circle getting progressively smaller, I had to leave the sketch and come back multiple times to make it progress. Ultimately I ended up with something I am proud of and believe looks aesthetically pleasing, but as far as interactivity is concerned I view this piece to be the weakest.

Galaxy : Ruby

Galaxy : Ruby

Galaxy : Emerald

Galaxy : Emerald

Galaxy : Rainbow Diamond

Galaxy : Rainbow Diamond






With the other sketches I believe the interactions were logical but the changes that occurred had a degree of surprise and worked together like multipliers to add to the spontaneity as more were interacted with. Nebulae on the other hand does not have that same degree of surprise, and if the other sketches had interactivity that multiplied, this one added. Different bodies could be interacted with, but in interacting with multiple elements it was not as if a whole new thing was being formed, just two tampered with shapes. Despite this setback, I am quite pleased with how this project turned out.

Meteor Belt : Venus

Meteor Belt : Venus

Meteor Belt : Cosmic

Meteor Belt : Cosmic

Meteor Belt : Negative

Meteor Belt : Negative






As a whole adhering to a space theme as well as involving interactivity served to be an interesting skew to my creative process that brought up many questions about aesthetics and what should get prevalence. Interactivity allowed for me to give my sketches several colorsets, which also begged the question whether to keep a consistent color theme over the sketches or use what fit each best. I opted for the later as individualizing the colorsets, I believe, was better for highlighting the differences in interactivity.

Aurora : Alone

Aurora : Alone

Aurora : Love

Aurora : Love

Aurora : Other

Aurora : Other






Nebulae : Mole

Nebulae : Mole

Nebulae : Lark

Nebulae : Lark

Nebulae : Crab

Nebulae : Crab






Shooting Stars: Dusk

Shooting Stars: Dusk

Shooting Stars: Twilight

Shooting Stars: Twilight

Shooting Stars: Daybreak

Shooting Stars: Daybreak

Conference Project Post-Mortem: Nature + Code

My conference project’s theme is nature and its replication using code. Nature is known to follow a system and set of rules while utilizing the slightest bit of unpredictability. The same can be said for coding: there are rules to follow, but there’s a lot of room for randomness. I wanted to incorporate this within my code and find just how close to the beauty of nature I could make my sketches. I was very inspired by Holger Lippmann’s work representing aspects of the natural world in his art.

When I began each sketch, I had a few guidelines but not many. For instance, the first sketch I created was Push + Pull based on my original sketchbook drawing of an ocean with the tide coming in and out. I knew what I wanted the general sketch to look like, but I was not prepared for the outcome which exceeded my expectations. With the use of multiple gradients, I was able to form the landscape without using defined shapes. Rather, the gradients are made up of individual lines that change color with each y value (probably?). Then, to add the value of the waves hitting the sand, I used simple noisy white lines. I was very pleased with the end result, not aware that I would even consider using multiple gradients. Even now there is still more I’d like to add, for instance clouds or boats in the distance, but for now I’m very happy with this sketch.

Sketchbook ocean

Sketchbook ocean

Push + Pull (2016) Kaili Aloupis

Push + Pull (2016) Kaili Aloupis

My following sketch Anthocyanin is based on an idea I had of flower garden. Flowers are very interesting and difficult to replicate exactly the same each time. Much like natural flowers, my coded flowers take on new identities with every run of the program. This was my most difficult sketch because it required me to take a concept like Wave Clocks, which has a lot of different parts, and expand upon it. I had to first find the right flow I wanted the petals to follow, but due to the noise in the sketch I could not create the same exact flower each time. I was disappointed, but eventually I made it work by controlling the variables as much as I could. However, it was very frustrating to find what exactly I could control and how. The rest was just a matter of finding the right colors and locations for each of the flowers.

Anthocyanin (2016) Kaili Aloupis

Anthocyanin (2016) Kaili Aloupis

Right now I’m still trying to perfect my Drip Drop sketch. It looks almost identical to the original sketchbook drawing I made earlier in the semester. I really loved the idea and wanted to make it as close to the original as possible. The idea was to create puddles during the rain, and as the rain falls there are ripples throughout the puddles. Instead of using a function to create raindrops like I had originally planned, I found I liked the appearance of simple random ellipses popping up.

Sketchbook puddles

Sketchbook puddles

Drip Drop (2016) Kaili Aloupis

Drip Drop (2016) Kaili Aloupis

Encompassing Sun is the one sketch I implemented 3D in. The first part of my sketch was the sphere in the center, and to make it more dynamic I wanted it to be a rotating sphere that zoomed in and out throughout the sketch. From there I discovered you could get some really interesting patterns when adding the rotate() function to noisy lines, hence the sun’s outer design. There was a lot I had to consider with this sketch such as transform() and push and pop matrix. A lot of it was just guess and check until I finally began to see how things were affected with each change. My plan was to originally just have the sun in the center, but I wanted other spaces in the sketch to be interesting as well, so the other rotating spheres could be other planets. It was a fun sketch that took me by surprise considering how much new material I used that I didn’t even think I would consider.

Sketchbook sun

Sketchbook sun


Encompassing Sun (2016) Kaili Aloupis

All in all, I’m very happy with my work for this conference. It’s really satisfying to see simple sketches in a notebook become dynamic artworks in code. I’m always surprised how different the final product is from my original intention, but I’ve always found it to be for the better. There’s still a lot I need to learn and understand in order to better control my sketches, but I’m very happy with where I am right now.

Conference Project Post Mortem: Replication of Works by Fred Tomaselli

Fred Tomaselli has created beautiful pieces of art on wood panels and various other materials that are considered to be “unorthodox”. His works have beautiful abstract patterns and designs, that look great to try to generate on the computer by code.

This conference I decided to replicate some of his most famous pieces and add a style of my own to it. I initially began replicating a design that consisted of circles that were repeatedly drawn around the canvas. As simple as it seemed as a design, it was a slightly hard to maintain the essence of Fred Tomaselli in the code, as well as add my own stylistic features to it.


By Saloni Patel, 2016

By Saloni Patel, 2016

Fred’s work has a variety of color gradients, something I haven’t added to my own generative sketches. Looking at other works of Fred’s, I tried to replicate a simple design of circles that variated in sizes. I added a range of colors and animated the design.

I tried experimenting with new technical lines of code like making a class file and using that to animate the sketches, and I used the noise, step and some sketches have some sort of interactivity.

By Saloni Patel, 2016

By Saloni Patel, 2016

As I went through each of his sketches, I realized that his work was a bit outside of my comfort zone to replicate, the colors, the size, the patterns, were so different than what I had been doing all semester. I have been critical of some of my designs as they aren’t as complex as Fred’s work, but I was very happy with experimenting with code and learning different techniques to code these beautiful pieces of art.



Conference Project Post-Mortem: Boolean Oceanography

img_0997 img_0996 img_0998

Preliminary Sketches for Boolean Oceanography ^^

For my conference project, I have made a collection of eight videos that use generative methods to create aquatic motifs through Processing sketches. In each sketchggg, vector drawings warp, contort, and move across the screen in jumpy, irregular, and vibrant patterns—specifically, drawings of whales, jellyfish, and the ocean sun fish. Some sketches are technicolor, blending all of the colors on the RGB scale; while some are monochromatic black and white. All of my videos explore the relationship between digital environment and code, creating imaginative, dreamlike, semi-psychedelic vistas of glitched out aquariums.

In the beginning of my project, I had a much more static vision for a project that relied more heavily on a drawer’s sensibility rather than a coder’s. My initial plans accounted for sketches that were much less dynamic and much less up to chance. These plans did not include the addition of noise or variance, and overall would have had very ordered compositions. As I worked on my virtual ocean, I experimented with different ways of adding noise and variance into my sketches. The more I played around, the more distorted and less ordered my sketches became. While there is undoubtedly a lot of room to add more noise and complexity to my sketches, I am happy with the way that they turned out.

What is right in my pieces is the overall aesthetic. I was able to translate my hand-drawn, loud, messy style well into code. I was very happy with the way that my project evolved as I worked on it. I was unhappy with the amount of restraint that the code had, and wanted to give my work, and the computer, more freedom. This comes across well in sketches like Mola Mola, where the messy, chaotic, rainbow knot on the left hand side contrasts hard against the solid black right hand side. While the drawing of the sunfish itself is highly ordered, and it’s path is somewhat ordered in a way, there is a lot of noise in its motion. The contrast between order and disorder of the two halves of the sketch, and the contrast between the order and disorder of the sunfish vector drawing, definitely highlight the way my praxis, and ultimate product work, changed as I was working on Boolean Oceanography.

The most difficult part, as I already touched on, was adding disorder to my highly ordered plans. It was hard for me to figure out ways that I could hand over more autonomy to my code, and allow it to speak for itself without specific and repeatable instruction from me. I was stuck making these trite little animations that had very few if any generative qualities. But, as I experimented and learned to add noise into my sketch, my work changed and took on a life of its own. Adding more disorder, more noise, and variance to my sketches made them more dynamic, more engaging, and more interesting to look at. My biggest challenge, one that I’m not sure I’ve quite met yet, has been adding variety to my sketches so that they grow and develop on their own and are not so heavy-handed, calculable, and exact.

Surprisingly, learning to vector draw was the most dramatic development of the project. I was really limited by my ability to only draw simple two dimensional shapes in Processing. Getting to draw the ocean-life shapes that I wanted was the most rate-limiting step of my project. Learning to vector draw really broadened my capacity to achieve my vision, and opened up the on-screen canvas. I found myself becoming more inspired when I was working with my own unique drawings instead of basic geometric shapes. I worked slowly, but with good work ethic throughout this project, but at the end when I was trying to add more noise and complexity to my sketches, I could have been more patient and taken more time to more deeply develop each one.

In terms of code, I used the active mode to create sketches that loop indefinitely. Some of my sketches, like Cnidaria Medusozoa, uses a custom function to reset itself and begin fresh each time that the sketch runs its course. Others, like Rainbow Cetology 1 and 2, repeat over and over again, new layers piling on top of older ones and never completely resetting itself. I tried to limit the number of variables, choosing randomization in many instances over specificity for this reason. Most of the time, I used variables to represent specific x and y location values, and then added standard increments to those values, sometimes adding noise and variance at each step. While all of my animations loop in some way, none of my sketches are interactive. While visually engaging, the viewer can’t actually alter the way that the sketches run in any way. This is an area where I could implement change in another iteration of this project. Genuinely, I tended to forego using axes in lieu of setting variables and choosing my own values. For whatever reason, this worked the best with my coding sensibility.

Overall, my final work does achieve a lot of what my original vision set out to do. Aesthetically, it is very pleasant to look at and is a good representation of my artistic sensibility. I love the way that my colors explode across the screen and are vibrant and almost corny. My colors add an old school vibe like something from an old arcade game. Where my project falls short is in its complexity. I said in my proposal that I wanted my project to be dynamic and imbued through and through with generative qualities. Unfortunately, I was unable to give my code the autonomy that I wanted to. I had trouble finding the balance of order and disorder that I sought out, and, in another future iteration of this project, I would definitely throw order out the window and try to add as much chance as possible. I think that I held too much control without allowing the system its own due measure of autonomy.

screen-0001-copy c-1227 c-0391 c0415 c-0145 c-0054


Conference Project Post-Mortem: First Impressions


My project is based on the works of Lothar Quinte, whose most known work is featured on First Impressions of Earth by the Strokes. I decided to animate and apply what we’ve learned in class to his images. Throughout the project I kept updating the images with what we’ve learned in class. Quinte’s works are simple and vivid. The goal of my project was to alter this fundamental theme of his artwork. The most common concepts I incorporated were noise and dimension.

In Kreisformation in Rot auf Violettem Grund (Circular Formation in Red on Violet Ground,1965), I added noise to the circle so that the size would change. In order to make it look like the circle is moving in and out of itself I incremented x2 and y2 by y. At first it was just something I had tried out in another sketch; however the result of a circle struggling to maintain a size was something that I wanted to include. I added dimension to the background to create a sort of texture. I wanted the end image to look like a record button since my project is based on an album. This is the sketch a featured at the top of this post.

In Untitled (1965), the artwork featured on First Impressions of Earth, I played around with incrementing the diagonal lines into a swinging motion and reset the framecount. I added dimension to this image as well to create a textured background. The one part I found difficult was to fix was how slow the lines swing. I wanted it to be more of gradual pace but once I added dimension it moved much slower than the original sketch.



In Quinte’s Untitled (1969) and played around with incrementing again – the end result created a textured background when two of the triangles swing down.







In Ohne Titel (also “Untitled”), I used alpha and noise to exchange the singular diagonal lines in the original for multiple lines extended to the corners of the canvas. Furthermore, to add a subtlety, I included an animated ellipse at the background of the image. In the original image there is lighter red spot on the right side of the image. To reflect this in my sketch I used alpha and animated the ellipse to move back and forth throughout the canvas.

Finally, in Blue Fields, III I tried to maintain Quinte’s simplicity in it’s entirety other than moving around the boxes and adding a repeat count.



It was a lot of fun adding the things we learned in class to this sketches. I was particularly surprised by how easy it was to add dimension into a sketch. I really love the way it adds a texture – especially one that is almost feathery and light. It was challenging to figure out how to adapt Quinte’s paintings and retain his style. As a new coder that is still learning about Processing, I was interested in chaotic, complicated sketches that contain a lot of detail. With Quinte’s work I had to try to be more subtle about it because I didn’t want to estrange myself from his simplicity. I don’t think that I’ll ever be truly done with this project – just like Quinte was never finished with his series of untitled images.


concept ideas


concept ideas

Conference Project Post-Mortem: Don’t Forget to Blink

My conference project assignment was to use Victor Vasarely’s optical art pieces, and recreate them using Processing. That wasn’t the goal, though; my goal wasn’t to make something that already existed. It has always been, ever since I started pitching conference ideas, to surprise the brain. The human brain is constantly searching for change in the world; it is always looking for the unexpected, which is why I wanted to create something that amazed. Something that has to be stared at, and every time, there is something about it that makes you look again. No matter what I ended up doing, that was the effect I wanted, and I hope anybody looking at the things I make feels the effort I put in to amaze the brain.

I took five images of work done by Vasarely and recreated them in Processing. At first, I was going to make them circle for circle, color for color, and pixel for pixel. Unsurprisingly, that was very inefficient and Circles pt.1 took me about two hours to code and about 30 minutes alone to do the color. Why did it take that long to code a bunch of circles? Well, I used individual values for the x and y position and the width and height of each circle. When one number was off, I had to find the messed up value and change everything that was affected. For every other sketch, I used variables, so it was faster overall and most importantly, easier to fix when I made a mistake. Throughout the project, I used the Digital Color Meter application on Mac to get the exact values for color. It took a while, but that was the best way to replicate the colors Vasarely used.


Circles pt. 1 ; coded in December, 2016, Kelsey Copley

Circles pt. 1 ; coded in December, 2016, Kelsey Copley

Circles pt. 2 ; coded in December, 2016, Kelsey Copley

Circles pt. 2 ; coded in December, 2016, Kelsey Copley









Mistakes were bound to happen; in my experience with coding, trial and error is a necessary part of the process, and that is part of what makes the final result so satisfying and amazing. At one point, I ran the sketch and a majority of my circles were nowhere to be found, and it was because I was using a minus instead of a plus, so they were somewhere off-canvas. That is just one of many examples I could give where things didn’t go my way, but there were also times where I would get the result I wanted and I would barely be able to tell the difference between mine coded on the computer and Vasarely’s painted works.

Patterns; coded in November, 2016, Kelsey Copley

Patterns; coded in November, 2016, Kelsey Copley

A common concept among all of the pieces is color. Color was so important in this project, I’d go as far to say color carries whatever success my project has. Variables became increasingly important as I worked on this project as well. As I mentioned before, only one of the pieces was made without variables, and it was by far the most exhausting one to make. In Patterns, I relied heavily on loops and break and continue. I used the primitive shapes for all of the pieces, ellipses for most and arcs in Patterns. I coded using the x and y axes for most of the sketches as well. One of my sketches is animated. Abyss was the first of Vasarely’s work that I finished, and while the color gradation was very successful in adding depth, I really wanted to make it move, so I made two of the series of circles and made them pass over each other. Elements I want to add in the future to these pieces and others like them are more animation, a small amount of noise, and a basic level of interactivity, that would most likely involved color changes.

Abyss pt. 1; coded in November 2016, Kelsey Copley

Abyss pt. 1; coded in November 2016, Kelsey Copley

Abyss pt. 2; coded in November 2016, Kelsey Copley

Abyss pt. 2; coded in November 2016, Kelsey Copley








“How was it to make?” My classmates and I were asked this question all semester, and it always stuck out to me as such a startling question. Each time I thought about it, my mind went blank. How was it to make? It was just hard and complicated and confusing, and most of all, frustrating. But it was also amazing and beautiful and so dumbfounding. How am I supposed to put hours of staring at a screen, countless dashed hopes, and unexpected results into words?

Coded in December, 2016, Kelsey Copley

Coded in December, 2016, Kelsey Copley

How was it making this conference project? The first word that comes to mind is stressful, probably because I just really wanted to get it right. More than anything, I just wanted to get it right and do everyone and everything justice. This made every second that I worked on and thought about my project miserable, until today, when I finished recreating the five Vasarely pieces, and made a few Vasarely-inspred sketches like the one shown here. Honestly, I don’t know what changed. One theory is the pressure of having to complete this post. The necessity to finish everything made me appreciate Vasarely’s work, the process of coding, and what I’ve learned this semester a lot more. I actually enjoyed working on conference today, which is something I couldn’t say before.

Whenever I complete an assignment, a paper, a project, I always say that I could’ve managed my time better so that I didn’t have to do so much at the very end, but at this point, I think it’s just my style. I actually like the doing the work when I have the high pressure to complete it. I’m happy with my project as it is now, and I’m excited to incorporate more animation, some interactivity, complexity, and the logical next step, make some optical art in the third dimension. This project will never really be complete, as I will always be trying to astound the brain with my art, whether that’s generative or any other type. I have many plans to continue using Processing and inspirational artists like Vasarely and Bridget Riley to make things that amaze.

This project has definitely been helpful in mastering a lot of basic coding concepts like variables and loops, but I have also been forced to use colors beyond grayscale and the occasional purple. What I gained most from this semester was of course learning a new awesome skill. I had known some Java previously, but this level of understanding is not something I expected from myself. I also have so much more appreciation for technology, and I have been introduced to another facet of art that I will be involved in for probably the rest of my life.

Conference Project Post-Mortem: Abstracted Interaction


For my conference project, I ended up with five sketches inspired by Malevich and decided to be more subtle than I expected with the interactive qualities. I feel that Malevich’s work already displays interactive qualities just based on how he places his shapes and I tried to do the same using processing as my medium. In efforts to promote some subtle interactive qualities to bring Malevich’s style into the present, I used mousePressed to swap colors in each sketch.

Through the evolution of my project, I developed a clearer vision for my series of Malevich-inspired sketches. I used a more consistent color palette and learned how to make vertex drawings in my pieces. The color palette made each installment of my series go well together and help abstract the off-black and off-white colors that are a part of each sketch. In Malevich’s paintings, it is rare that you will find shapes that are not a little off in their positioning. This makes his work look more abstracted and chaotic but his consistency in this chaos makes his work still all go together smoothly. Vertex drawings really helped add this abstraction to my own pieces and help me stay true to Malevich’s asymmetrical attitude in his art.

In every sketch, I went in with a vision but each time I ended up with a completely different sketch. Vertex drawing influenced this element of surprise in each piece because I would hack into my own vertex drawing code and change the numbers in subtle ways to see the big differences that could be made. Only sometimes, I wound up with a vertex drawing that I had in mind. I feel that I tend to overthink in my art and while I appreciate Malevich’s randomness, that does not come so naturally to me. Hacking into my own code really helped motivate some chaos in my sketch that gave it an abstraction that could match Malevich’s philosophy. Throughout the process of making my sketches, everything that went wrong or strayed away from my initial vision ultimately influenced something else going right.

My conference project had to be put on hold for a week because of a big conference paper I had due and with all that stress I had little inspiration. Right when I finished my conference paper, I immediately felt ready to revamp this conference project. I was surprised by my sudden inspiration and ended up making these sketches below that I feel very proud of.

Preview of – Ruby Alioto “Abstracted Interaction”:

screen-shot-2016-12-02-at-3-35-55-pm                             screen-shot-2016-12-03-at-10-40-08-pm


Kazimir Malevich “Suprematist Composition”:


malevich - ruby       56fa2d40a6e3cb39394b7d9e9336800a

e70612960ce57a04a5d9e92a00324d69              theo-van-doesburg-arithmetic-composition-1930


My sketchbook:



Although my conference project had to be put on hold, I still feel like I did well with my time management. I actually can strive under pressure work-wise because I like having things to do and I like to keep myself busy. I did not feel too much stress and I just let myself have a little time away from my project so that I could come back to it refreshed and motivated to do it right.

I really enjoyed doing this project. I was initially very inspired by Baldessari but his work led me to Malevich through some research and I’m very glad that I found his paintings and stuck to this assignment. His work really encompasses the style of art that I would like to reflect when processing is my canvas. Through the first trial of this assignment, I made work that I liked but did not love. My first few sketches did not stay true to Malevich’s asymmetrical abstraction and consistent color palette. I wanted to learn more about Malevich’s attitude on his paintings and really do a better job of representing these aspects in my own work. I feel that I reached this goal through some unexpected routes and ultimately really loved working on this project.

  • I used variables to swap colors which added an interactive quality to my work.
  • I used a consistent color palette to shadow Malevich’s work and messed with the interaction of these colors by using mousePressed.