From Nothing to Pre-existing
JavaScript / CSS / HTML
Summary
Creation of script for artwork interactivity.
Description
The series 'From Nothing to Pre-Existing' by contemporary Brazilian artist Pedro Victor Brandão consists of 6 sets of images that depict photochemical processes generated by the interaction of chemical reagents with photographic paper. The images gradually record the chemical reactions triggered by the artist in his material, resulting in an abstract composition.
My task here was to create a JavaScript programming script that would animate these static sets of images, making them responsive to touch (on touch screen devices) or mouse pointer (on desktop devices). The user interacts with the artwork by touching/hovering over the composition, gradually revealing the steps of the image creation process, up to the final result.
Technical Specifications
To bring the static images to life, I generated a basic structure of HTML, CSS, and JavaScript. The HTML provides the semantic structure of the markup. The CSS simply ensures the responsiveness of the animation on devices with screens of different formats and sizes.
The Vanilla JavaScript script is what actually enables the user interaction with the artwork. Whether through touch or mouse pointer, the user can activate the frame-by-frame animation of the images at the speed established by the movement of the finger or mouse on the X (horizontal) axis of the image. The animation can be played forward and backward as many times as the user desires.
Upon entering the page, a loading bar will indicate the progress of loading the images. By the choice of the artist who commissioned this project, the images are in high resolution (about 3000px in height), and therefore the loading indicator is necessary for a satisfactory user experience. When the user removes their finger/mouse pointer from the image area, an SVG icon is displayed showing a hand and the action of lateral scrolling (swipe), indicating the way to interact with the artwork. This icon also appears as soon as all images are loaded, indicating that the application is ready for interaction.
The code should be as lightweight as possible, as the goal is to publish it on a blockchain-based storage and permanent registry service.
Technologies
Vanilla JavaScript
CSS
HTML
back