Taped Together

June 25, 2021

Visit Application

Duct-taped letters from Taped Together, a digital version of an outdoor art project by Mark Reinhart.

Duct-taped letters from Taped Together, a digital version of an outdoor art project by Mark Reinhart.

Taped Together was 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.

One of Mark Reinhart's Duct Taped messages in Chatham-Kent, Ontario (image c/o Chatham-Kent Public Health)

One of Mark Reinhart's Duct Taped messages in Chatham-Kent, Ontario (image c/o Chatham-Kent Public Health)

Taped Together was 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.

Duct-tape letters

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.

Test letters with regular spacing. Each character is written to a small staging canvas (outlined in green).

Test letters with regular spacing. Each character is written to a small staging canvas (outlined in green).

Test letters (kerned). Narrower characters are kerned to be positioned closer together, this distance is outlined in red.

Test letters (kerned). Narrower characters are kerned to be positioned closer together, this distance is outlined in red.

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.

Duct-tape characters are displayed here with guidelines to ensure proper positioning. Each character sits on a stagin canvas outlined in green, with kerning size outlined in red, and the response outlined in purple.

Duct-tape characters are displayed here with guidelines to ensure proper positioning. Each character sits on a stagin canvas outlined in green, with kerning size outlined in red, and the response outlined in purple.

Text in canvas is problematic for screenreaders, so an aria-live field is populated with the response while it is displayed.

The Starfield

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.

Each response is represented by a duct-taped star. A highlighted box shows the current selection.

Each response is represented by a duct-taped star. A highlighted box shows the current selection.

Publishing responses

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 password protected admin page allows responses to be published, unpublished, edited or removed.

A password protected admin page allows responses to be published, unpublished, edited or removed.

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.

Creative coding

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.

Starfield with randomly positioned and sized stars made for an interesting but slightly hard to navigate response grid. I think I may use this as a pattern for our couch cushions.

Starfield with randomly positioned and sized stars made for an interesting but slightly hard to navigate response grid. I think I may use this as a pattern for our couch cushions.

A video still from a field of randomly generated letters. You will notice there was still a serif '1' in the project at the time.

A video still from a field of randomly generated letters. You will notice there was still a serif '1' in the project at the time.

A randomized starfield where line thickness is a variable of offset, and offset is a variable of y-position.

A randomized starfield where line thickness is a variable of offset, and offset is a variable of y-position.

A happy face.

A happy face.

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.

The only waves we want are at the beach.

The only waves we want are at the beach.

Note: Taped Together has since been decomissioned from "https://iamgettingvaccinatedbecause.com/taped-together/" however a live copy is vailable on Pixels and Plans.

Visit Application