I suggest checking out the previous guide on steam if you’re feeling a bit lost:
Audio Responsive Bar SceneScript by anniemuse
https://steamhost.cn/steamcommunity_com/sharedfiles/filedetails/?id=1760471017

Required Workshop Asset: @fug4life https://steamhost.cn/steamcommunity_com/sharedfiles/filedetails/?id=2092495494
Optional Workshop Asset: @bewie https://steamhost.cn/steamcommunity_com/sharedfiles/filedetails/?id=2127844565&searchtext=simple+circle+visualizer

DL
You can download the complete toggle user property 4k template here:
https://bowlroll.net/file/247891


You can download the complete combo user property 4k template here:
https://bowlroll.net/file/248774


Get started by Unzipping & Dropping the [template] folder into the following directory:

• C:\Program Files (x86)\Steam\steamapps\common\wallpaper_engine\projects\myprojects
  
• You can then open an existing project in the WE Editor, and choose [4K Audio Bar Toggles]

To create a new project

Alternatively, you can create a new wallpaper and Add / Subscribe to the @fug4life asset listed above. [Wallpaper Engine > Create Wallpaper] & browse for a 4K Image.

Installing Required WE Asset

1. In the main menu click on [Workshop > Browse Assets on Workshop] Sort by audio visualizer, or type “rainbow” in the search box. Look for the thumbnail with the speaker and rainbow audio bars. Click the green [Subscribe] button, and close the window.
   
2. Click [Add Asset > Workshop > Audio Visualizer > Audio Rainbow/Rainbow/Color Tint] Then click [Ok] to import the asset to your wallpaper. All of the layers on the left can be deleted. View the [Assets] toolbar to see the included assets. If you want to modify a material drag and drop the JSON file to your [Layers] tool bar on the left.
   
3. Add a 4x4 [Composition Layer] to your scene. Then you can bind one of the four scripts to it and you will be able to customize your visualizer (Included in the dl from bowlroll [audio_bar_scripts]).
   
4. Please remember to play audio when testing your output or applying the wallpaper.

Navigate to the [Layers] panel on the left. If you click on a layer it will be in focus. Check the [Properties] panel on the right to view various specs: Origin, Name, Material, Visibility, Settings. If the layer has a user property or a script bound to it the gear icon on the top right will be blue. If there is an audio visualizer script bound to a layer the @fug4life Audio Bar UI will populate at the top of this panel, and it will be outlined in blue. These options allow you to modify the scale and alignment to transform your visualizer as you’d like.

In the main menu click
[Edit > Change Project Settings]
This is where you will see all of the options your user will be able to change. Anything that is toggled on when you publish the wallpaper will be the default settings. This is an important interface in the editor because all the values that are set will effect what you see when you preview the scripts.

In the main menu click [File > Apply Wallpaper]
This will allow you to play with user properties in real time.

If there is no sound input the visualizer will not work. So if you’d like to preview the options or
[Run Preview] in the editor you need to play music.

The toggles will enable a given script, and we will check out the script to see how these work later on. For now just experiment with the toggles and find a bar setup that you like. You can also change the custom color, or modify the [Bloom] settings. Bloom allows the bars to glow, but it is a fullscreen overlay effect that can also washout your background image. I find the easiest way to deal with this is to add a [Tint] effect to your background image and use the [Alpha] slider to balance your image.

In the Project Settings window you can click
[Add Property] to create a new user property. Or you can edit the ones I’ve added by clicking the pencil icon. You can also change the sort order by number or click the arrows to move them up and down in the list. Keep in mind that the user property layer is overriding the sort order in the [Layers] panel. If you do not need a user property in your project, click the red [x] to delete it.


In the [Edit Property] window you will see [Type, Title, Key, Default Value]
The “key” is what we need to know to link an audio bar script to a user property. In this example we are using the [Checkbox] to change the visibility of the script. The key will auto populate when you create a title for your property. You can always edit the title, but once you click [Ok] you are unable to change the key. I like to use abbreviations and numbers in my keys, this keeps it short, easy to type, and easy to remember.


List of keys in the template
key, circ64, circ32, circ16, a64, b64, c64, d64, a32, b32, c32, d32, a16, b16, c16, d16, customcolor, bloom, bloomamount, bloomthreshold

• Key is for testing, and should be removed before publishing
  
• Circ = 360 degree visualizer
  
• A-D = 90 degree visualizer
  
• 64, 32, or 16 = # of Audio Buffers
  
• The other properties are not referenced in the script

The script does not need a user property assigned to it, but I like to bind them for organization purposes. In the [Properties] panel on the right, click the Gear Icon to open the options menu. Here you can [Bind User Property] or [Bind Script] and you can also delete these by clicking the red [Unbind] buttons. If you click the [Run Preview] button the editor will be inactive, click [Stop Preview] to continue working.

Notice on the left, in the [Layers] panel only certain layers are active (white text). This is visible in the [Layers] pallet because they have been bound to a User Property. The layers in the top of the panel have not been bound to a User Property, but they are linked to “key” in the script. If you bind these to the “key” User Property and the option is toggled off ([User Properties] window) then you will be able to see which layers are visible and which layers are hidden. If you do not bind any properties you will not be able to tell which ones are active or inactive in the [Layers] panel. However, the script is where the User Property is defined. Therefore, you must click [Edit Script] to modify the toggle.

To apply user properties to your visualizers pick one of two types of properties. Write down your 'key' (and all of your 'values' for the combo method) then fill in you data when you see these placeholders in the script snippets below:

Checkbox Property Method

Combo Property Method
syntax

The Combo Property Method as seen above fixes the dropdown menu UI issue I was having previously.

In the Audio Responsive Bar SceneScript guide from May, 2019 I used the combo user property, which will be added to the wallpaper settings as a dropdown menu. The issue with the dropdown menu (combo) for a script is that any other user property modification will kill the script ..

UX = Failure

It is not very intuitive to change a setting the user has already set, and interacting with the dropdown menu LAST is the only way to run the scripts when the wallpaper is previewed or applied. This UI issue is why I switched to toggles instead of linking them to a combo dropdown menu. Thanks to Tim (Developer) this issue is now solved and we can choose between one or the other.

Click on the first layer, navigate to the attached script (click the gear in the [Properties] panel, and click the [Edit Script] button. Scroll down to lines 82-92 to find the snippet that defines the user property. To bind a User Property replace the word “key” with the checkbox property key in your project. Lines 86 and 89 will need to be modified to activate a new audio bar toggle.

Audio Responsive Script

• Line 2 is required if you want to use a bar with the shaders @fug4life setup in their audio bar asset. If you want to use your own model you can import a 4x4 pixel image but you will need to delete line 2 to link local assets.
  
• Lines 4-75 creates the WE Editor UI that allows you to use sliders to modify the bars. This script is for a linear audio bar visualizer, and will vary from the circle audio bar visualizer used to create the four quadrants of audio bars.
  
• Lines 77-80 is setting up the variables and audio buffers in our script. You can change the 64 in line 80 to 2 other values, 32 or 16. This number will need to be changed in various places throughout the script. I would suggest doing a find and replace if you want to change the number of audio buffers.
  
• Lines 82-92, as previously discussed links the visibility to a user property, in this case key.
  
• Lines 95-119 contain the first export function snippet. This defines the Vec3 variables.
  
• Lines 121-133 allows the script to use the layering order from the layers panel, and it references the JSON file you are using for your bar model.
  
• Lines 136-142 controls the shape of the visualizer and the alignment of the bars.

If you want to have multiple models in your visualizers you need to format the script in a different way. An example of this can be viewed in the 2nd layer.

• Lines 74-143 lists all of the models you will use. This is a 64 audio buffer script, so there are 64 lines to define the models. If you modify the second export function you can list 8 models to achieve the same results. This section was also modified to reference barModels instead of a single bar.json model. See lines 192 & 193 for the new script steps.
  
  let barModel = barModels;
  let bar = thisScene.createLayer(barModel);
  
• This script is also different from the previous example, as it is a circular visualizer. Certain parameters have been modified to achieve the desired results (ie: angle, arc, circleScale).

Various Audio Bar Models

Some people may want to use an arc visualizer instead of a circle, and this brings up the question, “how do I rotate it?” I have yet to find a solution to this query, but with some logic you can use specific 90 degree quadrants of a circle and you will achieve the effect of rotation. If I learn how to rotate the audio circle visualizer I will update the guide.

Checkbox Audio Bar User Properties

Let’s take a look at the arcs that are active in our project. They are labeled A, B, C, & D. The first quadrant is what you would normally get if you set your circle up with and arc of 90. If you think about each section like a clock A is from 12-3 o’ clock, B is from 3-6 o’ clock, C is from 6-9 o’clock, and D is from 9-12 o’ clock. To transform the arc we needed to set negative values to the arc and the circle scale. Then the origin points needed to move inward to create a circle without noticeable gaps. Although, I do like the look of the default origin points. Each layer documents the X Origin and the Y Origin at the end of the layer name, ie: (X,Y)

If you’d like to create a new visualizer I suggest adding a new Composition Asset to your project. I like to change the dimensions to the same size as my model (8x8) or (4x4), but I don’t think it matters. Give it a name, and click the gear to bind a script. Checkout the audio bar scripts or use a script from a visualizer that does what you are wanting to do. You can also duplicate a layer to retain all of the settings and scripts.

There are 4 types of scripts
DL: https://bowlroll.net/file/248563

• Linear Bars with 1 bar.json model
  
  • 1a) audio_bar_toggle_linear_1-model.js
    
  • 1b) audio_bar_combo_linear_1-model.js
• Circular Bars with 1 bar.json model
  
  • 2a) audio_bar_toggle_circ_1-model.js
    
  • 2b) audio_bar_combo_circ_1-model.js
• Linear Bars with various bar_gradient_#.json models
  
  • 3a) audio_bar_toggle_linear_various_models.js
    
  • 3b) audio_bar_combo_linear_various_models.js
• Circular Bars with various bar_gradient_#.json models
  
  • 4a) audio_bar_toggle_circ_various_models.js
    
  • 4b) audio_bar_combo_circ_various_models.js

Pro Tip: Each script adds the UI to easily modify your visualizer without modifying the script. Alternatively, you could bind the script to one of your bar models (the first layer is my example of what NOT to do). I don’t like to bind my scripts to the bar.json material layer from the [Asset] panel. This is because the initial bar that renders is essentially a glitched bar (most noticeable when you apply scaling to your bars). I find that they become an eye soar in my work, and would rather they not render at all. This is why I use composition layers for my audio bars. Unfortunately, a missing bar in a circular visualizer can be equally displeasing. Another reason to use the arc method, instead of rendering a 360 degree circle.

Custom Color (Monochrome Bars)

Anytime you want to edit a bar.json material you can drag and drop from the [Assets] panel to the [Layers] panel. In the [Properties] panel you can see that you are looking at an [Image Layer]. Scroll down to the bottom of the panel and click on the image thumbnail to open the [Materials] properties. Here you can modify the shaders which allow you to cast a color onto the bars. Notice the [Color] gear is active and there is a script attached to it so that you can apply rainbow effects to your bars. There are three color options you can choose from to set the color of a given material. The only property you can apply in the user properties are color or a visibility toggle. If you click the gear next to color and click [Edit User Property] you can see I set up a color user property called [Custom Color]. If you wanted to change this to [Scheme Color] click the Radio Button / toggle to the left of it. This will [Link] a different user property to the material color. You can also click [Add Property] to make a new [Color] User Property.

When you bind a color property to a material it will create monochromatic (one color) custom colored bars. You cannot bind any of the scripted WE Editor UI elements to a user property. If you wanted to create an option that allows the user to pick one of the three color choices you would need to render the visualizer three times and set the visibility to a toggle as previously explained. That said, the bar.json material can only be set to one color option. Therefore, you would need to use other models to include all three color choices in your user properties (ie: bar.json, bar_gradient_5.json, bar_gradient_6.json). If you want to add you own texture to the bars you can import a 4x4 pixel PNG. I find that it is easier to create a 400 x 400 pixel texture, and then export it at 1% to meet the size requirement. Once you make the desired changes to the materials you can delete them from your layers pallet so they will not render without a script.

I've added a Gallery so you can view reference images for clarification on a certain step.



Audio Bar Quadrants



Audio Bar Circle (64 Buffers)



Audio Bar Circle (16 Buffers)



Audio Bar Quadrants (C & D / 6 o'clock to 12 o'clock)



Audio Bar Quadrant Styles



Audio Bar Custom Color User Property



Active Audio Bar Scripts



@fug4life Asset in a 4K Wallpaper




Composition Layer Properties / Editor UI



Image Layer Properties / Editor UI



Materials in the Properties panel



Material Properties panel



Image Layer Properties panel



Material Properties panel w/out Shaders



Material Color Properties panel w/ Shaders




Change Project Settings



Project Settings 1 of 3



Project Settings 2 of 3



Project Settings 3 of 3





Adding a Composition Layer



Binding a Script to a Layer



Editing a Script



a64 User Property Script



64 Audio Buffers Script



Single Bar Model Script





Material "bar_gradient_2"



Color Properties Gear Options



Custom Color User Property



Properties Panel Edit a User Property / Script



Editing a Checkbox User Property



Adding an Asset to Edit Materials



Editing Assets / Multiple Bar Models Script



Installed Textures



Importing a New Texture



Texture Swap / Browse for a 4x4.png



Import High Quality Texture