Project I. Generative Visuals

Link and Screenshots

Link to the sketch: https://editor.p5js.org/tj1059/sketches/FnfFPWJun

   

 

 

Concept

As for this project, I was very much inspired by the work I researched for Case Study I., that is, Game of Life. It was initially generated by the mathematician John Horton Conway in 1970, and later inspired many generative artists to further develop their own works. I was impressed by the effect it achieves at the first glance, small pixels seemingly moving randomly. Through deeper research, I found that each movement, in other words, the black-and-white change was generated by the surrounding ones. As is introduced in the article, it is actually an example of cellular automation, applying basic rules to trigger unpredictable and complex behaviors. Therefore, for this very first project, I’d like to first start with the original one, and later try to further explore some further development.

 

Working Process:

• First Trial

Observing the effect and the concept of Game of Life, I first tried to construct rows and columns so that arrays could be set to each grid. By referring to the tutorial video on setting 2D Arrays, I was able to draw the grid as follows. 

   

• Difficulties and Solutions

For the next step, I intended to assign the color (either black or white) randomly to each grid so that the ideal effect could be realized every time executing the draw() function. However, I was not able to directly assign the color to each small grid, and therefore I searched online trying to find any other methods that could be applied. Fortunately, I happened to find a tutorial video about Game of Life given by Daniel Shiffman, whose Programming with p5.j videos already helped me quite a lot. According to the tutorial video, I understood that the basic logic is actually to assign different states (either 1 or 2 in this project) to different grids, which would later serve as conditions to apply if-else functions to randomly fill the grids with black and white color.

Moreover, the video even reveals how to realize the seeming “pixels moving” effect, that is, the rules for grids to live or die (introduced in the inspiration website). By setting another 2D array as the next state of the grids and letting the current state equal to the next at the end of the draw() function, I was able to apply the rules which calculate the sum of the surrounding grids (by defining function countNeighbors() ) to decide whether to change the state of the grid in other if-else conditions. To be more specific, since the draw() function executes again and again, the state of the grids changes every time, therefore making the canvas seemingly move all the time. The basic Game of Life project was therefore sketched.

• Further development

Based on the fundamental work of Game of Life, a canvas with black-and-white grids seemingly shifting, I’d like to further develop it into a colorful one to not only add to the enjoyment of visual aesthetics, but also to better correspond to the concept, that is, each grid stands for a living unit – life should be more than black and white anyway.  I was first intended to set gradually changed colors as the background of the canvas, later revealing this by state-1 grids automatically turning into colors. Meeting up with difficulties, I then rethought on the effect as well as the concept, and ultimately decided to add more interactions to change the color when pressing the keyboard and moving the mouse. The concept behind such decision lies in our subjectivity as Homo Sapiens: we can somehow change the color of life by ourselves.

Transformation functions such as rotate() are also used to further develop the sketch, which makes each living grid more active.

 

Reference:

• Conceptual Inspiration:

https://www.katevassgalerie.com/game-of-life-emergence-in-generative-art-1

• Technical Tutorial Videos:

2D Arrays: https://www.youtube.com/watch?v=OTNpiLUSiB4

Game of Life: https://www.youtube.com/watch?v=FWSR_7kZuYg

• Suggestions from Prof. Steele:

   

 

Reflection

When first hearing the concept of generative arts, I actually had no idea about what it is. Yet through weeks’ research and work, I now have more or less learned its concept and have even been able to finish my own project. Though meeting with many different difficulties and challenges, I managed to overcome them by turning to the professor and LAs and also searching online on my own. Therefore, I’m personally satisfied with this very first project, and am more than glad that I’ve acquired much knowledge, techniques and experience on generative arts, p5.js and coding.

On the other hand, since it is an inspiration-based and thus open-ended project, I do have many other ideas on the further developments that I might try after deeper learning: for example, the movement of each grid could somehow be technically improved and complicated. And to be more conceptual, it might also be intriguing if we focus on the life of only one person and let the tiny squares stand for people we would meet – the number of grids, the frequency of surroundings turning to “state 1”, and even the location of each grid would matter. In this sense, one’s connection with other people throughout the whole life could be convincingly visualized if more realistic and meaningful data could be applied.

Anyway, I gained quite a lot in this project and would be more than willing to further learn p5.js to realize more ideas.