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

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. Self-portrait 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.

System: The Eisenberg

Screen Shot 2017-12-14 at 12.38.50 PM

Final form of the system while the background is gray

I knew going into this project that I wanted to try and create a map of a social network, based on Nicholas Christakis’ Ted Talk entitled “The hidden influence of social networks.” I decided to have a set 12 circles representing people for my map and to show the connections between people I would have them be different colors and then the circles of the same color would be connected. After some consideration of using a RGB color wheel, I decided to use a traditional red-yellow-blue color wheel for my colors because it seemed more natural, and I thought a user would be able to see what was happening with the colors more easily.
Screen Shot 2017-12-11 at 8.42.58 PM

System with plain gray background and no lines connecting the people

The most difficult part of this project was to get the pressing of the “a” and “s” keys to complicate and simplify the system. I had to figure out how to get the colors to change at the press of the key while simultaneously having the previous circle not show up and the lines continue to change. I had difficulty having the circles change color randomly while also having the draw and undraw line functions work correctly in conjunction with the button press.
Screen Shot 2017-12-11 at 8.42.45 PM

System in its initial state with the connections of the lines

To simplify and complicate are the main two rules of the system, and they are also the ones that the user can interact with. The other rule is to connect, which is done through the lines that connect the people of the same colors in the system. This part of writing my system was easier than I anticipated because I formed a loop that would find the color of each circle and draw a line to all other circles of the same color. The removal of the lines with each complication and change of the system was slightly more complicated but I set the lines so that they were a much higher stroke weight and were the color of the background when performing the undraw function.
Error screen of the system

Error screen of the system

I based the decision of what colors to make the backgrounds based on the reading I did by Josef Albers about the relation of colors to each other. When colors are placed on top of one another they react in such a way where sometimes one color can take away from the other, making the other color look different than it should based on the actual color value. I chose to make the “error” screen the same red of the red from my list of colors. I refer to this as the “error” screen because when the system has that color for the background the system cannot be simplified anymore. All of the circles on the error screen are also red, directly showing that the group of people cannot be simplified any more because they are all represented by the same color. With the white pattern on top of the background color, I wanted to see how the colors of the people interacted with the color of the background when the white pattern was in between. For the “error” screen, the red circles seem to look darker than the background, and I think that the circles in contrast with the white lines cause this effect.
The system when the colors have reached their most complicated and the background is yellow

The system when the colors have reached their most complicated and the background is yellow

I had a similar thought process for choosing the yellow for the other background. I would normally never use the color yellow that I picked because it’s too bright for the type of color palette I prefer. I chose this because I thought it would perhaps make the somewhat more subdued colors of the people look even more soft and also perhaps darker. This worked out somewhat, although the colors with yellow tints became somewhat more difficult to see or tell the difference between. I think also the background yellow looks more green-tinted in relation with the colors of the people.                                                               Screen Shot 2017-12-14 at 12.38.25 PM Screen Shot 2017-12-14 at 12.38.40 PM
The final version of the system with the circles slightly different sizes based on their color, changing through the different iterations and changes of the system

The final version of the system with the circles slightly different sizes based on their color, changing through the different iterations and changes of the system

I really enjoyed doing this project because this idea of the human social network is one that I think about often and have thought about since I first watched this Ted Talk two years ago. I am really intrigued by the idea of the idea of being influenced by people who are far away from me in terms of social connections, plus I really like seeing human relationships mapped out. Independent of this project I have considered drawing the relationships in my house as a map multiple times this semester. Making this piece has really been wonderful and I really enjoyed seeing this concept I’ve thought so much about come to life. I’m planning on researching force directed graphs so that I can possibly continue to make other pieces like this that are more complicated in the future.  

System: Polygons and Colors


Final – a series of separately colored polygons rotating as two flow across the screen in the front. Name: Polygons and Colors.

For this project, I did something very new—maybe not at this point because it feels like I have been repeating that statement a lot in this course… but at the time it still felt new! I began working on the polygon starter file with no real linear ideas attached to it. The most stable ideas I had included two goals: make something that could resemble deep space, and experiment with color. I also wanted to work with the snowflake sketch.js, but I left that out because I thought the piece was going in another direction and I could not find a way to fit in that felt right.

Starter Colors

Starter Colors

Starter Colors

Starter Colors

Before starting with the code, I found the starter colors. I call them starter colors because I did not end up using any of them and knew very well that I would not toward the end. A majority of the code works around what colored polygons I wanted to emphasize over the others. In a sense, I tricked myself into thinking I had found my colors and worked from there. The colors I used were very similar to the abstract clock assignment’s colors in their saturation, which, looking at them both now, is surprising. Over this semester, coding has helped me play with color theory. Just like with coding as I explored it, I learned it. But before then I did not like bright and saturated colors. They can easily over-stimulate me due to my sensory integration disorder. But in my system piece, I think I found brightness levels I am comfortable with.  
Grid and Lines and Polygons 3

Grid and Lines and Polygons 3

Grid and Lines and Polygons 2

Grid and Lines and Polygons 2

Grid and Polygon and Lines

Grid and Polygon and Lines

Lines and Polygons

Lines and Polygons

When I started out, I played with semi-randomized lines in the front to add more of the dimension that I originally sought. I also played with a turquoise grid and kept the polygons small. But it was so separate that I felt it was missing the point of the assignment and thought I had coded myself into a corner. As I worked with them, the lines, grid, and circles grew apart into their singular characterizations. The randomized lines in the front never connected to the polygons in the back or added enough depth and, to my frustration, became more out of place after each session and seemed to be the only ones that were evolving. The code itself was also set up as very separate, and toward the end of the project, I felt I had coded and colored myself into a corner. How would I get them to work together as a functioning system?
Une retrospective

Une retrospective

At first, staring at Molnar’s Une retrospective for inspiration felt counter-productive. It was still separate! Looking at it now, I know that the more I worked, the more the colors began to expand and almost blend until it arrived at the final result. And I know now that Molnar’s painting isn’t actually that divided. Or, one doesn’t have to look at it that way. In each work, she uses the implication of movement. From Lettres da ma mere (Letters from my Mother) to the one I showed above her lines and shapes always suggest that a change is occurring. I already had the polygons spinning and wanted to keep that but then I began experimenting with making them move in another way as well. The spinning along felt monotonous. Adding a loop, I made two of the cut-off and off-center polygons rotate across the screen in a recurring wrap to make it a little less expected and languid. I also changed the direction of some of the polygons, the opacity and, of course, the size. I think the turning point was when I got rid of the lines. Once I did the subtle changes were highlighted more and made room for adding smaller and less translucent polygons in the back. To conclude, I think I accomplished a lot with this piece. The process felt natural and I think the spinning sequences and imperfect interactions help to make it more entertaining to a curious audience. The colors are vibrant (for me) but do not overpower it (or myself). And the movement remained odd yet weirdly calming.   Thank you for the opportunity. Izzy Singer

Scrolling Wallpaper — Izzy Singer

This wallpaper did not go through as many phases as my last project. Here I dabbled with the movement more than the official look. It is meant to capture some of the movement of a city. I struggled with the colors because most new york buildings’ are shades that do not translate well to code. Color-wise I ended up doing something very different from what I traditionally think of as “city colors”. Maybe some of Times Square made it into the project. (Which would be very upsetting for me because I am a native New Yorker and you must know how we feel about Times Square.)   At first, I wanted to work with solids to get a feel of a crowded cityscape. I thought having it move strictly where the eye could see it might also encourage a feeling of closeness or stacked-ness. However, the disappearance of the moving rectangles (I called them the “buildings” in my notes) added another characteristic of the city: passing things by.  
Stage 2 of Scrolling Wallpaper Assignment

Stage 2 of Scrolling Wallpaper Assignment

Stage One of Scrolling Wallpaper Assignment --adding the grid

Stage One of Scrolling Wallpaper Assignment –adding the grid

The piece hit a turn when I added more of what I noted as “clocks”. Unlike the green one they ended up being very stationary arcs but I felt that it got some of the idea of change across. I decided not the make the clocks move (perhaps I will in the future). After all, the city houses a very stressful look at time as well as the unexpected. I added the text simply because I like being a bit literal. I also knew the shapes and clocks and grid might not get across everything going on in my head as I worked on the piece. The text consists of the phrases: “the city” “and all its people” “always moving” “do I have enough time?” I wanted the words to capture  the idea of walking through the city rather than stand as complete thoughts or phrases. So I took thoughts I had and cut them to a point I was comfortable with. I may not have gone as far as I could have with cutting the phrases. But in the end I liked where they ended up in the piece and felt they captured the idea even if they were a bit on the nose. In the end I messed with transparency; completely going back on my old idea. I cannot immediately explain why but one reason I came up with–that made sense to me—was: the city is too complicated to be solid and wordless. The dark colors are a choice that I fall in love with and fall out of love with frequently. However, they work well to emphasize the shadow that sometimes falls over the city. ClockFinal         ClockFinal2


  螢幕快照 2017-12-14 上午1.29.33   Screen-Shot-2012-09-18-at-9.07.10-PM-1265x700WechatIMG65螢幕快照 2017-12-12 下午2.44.275a896dacaacbdf1203716ef60315f98b_l   This time, my conference title is “radioactivity and beauty”–yes, another work about Japan. Since I am still new to the outside world, at the very beginning, my topic was about New York; however, the loose idea could not become something which is in a system. Hence, based on the figure of cherry blossoms and radioactivity, my conference structure slowly comes out. I constantly think about the topics about Japan is all because of my own instinct interest.I definitely like their cultures and symbols, while I dislike several aspects of it. My favourite symbol of Japan is cherry blossoms, and I chose the radiation as the contrast against the beauty of the country. Coincidentally, I visited the show of Japanese artist Yahoo. Kusama in New York and really inspired by her. The circles she made is diverse from other similar patterns to me. I’m actually afraid of images or symbols that concentrating together, but her work just leads me to overcome this fear. From her work, I understand that  dense symbols can bring a different effect to viewers. Thus, I wanted to try this kind of pattern for my conference as well. The original image of my code is a flourishing cherry blossom tree. Then, I convert the flowers into a loose status–making them look like “the cherry blossom rain”; the final image is like symbolised, grey, faded flowers with the spiral lines– I have to say it is my favourite object of this course, because the regular rotation can be endless, and the pattern it has also fits the “system”. Actually, the cherry blossoms are converted by snowflakes. I changed several variations to make them be like radioactive elements, and the spiral lines are also like radiation lines. The successful part was to make the falling of snowflakes and the rotating spiral lines. Before I tried that, I thought it would be a little bit messy but it seems like look nicer that my prediction. It also went much quicker and better that I thought. This time I tried to avoid mistakes since I had spent pretty much time being inspired and structuring my work. Hence,I checked several codes that I wrote before to see how can I avoid unnecessary mistakes. Fortunately, except some errors happen to the changes of variations, I barely made mistakes! I felt really good and satisfied with this progress. The only thing that really confuses and becomes the most time consuming part to me was to add more things to my work. However, due to the concentration of the flower symbols, I thought a lot of diverse patterns which would not generate the scene too messy or denser. Then, Kusama’s exhibition inspired me again–the amazing, cute white circles just send me image of snow–another traditional symbol of Japan to myself. Though cherry blossoms will not appear with snow simultaneously, the scene of the two symbols combining together still makes the work look better. In Japanese, there is a special phrase to describe the flurry of falling cherry blossoms.Interestingly, the direct translation should be “cherry blossom blowing like snow”  (桜吹雪, sakura fubuki). I borrowed this idea by adding “snow” to emphasise the strong contrast with the radiation lines–when two opposite elements meet each other, the feel and demonstration will be more unforgettable. Consequently, although my final work is not complicated enough in coding, but from my perspective, the artistic idea should be more essential and important. It is also what I learned from this course by seeing various famous works from modern artists; and now I also understand that arranging more time for inspiring is definitely not a waste of time. It will help you to have a clear structure to illustrate your idea.

System: Germination

In one of my other classes this semester, I am working on an experiment involving seed germination. In this project, we took fungi found on Andropogon seeds and reintroduced that fungi to a different set of Andropogon seeds. The intention was to then measure the germination rate of these seeds in comparison to a control in an attempt to see if the mystery fungi were pathogenic. However, nothing in this process went correctly.
Every single one of the petri dishes we were experimenting on became contaminated, including the controls. While this had negative effects for our experiment as a whole, it did end up looking extremely interesting. Our experiment became largely more complicated than expected in terms of usable data, but much more interesting as a person interested in fungal and bacterial growth.
My original plan for this system was to try and replicate the original experiment, including the ten Andropogon seeds and the mystery fungus. I spent perhaps too long trying to set up an easy and clean system for setting up the seeds. However, I decided it got too visually complicated. I realized it would become very easily unclear exactly which seeds had germinated and which had not. So I instead opted to go for a single large seed in the center of the dish. This would make understanding the system more feasible. While making this choice made some visual issues easier, it did set me back quite a bit and made much of the work I had done useless.
Once the seeds had been taken care of, I then started work on the actual contaminants themselves.
First I wanted to go with the black dots that covered the plates and surrounded the seeds.
Then, I wanted to replicate the odd beige rings that were found around many of the seeds. The second photo is not the most successful at actually capturing how they looked, but I was looking to replicate a series of being rings that surrounded the seeds individually, in nearly the same shape as the seed itself, only larger. Finally, I wanted to find a way to recreate the look of the hyphae, a network of fungus that took root in the material we used to grow the seeds.
Right now, this is how my system looks. It is still a work in progress, held back slightly by the time spent on the initial, unused idea.
wip_petri0 (2)
From here, I need to instate the system by which the seed germinates or not. I also hope to add another contaminant in, one based on the black spheres that grew in the plates shown below. I also hope to add more detail to the seed itself.

System: RosieRose



When I first set out to code a system, I was lacking in inspiration. I knew I wanted to create something that I could have an emotional connection with, but I was uncertain that I would be able to code a system with a narrative. As I considered the possibilities, I begin playing around with Angela’s afc_25_system_01_05. I found the simplicity of the system approachable. I appreciated the ellipses and the subtle movements of the particles. As I became familiar with the code, I found myself considering systems in relation to the Internet. I considered Wi-Fi in general, and then I considered my own Wi-Fi, “RosieRose”. It became clear to me then, I would create a visual representation of a Wi-Fi I have carried with me from one apartment to the next.

Inspiration 01

My Wi-Fi, “RosieRose”, is named after my recently deceased, beloved family dog, Rosie.  My Wi-Fi, and Rosie Rose herself, inspired my system of the same name. Rosie passed away one year ago, but I like to think she lives on through the waves of my Wi-Fi. I connect with her on a daily basis, I share her with others. My RosieRose Wi-Fi is a space I have carved out for the dog I loved, so she could live on through the waves of the internet. I have created a visual representation of this space through my system. As I began to code my system, I knew I wanted to utilize a similar color scheme to the ones that I had been implementing in my pieces throughout the course of the semester. I like to experiment with different shades of pink to create a visually appealing atmosphere.  I utilized three different shades of pale to rouge pink in my system, in the effort to evoke the detail of a pink rose. After determining my color scheme, I did some research to figure out how to portray a rose through simple shapes. I decided on a circular pattern of overlapping ellipses.  I was satisfied with the design, as it would allow for further experimentation with color by utilizing different degrees of transparency.
Inspiration 02

Inspiration 02

Initial Color Scheme

Initial Color Scheme and layout

  As I continued with my code, Angela suggested a wrap function would be more effective than the bounce function I had been utilizing initially. Switching from the bounce function to the wrap function allowed for my representation of falling petals to come across more effectively to the viewer. Out of all of the elements in my system, I am most pleased with the visual of the falling petals. I carefully set their speed and position to encourage a sense of density in the space. I wanted the smaller petals to fall slowly, the bigger falling faster, to give the viewer a better understanding of the environment and the delicate nature of the rose.   Throughout my experience of coding this system I experimented with utilizing visuals and text to communicate the narrative to the viewer. I considered using Rosie’s face as the center of the rose, utilizing photoshop to create a useable outline. I also considered inserting the Wi-Fi’s name into the system, but I found both of these approaches would be too obvious.
Images and Text

Images and Text

After some experimentation, I decided to incorporate Rosie’s image into just one of the falling petals.   I placed Rosie’s face inside the smallest petal to create a delicate visual, evoking the meaning of the piece. As the last petal to fall out off screen, I found this emphasized the emotion I was trying to convey.   I continue to struggle with making the code interactive. I have been trying to achieve incorporating the KeyPressed function into the system so the viewer can interact with the code, encouraging the space to be more spontaneous. I have not yet been able to successfully incorporate the KeyPressed function; I hope to get some input from my peers so that I may include this function in my final product.   Overall, I am very happy with this piece.  I am most satisfied with the color scheme and the movement.  I was initially uncertain if I would be able to capture the emotion I feel towards this intangible environment through coding, but I feel like I have accomplished just that.  My hopes for the final product would be to take it a step further with the KeyPressed function, but if I were not able to implement that function into my code, I would still be very happy with what I have created. I found the experience of coding this system, in honor of Rosie, to be very emotional, as I was finally able to create a visual representation of the space I had initially created to keep her with me.  RosieRose is a piece I thoroughly enjoyed creating and am very happy to have had the chance to do so.



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: Four Parameters

Current Realized version of "Four Parameters"

Current Realized version of “Four Parameters”

My conference ecosystem, Four Parameters, is inspired by Frieder Nake’s Matrix Multiplication, a series of mathematical solutions represented as computer art. My conference originally began with thinking about evolutionary art as I attempted to replicate the movements of ants in an art farm, but I found myself more and more compelled to follow in the footsteps of Nake and other artists who take mathematics and analytical data and find ways to transform this information into visual art. What strikes me about Nake’s work is his use of color, his ability to collage rudimentary shapes into a greater mosaic artwork, and his ability to create patterns in a digital space that appear almost woven or as if they were created from a textile. For my conference, I tried to create an ecosystem that, after being refreshed, or after input from the user, would change color and dynamism while still maintaining a sense of evolutionary similarity with the artwork prior.

Frieder Nake "Untitled"

Frieder Nake “Untitled”

Four Parameters replication of Nake "Untitled"

Four Parameters replication of Nake “Untitled”

Nake’s work is deceivingly complex; I know this firsthand after trying to code my own Matrix. Nake’s work cares a great deal about space and composition, and so I had to reflect on those aspects as well. What I struggled with the most in my conference was manipulating the canvas and figuring out exactly where my shapes would be drawn. In my sketchpad I had an infinite amount of room to plan and layout my design, but once I started coding loops that would draw multiple shapes, the interactions of their x and y coordinates became hard to locate. That was also part of the fun, because sometimes my errors would lead me to very interesting mistakes.

Errors can certainly be a roadblock, but other times my errors provided me an insight and a deeper, more profound understanding of the artist’ design, and helped to propel me forward down a new path of inspiration. Still just a beginner to art and coding, I had some assumptions about how the code prioritizes the overlapping of calls to draw shapes and translate without the use of push and pop to separate design elements in an object. I had to reconsider the placement of objects and the very order and outline of my code itself. I saw quickly that the more organized my code was, I was able to maintain and keep sigh of my goals in the distance. When my code became longer and more syntactically complex I found myself overwhelmed by the code I had just sat down and written. I had to be extra thorough when re-reading and trying to find errors in my code that would break my art.

Error leads to interesting patterns and inspiration

Error leads to interesting patterns and inspiration

Additionally, while working on conference I came to understand that there were multiple ways and approaches to reach my desired goal. I often had moments where I recognized the opportunity to just hard code a parameter, or make changing a variable accessible by input in the function parameters (for ex: function(x_asis,y_axis)). There were many ways I could go about my code, and finding the most effiecient solution wasn’t always apparent on the surface. I certainly gained a better respect for Nake as a pioneer of computer art at the intersection of mathematics. It was illuminating to work in his footsteps, and to consider that every process in art is intentional and mathematically understandable, and vice versa there are moments of artistic beauty in math as well.

Changes in the ecosystem

Changes in the ecosystem

My first several iterations I just worked with turning the basic shapes in objects that would be able to experience other forms of transformation (rotation, translation, change in scale). Even in the overlapping and multilayered chaos of Nake’s works, his choice of shape and specifically the color palette he chooses also the viewer to still distinguish and recognize individual shapes. Lines couldn’t be drawn on one another completely blocking out the lines below; I had to really pay attention to the opacity, saturation, and depth of field I was creating with my shapes, even if I assigned some parameters to move randomly within a given boundary.

Next came rotations and finding ways to slightly alter my ecosystem every time the user refreshes. One of the other reasons I really like working with an evolutionary system in the vain of Nake’s work is the very subtle white and gray backgrounds he frames his works on top of. While someone else may say that Nake’s backgrounds don’t lend much to his artwork, I would disagree and say that all of Nake’s colors and even the materials he prints on adds to the collective composition. I love thinking about the modernity of Frieder’s cubic design and palette at a time of few graphic designers or artists, but how his design already prefigures and predated the waves of graphic design that will follow after him.

Next, I changed the color scheme from the original blue, yellow, and red to rotating between several different pallets on refresh. When creating this evolutionary system and thinking about Nake’s work, I always wonder how a change in color can completely transform a work’s tone and atmosphere. Nake’s Matrix Multiplication and many of his other untitled works have a very deliberate color composition, and I wanted to follow is his footsteps.

Slightly changing rotation to achieve a new template

Slightly changing rotation to achieve a new template

Again, I struggled the most with translating and moving around the canvas, but my inspiration still burns and I have several more things to add! With additional time, I hope too the ability to take in user commands with the mouseX and mouseY values to rotate individual squares on their axes. I also want to elaborate my pattern more and on refresh and new pattern should be generated. With certain keystrokes or presses the user should also be able to change the size of some of the squares on the canvas.

Overall I think my ecosystem needs some tuning up and optimization, but I am very enthusiastic with more attention I can make a very interesting ecosystem like Nake’s work that explores gradualism, pattern, collage, and color in a mathmatic vein.

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 with Angela 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. Angela 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 Angela’s criticism 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 with conference with Angela 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. Angela 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.


Hampton_conference_3 Hampton_conference_2 Hampton_Conference_1   This piece is a simulation is which circles move around the screen and bounce off of each other and the borders of the screen. The circles work as a way to create the sounds which are the focal point of the piece. Each time the circles bounce against the wall, a note is played, and whenever the circles bounce off of each other, a kick drum is hit. Slowly, as time progresses in the piece, the notes begin to change to outline an arpeggio. Each time a circle collides with another, an internal value goes down. After enough of these collisions occur, the note changes, and once at the last note in the arpeggio, the circle begins to change shapes into different multi sided objects and eventually at the very end they become short thin lines. Once every single circle changes into one of these lines, they all become circles again and the arpeggio changes. The process repeats twice with the final time being a chord played all at once instead of individual notes in a chord. This was somewhat inspired by Jon McCormack’s Eden audio-visual piece which has lifeforms grow over time and make music. Along with Jon McCormack’s visual aspects and concept, I took a lot of inspiration from the music group Autechre which used the max coding language as the basis for creating all of their music. They used programming to trigger different sounds when different events occurred and cause the piece to modulate of time. Along with the circles, there are a few extra visual elements in the piece which are triggered based on the sounds that play. In the bottom left corner of the screen, there is a wave like shape which is actually a visual representation of the frequencies spectrum of the audio coming from the circles. The spectrum will flare up as more and louder sounds are played and will become much smaller when there is no sound at all. In the top right corner, there is another spectrum which will only play when a circle bounces off of a wall and a note plays. This spectrum stays on the screen for only a split second and is used to add extra weight to whenever a sound is played. As the circles reset and the notes change, the colors of the spectrum also change. In the final moments of the piece, the colors are just black and white instead of more vibrant colors which adds contrast and weight to the ending. In addition to the spectrum in the corners, there is an additional visual representation of the audio whenever the circles collide and a kick plays. When the circles collide, a waveform of the sound currently playing in the whole piece will shoot out form that circle in a random direction. This helps out somewhat to make the kick shine through a bit since the visual is very striking and the kick is a bit quieter than the notes being played. Overall, I’m happy with the way this piece turned out even though I wasn’t able to do everything that I intended to. I feel that the music is interesting and it reminds me of a lot of different ambient artists that I respect, however, I wish that I had more flexibility in javascript to change the sounds more such as being able to add a filter to sounds over time. I think that the chord progression the arpeggios outline flow nicely and the ending where the full chord is playing and the note is held out longer than the earlier parts feels climactic. One thing that I’m both happy and frustrated with is a bug in the code which can sometimes cause two of the shapes to become stuck together until another shape collides against them at just the right angle and causes them to become unstuck. Having two shapes endlessly collide against each other causes the kick audio file to trigger over and over again, 60 times a second. This causes an awful noise and consumes all of the other sounds that are being played, but this creates tension. When the notes become unstuck which could take minutes, the piece goes back to normal and the tension is resolved. The same problem occurs when the shape gets stuck on the wall moving back and forth on the side until it gets unstuck. The sound of one of the notes gets endlessly triggered until eventually something causes it to get unstuck. The process of coding this piece managed to be both easier and much harder than I expected it to be. I initially thought the hardest part of the piece would be getting the sounds to trigger and interact in interesting ways since that was effectively the bulk of what I was doing. It turned out to be one of the simplest parts of programming the entire thing. Instead, it was the little details and touches that ended up taking the most time. For instance, getting all of the shapes to reset at the same time and start a new arpeggio was quite challenging. It was easy to get them to change to new notes, but it took me an extremely long time to figure out the proper way to make sure they all changed at once. Another thing that was very difficult to implement was getting the waveforms that are emitted when the shapes collide to come from the shape doing the collision. I wanted to have the waveform emit from the shape to another shape creating a link, but The positioning of the waveform was very finicky. For some reason it didn’t ever connect to the x,y position of the other circle even though when I tested it in another program with just the waveform it worked perfectly. I used the same code and inputs, but it just wouldn’t work at all.

Collage Assignment — Izzy Singer

Collage By Izzy Singer  
Collage -1

Collage -1

Collage - 2

Collage – 2

  First Idea: Irony   Before I started coding I made memes. In today’s world, memes are the best way of getting multiple ideas across at once with minimal words or pictures—I often struggle with getting my point across.   In addition, I wanted to make the piece about irony and my life and how well the two coexist. Irony is not something that can be easily described (at least for me), especially when referring to one’s own life. in my life (that I have always taken much joy in). Going back to the reading thing, I would still incorporate that because if you think about it falling in love with reading through such a controversial medium…   [see this comedic plea for respect on behalf of comic book artists in the UK:]   …is ironic. The fact that I only read novels for seven years afterwards is even more ironic. And the fact that I have once again defected to comics (and similar mediums) is a kind of beautiful justice.    






Second Idea: Reading Pictures

After I abandoned memes and irony I wanted the piece to house all the different ways I read pictures. For a very long time reading pictures, watching movies, or simply avoiding written words at all costs, was a vital part of my childhood. I started collecting and editing pictures of book covers and illustrations that had an immense impact on me before I learned to love reading.  
Encyclopedia Edited

Encyclopedia Edited

Encyclopedia Not Edited

Encyclopedia Not Edited

Final Idea: My Ironic Relationship with Reading   I do not remember or know why someone bought me The Illustrated World Encyclopedia of Marine Fishes & Sea Creatures by Derek Hall and Amy-Jane Beer. In addition to my dislike of reading from age 4-7 I was a mostly mute, autistic girl with Nicktoon and TV-commercial inspired echolalia. But the illustrations were very lovely and I enjoyed staring at them endlessly, naming them and making stories for them, etc.   Things changed then I was eleven. Diary of a Wimpy Kid and a small copy of Baby Mouse Queen of the World had me fall in love with reading. Something about those stories made me forget how hard reading was as an action long enough to delve into the story. A year later my middle school teacher had us read The Lightening Thief: Percy Jackson and the Olympians by Rick Riordan. It was first time I had ever intentionally challenged direct orders from a teacher. The rule was: “don’t read ahead.”
Harry Potter Versus the Dementors

Harry Potter Versus the Dementors

After I fell in love with reading my interactions with images were often restricted to the illustrated chapters from Harry Potter, TV, computer games, and the digital book covers of Twilight fan fiction made in the Mac Application: Preview.   Senior year of high school scared me away from reading: Tess of the d’Urbivilles by Thomas Hardy and Franz Kafka’s Metamorphosis were traumatic for me—I ran to video games, anime, manga and the occasional memoir. I try to present this in the piece by putting pictures of anime and videogames alongside the book art. Though I do not like reading (again) I wanted to display their importance. I hope that the piece can stand on its own because I know that a lot of this background could not be captured in it.  
" many books" -Toriel from 'Undertale'

“There are so many old books I want to share.” -Toriel from ‘Undertale’


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 ot 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 rect 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 hangup 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 asethetic, 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 like 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      

Subtle Contrast

My main inspiration for this project was Bridget Riley’s work. Specifically, I looked at Shadow Play and Natraja. These works have a lot more artistic depth than I could hope to replicate with my amateur abilities, but I really like the way she displays and compares color. To begin, I spent a couple hours creating different patterns that allowed me to contrast color in a similar way. I settled on a grid of right triangles, because the combination of the grid and diagonals resembled Bridget’s work.


From there, I wanted to create more color mixing. I added a circular rotating ellipse that was transparent enough to see the base pattern behind it. The ellipse is constantly shifting color as well, ensuring even more combinations. The sliding rectangle serves a similar purpose, lightening the triangles it passes over so that they can be seen from both perspectives every time the background updates.
Background + Mobile Shapes

Background + Mobile Shapes

Finally, I realized that all the bright colors made my wallpaper look rather childish, and subtracted from the overall experience. To alleviate that, I made the differences in color for each set much less vivid (either dark or light). In the final product, you get contrasts in each square, between the triangles in a set, and against the mobile objects.
Scrolling wallpaper final

Final Product


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.


Scrolling Wallpaper

My original idea of the wallpaper comes from “time”– When I choose new wallpapers, I always think about how to make the clock of my cellphone clear. Thus, I use many elements about “time” for this assignment. The picture itself only contains two very basic shapes: circles and lines; complex shapes will not form without them.  The circles in the pictures present different planets, and the blue one represents the Earth. Since the Earth is rotating every second, the time flies. The idea from the universe inspires me to use the Riley Circles, but change the circle into lines. As time goes by, the lines become darker, and it means that time will bury everything eventually. It was actually a clock-like shape at the centre, but I will save it for next time–it makes the picture more messy. I am not that good at wrap and parameter so I need to work on that…;0





Scrolling Wallpaper

I was uncertain of how I wanted to create a central background to the canvas.  I was influenced by the Annie Albers grid at first except I wanted to make it a resemblance of a grid more though, and less colorful.  I wanted the lines to be almost indistinguishable from each other.  After playing around with the code, I came out with a pattern that made the space between the lines smaller and smaller as you go across the pattern.  It changes the color of the canvas as it advances to the right and gave it somewhat of a three dimensional feel. Screen Shot 2017-10-30 at 7.45.38 PMScreen Shot 2017-10-30 at 10.35.22 PM   I experimented a lot with the random functions with my color and in size of the shapes as well.  When I was visualizing it in my head, I first thought of placing random sizes of rectangles along the y axis, but I was unsure of exactly how to place it.  When coded, it looked chaotic like and I liked that concept to further influence my code. So I decided to place the same type of code just along the x axis.Screen Shot 2017-10-30 at 7.39.14 PM I thought the dark pink background would allow me to use random fill colors as well, so I decided to randomize the fill of the rectangles along the middle of the screen. Then I added rotating shapes that wrap and bounce. With the small canvas size it allowed the image to look more crowded, which I thought went well with the other code. The random fill also allowed those objects to match the continuous random colors of the rectangles in the center. Screen Shot 2017-10-30 at 10.46.04 PM The final addition to the code was a rectangle rotating around a fixed point continuously. I was first thinking of placing that at the center of the canvas but then realized having multiples of the code would play well with the canvas and space. I also thought multiple rotating images would add to the chaotic vibe of the piece mentioned before. A high frame rate would enhance that even further. With that being said, it is hard to see the actual final product through a screen shot because of the framerate.

Wallpaper: ;)

Wallpaper Wallpaper2 Wallpaper3   Wallpaper4 This work was heavily inspired by the ideas Vera Molnar’s generative creation of shapes which then are subtly changed and remade next to the original shape. Since my piece wasn’t made to be a static image, instead of showing the whole evolution in one image, I made the squares and circles change over time. The way this piece is set up, there’s a grid with each piece of the grid having a group of squares or circles which randomly modulate in size which gives a sense of movement even though it’s just the shapes changing size on top of eachother. The circles are moved up slightly higher than the squares which makes the gridding look a little less obvious and has the added effect of allowing the squares and circles to overlap in a more interesting way. As the piece progresses, the range of size values for the shapes becomes larger while also causing the shapes to be less transparent. As the shapes first start to become more than just outlines, the colors of the circles and squares look relatively simmilar, but once they become truly filled in, the colors are able to stick out more. This happens at roughly the same time that the shapes start to cover all of the space that originally was background. Behind this grid are two elements which are used to ground the randomness which the grid creates. The mouth and a triangle which slowly becomes less transparent and rotates around the opening of the mouth. The triangle’s role changes over the course of the piece. In the beginning when the grid hasn’t started to really take form and there is a lot of empty space, it’s used to create motion and is used to accentuate the mouth. As time passes, the triangle starts to become the same color as the circles and is used to fill in some of the gaps in the background. Finally, right before the grid completely overshadows the background, its color changes to a more vibrant fuller green than the circles and is used mostly as a texture to fill in the occasional stray piece of background. The mouth, being the only static element in the whole piece, is merely used to ground everything. The realistic nature of it, along with the pink color contrast the blue background and helps to make it so the viewer forgets they’re looking at just a bunch of circles and squares. There is a final layer above the grid made of squares of different shades of pink, blue and purple. They float above the grid and at the start of the piece are all together in a clump. As they pass across the x axis and loop back around, the speed of each object is increased by a random value and their size changes. When crossing the y axis, just their size changes. After the first crossing of the x axis, the squares start to separate from each other since their speeds change. Eventually, the x speed of the squares starts to increase to such a rate that instead of moving roughly diagonally, they are just moving on the x axis and every square is spaced far apart.

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”