Light Typo Painting

A web app to type text in light painting mode


I have recently read an article on "etapes" mag (no 213), a french mag, about "BERG", a graphism and design agency, in london. There was a work done in association with "Dentsu" about words light painting using a tablet.

A 2D version seemed easy to develop using P5js, the javascript version of Processing.

Overview
Overview

To test it, one need two devices : first, a device than can do lightpainting, smartphone with that capability or better choice : a digital reflex camera, which handle open shutter. Second, a smartphone or a tablet, that will display the animation showing parts of the word or sentence.

Link to the test page here

The display smartphone will be displaced in front of the camera during and according to the animation, and ideally, the camera will be static. Several tests will be neccessary before getting the correct speed and an acceptable image.

The application uses javascript and all browsers are not equal about javascript performance. On android, firefox seems the best choice. If, when activating the animation, the result animation is too slow, that could be because of the browser...

Appearance
Web app appearance
Appearance2
Web app appearance during the animation

The web application is minimal : 1) a speed slider showing the relative speed : at 100, the animation will need a displacement of a screen width per second

2) a slot slider showing the relative size of the slot displaying part of the sentence

3) an input zone to type the sentence

4) a big button to activate the animation

Bellow these parameters, a view (with respect to scale) of the necessary movement is shown.

The animation starts one second after activation to allow a correct placement of the smartphone before recording the image.

At the end of the animation, the screen remains black to avoid undesired glitches. To return to the main app screen, a simple click will do.

A first result
A first proof of concept