Subscribe to download
Vaporwave Audio Visualizer

Hi, I hope you enjoy my creation.

Join my Discord: https://discord.gg/uuxg3necxZ


DOCUMENTATION

This is a web wallpaper written in HTML/CSS/JavaScript.

Sources:
https://docs.wallpaperengine.io/en/web/first/gettingstarted.html - Wallpaper Engine documentation
https://github.com/luukdv/color.js/ - library for parsing color palettes from an image
https://p5js.org/ - library for canvas rendering

Settings

- Show FPS
Outputs current FPS according to p5.js

- Custom Image
Select a background image. The image must have the same aspect ratio as your display

- Show Color Palette
Displays the 16 primary colors of the current background image

- Color Palette Grouping
Configures how many similar colors should be grouped into one color.
More information: https://github.com/luukdv/color.js/#group

- Beat Visualization
Toggles the effects of beat visualization - Screen Scaling and Screen Overlay.
Beat Visualization works by taking the first half of the audio spectrum (bass and midrange frequencies) and calculating the mathematical average of the presented values.
(The same value is used to scale the graph itself)

- Graph Scaling
Applies scaling to the Graph based on the set value and the calculated "beat value"

- Fix Inner Part
Exclude Inner Graph from Graph Scaling

- Screen Scaling
Applies scaling to the background image based on the set value and the calculated "beat value"

- Screen Overlay
Applies the selected color from the color palette with the selected Blend Mode and set Opacity, based on the calculated "beat value".
Learn more about blending modes: https://p5js.org/reference/#/p5/blendMode

- Graph Style
Curved - points of the graphs connected by Bezier curves
Straight - chart points connected by straight lines

- Graph size
Diameter of the circle in pixels

- Amplutide
Controls the maximum amplitude of the graph based on the current volume

- Chart rotation
Constantly rotates the graph depending on the set value. 0 = off

- Inner Graph Enabled
Enables the inner curve of the graph

- Middle Graph Enabled
Enables circle and graph lines

- Middle Graph - Circle Enabled
Toggle the circle in the Middle Graph

- Outer Graph Enabled
Enables the outer curve of the graph

- ... Graph Blend Mode
More information about blend modes: https://p5js.org/reference/#/p5/blendMode

- ... Graph color
The corresponding color number from the Color Palette

- ... Graph Width
Line width in pixels

- Enable Glow
Draws glow around elements of the Graph with the same color as the element

- Glow Value
Value in pixels