You can see this code in action on the web site.
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.
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.
The implementation of this project was only possible through the publication of the digitised television recordings by the Internet Archive.
The following examples have influenced the user interface:
- Static TV noise by Bjørn Sortland
- Teletext by
jsanderson
- image-to-sextants by Rob Hardy
- MyRetroTVs by Joey Cato
All images are used as derivative works.
In addition, the following software components were used:
- Python
- Beautiful Soup
- Python Frontmatter
- Python-Markdown
- Python Pillow
- NumPy
- Requests
- termcolor
- JSONCrush
- lz-string
- JavaScript Cookie
- howler.js
- Luxon
- Normalize.css
- React
- react-cookie-consent
- react-device-detect
- React Router
- video.js
- browserslist-to-esbuild
- esbuild
- ESLint
- html-react-parser
- PostCSS
- postcss-inline-svg
- postcss-normalize
- postcss-svgo
- Sass
- Stylelint
- SVGO
- Vite
- vite-plugin-stylelint
- vite-plugin-svgo
- Stylelint
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.
The focus is on visual media, like images, photo books and movies. These lists aren't exhaustive.
- Time: 9/11: The Photographs That Moved Them Most
- The New York Times: The Photographs of 9/11
- AP PHOTOS: 20 images that documented the enormity of 9/11
- The Washington Post: The most iconic photos from Sept. 11 and its aftermath
- Magnum photos: 20 Years On: Remembering The 9/11 Attacks
- 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
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.
- United 93, 2006
- World Trade Center, 2006
- Cloverfield, 2008
- 9/11, 2017
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).
Even though it promotes conspiracy theories, the movie series Loose Change is noteworthy for illustrating cultural impact.
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.
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.
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.
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.
- 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
The Wikipedia has an article on Teletext. There were several JavaScript libraries for Teletext under consideration:
- @techandsoftware/teletext There is a whole family of packages with Teletext related software by the same author / company, which has been a great help developing the Teletext component.
- teletext
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
- Teletext for Raspberry Pi
- Suite of tools for processing teletext signals recorded on VHS
- The Teletext Archive
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.
ffmpeg -f lavfi -i 'sine=frequency=1000' -ac 2 -t 8 1khz.mp3
Used for closedown.
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
pip install -r requirements.txt
./scripts/setup.sh
cd site
yarn install
cd site
yarn run vite
There are several URL params that can be used to test specific videos:
c
- changes channelr
- resets the timet
- set a specific time
- Texts and links
- Content
- Finish 'Other resources'
- More teletext pages from this document
- Content
- 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
- 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.
- Migrate to TypeScript
- Remove
r
andt
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