My initial idea was to create a sort of creative imagining of the idea that reality is an illusion, one of the core principles behind the movie franchise the Matrix. The first Matrix movie's core tenets are that reality is an illusion and that one will only become truly enlightened until they realize this fact, and are able to see through the illusion. I wanted to create a realistic yet virtual representation of this, but was not quite able to achieve what I wanted. Ultimately, I was able to learn a bit about face tracking and the WEBGL 3D object animation library in p5.js. There were a lot of things I wish I could have added, such as numbers streaming down in the background, as well as some related text on the face, but I could not get 2D text to work in a 3D space. I later found out that 3D text was required to make it happen. This also applied to some 2D planes and shapes that I wish I could have added, but did not have enough time to completely figure it out. I still wanted to add something cool to the background, so I referenced one of Dan Shiffman's videos on "Warp Speed Stars". I decided to use lower opacity and strokes on some of the 3D shapes to add to the virtual effect. I also added some interaction by checking if the eyebrows were raised or if the mouth was open, to affect the virtual figure. Finally, I added some sound in the background so that there would be some auditory stimulus on top of the visual artwork.



I've always been interested in the idea of conspiracies involving the world and society as a whole, especially the ones regarding the 'flat earth' theory or the 'illuminati'. I wanted to incorporate that into my project as part of the overarching theme that 'time is a construct'. Time is essentially just a measure invented by humans to facilitate the navigation of life, and has no real, tactile value. As such, I began experimenting directly in p5.js, and don't really have drawn sketches to show.

I began first with the 'illuminati' triangle in the middle. I measured the millisecond rollover for each second and subtracted a fraction of it from the current minute to achieve a sort of old-pocket-watch ticking effect, where the hand backticks a bit before snapping back to a certain position (when the minute changes). I then added the 8-ball, and used a custom easing function for the y-coordinates to make it seem like it was bouncing up and down. I used the seconds + millisecond rollover for the x-coordinates. After that, I added the spinning arc (basically a thin line) in the background, corresponding to the current millisecond (mapped from 0 to 1000 to 0 to 2π). I also added the oscillating rectangle at the bottom of the screen, where the width of the rectangle corresponds to the current hour (in 24-hour time). The text in front of the rectangle also changes depending on whether it is before or after noon. If it is before noon, 'CONSTRUCT' is displayed, and if it is after, 'CHANGEABLE' is displayed. 

I wanted to further enhance the idea that the idea of time is manipulable, so I added my own seemingly random 'digital time' display at the top, where the only thing noticeable is the current year. The other numbers vary depending on the current value of t (used for the y-coordinates of the bouncing ball), and change when the mouse is pressed over the clock. This is also true for the gradient background (for which I got the code from, which changes its top color depending on the mouse click. Both of these things were meant to add to the whole 'time is a construct' motif once again, as well as make the clock a bit interactive. 

Ultimately, I am pleased with the final product, but I feel as if it is lacking some details. However, I did not want to detract away from the many things happening at once in the clock, so I'm sure this is to be expected. This makes the clock illegible to anyone who has not read this description, so the most they will be able to get out of my clock is the current year (which means it's highly valuable to time travelers who don't know what they're doing).



David Rokeby - Minimal Object (with Time on Your Hands)


This piece specifically was very interesting to me. It tracks movement and manipulates the data it receives to produce different sounds. I love the idea of abstract physics formulas and the exploration of the unknown, so this piece has a very similar feel as the Schrodinger's Cat problem. The piece plays with both intangibility and tactility, where the piece is present but only truly visible once the viewer interacts with it. I also love the idea of manipulating sound in such a way that it can be perceived and felt by senses other than sight and hearing, and this piece delves a bit into that particular field. It was also unique in that this is one of the few pieces I've seen which peruses interactivity through a medium other than visual stimulation or without using video at all, and I thought that that was pretty interesting.



I began making the piece by first experimenting with arcs and easing/time based functions in p5.js. After coming up with some looping shapes that I liked, I added more and more until it was basically a jumbled mess. After looking at it some more, I related it to a telescope pointed at the sky and was inspired by the recent "Storm Area 51" hype and memes to create something relating to extraterrestrial life. So, I decided to make a loop that shows supposed extraterrestrials eyeing the Earth's moon for some purpose. I'll link the experimental sketch at the end as well. 

Beginning my actual sketch, I started making the moon shape and detail first. I wanted to add enough craters to make it distinguishable as the moon, but also not too much to draw all of the attention of the piece. I then started working on the scoping/targeting device and used sinusoidal (sin and cos) functions to make the dashes move in a somewhat elliptical rotation around (width/2, height/2), as change their radii in a similar fashion. For the rounding triangle, I used one of Golan's examples of how to change a circle into a triangle (and vice versa) in p5.js and changed some of the parameters to augment my loop. I then began to move on to the stars in the background.

For the stars, I used two different easing functions. The first was a cubic function I wrote myself which uses the curve (x-0.75)3+0.5 as its basis, and the other was the DoubleExponentialSigmoid from Golan's Pattern_Master folder. I used both because I wanted to vary the movement of the stars coming in from off-screen, and by manipulating the functions differently for each individual star, I was able to add some "character". I also added some stationary stars to make the scene more realistic. Finally, just to underline the fact that this loop was "occurring" in outer space, I added a slightly larger star to represent the sun which also moves sinusoidally about its center. I added text to make the scene feel more like the view from a scope or some kind of binocular, and added movement to that as well. At the end, for some extra detail and a repetition of the alien motif, I added a UFO in the corner to make it seem like the beings looking at the moon from this point of view may not be the only extraterrestrials out there. 

Ultimately, I feel I could have added more detail to the moon and UFO, but both did not want to distract the viewer and didn't have enough time to do so. I'm also not completely happy with the movement of the stars, as both easing functions look like they have very similar outputs in the viewable range. I also don't like that I was not able to increase the resolution, but I had a lot of problems with GIF creation as my loop had a longer period than the example from class on computational exportation, so it took a lot longer than I expected to construct a GIF out of my many frames. I am however, happy with the output of the binocular view, as it has a sci-fi feel to it, and the reduced resolution can add more to the story about the extraterrestrial's technology. That all aside, I believe I made a decent product that utilizes some of the many capabilities of arcs in p5.js. 

Experimental GIF loop:

Final GIF loop:


I believe I fall somewhere in the middle of the spectrum. I feel both that first-word art is difficult to judge without something similar to compare it to, and last-word art can sometimes feel like taking an original idea and just redoing it with current technologies or thought processes. Relating this to pop culture, the first person to start a trend doesn't become popular until more people jump on the bandwagon, and the last person to jump onto a trend is usually either ignored or belittled for being late (as the trend has probably died down). 

Technology has a huge potential to shape culture. Since it is always advancing, people are always experimenting with what it can do and creating new trends, adding to pop culture. With more advanced technology, more difficult tasks become easier, and the first to accomplish those tasks become popular and set new trends. The reverse is also true. Culture has a large impact on technological development. Especially in politics, if a group of people feel especially strongly about a specific current event or movement, they will create the technology and means to push their ideas to the masses and get their point across. Further, as new trends become popular, people will create the technology necessary to participate and make a name for themselves in those trends. 

If we make work that is technologically novel, it is always expected that the same work can be done easier and faster after more technological advancements. The one thing that is constant about technology is change, and it will keep on improving in some degree, and making previous technology relatively outdated, slow, and inefficient. That is why, when using technology to produce things like art, the audience is not necessarily for the future - it is for the current society. It shows off what current technological inventions can do, and inspires people to make better technology that can do the work better.


  1. The artwork is square.
  2. The artwork consists of black lines on a white background.
  3. All lines have the same length.
  4. Some lines intersect, and some do not. All intersections occur mostly at the endpoints of lines.
  5. The lines on the artwork appear to be arranged in a basic grid formation.
  6. The lines are mostly vertical, with the maximum rotation from a vertical position being about 90 degrees. 
  7. Line rotations seem mostly random, as most lines near each other are not rotated the same amount.
  8. Every line is rotated from its center and not its endpoints.
  9. There appear to be areas of whitespace on the artwork where lines are not present.
  10. The lines not appearing in the whitespace have been removed by a normal distribution, and not randomly.
  11. The areas of whitespace do not form any discernible geometric shape.


I first noticed that the basic frame of the artwork was a grid of lines, so I began by using a nested for loop to create lines within a given grid size. I began experimenting with rotation of the lines using the rotate() function, but quickly realized that the function rotated the lines from the origin and not their individual center. It became difficult to change the rotation in a way that didn't coincide with the origin, until I found the translate() method. I attempted to use this to position a line at the center, rotate it, and then translate it to a specified area in the grid. However, this introduced a new problem in the line rotation, and I realized that the rotation was not completely random. They seemed to be rotated a maximum of 90 degrees from an initial vertical position, which led me to look for some kind of normal distribution algorithm. 

From here, I found that line rotation was much simpler with the p5.Vector object and its fromAngle() method. Using this, I was able to apply a rotation directly to a line and then translate it to a directed position in the grid, as well as keep all lines the same length. I also found the randomGaussian() method, which allowed for a production of a mean angle rotation, with a specified standard deviation as well. 

I added the fromMousePress() function from the Intersections assignment to allow for a different iteration of the image to be produced every mouse click. 

Finally, I moved onto the whitespace. This proved to be the most difficult part of the assignment for me, as I attempted various methods of using Perlin noise to create a normal whitespace. Following the tutorials from Coding Train, I eventually settled on creating a gradient map and using those values to determine whether or not a line would be drawn at that grid square. This method did not work as expected, as after many variations on the gradient thresholds, either a majority of the lines would disappear, or none at all. After many hours of messing with numbers and using the nested for loop variables in the equations for the x and y offsets, I found a method that produced a decent result where a small region of whitespace would appear, but still could not figure out how to create patches of whitespace appear. 

I redid my color gradient map from the ground up and messed around with the zoom and spread of the gradient to make it less random and more orderly. After some experimentation, I was able to produce a decent solution similar to Molnar's original work, which is represented by the last image I have embedded in this post. If I am to improve upon this, I want to fix my whitespace code so that it creates several small patches instead of a few large ones.




Drawing Water is an art piece which uses water usage and accumulation data to create a piece illustrating the disparities between where water is collected and where it is actually used. What I admire about the project is that it is almost a passive-aggressive political swipe to reveal hidden truths of the environmental sector, because it shows that the creator is willing to speak out against the government through his art and is not afraid of what repercussions that may cause. I believe the algorithm used charted out where water was collected versus where it was used, and plotted it on a specialized graph with different shades of blue meaning either different collection methods or different types of water. The piece shows that the author does not use very complicated algorithms to accomplish his work, but uses them in a creative way to make it easy to read and understand. The work's effective complexity is in its data collection, and the artist has balanced order and disorder by presenting that data in an aesthetic yet revealing way to expose the hidden truth. At first glance, the numerous water paths on the artwork seem over the top and convoluted, but after some time it becomes easier to see which areas of the country use more water compared to which areas produce the most water. 


David Wicks, Drawing Water, 2011.


1A. Going back to teamLab once again, I believe their piece BORDERLESS exhibits a high effective complexity. The experience of the art itself is completely different for every viewer, as the programs and displays are almost completely interactive, depending almost entirely on user input and movement. It sits in the middle of total order and total randomness, because the art generated is created by the same algorithm (total order), but the art's conveyance and comprehension is different for everyone (total randomness). 


1B. Problem of Authorship:

I took the mini-course Art & Arduino last year, where I thought about this specific idea for a long time, because my final project dealt with a robot producing art based off of human input. Especially since I am a digital artist interested in computer graphics and animation, this problem is very close to the career I want to pursue. I came to believe that yes, since the artist is the one creating the program and coding the processes that the system uses to generate the art, the authorship of the artwork can be credited to the artist and not the machine. If the artist is simply using specific programs of the machine and changing the input values to vary results, then by the transitive property, the artist is effectively creating the artwork itself as well.