gibber-cc / gibberish

Fast, JavaScript DSP library that creates JIT optimized audio callbacks using code generation techniques
387 stars 35 forks source link

speed/thread test #3

Closed metaphorz closed 10 years ago

metaphorz commented 10 years ago

We'd like to add Gibberish sound to some of our graphics sketches. I am having some sound stuttering problems whenever graphic events occur--this particular sketch uses JXSGraph (a JS library that is useful for plotting and performing mathematical tasks). You should be able to run this (see below) directly in Codio by hitting Preview and then "inside codio". I used the Gibberish demo code from "vibrato" as a test - it simply runs inside of the .js sketch.

https://codio.io/metaphorz/Lotka-Volterra4/root/lotka-volterra.html

Observe the sound stuttering whenever one touches one of the control points either on the left hand side (the vertical slider bars) or the right hand side (initial values when time = 0 on the graph). Is there a way to cut back on the audio stuttering? My thoughts are perhaps if there is a frames-per-second graphics rendering option, that might do the trick. In Processing.js, there is a method where you can set the graphical update frequency, but I have not seen this option in JXSGraph.js

charlieroberts commented 10 years ago

I don't know if this will help, but maybe setup JXSGraph to use Canvas instead of SVG? I read in the JXSGraph docs that this is an option. If you try the Interface Tutorial in Gibber (found under browse > miscellaneous) you can see that, using Canvas, there aren't any problems with interaction / drawing causing stuttering.

You can also try changing the bufferSize passed to Gibberish.init(). 1024 is the default, but try other power of 2 values.

If neither of these ideas fix the problem, you might need to move to a non-ScriptProcessor node solution. You'll lose some functionality like single sample processing (which you might not even need) but audio will run in its own thread. Hope this helps.

metaphorz commented 10 years ago

The note on Canvas seems to make sense since the Gibberish code I had in Processing.js (which uses Canvas) suffers no audio stuttering problems. What is the non-Script Processor solution" ? I searched and found a few references such as http://stackoverflow.com/questions/19791472/web-audio-cant-get-scriptprocessor-node-to-work-in-chrome

So, by non-ScriptProcessor, do you use a ScriptProcessor node (still need to figure out what that is) in Gibberish, and you are suggesting that this code might be edited not to use such a node?

charlieroberts commented 10 years ago

By non-ScriptProcessor node I just mean to use the native Web Audio API nodes, although some of these don't work in Firefox yet. This API allows you to combine C++ ugens using JavaScript. At this point, most JS audio libraries are written using the ScriptProcessing node because its more flexible and more cross-platform compatible, but that is changing.

Here's an intro:

http://www.html5rocks.com/en/tutorials/webaudio/intro/

metaphorz commented 10 years ago

I thought I would open a thread in JXSGraph to see if other members of that community have experienced problems with other real-time libraries. I'll respond here if there is a solution. Having interactive graphics + sound would be ideal. It may just be that JXSGraph cannot be used with sound effectively.

charlieroberts commented 10 years ago

Ran across this thread the other day which seems to solve the issue.

https://groups.google.com/forum/#!msg/jsxgraph/HHqK2pE05R0/39kVq1P8d2cJ

metaphorz commented 10 years ago

Yeah - I should have come back to close this at Gibberish at the same time. -p

On Feb 19, 2014, at 3:11 AM, charlieroberts notifications@github.com wrote:

Ran across this thread the other day which seems to solve the issue.

https://groups.google.com/forum/#!msg/jsxgraph/HHqK2pE05R0/39kVq1P8d2cJ

— Reply to this email directly or view it on GitHub.

Paul Fishwick, PhD Chair, ACM SIGSIM Distinguished Chair of Arts & Technology and Professor of Computer Science Director, Creative Automata Laboratory The University of Texas at Dallas Arts & Technology 800 West Campbell Road, AT10 Richardson, TX 75080-3021 Home: utdallas.edu/atec/fishwick Blog: creative-automata.com