

<img src="https://raw.githubusercontent.com/stewdio/blackswan/master/media/stewart-smith-black-swan.png" title="Black Swan" width="512">  




Black Swan
========================================================================
This interactive composition for **Black Swan** is a tribute to—and 
birthday present for—[Thom Yorke](https://en.wikipedia.org/wiki/Thom_Yorke) 
and [Stanley Donwood](https://en.wikipedia.org/wiki/Stanley_Donwood) 
who share my birth month of October; the best month. This is also an ode
to [Web browsers](https://en.wikipedia.org/wiki/Web_browser). It was 
created by myself, [Stewart Smith](https://stewartsmith.io), in 
Brooklyn, New York during the 
[COVID-19 pandemic](https://en.wikipedia.org/wiki/COVID-19_pandemic) / 
[America’s descent into fascism](https://duckduckgo.com/?q=America%E2%80%99s+descent+into+fascism) / 
the [Anthropocene](https://en.wikipedia.org/wiki/Anthropocene) 
[climate crisis](https://en.wikipedia.org/wiki/Climate_change). 
“Fucked up”, as it were.  
  
Upon each completion of the song, a list of keyboard engagements will 
be displayed under _Receipt_. This includes both the activations 
scripted for the animation as well as your own keystrokes and pointer 
interactions. You are part of the artwork. This is your personal 
receipt for this experience. It is unique and for your eyes only.
    



The music
------------------------------------------------------------------------
Released in July 2006, 
[**The Eraser**](https://en.wikipedia.org/wiki/The_Eraser) is 
[Radiohead](https://en.wikipedia.org/wiki/Radiohead) frontperson 
[Thom Yorke](https://en.wikipedia.org/wiki/Thom_Yorke)’s debut solo 
album, produced by 
[Nigel Godrich](https://en.wikipedia.org/wiki/Nigel_Godrich) and 
featuring visual artwork by 
[Stanley Donwood](https://en.wikipedia.org/wiki/Stanley_Donwood). 
**Black Swan**—the song featured here—is the fourth track from this 
record.

<img src="https://raw.githubusercontent.com/stewdio/blackswan/master/media/thom-yorke-the-eraser@768.jpg" title="Black Swan" width="512"> 
  
  
**The Eraser** is available for 
[purchase from XL Recordings](https://xlrecordings.com/buy/thomyorke-theeraser) 
in various physical and spectral formats.

[<img 
	src="https://raw.githubusercontent.com/stewdio/blackswan/master/media/xl-recordings@256.png" 
	title="XL Recordings" 
	width="128" 
	height="128">](https://xlrecordings.com/buy/thomyorke-theeraser)  
  
Capitalist data brokers are also standing by to exchange your 
virtualized currency for aural stimulation.  

[<img 
	src="https://raw.githubusercontent.com/stewdio/blackswan/master/media/spotify@256.png" 
	title="“The Eraser” on Spotify" 
	width="48" 
	height="48">](https://open.spotify.com/album/4QSIeDnAnGag2YZ5DjB2eB)
[<img 
	src="https://raw.githubusercontent.com/stewdio/blackswan/master/media/apple-music@256.png" 
	title="“The Eraser” on Apple Music"
	width="48" 
	height="48">](https://music.apple.com/us/album/the-eraser/161162568)
[<img 
	src="https://raw.githubusercontent.com/stewdio/blackswan/master/media/google-play-music@256.png" 
	title="“The Eraser” on Google Play Music" 
	width="48" 
	height="48">](https://play.google.com/store/music/album/The_Eraser?id=B5n7dgsji4qeky2ldz5bifk6lu4&hl)
[<img 
	src="https://raw.githubusercontent.com/stewdio/blackswan/master/media/amazon-music@256.png" 
	title="“The Eraser” on Amazon Music" 
	width="48" 
	height="48">](https://www.amazon.com/Eraser-Thom-Yorke/dp/B000FPYNR6)  
  



Kicking the tires
------------------------------------------------------------------------
Yes, each element of this animation is a real 
[`HTMLElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement). 
(There is no 
[`canvas`](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API) or 
[WebGL](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API) 
within this project.) It’s entirely
[HTML](https://developer.mozilla.org/en-US/docs/Web/HTML), 
[JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript), and 
[CSS](https://developer.mozilla.org/en-US/docs/Web/CSS). The 
composition is stored as keyframes; a queue of functions to be executed
at particular time stamps. The composition summary can be found in 
[blackswan/composition.js](https://github.com/stewdio/blackswan/blob/master/blackswan/composition.js).  

What’s the current state of the composition’s playback queue? Load up
this project, open your browser’s 
[JavaScript console](https://developers.google.com/web/tools/chrome-devtools/console/javascript), and enter the following:
```javascript
console.log( ...comp.inspect() )

```
Want to see the composition’s entire playback queue?  
```javascript
console.log( ...comp.inspectAll() )

```  
  
The code for this animation artwork—is © 
Copyright 2020, [Stewart Smith](https://stewartsmith/). It is free, 
open-source, and available for download and reuse from 
[GitHub](https://github.com/stewdio/blackswan/s). (See 
[license](https://github.com/stewdio/blackswan/blob/master/LICENSE.md) 
for details.) It was created on my personal computing devices during 
personal time and is not affiliated with any employers past or present. 
The audio is owned by 
[XL Recordings](https://xlrecordings.com/buy/thomyorke-theeraser) and 
is _not_ available as part of this free code package. Consider 
[purchasing it from them](https://xlrecordings.com/buy/thomyorke-theeraser).  
  



Seeds
------------------------------------------------------------------------

<img 
	src="https://raw.githubusercontent.com/stewdio/blackswan/master/media/stewart-smith-black-swan-2006-clip.gif" 
	title="A clip of Stewart’s 2006 sketch for a “Black Swan” music video; performed via Apple’s Keyboard Viewer application." 
	width="300">  
  
I originally sketched my concept for a “Black Swan” music video in 2006 
as screen captures of live typographic performances using the 
[OS X 10.4 Tiger](https://en.wikipedia.org/wiki/Mac_OS_X_Tiger) 
[Keyboard Viewer](https://support.apple.com/guide/mac-help/use-the-keyboard-viewer-on-mac-mchlp1015/mac) 
application. Keyboard Viewer, which replaced Apple’s old Key Caps 
program, highlights keys depressed by the user and displays available 
characters from the current keyboard palette. Sketches like the clip 
above were made by recording the screen while typing along to the song 
as it played back at half speed. Byproduct “receipts” of the live 
performance were created by capturing the performed typing in 
[TextEdit](https://en.wikipedia.org/wiki/TextEdit). 
Have you ever hit a 14-year pause button on a personal project?  
  



Last flowers
------------------------------------------------------------------------
If you are an American, please 
[register to vote](https://vote.gov/) as soon as possible
for the general election this November. 
I implore you to help vote Trump out
and to [flip The Senate blue](https://flipthesenate.com/).  
  
[**BLACK  
LIVES  
MATTER**](https://blacklivesmatter.com/)  
  






