https://github.com/polygonjs/tutorial_audio_analysers

🎵 Tutorial showing how to use audio analysers to update a WebGL scene 🔊
https://github.com/polygonjs/tutorial_audio_analysers

3d animation audio audio-analysis audio-processing audio-visual audio-visualizer creative-coding fft glsl node-based particles procedural threejs tonejs webgl

Last synced: 3 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/polygonjs/tutorial_audio_analysers
• Owner: polygonjs
• Created: 2022-02-14T00:43:50.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2022-06-04T12:01:38.000Z (over 2 years ago)
• Last Synced: 2024-04-17T22:14:51.759Z (10 months ago)
• Topics: 3d, animation, audio, audio-analysis, audio-processing, audio-visual, audio-visualizer, creative-coding, fft, glsl, node-based, particles, procedural, threejs, tonejs, webgl
• Language: JavaScript
• Homepage: https://polygonjs.com/particles-music
• Size: 79.2 MB
• Stars: 4
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        

# 🎵 Realtime Particles with Music in WebGL 🔊



[See experience live >](https://polygonjs.com/particles-music)

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](https://polygonjs.com), 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](https://github.com/polygonjs/polygonjs) by [creating your own nodes](https://github.com/polygonjs/plugins_tutorials).

I'm preparing a tutorial on how to create this type of effect, which I'll release on [my twitter](https://twitter.com/fradingue) and [@polygonjs](https://twitter.com/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:

![Polygonjs Editor](https://github.com/polygonjs/tutorial_audio_analysers/blob/main/public/images/editor.jpg)

- 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/](https://polygonjs.com/docs/)

# Assets

- Music tracks by the composer [Scott Buckley](https://www.scottbuckley.com.au/library/the-climb/).

- Character models: [https://renderpeople.com](https://renderpeople.com).

- Milky Way image: [https://www.eso.org/public/unitedkingdom/images/eso0932a/](https://www.eso.org/public/unitedkingdom/images/eso0932a/).