Youth: Interactive
With the power to create interactive experiences, Processing.js was a programming application geared towards creating a more accessible Javascript platform for digital designers.
As imagined to be an installation in an interactive museum, the vision for Youth: Interactive was to be is a typographical portrayal of one’s idea of youth–and conversely–of aging. With this intention of creating an open-ended interaction, the question was: how can we achieve this?
Supervisor
Cory Barr
Design & Development
Patricia Catangui
Inspiration
Introspective experiences are usually triggered by an object or a setting, but may equally be evoked by a well formulated question or remark. Through this, museum visitors can create meaning out of an experience through the context they bring, which is influenced by self‐identity, among other factors.
These triggers can be as simple as visualising personal memories such as one’s home. Personally, as a national of the Philippines, mine has the elements of nature: the slight exfoliation of sand beneath one’s feet, the dark night sky, the quiet of the stars, and the gusts of wind pushing waves onto the shore. In recreating sensorial elements that are globally-recognised, the audience’s mental imagery could therefore be prompted to reflect their own views on the subject matter at hand.
Syntax with notations – shown within the Processing.js web platform
Coding
To initiate this experience, the first step was to identify the components needed to illustrate the scene: the graininess of sand, the twinkle of stars, and the sound and movement of air. For instance, how will these be incorporated? How will they behave?
The second step was to familiarise myself with the basics of animation and Processing.js; which started with learning how to program a simple circle and transforming it into a bouncing ball. The technical learnings from this were essential, as these details made all the difference when it came to the texture and weight of a shape. For example: how would a squishy bouncing ball behave differently to a weighty metal wrecking ball? This knowledge formed the basis for the paths and movement of the grains of sand.
Mapping the path and shape of a bouncing ball – depending on its perceived velocity, the shape is either in its original 1:1 ratio, stretched (falling or taking off), or squished (landing).
Sensory Integration
To magnify the experience, the element of wind was added as an auditory cue for the movement of the particles. This element represented the and the gusts of wind pulling sand particles around as it also pushed waves onto the shore. For this, the microphone was attached as an input source. In person, participants would have the prompt of blowing into the microphone. In turn, the particles glowed and travelled–depending on the volume of sound the microphone received, the brighter the particles glowed and farther they travelled.
Visual dispersion – transformation sequence of the word “youth,”
Reflection
While having had previous experience with HTML and CSS, Javascript was one that had been difficult to learn. Having been functional at the time, Processing.js allowed the opportunity to explore a more expressive side of digital design.
Importance of preparation – keeping in mind how each element will be animated helps you to know exactly how the file needs to be built. I learned this the hard way as with only four weeks to learn to code in the application and design the concept, I ended up also having to rethink and remake some elements in the middle of the animating process. Although it took some time, I also learned to work backwards, develop a more detailed plan, and work more efficiently moving forward.
Developer’s point of view – although Javascript may not be a major skill to have as a designer, learning it gave me similar perspective as to the challenges and depth of thought that developers undergo in order to achieve the visual goals created by designers.
¹Ryding, Karin. "The silent conversation: Designing for introspection and social play in art museums." Proceedings of the 2020 CHI Conference on Human Factors in Computing Systems. 2020. ²Libby, Lisa K., and Richard P. Eibach. "Visual perspective in mental imagery: A representational tool that functions in judgment, emotion, and self-insight." Advances in experimental social psychology. Vol. 44. Academic Press, 2011. 185-245. ³Lois H. Silverman. 1995. Visitor Meaning‐Making in Museums for a New Age. Curator: The Museum Journal 38, 3: 161–170. ⁴Pekarik, Andrew J., Zahava D. Doering, and David A. Karns. "Exploring satisfying experiences in museums." Curator: The Museum Journal 42.2 (1999): 152-173. ⁵Ryding, Karin. "The silent conversation: Designing for introspection and social play in art museums." Proceedings of the 2020 CHI Conference on Human Factors in Computing Systems. 2020. ⁶Veale, Tony, and Guofu Li. "Creative Introspection and Knowledge Acquisition: Learning about the world thru introspective questions and exploratory metaphors." Proc. of the 25th AAAI Conf. of the Assoc. for Advancement of AI, San Francisco. 2011.