Author: gregariosa
gregariosa-Clock
Matroyshka clock
For this project, I wanted to explore how the idea of rebirth and growth can be expressed through time. I chose the matroyshka dolls for inspiration, as the nesting of these dolls resemble how the concept of time is relative, yet it still feels like a “continuous” cycle.
To read the time: the number of red matroyshkas on the left represent the hours. The number of blue dots represent the minutes (it makes a full circle when it reaches an hour.) And the overlapping blue dolls represent the seconds. (The seconds refresh themselves after a minute passes.)
Overall, I’m not too satisfied with the outcome. I had initially wanted the top and bottom to be separated at an interval, to show how the dolls are nested within each other. However, I spent too much of my time trying to craft a good “rocking motion” that I couldn’t figure out a stable solution for my initial goal. My lack of experience with object oriented programming contributed too. I spent a lot of time conceptually understanding how my code operates, rather than deftly making progress to the project. As a result, I compromised the outcome by overlapping the dolls on top of each other.
While I don’t love the outcome, I learned a lot about how motion is conveyed through code in this project. I learned about the pendulum motion, sinusoidal movements, physics behind roly poly toys, etc. to inform my decisions. I hope to apply these findings to better convey my thoughts in future projects.
Process:
I had two initial project directions:
- Create a circle of “sand” with 24 points on the circumference. For every hour, a point travels into the circle to make shifts and turns, changing its direction every minute and chugging through the sand every second. By the 24th hour, an intricate blob of lines is formed, where each “hour line” interacts with each other in space, but never collides. (I wanted to convey how the hours in the day overlap and form an entirely new picture everyday.)
- The matryoshka doll idea. Create an animation where a new doll is born at every interval, to indicate the “rebirth” of time, and our existence.
(Below are sketches of those ideas.)
While I was intrigued by the first idea’s concept, I had to consider the context in which the first project would be in. A messy blob of lines can be hard to appreciate in a public display, while big solid objects are easier to comprehend. As such, I decided to go with the second idea, in consideration of the context that this project will be in. (I was also not confident that drawing smooth curvy lines that don’t collide into each other was doable under the time constraints.)
Below are some notes to consider the animation of the piece. It was interesting that many of my considerations were far from what would be executed. I thought a staggered mountain of bowls would be created, and I only realized after programming that such mountain isn’t physically possible.
I don’t have too many iterations for this project on code, as I spent a lot more time calculating things on paper than coding stuff out.
(Last note: I enjoyed using Lerpcolor and svg strings to make nice color combinations, like this one below:)
gregariosa-meander
This project is beautifully striking. It was interesting to see how its beginning was derived from a single line manipulated by vectors. I was also surprised that the river was made to not overlap by looking for collisions. Such sensitive adjustments make this piece so intricate and real.
gregariosa-timekeeping
From Johanna Drucker’s text, I enjoyed how she identified the different interpretations of time from two schools of thought. Empirically, time is considered as a continuous cycle, whereas in records of human events, time is discrete, variable, and relative. It was interesting that the “humanist approach,” where the concept of time is flexible, is quite similar to Einstein’s revelation that time is relative (as briefly described in the 6-minute YouTube video on the history of timekeeping devices).
(But also, I don’t fully understand Einstein’s theory of relativity, so I’m not sure what the implications I can draw from this finding.)
gregariosa-Reading02
In the article “First Word Art /Last Word Art,” Naimark distills the contrasting reception between work that pioneers new technology and work is more developed by building upon its predecessors. I found myself nodding at every sentence while reading it, as I had had this dilemma for quite a while as a Design student at CMU. I’ve always been fascinated by projects that deal with emerging technologies, but became easily frustrated with the low level of fidelity those technologies offer when trying to design around it. On the flip side, the more traditional mediums have allowed me to “perfect” the design to its fullest potential, but the perfection felt undeserving, knowing that it wasn’t anything very novel.
I think I am continuing to mediate between the two ends of the spectrum. While I am fascinated by technologies that bubble up tons of different ideas for design and application, I have become more cautious in going head over heels, as I know that many of the pathways in my head would not be very successful upon trial and error. Not only that, the implications of new technology are a double-edged sword. Paving the right, ethical pathways is a heavy and often not a ‘fun’ task, as the “novel and exciting” opportunities can yield too many consequences. As such, understanding why certain artifacts transcend over time seems to be crucial when approaching new technology, such that we can minimize the irrevocable mistakes that are so easy to make when diving into novel tech.
gregariosa-LivingWallpaper
Graphic design meets Code
I’ve always liked making clever graphic design pieces out of simple shapes. The living wallpaper project was a good opportunity to dive deeper into visual illusions by adding in motion to the mix. (I tried a variety of different ease functions in the process of my project – I chose the cubicBezierThrough2Points function for the rotating circles, to give the satisfying pause when the circles join in the middle. I also used the cubicIn function to make the endpoints of the lines rotate with ease along the circumference of the circle.)
Overall, I’m happy with the visual illusion I was able to achieve with this project. I’m especially happy with the gestalt circle that form with every loop – revisiting trigonometry was painful but worth it in the end.
While the motion and precision of this piece is good, I wish that I had developed a more sophisticated layout for this piece. I followed the circle packing tutorial from Coding Train to apply to this project, but I ended up abandoning it due to technical constraints. I hope to revisit the algorithm again in the future and understand the actual problem I was tackling, and hopefully make my projects more tasteful.
Process
I was initially quite lost when starting this project. I sketched out different ideas but had little idea as to how to make each piece feel interesting.
To get myself out of the rut, I reviewed the example code carefully and learned more about looping animations to feel more equipped in starting the project. In doing so, I was able to develop a more concrete idea and methods of execution, like the sketches below:
I went through a lot of iterations to test out different visual forms. Below are some interesting results that came out of the bag.
gregariosa-LookingOutwards-02
I chose Helena Sarin’s work, as I like how the work represents human taste, while taking advantage of the computational medium. The organic lines and composition makes you believe that this was a doodle, but the intricate ‘maze’ in each blob was made possible through the precision of a computer.
I enjoy simple and honest graphical forms, and this piece seems to achieve that in an interesting way.
gregariosa-01-Reading
‘10,000 Bowls of Oatmeal Problem’ is when a generator fails to produce visually unique outputs to a human eye, even if each output is unique in its computation. It draws its metaphors from bowls of oatmeals, as looking at 10,000 different versions of oatmeals does not intrigue the viewer to look at the granular details of each bowl of oatmeal.
I think this scenario can become a problem when you know that each output needs to be distinct from every other output. For example, if a generator produces game characters in a multiplayer game, each one has to be perceptually different from each other. Without the difference, players will become confused and frustrated, perhaps killing a player on the team by accident.
On the other hand, this problem can actually benefit scenarios when you want an output that changes over time. Procedural landscapes are a good example. When watching a procedurally generated landscape in continuum, you don’t want the user to be startled by starkly different images produced every 2 seconds. Instead, you want enough similarities between each image to maintain the identity of the place you produce.
Artistically, this problem can be solved by identifying the exact attribute you want to be different in each output. After narrowing down your goal, then you can go into the codebase to tweak the problem at hand technically.
gregariosa-lookingoutwards1
Full video: https://vimeo.com/254393034
hash2ash by panGenerator is an installation that uses multiple modalities to convey a unique, individualized interaction between the visitor and the installation. As a user inputs their selfie onto the given link, a granular display of their selfie appears on the big display, and as soon as the image appears, all the particles that make up the image start to fall and disintegrate. The digital rendering is accompanied by real falling pebbles (“ashes”) underneath the display, adding an auditory and tangible experience to what is considered as a very virtual act of taking selfies. The essential idea of the project is to convey the fear of losing all your digital records due to technical failures.
This project is one my favorites, as the digital and physical rendering are beautifully linked together through code. I like how controlled the “waterfall” effect is on the screen and how the animation precisely matches the falling grains below the screen. Each grain feels alive when you take a closer look. I’m inspired the way the computation imitates real life physics, yet opens up a vision into a fictional world.
I’m not sure how many people were involved in making the piece, but the studio that produced this is a relatively small organization, so I imagine less than 20 people were involved.* I’m fairly positive that the artists developed their custom software to develop it.
*EDIT: panGenerator is made of only four artists!
gregariosa-Map
This map preserves the past and the present. By generating seeds of fire before their eruption in a never-ending forest, the map reflects how memories overlap and intertwine to create new versions of ‘places’ in our head.
Technical Process:
From the start, I knew that I wanted to create a level of depth in my map through overlay of elements. After scouring through some videos online, I decided to manipulate and repeat variations of recursive circles. By randomizing the distribution, color, size and other elements, I was able to convey a sense of dreamy haze that come with remembering an event and the place.
