AVS in Javascript

[z33m]

Hi guys,

Im working on a Winamp AVS like clone for HTML5/WebGL/Webaudio. Please check https://github.com/azeem/webvs

Only fairly basic work done so far. Hoping to build AVS objects one by one and fill the gaps. What is working currently:

1. Very Basic Effectslist
2. OnBeat Clear
3. Mostly working Superscope
4. Dynamic Movement
5. Fadeout
6. Simple 3x3 Convolution
7. Image loader
8. Basic avs expressions. with avs expression to javascript/glsl parser

Presets are defined as JSON.
The demo loads a soundcloud track and runs the animation in the background.
Paste a soundcloud track url (or use the prefilled value) and hit "Play".
You can edit the JSON and hit "Run Preset" to reload it.

Any Help/Contributions/Suggestions/Criticism are welcome. Thanks

[QOAL]

This is really cool, it's like you read my mind.

That said, this doesn't work in firefox as it spews a lot of security errors. (I assume it's due to cross domain file access)

I also broke it when I copied over some DM code from a jheriko preset. (I was using chrome)

But cool nevertheless.

[z33m]

This is really cool, it's like you read my mind.

That said, this doesn't work in firefox as it spews a lot of security errors. (I assume it's due to cross domain file access)

I also broke it when I copied over some DM code from a jheriko preset. (I was using chrome)

But cool nevertheless.

Yeah there are some problems with firefox, for me it throws "HTTP "Content-Type" of "audio/mpeg" is not supported." so i was guessing it was some codec issue.

Yes the expression support is pretty basic right now. Only simple trigonometric and math functions are supported. Could you give me the DM code/Preset that broke? will be helpful in debugging.

The way im going about right now is picking Presets starting from simpler ones and then try to implement AVS objects and or make improvements such that they run on webvs. It will be useful if anyone can suggest some simple presets to work with.

There is also a very simple APE like setup for writing components.

[QOAL]

Firefox supports system codecs now, I guess it's not supported on your system then.
(Here's the bug for it, and you can quickly check what browsers support on your machine with the html5test)

Just testing a superscope now and the rand function is wrong, it should return an integer.
This should fix it:

code:
return Math.floor(Math.random() * max) + 1;

Adding a randf function might be nice, in the future.

I've been out since I tested this earlier and I can't reproduce the error I had (it was function overloading related), so I wouldn't worry about that for now.
(It was the DM from the bottom of Jheriko - Pack VIII - Tachyon Based Data Hub)

For simple presets, winamp used to ship a pack called "newpicks", these presets are pretty ancient in AVS terms.
I've attached it for your convenience.

[Yathosho]

if only the format of avs was more understandable, would love to contribute a conversion tool

[z33m]

if only the format of avs was more understandable, would love to contribute a conversion tool

That is a brilliant idea, will be really useful, for debugging also.

I was checking the AVS cpp code to see how the files are read/written. Here is what i've understood so far, if its of any help to anyone. Will need more help from someone with better understanding of the code.

The basic preset reading starts at __LoadPreset method in r_list.cpp. From there it goes on to read a root effectlist, and subsequently all the effects in the preset,

The basic structure is something like this:

1. AVS Signature string - "Nullsoft AVS Preset 0.2\x1a"
2. Root Effectlist Config - Effectlist config contains the following
   
   1. mode (1 BYTE + 1 optional INT depending on the value of the first byte) - Not exactly sure how this is used. but i think it determines how some of the effectlist settings are read.
   2. several INT values containing effect list settings. These i think are optional depending on the mode
   3. config data for all sub effects
      

The structure for each effect including effectlist (other than the root) is as follows.

1. EffectId INT - This indicates the effect type. There are three cases for this
   
   1. if EffectId == LIST_ID (0xfffffffe) then this is an effectlist
   2. if EffectId < DLLRENDERBASE (16384) then this is a built in effect and EffectId is the index in the effect initializer declarations ie. DECLARE_EFFECT calls in rlib.cpp.
   3. if EffectId > DLLRENDERBASE then i think the effect is loaded externally. The EffectId in this case is followed by a 32 byte string identifying the effect.
2. Length INT - Length number of bytes that follow make the config for this effect.
3. Config Code (Length BYTES) - This data i think is passed to load_config method of corresponding effect classes to initialize each effect.

Further, for externally loaded effects, it seems that the Config Code Section again has a structure like

1. use_code INT - Not sure what this means exactly.
2. length INT - number of bytes of config data that follows.
3. actual config data?

Meanwhile, on WebVS side, i ve added more stuff

• More Effects
• Blending related stuff
• Support for Registers and more avs functions
• The demo now runs UnConeD's "Silk Strings" preset.

Not sure how far i can maintain compatibility with AVS. I am also adding some improvements, like

• Named global vars - variables starting with @ symbol are global.
• clone - Effects can contain a clone parameter, an integer that would create multiple instances of the same effect. The clone index is then available as a variable in the avs expressions.

I am also trying to figure out a way to do an AVS editor like UI.

[QOAL]

Webgl/shader stuff is alien to me, so I've started working on an editor for this.

Here's a screen shot of how it currently looks:


The idea I have for this is that besides the main editor (Which is resizeable), you can pop out effects into their own window.
It should also allow for the visualisation to be shown in the page background, or in a window.
And in an ideal world you'll be able to drag & drop avs presets on to the window to load them.

I'll post a link to it when it starts getting usable.

I don't have WebVS running locally because I don't have whatever is used to build it (I assume it's node), so there is no integration with that currently.

[z33m]

Webgl/shader stuff is alien to me, so I've started working on an editor for this.

Here's a screen shot of how it currently looks:


The idea I have for this is that besides the main editor (Which is resizeable), you can pop out effects into their own window.
It should also allow for the visualisation to be shown in the page background, or in a window.
And in an ideal world you'll be able to drag & drop avs presets on to the window to load them.

I'll post a link to it when it starts getting usable.

I don't have WebVS running locally because I don't have whatever is used to build it (I assume it's node), so there is no integration with that currently.

This looks really nice. Is this is a standalone desktop tool?
I have also put together a somewhat basic HTML5 UI that could replace the textbox in the demo.

Here is a screenshot of what it looks like:



Somewhat basic stage right now, please check the code, i have put it on a separate branch on the repo (https://github.com/azeem/webvs/tree/editor).
The UI is pretty much similar to AVS itself. Popout and Drag and Drop are great ideas, the visualization can be played in the background, just like the demo we have right now.

WebVS uses grunt for building. You need to have nodejs, npm and grunt installed.

Clone the repo and run

code:
npm install

This will install all the build tools.

To build, i run

code:
grunt

.
This will generate all the files in the build directory.

To test, i run a simple http server in the repo directory with

code:
python -m SimpleHTTPServer

and hit localhost:8000 in the browser.

Also, if you run

code:
grunt watch

it'll run a continuous build, whenever you save files it'll regenerate, so you just have to refresh the browser.

[z33m]

A more ambitious idea is to have a WebVS editor + Gallery kind of site.
Where users can create, save, share, rate, view and fork presets.
Something similar to http://sketchpad.cc and the likes, but for AVS presets.
Thats still a long way though :P

[QOAL]

This looks really nice. Is this is a standalone desktop tool?

It's HTML5.
I had a simple window system laying around that I was going to use as a backend for websites, but I never got around to that, so I've re-purposed it.


I'll have a look at your editor branch in the morning, but you seem to have made some good progress judging from those screens. Certainly ahead of me, even if it's not as pretty.


Along with D&D for presets it would be trivial to support audio too that way.


Ah, great! Thank you for the build instructions.

[z33m]

It's HTML5.
I had a simple window system laying around that I was going to use as a backend for websites, but I never got around to that, so I've re-purposed it.

Wow, thats really cool. I have a hard time getting the CSS right, even for this primitive looking UI

[Yathosho]

that's awesome. since it's still in early stages, think of adding an option to the editor to load custom css (rather than demanding users to use a userstyle/greasemonkey script etc.)

[Yathosho]

i did a pull request on github in which i added working cdn links for codemirror and jquery. also, the (current) editor is now draggable.

haven't figured out your soundcloud code yet, but i think it'd be great to have support for playlists as well. also, i tried adding an option to hide the fps counter through a url parameter (e.g. "?showfps=false"), but i don't even know how the html source is generated.

[Yathosho]

a couple of other things i noticed:

webkit/bink based browsers:
- works in chrome
- doesn't work in chromium (no sound)
- doesn't work in opera 5 or opera next (no sound)
- doesn't work in safari (no sound, no visual - just the editor)

i also noticed that when i edited the default soundcloud track in the demo, a second instance of the track started sometimes (in particular with this track, others worked fine). when reloading the page, i sometimes experienced chopped sounds.

since the actual html of the demo seems to be rendered the javascript, it would be nice if you could put the un-minified files on github. reading one-letter variable names can be very confusing.

[Yathosho]

i've committed a second example that allows passing url parameters to control the initial zoom factor, the initial soundcloud track and to hide controls.

demos:
-zoom=4
-different soundcloud track
-controls=hide

parameters can be combined as well