polygonjs / tutorial_audio_analysers

🎵 Tutorial showing how to use audio analysers to update a WebGL scene 🔊

🎵 Realtime Particles with Music in WebGL 🔊

See experience live >

This repo contains the project to create the page above, which showcases particles animated with music.

This is created using the node-based WebGL engine Polygonjs, and can be edited or adapted without any coding required. But if you know how to code, you can also extend the open source engine by creating your own nodes.

I'm preparing a tutorial on how to create this type of effect, which I'll release on my twitter and @polygonjs in a few days.

Open Polygonjs Editor

• 1: install dependencies, with yarn or npm install
• 2: run: yarn polygon or npm run polygon
• 3: open your browser on http://localhost:8091?scene=scene_01
• 4: you should see this:

• 5: you are then asked to login, but you can cancel/skip it and still use the scene. But you need to login in order to save your changes.

• 6: And then press play to start the music and particles simulation:

If you have any trouble installing it, the docs may be able to help: https://polygonjs.com/docs/

Assets

• Music tracks by the composer Scott Buckley.
• Character models: https://renderpeople.com.
• Milky Way image: https://www.eso.org/public/unitedkingdom/images/eso0932a/.