The ThreeJS/WebGL and Canvas code for the real-time generative animations shown during JSConfEU 2018 in Berlin. Created by Matt DesLauriers and Szymon Kaliski, based on Silke Voigts's designs and mood boards.
This was used during the opening of the event, as well as during breaks in between talks, and around the edges of speaker slides during talks. The visuals were used in a couple other select places, such as in monitors showing current schedule & speaker tracks. All using Chrome in real-time.
Photos & Video
For a video of the artwork at JSConfEU, see here:
A couple select photos below:
Taken from in browser:
To run it live in your browser, try the following links. We have only tested this on desktop Chrome.
In Generative Mode, try pushing 1, 2 or 3 on your keyboard to transition colour palettes and states.
How to Install
git clone https://github.com/mattdesl/jsconfeu-generative-visuals cd jsconfeu-generative-visuals npm install
Now, you can run in development mode on http://localhost:9966/ with the following:
npm run start
Or, bundle to a static site in the
npm run build
In our final projection mapping, we ended up building this to a standalone library that was required by a larger framework to control other visualizations on the projection surface.
The main projection uses an aspect ratio of 6540x1200px, four projectors connected to a single GeForce GTX 1080 Windows PC running Chrome in full-screen.
The shapes are triangulated and rendered with WebGL, using vertex shaders to give them organic movement. An algorithm similar to dart throwing is used to spawn shapes in a pleasing composition, and a slow-motion physics engine repels shapes away from the centre screens if they drift too close. WebAudio and FFT analysis to the intro audio affects the dancing and shifting of the shapes. Most features of the artwork — geometry, pattern, scale, colour selection, movement, etc — are randomized with hand-tuned probabilities.
This was made possible by the entire JSConfEU team and conference, as well as the support from their sponsors, including Google Chrome.
The generative visuals were made possible by the following members:
- Matt DesLauriers – generative art, creative coding, video editing
- Szymon Kaliski – creative coding
- Martin Mostert – cinematography, film footage
- Martin Schuhfuss – lights, projection mapping
- Malte Ubl – curator, JSConf EU
- Silke Voigts – design, brand identity
- Sam Wray (2xAA) – soundtrack
Also thanks to the rest of the live:js, Nested Loops, JSConf EU and CSSConf EU teams.
MIT, see LICENSE.md for details.