Interactive WebGL viewer built for the “Stories of Online Harassment” poster in Supercharged by AI: Effects exhibition. It lets visitors look at the print through cyan, magenta, and yellow “lenses” on their phone, revealing layered narratives about online harassment.
The project was developed within the Information Literacy for Societal Resilience research initiative, a collaboration between DensityDesign Lab (Politecnico di Milano), Tactical Tech, and IFLA. The overall goal of the project is to explore how AI is affecting the ways media and information are produced, distributed, and perceived.
- Use a phone or tablet with a modern browser (Safari, Chrome, or Firefox) and allow camera access.
- Point the device at the printed poster; select your language in the top bar.
- Tap Start and grant camera permission; when prompted, align the on-screen calibration graphic with the colored marker printed on the poster, then tap Calibrate.
- After calibration, switch between C, M, and Y buttons to explore different thematic layers; drag the slider to tune readability.
- If lighting changes, tap Calibration → Recalibrate and repeat the alignment.
- Camera frames stay on-device; calibration data is only kept in local storage to improve color accuracy.
- Requirements: Node.js (>=18 recommended) and npm.
- Install dependencies:
npm install - Development server with live reload:
npm run start(servesindex.htmlwithbundle.jsgenerated by Beefy). - Production bundle:
npm run build(createsbundle.jsin the project root). Hostindex.html,bundle.js, and theassets/directory on any static server (HTTPS required for camera access on most devices).
- Part of Tactical Tech’s “Supercharged by AI: Effects” exhibition: https://tacticaltech.org/news/project-launches/supercharged-by-ai-effects/
- Concept and design for the poster: DensityDesign.
- Development: Sol Bekic (s-ol) and collaborators.
- Multilingual copy in
src/messages.json; add new locales there and rebuild.
- MIT License (see
LICENSE).