2. AVS
  3. AVS in Javascript

Archive: AVS in Javascript


z33m

23rd June 2013 20:16 UTC

AVS in Javascript
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

24th June 2013 12:46 UTC

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

24th June 2013 13:08 UTC

Originally posted by 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.
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

24th June 2013 17:17 UTC

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:

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

3rd July 2013 12:36 UTC

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

z33m

7th July 2013 21:34 UTC

Originally posted by Yathosho
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
Not sure how far i can maintain compatibility with AVS. I am also adding some improvements, like
I am also trying to figure out a way to do an AVS editor like UI.

QOAL

11th July 2013 22:03 UTC

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:
http://i.imgur.com/sE9QSSI.png

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

11th July 2013 22:39 UTC

Originally posted by 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:
http://i.imgur.com/sE9QSSI.png

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:
http://i.imgur.com/byeJ1NT.png
http://i.imgur.com/cN9OyWH.png

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
npm install

This will install all the build tools.

To build, i run
grunt
.
This will generate all the files in the build directory.

To test, i run a simple http server in the repo directory with
python -m SimpleHTTPServer

and hit localhost:8000 in the browser.

Also, if you run
grunt watch

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

z33m

11th July 2013 22:48 UTC

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

11th July 2013 23:05 UTC

Originally posted by z33m
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

11th July 2013 23:15 UTC

Originally posted by QOAL
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 :D

Yathosho

12th July 2013 21:35 UTC

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

12th July 2013 22:05 UTC

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

12th July 2013 23:36 UTC

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

13th July 2013 02:43 UTC

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

Yathosho

13th July 2013 20:31 UTC

i played around a bit more with the editor and there are a couple of things i'd like to add. however, i would like you to explain a couple of things first.

1. is demo.min.js what a preset file would look like or is it a combination of the preset (as json) and some extra stuff?

2. i tried to add the code from the codemirror theme demo to the editor, but i'm not sure how that editor works. the input fields are being displayed a pre tags, not input or textareas. i think it would be a nice option to be able to change the theme of the syntax highlighter.

3. what else is codemirror doing than providing the editor with syntax highlighting?

z33m

13th July 2013 21:07 UTC

Thanks for the changes you've submitted. The url param idea is cool. An interesting hack would be to encode the entire preset as base64 and accept it as a urlparam. This would allow us to share preset code as well in the url.

Originally posted by Yathosho
i played around a bit more with the editor and there are a couple of things i'd like to add. however, i would like you to explain a couple of things first.

1. is demo.min.js what a preset file would look like or is it a combination of the preset (as json) and some extra stuff?
I'll try to explain the basic structuring of the code in the repo.
  1. /js - This contains the main WebVS library. I have designed things around a core visualization library. This is pure JS, just few dependencies. Essentially anyone can plug this library into any application, create a webvs object with proper options and start playing visualizations.
  2. /js/core.js - This file contains all the base stuff including the base webvs object and base classes for all the components.
  3. /js/** - All other files have one effect component or contain utility classes and stuff
  4. /test/** - this contains just some very basic qunit test cases, for the expression parser mainly.
  5. /demo - This contains the demo app that i have hosted at url
  6. /demo/demo.js - This code runs the demo app with the editor and stuff. It uses the webvs library. This code contains a hardcoded preset, which is shown in the editor.

when you build the code 1.) all the webvs library files are assembled into one js file 2.) most of the other stuff are just copied into build directory, so you can run the demo from there.

when you build the code with "grunt dist". It generates all the same stuff in dist directory, but with minification. Its this dist directory that i have put on the demo page.

Originally posted by Yathosho
2. i tried to add the code from the codemirror theme demo to the editor, but i'm not sure how that editor works. the input fields are being displayed a pre tags, not input or textareas. i think it would be a nice option to be able to change the theme of the syntax highlighter.

3. what else is codemirror doing than providing the editor with syntax highlighting?
Code mirror simply creates an editor inside a container div that we have on the page https://github.com/azeem/webvs/blob/...o/demo.js#L257

I do not know what could be the scope of the JSON editor based UI. I am working on the an AVS editor like UI, which should be much more simpler to use. The JSON format was meant to be a structure consumable by the WebVS library.

I would like to push the editor UI out into master and use it as the main app. Please take a look at the code in /editor in the editor branch.

Yathosho

14th July 2013 00:35 UTC

Originally posted by z33m
Thanks for the changes you've submitted. The url param idea is cool. An interesting hack would be to encode the entire preset as base64 and accept it as a urlparam. This would allow us to share preset code as well in the url.
this idea is awesome, though probably not applicable.

/demo/demo.js - This code runs the demo app with the editor and stuff. It uses the webvs library. This code contains a hardcoded preset, which is shown in the editor.
once webvs is at a stage that it can load files, will these be contain only the json portion?

Yathosho

14th July 2013 14:35 UTC

quick and dirty loader that reads preset files from a directory. i won't be able to refine this before later tonight or tomorrow. it currently only works after the second selection (applying the first) and it currently appends an editor window to the bottom. will get there eventually, but if someone wants to post suggestions in the meantime...

ps: i previously reported simultaneous tracks playing at times, i guess that can be caused when using multiple editors

Yathosho

14th July 2013 18:12 UTC

okay, since i shared that terribly miserable loader prototype, i not only travelled 50km by bike, i also gave webvs a little thought.

1. webvs as a service
the loader is the first demo that relies ln the usage of a server-side language, namely the immensely horrible php scripting language. the script populates the dropdown menu for the presets. would i be fluent in cool languages like python, i wouldn't have taken such matters, while rails wasn't applicable as a quick solution. anyway, clear is on thing: webvs can run online and certain stuff will have to be done dynamically on the server side.

2. webv as an app
one would want to avoid duplicate work wherever possible. the combination of modern javascript and html5 enables webvs to run on all platforms that provide modern browser technology. since the current version of webvs runs on google chrome only (bizarrly other webkit browsers are not supported), i think it's worth thinking about using nodejs as a platform to deploy webvs on the desktop. this would eliminate the need of a variety of languages and little to no adjustments to let webvs run on the server or locally. that said, i probably should have populated the afforementioned preset dropdown using javascript.

so far i have enjoyed playing around with the available code, especially to test out what could be done on the frontend. i'm not particularly happy about the use of codemirror, as it seem a bit over the top for a rather simple task. also i'd prefer using real html textareas in the editor. regarding the syntax highlighting, there are several simpler solutions in the form of javascript. also, i'm not too happy about the current state of modules. things should be kept simple and modular, the current demo.js contains both the presets plus some additional code.

what are your plans for webvs' future regarding the scale of avs-compatibility and how do judge the level of accuracy? what are your plans regarding web platform and desktop deployment?

Yathosho

14th July 2013 19:13 UTC

i think i will rebuild the frontend from ground up, replacing the editor library with something simpler, then add support to load (and later save) presets. i will then think about how to run server-side code on the nodejs platform. (did i mentioned how extremely well nodejs performs multithreaded?)

for the future, i could see some great ways to integrate music playback. besides soundcloud, other audio and video platforms should be integrated, interacting with all the user features (favourites, libary) that platform offers. needless to say, local music playback should be supported as well, again including library capability and favourites from popular players.

z33m: you started a fire!

Yathosho

14th July 2013 19:22 UTC

and one more idea:

so far the code is mostly clean and modular (apart from demo.js), so i think if somebody doesn't agree with my ideas for the ui (or simply prefers the classic avs editor approach qoal has taken), the ui part should be kept just as simple as the rest of the plugin. users should be able to install and select a various frontend themes. the webvs core should make it easy for such third party addons to use a variety of libraries (in a similar way jsfiddle offers jquery, mootools etc.). syntax highlighting should be optional from the frontend decisions (though a theme could override that), providing a variety of userstyles in a seperate library. most of the javascript highlighting solutions i prefer over the current editor (i.e. enlighter, highlight.js etc.) already support a variety of highlighting themes.

z33m

14th July 2013 23:09 UTC

Originally posted by Yathosho
okay, since i shared that terribly miserable loader prototype, i not only travelled 50km by bike, i also gave webvs a little thought.

1. webvs as a service
the loader is the first demo that relies ln the usage of a server-side language, namely the immensely horrible php scripting language. the script populates the dropdown menu for the presets. would i be fluent in cool languages like python, i wouldn't have taken such matters, while rails wasn't applicable as a quick solution. anyway, clear is on thing: webvs can run online and certain stuff will have to be done dynamically on the server side.
This is definitely a good direction, this is precisely what i meant by the "webvs gallery + editor site". I was hacking around with a little bit of https://www.firebase.com/ to getaway with having to write serverside code, though having a server side backend does sound more robust.

Originally posted by Yathosho
2. webv as an app
one would want to avoid duplicate work wherever possible. the combination of modern javascript and html5 enables webvs to run on all platforms that provide modern browser technology. since the current version of webvs runs on google chrome only (bizarrly other webkit browsers are not supported), i think it's worth thinking about using nodejs as a platform to deploy webvs on the desktop. this would eliminate the need of a variety of languages and little to no adjustments to let webvs run on the server or locally. that said, i probably should have populated the afforementioned preset dropdown using javascript.
Browser compatibility is a bit rough right now, I'll need to find some time to fix this. I havnt thought about this possibility of running webvs in node. This should be possible theoretically. However state of webgl support in headless browser kits or projects like node-webgl seems limited, need to investigate.

Originally posted by Yathosho
so far i have enjoyed playing around with the available code, especially to test out what could be done on the frontend. i'm not particularly happy about the use of codemirror, as it seem a bit over the top for a rather simple task. also i'd prefer using real html textareas in the editor. regarding the syntax highlighting, there are several simpler solutions in the form of javascript. also, i'm not too happy about the current state of modules. things should be kept simple and modular, the current demo.js contains both the presets plus some additional code.
demo.js was a small hack that i put together to test/demonstrate the library. I just kept adding some smaller changes to it. Never meant it to be used as a real editor, IMO its rather cumbersome to edit avs expressions inside the JSON since they are quoted as strings.

Originally posted by Yathosho
what are your plans for webvs' future regarding the scale of avs-compatibility and how do judge the level of accuracy? what are your plans regarding web platform and desktop deployment?
I am trying to build components one by one, eventually i hope we'll get to a point where a good number of presets can be supported. As for accuracy, results look pretty good so far, There are a lots of issues and loose ends, like eg. the color of unconed's silk string preset is somewhat messed up, the movement is very shaky compared to AVS and so on.

Originally posted by Yathosho
i think i will rebuild the frontend from ground up, replacing the editor library with something simpler, then add support to load (and later save) presets. i will then think about how to run server-side code on the nodejs platform. (did i mentioned how extremely well nodejs performs multithreaded?)

for the future, i could see some great ways to integrate music playback. besides soundcloud, other audio and video platforms should be integrated, interacting with all the user features (favourites, libary) that platform offers. needless to say, local music playback should be supported as well, again including library capability and favourites from popular players.

z33m: you started a fire!
Originally posted by Yathosho
and one more idea:

so far the code is mostly clean and modular (apart from demo.js), so i think if somebody doesn't agree with my ideas for the ui (or simply prefers the classic avs editor approach qoal has taken), the ui part should be kept just as simple as the rest of the plugin. users should be able to install and select a various frontend themes. the webvs core should make it easy for such third party addons to use a variety of libraries (in a similar way jsfiddle offers jquery, mootools etc.). syntax highlighting should be optional from the frontend decisions (though a theme could override that), providing a variety of userstyles in a seperate library. most of the javascript highlighting solutions i prefer over the current editor (i.e. enlighter, highlight.js etc.) already support a variety of highlighting themes.
I agree with this, any larger UI/Frontend work is big project in itself with lots of dependencies, it is nicer to keep the webvs core library simple.

z33m

14th July 2013 23:13 UTC

I have pushed the new working webvs UI on the demo page http://azeemarshad*****webvs/ http://i.imgur.com/wH9gqkc.png

QOAL

30th August 2013 22:19 UTC

I've attached the editor I worked on as-is.

Sadly I got fed up failing to code recursive drag & drop for the tree list, that coupled with depression and not wanting to fix the small css issues outside of firefox (so frustrating that after all these years there are still miss matches between browsers, even with css3 stuff). (I may fix them at some point)

I didn't get around to adding the pop-out windows, it would be a little ↗ icon on the right hand side, opposite the element label.

Anyway, I'm sure the code is ghastly for others to see, but it doesn't use any external libraries.

Yathosho

25th September 2013 18:40 UTC

@qoal since i noticed you have a github account, could you please put it there? there are some changes i'd like to do for better browser compatibility and i think that would be the best way.

QOAL

26th September 2013 12:19 UTC

https://github.com/QOAL/qios-webvseditor

Yathosho

28th September 2013 20:14 UTC

Originally posted by z33m
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.
i came across this today:

https://github.com/Libvisual/libvisu...avs_format.txt

Grandchild

30th September 2013 17:28 UTC

Just to let people know that I've started working on an automatic converter from .avs to (what yathosho and I feel should be called) .webvs files.
https://github.com/grandchild/AVS-File-Decoder

Originally posted by Yathosho
i came across this today:

https://github.com/Libvisual/libvisu...avs_format.txt
this is a nice doc, but it's also seemingly an older version of the file format, or a not-always-well-researched one. it has much good information, but some errors. just to let people know.

QOAL

30th September 2013 21:44 UTC

Oh that's great, Grandchild!

Contrary to the read me, it does work in Firefox too.

Yathosho

1st October 2013 09:11 UTC

demo time

Grandchild

2nd October 2013 11:15 UTC

Hello again,
the Decoder is basically done - and I would appreciate some help hacking apart the various effects that are available.
It'd be great if some people would pick apart some of the many basic built-in "checkbox/slider/number/color"-type of effects.
Read https://github.com/grandchild/AVS-Fi...s-file-decoder

I'll be mostly doing APEs for now because those might require some slightly deeper digging and function writing in the code...

Grandchild

7th October 2013 00:03 UTC

nevermind the call for help... i'm mostly done by myself now.

QOAL

9th October 2013 14:27 UTC

Okay, I feel ill at the end of last week (so I'm sorry for not lending a hand), but I'm better now so I feel like suggesting an IRC channel for WebVS related development. Maybe on freenode?

Yathosho

9th October 2013 22:21 UTC

updated online decoder so people can test the conversion for errors or unsupported effects

Yathosho

9th October 2013 22:37 UTC

Originally posted by QOAL
I feel like suggesting an IRC channel for WebVS related development. Maybe on freenode?
what's wrong with the forum or github? the big shortcoming of irc is that everybody needs to be online all the time to be able to follow the discussion.

z33m

10th October 2013 09:50 UTC

wow. lot of cool stuff. Ive been off for a little while, and AVS forum stopped sending me notifications for some reason.

Been working on some major refactoring (https://github.com/azeem/webvs/tree/refactr) of webvs core code. cleaning up lot of the shader code and internals. Also writing some tests. I guess these changes + other fixes etc. can be put together as the first numbered version. I will write some detailed documentation or maybe a blog post about the internal wirings and how to write Effect components, would like lots of help on this.

I have separated out the editor UI project into a separate repo (https://github.com/azeem/webvsed), the webvs library contains only the core library, the examples directory contains individual examples and tests.

Also checkout https://github.com/rogerwang/node-webkit this is an awesome platform. Its basically nodejs+stripped-down-chrome that allows javascript applications to work standalone and it supports webgl too. I was able to quickly put together a standalone version of webvs that works on the desktop. This IMO is super exciting.

Also working on the firefox issues. FF 24 release supports mp3 so the streaming issue is fixed, meanwhile some other problems have cropped up with dancer.js. Either ways webvs uses an adapter to interface with audio, so im thinking of looking at a more reliable audio library like using the flash support with soundmanager2 or something. Need to look at the beat detection also. The one in dancer.js is not very good.

Originally posted by Grandchild
Just to let people know that I've started working on an automatic converter from .avs to (what yathosho and I feel should be called) .webvs files.
https://github.com/grandchild/AVS-File-Decoder

this is a nice doc, but it's also seemingly an older version of the file format, or a not-always-well-researched one. it has much good information, but some errors. just to let people know.
Originally posted by Yathosho
demo time
wow so much awesomeness. This is really brilliant. Also, presently, avs presets and webvs preset are not a one to one map. so we might have to do some preprocessing in between, to make the output work directly.

Originally posted by Yathosho
what's wrong with the forum or github? the big shortcoming of irc is that everybody needs to be online all the time to be able to follow the discussion.
I agree, forum is better. Particularly for me, i think my timezone is 5+ hours ahead of most of you guys, been hanging out at the avs irc channel for sometime but rarely see any activity because of this. Having to put all discussion under one thread is getting a bit hairy though.

z33m

10th October 2013 09:58 UTC

Can any explain the difference between trans/Movement and trans/DynamicMovement internally. In Webvs ive written only a dynamicmovement effect, i thought movement is equivalent to dynamic movement with the code inside perpixel. However some effects look significantly different.

Im going crazy trying debug this, getting weird artifacts in some cases. Could be because of difference in floating point calculations in webgl vs all integer calc in avs.

Also coudnt find trans/movement code in the avs source. Found dynamic movement code in r_dmove.cpp.

QOAL

11th October 2013 16:54 UTC

According to the comments in Grandchild's converter, Trans/Movement is in r_trans.cpp.

As for forum notifications, this explains the default setting:

Instant Email Notification - sends an email as soon as a new post is added to the thread. This is not sent for every reply and will only be sent once until you revisit the forums.

Grandchild

14th October 2013 01:53 UTC

@azeem: Yes, have a look at
https://github.com/grandchild/AVS-Fi.../components.js
and its comments, there is every source file as a comment behind the name, and every now and then i wrote the ranges or even the formula i saw in AVS or in the source code behind the fields.

the same goes for
https://github.com/grandchild/AVS-Fi...r/js/tables.js
only there are less comments.

z33m

15th October 2013 08:39 UTC

Originally posted by Grandchild
@azeem: Yes, have a look at
https://github.com/grandchild/AVS-Fi.../components.js
and its comments, there is every source file as a comment behind the name, and every now and then i wrote the ranges or even the formula i saw in AVS or in the source code behind the fields.

the same goes for
https://github.com/grandchild/AVS-Fi...r/js/tables.js
only there are less comments.
Thanks a lot for this. The main difference that i found is that movement doesnt use interpolation while dynamic movement does, this creates some artifacts even if we set grid size to 1x1. The other was a problem with rectangular-polar conversion, avs coordinate system is so confusing.

Also, if everyones interested we could use this google group https://groups.google.com/forum/#!forum/webvs for webvs related discussions.

Grandchild

15th October 2013 13:34 UTC

Also, the C++/Qt batch converter is taking shape:
https://github.com/grandchild/AVS-File-Decoder-Qt

Grandchild

16th October 2013 05:16 UTC

Azeem:
I think there is some commentary in dmove.cpp, describing the interpolation (if only loosely iirc). Apart from that you are right, Movement is 'just' a static variant of a DM with pixel-exact transformation.

Don't know about google-groups or something... What's wrong with this forum for now?
Apart from that, we could also take some of the discussion to github, to the repo pages, if necessary.

Also, in the converter, I have all the builtin components - except for one, apparently. All I know is that is has the ID code '9'. The rest is contiguous from 0 to 45. If anyone finds the one builtin(!) component I am missing, please tell me. You can look at the component checklist in the AVS Decoder repo, or into the components.js source directly.
It might very well be, that it's just not there/disabled...

PS: If you find (or know) where in its source AVS assigns these IDs, I'd be happy to know that too :)

z33m

16th October 2013 06:54 UTC

Originally posted by Grandchild
Azeem:
I think there is some commentary in dmove.cpp, describing the interpolation (if only loosely iirc). Apart from that you are right, Movement is 'just' a static variant of a DM with pixel-exact transformation.
Yeah, didnt quite understand most of it though. AVS source code is really difficult to follow. Im using glsl variable interpolation, getting somewhat okay results, have to test it out a bit though.

Originally posted by Grandchild
Don't know about google-groups or something... What's wrong with this forum for now?
Apart from that, we could also take some of the discussion to github, to the repo pages, if necessary.
Nothing wrong with this forum for now really,. I had created this group, so just putting it out here. IIRC github doesnt have a discussion board as such, using the issues list like a discussion board, makes issue tracking all cluttered.

Originally posted by Grandchild
Also, in the converter, I have all the builtin components - except for one, apparently. All I know is that is has the ID code '9'. The rest is contiguous from 0 to 45. If anyone finds the one builtin(!) component I am missing, please tell me. You can look at the component checklist in the AVS Decoder repo, or into the components.js source directly.
It might very well be, that it's just not there/disabled...

PS: If you find (or know) where in its source AVS assigns these IDs, I'd be happy to know that too :)
IIRC the ids are assigned in the declarations in rlib.cpp. there are several DECLARE_EFFECT calls. This call assigns the id from an incrementing integer. id 9 according to this is Roto Blitter

Grandchild

18th October 2013 01:16 UTC

Of course! Roto Blitter! Thanks :)

z33m

21st October 2013 12:40 UTC

Hi guys,

I've put together most of the changes that i've been working on into Webvs v1.0.0.

Changes
+ Lot of refactoring. Pretty much rewrote lots of stuff.
+ Lot of shader code uncluttering
+ Source tree organization is now slightly different. Moved out editor program
+ Added many tests
+ Documentation, lots of it
+ Added ColorClip
+ Added BufferSave
+ DynamicMovement fixed, more accurate.
+ New example UnConed-JelloCube

QOAL

21st October 2013 14:18 UTC

Awesome.

Heads up if you download the release archive from github:
The examples will not run without editing the javascript includes in them, or renaming the dist folder/files.

Strange that one of the faces of the JelloCube doesn't show up.

I'll give it a more thorough look later. (And try adding support for it in my editor)

z33m

21st October 2013 14:38 UTC

Originally posted by QOAL
Awesome.

Heads up if you download the release archive from github:
The examples will not run without editing the javascript includes in them, or renaming the dist folder/files.
hmm, have to do something about this. examples work on the build files. you can just run
grunt
that would generate all the build files.

Originally posted by QOAL
Strange that one of the faces of the JelloCube doesn't show up.

I'll give it a more thorough look later. (And try adding support for it in my editor)
Yes a cube face is missing, lemme know if you figure out the problem. Im guessing this has something to do with the clone feature in webvs. I saw that lots of presets have to create several copies of the same superscope only with slight variations. In Webvs you can specify a clone number and that effect will be cloned N times at the same time a variable called "cid" becomes available in the superscope. The scope can change conditions based on cid.

Also check webvsed. This is probably all completely broken now. But i had done some amount work on automatically generating the UI for each component. Basically, each component defines a JSON-Schema of its options object. A library then generates HTML form from this schema.

QOAL

21st October 2013 23:04 UTC

Could you look into why loadPreset fails when you call it again after the initial load?

You can test the issue quickly by adding:

setTimeout(function(){webvs.loadPreset(samplePreset);}, 1000);

to the end of the the onload function in the examples.

My editor doesn't look quite as robust as yours, however it's quite functional now. Although it supports the output of Grandchild's convert, and I'm not sure if there is total parity with WebVS with that yet.

Yathosho

24th October 2013 18:44 UTC

I'm missing the implementation of three of the most important effects of early AVS: Simple (Scope), Unique Tone and Movement. I'm sure they could be implemented—as aliases—within the existing SuperScope, ColorMap and Dynamic Movement effects. Actually, there are a couple of more render effects that I'm sure can be rebuild using SSC: Bass Spin, Dot Fountain and all that jazz.

z33m

24th October 2013 19:18 UTC

Originally posted by Yathosho
I'm missing the implementation of three of the most important effects of early AVS: Simple (Scope), Unique Tone and Movement. I'm sure they could be implemented—as aliases—within the existing SuperScope, ColorMap and Dynamic Movement effects. Actually, there are a couple of more render effects that I'm sure can be rebuild using SSC: Bass Spin, Dot Fountain and all that jazz.
I think yes it is possible. It should be really simple to create a component Classes that inherits existing SuperScope, ColorMap or DynamicMovement classes and pass the appropriate parameters to the super constructor.

To emulate winamp Trans/Movement behaviour, Webvs Dynamic movement has two settings 1) "noGrid": setting this to true disables grid interpolation, giving pixel accurate movement. 2) "compat": setting this to true makes webvs switch to a low precision bilinear filter code, makes things behave more like avs. Not very sure about Unique tone have to check the code, but should be a fairly simple shader code either ways.

I'll add these to the issues list.

QOAL

29th October 2013 22:59 UTC

As the release version of Firefox now supports all the necessary web audio spec I would like to point out a problem with Dancer.
The version of the web audio spec it targets is slightly different to how the spec is now, it seems.

Two functions have been renamed (I assume Chrome has the old names as aliases):
createJavaScriptNode is now createScriptProcessor
createGainNode is now createGain
More info here.

Alas, even with those errors fixed there is still a problem where the audio only plays for about 250ms. (It reports it as still playing through.)

Dancer has a distinct lack of activity on Github, and I'd like to think that its at fault not Firefox.

Anyway with that I've enabled the editor as standard in my editor.


z33m: Would there be any benefit if WebVS used web workers? Pause reduction on the main thread etc.

z33m

31st October 2013 21:56 UTC

Originally posted by QOAL
As the release version of Firefox now supports all the necessary web audio spec I would like to point out a problem with Dancer.
The version of the web audio spec it targets is slightly different to how the spec is now, it seems.

Two functions have been renamed (I assume Chrome has the old names as aliases):
createJavaScriptNode is now createScriptProcessor
createGainNode is now createGain
More info here.

Alas, even with those errors fixed there is still a problem where the audio only plays for about 250ms. (It reports it as still playing through.)

Dancer has a distinct lack of activity on Github, and I'd like to think that its at fault not Firefox.
I agree, Dancer is quite inactive now. There are a couple of things, in this area, that i think should be done in webvs.
1) Create a separate, nicer AnalyserAdapter implementation. use some other well maintained library or write our own.

+ SoundManager2 looks promising. the downside is that its flash + doesnt have beat detection afaik.
+ Implementing our own doesnt seem too far fetched either, both firefox and chrome supports AnalyserNodes which gives you FFT spectrum and waveform data directly, unlike dancer which uses a JS FFT library on the raw sound samples. The browser implementation should be a lot faster also.

2) Implement custom beat detection logic. For things like "Custom BPM" etc

Originally posted by QOAL
Anyway with that I've enabled the editor as standard in my editor.


z33m: Would there be any benefit if WebVS used web workers? Pause reduction on the main thread etc.
Havnt looked into this much yet. Im guessing nothing much, atleast from my limited understanding of how webworkers work. Basically they work through message passing, so dont know what kind of data can be passed around safely. They do not have access to the DOM and hence probably the webgl context too. So its pretty much limited to raw processing stuff, maybe to speed up expression parsing or something. The PEGS parser is a bit slow actually.

But the UI responsiveness should be somewhat solved by the issue#5, since it greatly reduces expression+shader recompilations. Especially since the UI is only ever going to update components one at a time, so atmost max(clone) effect reinitialization per user interaction, which should be fast enough.

z33m

4th November 2013 10:09 UTC

I have pushed the next increment of webvs. 1.1.0

Changes:
+ added Texer Component and resources.
+ DynamicMovement aspect ratio fix
+ shader MULTIPLY blend fix
+ added EffectList expression support
+ Container component
+ Tree CRUD with clone support.
+ added Simple scope.
+ added UniqueTone.
+ added Movement.
+ DynamicMovement grid size fix

z33m

5th November 2013 07:16 UTC

Can anyone tell me, or point to resources on how to build and step through the AVS C++ source code?

Also, check this issue: https://github.com/azeem/webvs/issues/8. if anyone has a build setup and can spare some time, please check it out.

QOAL

6th November 2013 15:34 UTC

DrO and Justin are the only people I'm aware of that have complied AVS of late, asking one of them nicely for build environment would be your best bet.

Yathosho

6th November 2013 20:19 UTC

Originally posted by z33m
Can anyone tell me, or point to resources on how to build and step through the AVS C++ source code?
wotl and grandchild might able to shed some light on. from what i remember, you need 1998's (!) visual studio 6 to compile the source.

Warrior of the Light

8th November 2013 08:43 UTC

Never attempted to compile it myself, I suck at coding presets, let alone writing software. Yes, you need that version and I know there are no resources or added comments or anything like that. Steve and Co. probably knew the code by heart and worked from there. There are some threads on this topic but I think DrO is the only one active on this board who ever really got it to work. I'm just hosting the files because noone else did

Yathosho

12th November 2013 13:30 UTC

btw https://github.com/visbot/vis_avs

Fork me on GitHub