The figure 10 in gold

An animated digital poem for Taper issue 10 (2023)

Spring 2023

A visual poem for Taper #10: Powers of Ten, a literary magazine for small computational pieces. Taper is published by Bad Quarto in coordination with The Trope Tank at MIT.

View the piece

About the piece

Charles Demuth's 1928 painting I Saw the Figure 5 in Gold is a rendition of William Carlos Williams's 32-word poem "The Great Figure" (1920), describing a howling firetruck passing away from him in the night:

Among the rain and lights I saw the figure 5 in gold on a red firetruck moving tense unheeded to gong clangs siren howls and wheels rumbling through the dark city.

In this digital work, the "power" of 10 is evoked by sending the figure rushing towards the viewer, even breaking a bit out of frame. The animation is infinite and unrelenting.

Demuth's Precisionist style, which introduces angular geometric forms into even naturalistic paintings, is here referenced by the light grey diagonals. In the static painting, those lines suggest a firetruck receding into the distance. When animated here, they act as search lights, perhaps probing for that which does not wish to be found.

Technical notes

All poems in Taper #10 were limited to 2KB (2048 bytes) of HTML, ES6, and CSS code following the header element. Wherever possible, variables and constants in this program are multiples or powers of 10.

Source

<style>
body {
  --gold: rgb(224, 180, 90);
  --red: rgba(255, 50, 20, .5);
  --black: rgb(100, 100, 100);
  background: var(--black);
}
#c {
  width: 500px;
  height: 600px;
  border: 20px solid lightgray;
  background: gray;
  margin: 10vh auto;
  display: flex;
  justify-content: center;
  align-items: center;
  clip-path: inset(10px 10px);
  position: relative;
}
span.ten {
  color: var(--gold);
  -webkit-text-stroke-color: var(--black);
  -webkit-text-stroke-width: 1px;
  font-size: 100px;
  font-family: georgia, serif;
  transition: transform 10s, opacity 10s;
  display: inline-block;
  position: absolute;
  letter-spacing: -10px;
  padding: 100px;
}
span.ten.flying {
  transform: scale(10);
  opacity: 0;
}
.s {
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  background: rgb(200,200,200);
  width: 25%;
  height: 100%;
  opacity: 0.5;
  position: absolute;
  top: 50%;
  transition: transform 10s;
  transform-origin: top center;
  border: 1px solid gray;
}
</style>
<div id="c"></div>
<script>
function pick(list) {
  return list[Math.floor(Math.random() * list.length)]
}
let canvas = document.querySelector('#c')
setInterval(() => {
  let shard = document.createElement('div')
  shard.classList.add('s')
  shard.style.transform = `rotate(${pick(['.10turn', '-.10turn', '.5turn', '', '.75turn'])})`

  let ten = document.createElement('span')
  ten.style.marginLeft = pick(["-10px", "0", "10px"])
  ten.style.marginTop = pick(["-20px", "-10px", "10px"])
  ten.innerText = "10"
  ten.classList.add('ten')
  ten.style.filter = `brightness(${pick(['0.9', '1', '1.1'])})`
  if (Math.random() * 100 < 10) {
    ten.innerText = "No. 10"
    ten.style.background = `linear-gradient(to ${pick(["left", "right", "top", "bottom"])},
      rgba(0,0,0,0) 25%, var(--red) 25% 50%, rgba(0,0,0,0) 0`
  }
  ten.addEventListener('transitionend', () => {
    ten.remove()
    shard.remove()
  })
  setTimeout(() => {
    requestAnimationFrame(() => {
      ten.classList.add('flying')
      shard.style.transform = `rotate(${pick(["0", "300"])}deg)`
    })
  }, 100)
  canvas.append(ten, shard)
}, 1000)
</script>

About Taper

Taper is an online literary publication for computational poetry and literary art published twice yearly by Bad Quarto, with coordination from The Trope Tank at MIT. It explores the intersection of programming and poetry, two areas that seemingly have parallel trajectories with minimal crossover, except in the world of digital poetry.

Individual works in Taper are published under an all-permissive free software license, allowing modification and redistribution.