https://github.com/jayrichh/bopgl

BopGL: WebGL Visualizer with Vinyl Record Simulation
https://github.com/jayrichh/bopgl

noob webgl

Last synced: 24 days ago
JSON representation

BopGL: WebGL Visualizer with Vinyl Record Simulation

• Host: GitHub
• URL: https://github.com/jayrichh/bopgl
• Owner: JayRichh
• License: mit
• Created: 2024-09-17T21:14:07.000Z (3 months ago)
• Default Branch: main
• Last Pushed: 2024-09-17T21:18:03.000Z (3 months ago)
• Last Synced: 2024-09-18T02:10:41.923Z (3 months ago)
• Topics: noob, webgl
• Language: HTML
• Homepage: https://jayrichh.github.io/BopGL/
• Size: 9.77 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Bop

## Use

1. Clone the repository

2. Open `index.html` in a modern web browser

3. Or click the button below to view on GitHub Pages:

   



      

         

      

   

   

4. Enjoy the journey




  



### Realtime Audio Visualization

In **Listen Mode**, the visualizer reacts in real-time to your microphone input, creating dynamic patterns and movements synchronized with the beat.





### Presets

Quickly switch between visual presets using the **Next Preset** and **Random Preset** buttons.

- **Preset Cycling**: Move between preloaded visual styles for a variety of experiences.

- **Randomize**: Instantly shuffle to a new visual configuration.




### Reset Functionality

Use the **Reset** button to revert any changes made during a session to the original default settings.





### Customization Controls

Access the customization panel via the **Controls** button, where you can fine-tune every aspect of the visualization in real-time. All changes are immediately reflected on the canvas.





### Track Management



  


    You can create and manage custom playlists directly within the app. Here's how to work with tracks:

    


      


Add New Tracks: Use the Create button to open the modal and add tracks by selecting audio files.

      


Edit Existing Tracks: Customize track details such as:

        


          
Title and artist information

          
Visual properties including color and movement

          
Track duration (automatically set based on the uploaded file)

        

      

      


Save Playlists: Save your custom playlist for future use. It is stored locally in the browser. SOON™



    

  

  


    

  



### Visual Customization

Each track has its own unique visual settings, which can be modified through the controls sidebar. Available parameters include:

- **Detail Level**: Controls the complexity of visual elements (e.g., spinning records, shaders).

- **Movement Speed**: Adjusts how fast the visuals move or spin.

- **Color Intensity**: Changes the brightness and contrast of the visuals.

- **Glow Strength**: Modifies the strength of glowing effects.

- **Shape Complexity**: Adds more intricate details to shapes in the visualizer.

- **Primary and Secondary Colors**: Customize the two main colors for each track’s visual theme.