Iterating physics, codes and sound
by Runxin Zheng
versioning to produce a set of interrelated final outputs (usually identifiable by a shared visual, methodological, or conceptual structure)
We can interpret the interface of p5.js Editor with these two aspects. The coding panel stores all the information – the values, the physics equations, and all other data. Coding can be understood as a technical innovation from inscription; however, it still functions like a human brain, where the information is encrypted and not yet mobilised. The preview panel is the medium where the mobilisation of codes takes place. When translated into a visual language, the information becomes colours, shapes, and motions that one can experience without necessarily understanding any coding languages.
To increase the power of coding, the language must be more accessible to a broader audience. An established coding language often has references, libraries, examples, and community-initiated sharing platforms. As a new user of p5.js and coding in general, I had gone through these references before I could communicate in JavaScript and applied them to my iterations to produce new images. My actions can be understood as a displacement of original references, in other words, the inscription, described by Latour. Through modifying and creating the JavaScript codes, I’ve mobilised them onto new visual space.
Without the displacement, the inscription is worthless; without the inscription, the displacement is wasted. This is why mobilization is not restricted to paper, but paper always appears at the end when the scale of this mobilization is to be increased. (Latour, 1986, p.16)
Physics plays a crucial part in coding languages. In p5.js, the physics-based equations enable the simulations of real-world phenomena, applying the laws of nature to the virtual world. Coding, on the other hand, has brought physics into a new environment, no matter whether it is a screen, a projection, or an interface. In the world of p5.js, force becomes an ellipse that moves perpendicular to the bottom of a window; velocity becomes the falling duration of the ellipse. The traditional inscription of physics has been transformed and displaced, again.
*Some individuals are sensitive to flashing or flickering lights or geometric shapes and patterns, may have an undetected epileptic condition and may experience epileptic seizures when watching these animations.
Once managing to create these simulations in p5.js, I then added a royalty-free song and converted its amplitude into gravity. Now, we not only hear the music but also see its ‘weight’ when the volume is encoded to a numerical value, then applied as gravity in a mathematical equation that draws all the ellipses and then drives them away.
What I learnt during these iterations is that sounds, such as songs and sound effects, can be read as data in coding but also as physical vibrations in the natural world. Based on this realisation, I wanted to see how p5.js can demonstrate the relationship between sounds and physics in a virtual, alternative way. How would this coding process enable me to understand motion graphic design differently? How would this visualisation change viewers’ experience of physics and music? Will these movements become unnatural or even disturbing to our eyes?
Reference
Latour, B. (1986) 'Visualisation and Cognition: Drawing Things Together', Knowledge and Society Studies in the Sociology of Culture at Present, Vol. 6, pp. 1–40. Available at: http://www.bruno-latour.fr/node/293 (23 Jan 2023).