June 25, 2021
Taped Together is a collection of publicly submitted responses to the prompt "I am getting vaccinated because...". It is inspired by the work of artist Mark Reinhart’s duct tape graffiti on city buildings, who during the COVID-19 pandemic connected the community with bright coloured messages of hope while working with Chatham-Kent Public Health.
Taped Together is a digital version of this outdoor project. By filling out a form and choosing a tape colour, your response is displayed in digital duct tape, written out piece by piece, before dissolving to make way for the previous submission.
A custom duct-tape font was created using a coordinate space from [0,1] for each character, all capitalized and spaced as required. For example, coordinates for the letter 'i' would be a single line from y=0 to y=1, centred at x=0.5, or
[[0.5,0],[0.5,1]]. The letter 'i' is very narrow compared to other letters. To slot in properly with neighbouring letters, the 'i' is kerned, occupying 20% of the available width. The opacity is also reduced slightly to create the effect of taped pieces overlapping each other.
Each word is measured beforehand. Words that run past the width of the screen will begin a new line, and the response is measured and centered before being displayed.
Text in canvas is problematic for screenreaders, so an aria-live field is populated with the response while it is displayed.
Below the duct-tape, a "star field" represents every response collected so far in the project. Selecting a star displays the corresponding response. If the response is left to dissolve, the previous response is displayed. This continues until a new response is selected, or the display loops back to the most recent response. Progess is tracked with a box outline over the selected star.
Importantly, a password protected admin page allows for submitted responses to be published, unpublished, edited (if needed) or removed. This page was built with SVELTE, a framework that provided a straightforward way to update the fields from inside a table.
A pivot from canvas to svg
Initially the starfield was made as an interactive canvas, a choice that was perhaps implicitly carried forward from the duct tape display. However, an interactive canvas is not only inappropriate for meeting accessibility requirements, but also unreliable across multiple devices (try zooming an interactive canvas on your phone). Pivoting to SVG's allowed for keyboard navigation in additon to more reliable hover and pointer events.
There were a number of happy accidents that happened during the making of this project, especially after creating a canvas based starfield. Below are a few selections.
Finally, it was really great to work with some of the responses already collected for the project. Out of all of them, I found this resonated with me the most.