/911tv

Primary LanguageJavaScript

9/11 on TV

You can see this code in action on the web site.

Why?

11 September 2001 was not only an unprecedented terrorist attack, but also a special media event. The images have become iconic, of course, but also the density of events and length, mediated by live television coverage were without precedent.

I can still remember that day and the days that followed, how the event developed: first "just" a news ticker to a spectacular accident... And further developments then led to more and more broadcasters taking up the unfolding events and accompanying it with special programmes.

The impact of the event is manifold. Besides the well-known global political, cultural ones, there are also social ones such as the truther movement, which was certainly also fostered by contradictions and rumours in the context of the live coverage.

Of course, it is no longer possible today to recreate the reception situation of 9/11, if only because it is now known what happened and how it ended. But this page should at least be an attempt to recreate this situation and thus to create immersion. Contrary to current media usage habits, the television programme is linear, but you can change channels.

How?

In 2007, the Internet Archive set up the September 11 Television Archive, a collection of TV broadcasts from 20 channels over 7 days, totalling about 3000 hours of material. Although mainly US channels, it also includes some international channels such as BBC, NTV, TV Azteca, MCM and CCTV-3.

In addition, there is a day view, which is presented like an EPG, which allows a good overview, but unfortunately also prevents immersion, as it forces constant interaction.

Therefore, this website summarises the videos and presents them in a very reduced user interface: As an TV set.

Contrary to current media usage habits, the TV programme is linear, but you can change channels. Key events can be displayed as teletext sub titles. Teletext can also be deactivated and the "TV" displayed in full-screen mode. Loading the teletext panels can take some time. If errors occur, such as longer loading times or missing recordings, there is a picture disturbance. This also occurs when you try to switch off the television.

Credits

The implementation of this project was only possible through the publication of the digitised television recordings by the Internet Archive.

Inspirations

The following examples have influenced the user interface:

Fonts and icons

Images

All images are used as derivative works.

Software components

In addition, the following software components were used:

Data processing

Presentation

Development

About

9/11 on TV is a Projektemacher project.

I had the idea about 10 years ago, around 2012, certainly around September, when I was regularly watching public domain films in the Internet Archive and stumbled across the 911 TV collection by chance. The initial idea was some sort of installation including a TV-Set, but the current web page is easier to implement.

More Media

The focus is on visual media, like images, photo books and movies. These lists aren't exhaustive.

Images

Books

  • Here is New York: A Democracy of Photographs by Gilles Peress and Michael Shulan, published by Scalo, Zurich, Berlin and New York, 2002, ISBN 978-3908247661
  • Aftermath: Unseen 9/11 Photos by a New York City Cop by John Botte, published by Regan Books, New York, 2006, ISBN 978-0060789718x
  • New York September 11 by David Halberstam and Steve McCurry published by Magnum Photos Inc., New York, 2001, ISBN 978-1576871300
  • Newyorkseptembereleventwothousandone by Giorgio Baravalle, Cari Modine, et al, published by F & W Publications, Millbrook, 2001, ISBN 978-0970576828
  • Aftermath by Joel Meyerowitz, published by Phaidon Press, New York, 2006, ISBN 978-0714846552
  • Mayday! Mayday! Mayday!: The Day the Towers Fell by Steve Spak, published by Xlibris, Bloomington, 2004 ISBN 9781413427707

Movies

The Wikipedia has a complete list.

If your wondering, why Cloverfield is part of this list, it's because I consider it an metaphor for the 9/11 attacks, there is a section on this movie below.

Cloverfield

I consider Cloverfield to be one of the best movies related to the 9/11. Not because it's a realistic or accurate depiction of the attack on New York, but it'a masterpiece in capturing the but because it is a masterpiece to capture the mood and uncertainty subjectively.

The images of the subjective camera seem to be directly inspired by the live coverage of the time. Interestingly, the film works on two levels: One observes the characters leading relatively normal lives and can thus identify with the protagonists. The film takes enough time to build up a corresponding mood before it get's more intense.

This forms the basis that allows the viewer to empathically experience the situation, which becomes more unclear in the course of the film, and the associated fears of the characters.

At the same time, the found footage setting ensures that it is explicitly presented as a form of media reception.

And both the monster and the theme are of course a reference to Godzilla (although not necessarily in the variant by Roland Emmerich), who is an embodiment of the atomic bombs dropped on Japan in 1945.

All in all, a very impressive form of cinematic adaptation as a horror film (metaphor).

Alternative Media

Even though it promotes conspiracy theories, the movie series Loose Change is noteworthy for illustrating cultural impact.

Frequently asked questions (FAQ)

Why is the sometimes static noise?

Getting the media files takes some time, this is called buffering. Since time progresses during buffering the application will show the TV set in a state equal to having no signal during buffering, this is especially the case when switching channels.

Why is it impossible to rewind or forward the video?

To let the viewer experience the true horrors of linear television. 😉 The main goal of this site is the immersion into the live coverage of that time, which includes the linear experience.

Why does the site look so strange / ugly?

The page imitates a television set. It's called skeuomorphism, a common design philopsophy of the 90s, early 2000s, which is the time we are talking about here. According to this philosophy, user interfaces should have be analogous to physical objects.

The Teletext is hard to read, can it be changed?

No, this is intentional to shift (or better: force) the viewers attention of the viewer to the TV transmission and let them turn off the Teletext.

Notes

Technical data

  • PAL resolution: 720 x 576
  • NTSC resolution:720 x 480
  • Teletext has 25 rows with 40 columns
  • The Teletext loop can be up to 30 sec long

Teletext

The Wikipedia has an article on Teletext. There were several JavaScript libraries for Teletext under consideration:

But since the Teletext functionality is only used to display some text, the teletext representation doesn't need to be 100% percent accurate.

There are several other interesting Teletext related sites, that might be interesting as well

Static Noise

Generating a static noise sound

ffmpeg -f lavfi -i 'anoisesrc=a=0.1:c=white' -t 10 output.mp3

A simple example using ffmpeg.

ffmpeg -f lavfi -i 'anoisesrc=a=0.1:c=white[s1];anoisesrc=a=0.2:c=pink[s2];[s1][s2]join[s1]' -map "[s1]"  -t 6  output.mp3

In stereo.

ffmpeg -f lavfi -i 'anoisesrc=a=0.1:c=white' -af 'apulsator=timing=hz:hz=.5:amount=.4' -ac 2 -t 6 output.mp3

With channel oscillation.

ffmpeg -f lavfi -i 'anoisesrc=a=0.1:c=white' -af 'tremolo=f=.5:d=.2' -ac 2 -t 6 output.mp3

Modulate along a sinus curve, like in the TVStatic.jsx canvas element.

ffmpeg -f lavfi -i 'anoisesrc=a=0.1:c=white' -af 'aphaser=type=s:speed=.5:decay=.25:in_gain=0.15:out_gain=0.6' -ac 2 -t 6 output.mp3

Another example with oscillation, see ffmpeg documentation for more options. Make sure, that frequency and length end up.

ffmpeg -f lavfi -i 'anoisesrc=a=0.1:c=white[s1];[s1]tremolo=f=.5:d=.3[s1];[s1]apulsator=timing=hz:hz=.5:amount=.4' -ac 2 -t 8 output.mp3

It's also possible to combine effects, this was used to create the final effect.

Further Links

1kHz Sine noise

ffmpeg -f lavfi -i 'sine=frequency=1000' -ac 2 -t 8 1khz.mp3

Used for closedown.

Converting images

Images that should be included in the videotext need some preprocessing. The requirements are described in the 'image-to-sextants' README.

Short version: You need to resize to match the aspect ratio, the height should be less the 80px, if you want to keep a header ans footer,

convert site/src/assets/svg/cm.svg -size 70x70 -monochrome cm.png

Development

Generate required data

pip install -r requirements.txt
./scripts/setup.sh

Installing dependencies

cd site
yarn install

Starting the web server

cd site
yarn run vite

Testing specific videos

There are several URL params that can be used to test specific videos:

  • c - changes channel
  • r - resets the time
  • t - set a specific time

TODO:

  • Texts and links
    • Content
      • Finish 'Other resources'
      • More teletext pages from this document
  • Video addressing
    • Seek - not tested yet, might be issues with gaps in coverage
    • Segmentation
      • Prefetch
    • Channel switching without loading
    • Handle (buffering) events
  • Teletext
    • Check Colors in teletext graphics
  • Testcard for gaps
  • Reduce TODO's from code
  • Include https://www.youtube.com/watch?v=zx8_Pumdkpg

Known Issues

  • Button's not scaling very well
  • Powering on not working properly with test card
  • Teletext: Graphic and Text clash
  • Browser issues
    • Mobile browsers (portrait mode) not completely working yet, find a way to calculate aspect ratio.
  • Clock gets out of sync / duplicated. Maybe after following link - certainly HMR related
  • Data preprocessing
    • GLVSN does't seem to be working
    • Result of compressing assets/json/*.json using JSONCrush isn't used
  • Warnings
    • react.development.js:209 Warning: forwardRef render functions do not support propTypes or defaultProps.

Further ideas

  • Migrate to TypeScript
  • Remove r and t from url after use - without triggering a rerender
  • CRT effect, see and Codepen
  • Check if video can be projected on a sphere using ThreeJS, see WebGL examples or VideoTexture
  • Bezel of TV set can be slimmer
  • Electron App
  • Data preprocessing
    • Multiple sub pages (manually split)
    • check if generated sub pages are needed

Projektemacher Logo