Check out 4K Audio Bar Toggles WE Guide 2021:
https://gtm.steamproxy.vip/sharedfiles/filedetails/?id=2396819488&tscn=1613432565

I've posted a new 4k template that is easy to insert your own pics to, check it out:
https://bowlroll.net/file/248774



I also have been given insight on how to fix the combo user properties logic (where the UX doesn't break when the user adjusts other settings in their wallpaper). Thank you Tim!

declare this variable using the 'value' from your combo user properties


syntax

The 2021 Update of the revised project can be downloaded here:
https://bowlroll.net/file/248193

"av_rav_scripts" contains java scripts that are used in the project, each script is named the same as the layer it is bound to, so if you accidentally "delete script" you can easily add it back.
I recommend installing “Notepad++” or a similar program so you can edit the file, and see the color coded script (choose a theme that highlights “.json” and “let” in a different color). It’s easier to edit here and then copy to the project, and this way you always have a backup of your scripts.

“Av_rav_shared_temp_0519.zip” is the project file you will need to download and add to the Wallpaper Engine “my projects” directory.

"CAV_basic_temp.zip" is the current version of the barebones audio bar template, featuring a centered audio bar circle and 2 vertical bar visualizers on each side, with custom color options, (1440p).

“colorbars-temp.pdf” is a file that contains 8x8=64 blocks of color that can reference an audio bar in the script. It is an illustrator file that you can modify to create your own bar colors.

"Guide4WE_AV_RAV_UP.pdf" is the official documentation I created for all the steps involved in this process.

Adding the File to your Projects

1. Download the project file, "Av_rav_shared_temp_0519.zip"
   
2. Unzip the directory
   
3. Drop the folder in "my projects"
   
4. Open Wallpaper Engine > "Create Wallpaper"
   
5. Click "Cancel" when prompted to create new or open recent
   
6. Go to "File" > "Open"
   
7. Choose "Customizable Audio Bars"
   
8. Go to "File" > "Apply Wallpaper"

Familiarize yourself with all the customization options

• "Scheme color" does something! (it changes the background color).
  
  
• "Audio Bars (Set Last)" is a "combo" dropdown user property and a has 8 audio bar options to choose from. Each Script is doing something new so you can learn from the similarities, how they are different, and maybe even why.
  
  
• "Pic Set (Background)" The following dropdown menus control the background, but you can only have one of these selected at a time. The default is set to None for all the pic sets, aside from "pic set 4." There IS a good reason I only have 9 options and a "None" option in each combo menu (for a max of 10 list items).
  
• If you want to change the background image set the pic set 4 dropdown to "None" before proceeding to another pic set dropdown menu.
  
  
• "Dark Mode" dims the entire screen, which I find is nice when it's early in the morning or when I'm watching a movie.
  
  
• "Alice" is checked, if you want to remove her, uncheck "Alice" and she will be gone, but all her effects will do nothing. If you decide to delete her completely, also delete the "Alice" user properties b/c they will be break.
  
  
• "Alice Brightness" is a slider that can make the character radiant to silhouette, since there is so much Anime hate on WE I set the default setting to silhouette. Alice does have a teaching purpose in this wallpaper. Feel free to add your own transparent png to experiment with a layer you prefer.

There are two ways to access the user properties, the first way affects the visibility of the project while you’re in the editor, and when you publish the wallpaper these settings will be the default settings.

Go to "Edit" > "Change Project Settings"




Basic Settings

• Title - How the project name appears in your projects, and the name it will be published as
  
• Scheme Color - currently linked to background color (when there is no background image)
  
• Resolution - this is a 1080p template

User Properties

• Title - the name of the customizable option
  
• Default Value - this indicates which layers and properties are active
  
• Arrows - moves the list item up and down to change the sort order
  
• Edit Icon - takes you to the "Edit Properties" window, after creating them
  
• X icon - deletes the user property (if it doesn't work don't publish it!)
  
• "Add Property" - lets you add a new user property, but doesn't let you link it to anything.

Layers (stack icon) and Properties (List Icon) are the important panels for linking a user property.

• Click the layer you want to edit
  
• Go to Properties
  
• Click the wheel / gear on the top right
  
• (This menu can has 4 options, 2 of those are dangerous and non reversible, they will delete what is there! Be careful to click the "Edit" option and not the "Delete" option).
  
• Click "Edit User Property"

• Notice this time the window only shows user properties, and the "link" radio button shows you which user property is assigned to the visibility of that layer / effect.
  
• If the selected layer is using a "combo" dropdown option, there will be a dropdown window labeled "Selected combo value for this link" Whatever label you see here identifies the assigned user property.

Click the edit icon to open the "Edit Property" window

• Type - The chosen user property
  
• Title - Name of the user property
  
• Key - usually set as your first "value" is referenced in the audio bar script as "av"
  
• Label - What option the user will select from the dropdown
  
• Value - the code/script word associated with a given label

The Audio Bar SceneScript is derived from two main Java Scripts that were originally supplied by Biohazard. This breakdown is focusing on the Audio Circle script that references multiple images of different colored bars. Once this script is understood the other scripts will be easier to manipulate, as this script has the most script steps, the others will be simplified in comparison.

• Starting from the top. The audio script is a vector class 3, and the script step on line 3 is telling the script what it will need to render.
  import * as WEVector from ‘WEVector’;
  
  
• On line 5 and 6 we define the variables, “bars” and “baseOrigin.”
  
• Line 8 defines how many bars/ audio buffers will render in the visualizer. This is the first line you have a choice, and can change where it says “64” to “32” or “16”
  
• Line 9 introduces the “barModels” that will be rendered in the script. In this example, there are 32 colored bars referenced. So later on in the script I need to define that each bar will appear twice, to make the 64 audio buffers—first referenced in line 8—true.
  
• Line 10 – Line 42 lists each model in order of appearance, in the circle script this starts where you see the colored bar “red2,” it is on the x axis on the right of the circle going clockwise. If you want to change the color scheme change “red2” to “org1” and orange will appear first in the sequence. (I dive more into bar color customization in the section “Colored Bars”).

The next section is defining the visibility of the visualizer, and if a certain option is chosen from the dropdown user property then the associated visualizer will render.

Line 51 references an export function for a combo user property, which is needed in this case because the script already defines visibility.
Line 52 indicates this script step will affect all audio bar buffers.
Line 53 says that bar = i
Line 54 is what we came for, this tells the script to have visibility based on a combo menu dropdown.



Refer back to the "Edit Property" window to view the "key"



Refer back to the "Edit Property" window to view the "value"




This next section defines the scale, and if it were a linear visualizer it would also reference origin. These script steps have been commented out “//” and appear green.

• Line 66 you will see the figure “64” as a reminder this number can only change to “32” or “16,” and should remain consistent throughout each script.
  
• Line 70 indicates a number of how far the bar will extend. “50” is the default, to double this figure to “100” will give you bars that extend twice as long. The bar width cannot be adjusted via the script, again look at the section “Colored Bars” to learn how to change the width of the bars.

This is the rest of the script:

Push

• Line 81 defines the export function init
  
• Line 84 states that the original bar.json that was bound to the script will not render
  
• Line 85 defines the orgin of the visualizer as the center of the circle
  
• Line 87 introduces the audio renders
  
• Line 88 associates barModel with the variable “i”
  
• Line 89 tells the script to create an audio bar layer
  
• Line 90 tells the script to “push” that layer, which gives it movement
  
• Line 91 & 92 tells the script to repeat the last two steps for another bar of the same color reference in line 10-42.

Multiply

• Line 95-100 tells the script to render a circle
  
• 95 references the variable “i” and the "64" audio buffers
  
• Line 96 defines the angle “360” for a circle and how many audio buffers populate the circle. You can experiment with halving / quartering the audio buffers (32 or 16) and angle to create audio circle variations.

• Line 97 introduces direction and scale of the circle. You can change the “350” to a bigger number for a circle with a larger radius and smaller number for a smaller radius.

• Line 98 defines bar as the variable “i”
  
• Line 99 defines the origin of each bar
  
• Line 100 defines the angle the bar will be in relation to its spawn point.

• Line 102 defines the baseOrigin of the audio visualizer

I call this the monochrome script, and commonly refer to it as “AV” for Audio Visualizer, WHERE the other one I call “RAV” for Rainbow Audio Visualizer. The new tag I will use for wallpapers that have both is “CAV” for Customizable Audio Visualizer.

The AV circle script only references one bar and repeats “bar.json” for every audio buffer in the script. This script will omit the section where all the models are defined in the multi colored bar script shown above. In this example, the script step is written on line 49.




If you want to change the bar color or effect, you can go to the layer that is referenced in the script "bar.json" (if it exists in your project, all mine have been omitted / deleted from the layer pallet). At the very bottom of the properties panel you will see a hyperlink that will take you to the specific "Material" properties menu. Here there is a setting called “Additive” that I like to use, it does not react to black but the color changes on a white background, and creates a unique translucent/color altering effect. You will also see a place to “Import” the “Texture” for bar.json. This allows you to upload a bar with a different color that changes your monochrome script from white to the color/size of the applied texture.

If you modify the reference layer in the script the effects will apply to every instance of bar.json in your project. If you want it to apply to only one script add a new layer, call it "newlayer.json" and refer to that layer in your script. Then it will be unique to the visualizer you are editing and not all the others linked to "bar.json"






Linear bar scripts allow you to change the "origin.x" to control the spacing between the audio buffers. You will need to change this to "origin.y" for a vertical bar effect vs the default horizontal effect.
You will also need to write a line to define the bar angle (0, 0, 90)

Line 69 & 70 allows you to change the scaling of the visualizer. 69 indicates how long the bars will extend, and 70 indicates how far apart the bars will be.




When you want to rotate the visualizer 90 degrees to get a vertical audio bar visualizer you will change line 70, to be “origin.y”
For a 1080p display you may also want to half your audio bar renders from 64 to 32 (depending on the spacing between each bar). If your working on a 4K wallpaper 64 buffers should be ok.




The other script step that needs to change is the angle in the “init” export function. After the push step you will add a few script steps that reference “bar.angles = new Vec3(0, 0, 90);”

• You can have 64, 32, or 16 audio buffers, where you see these numbers in the script you can interchange them for the desired effect.
  
• When you change your audio buffer number you should check your models and push script steps to see if they are working well together.
  
• You can change the multiply number to a bigger number to scale your circle up or a smaller number to scale your circle down.
  
• Scale / origin settings are for 1080p, when working with 4K these numbers should be doubled to achieve the same effect.
  
• Audio bar size is not changed in the script this can be altered by changing the size of your source files
  
• origin.x creates horizontal audio bars WHERE origin.y creates vertical audio bars.
  
• In order to test your audio bar script play music on your computer and click the “Run Scripts” button

Update Feb 2021: This section of the guide was a workaround & a glitch, sadly it no longer works. If you'd like to modify the script to have a layering order replace the 2nd to last section in the script to this:


Layering order is still as follows:

1. Background Image(s)
   
2. Audio Bar Script(s)
   
3. Glyph 1 or Glyph 0 (visibility does not matter)
   
4. Foreground Layer(s) (transparent pngs)

Note: the composition layer is still a good tip. If you add an [Asset > Composition Layer], I suggest to make it the same size as your bars 8x8 (2160p) or 4x4 (1080p). Then you can bind an audio bar script to it. This will remove the initial bar, and is sometimes it is nice because the first bar may not be audio responsive (aka a glitched bar). Which becomes an eye soar, and it's better to just not render it at all. Once you've added an image Asset to your project the .json is created, so you don't need it on the left sidebar when you use a composition layer to run your script. Therefore if you delete inactive assets in your left hand asset tool bar it will result in better performance and user experience.

Bars for a 1080p screen should be saved as 4x4 pixels ".png" / ".jpg"
Bars for a 4K screen should be saved as 8x8 pixels ".png" / ".jpg"

1. Open a program with a paint bucket tool, choose a color, paint the entire canvas, save as image
   
2. To add to your project go to "Add Asset" > "Image Layer" and Browse to find your image
   
3. Add one bar at a time to your project
   
4. Edit the desired script in a program like "Notepad++"
   
5. Change bar.json in the script to the name of your bar images and keep the extension ".json"
   
6. Click a layer and go to "Properties," click the gear icon, choose "Bind Script"
   
7. Overwrite the default script with the script you edited that references your bar images
   
8. Rename your layer with the bound script to remind you which script this layer represents
   
9. The original bar.json position is now the origin point of your script feel free to move as desired
   
10. Keep a list of all your bar image names somewhere
    
11. *Note: any bar layers that are added and do not have a bound script can be deleted after they have been officially added to the project