Mixing Sound with JSXGraph

[Paul Fishwick]

We are using JSXGraph in my class and in one project for our research laboratory.

One of the goals is to blend sound with the interactive visual capabilities of this

package. The sound package being explored is called Gibberish by Charlie Roberts.

Gibberish is impressive and fairly easy to use where an audio graph is created to

achieve various synthetic effects and performances. The main area is:

http://www.charlie-roberts.com/gibberish/

As a first example, I took some code that works in Gibberish and inserted it directly

into pre-existing JSXGraph based code. To use Gibberish requires 3 lines (ref. the

web page) followed by the audio graph formation. The first test is vibratoTest, and

the code looks like this:

mod1 = new Gibberish.Sine(4, 0);

mod2 = new Gibberish.Sine(.1, 50); 

mod1.amp = mod2;

sin = new Gibberish.Sine( Add(mod1, 440), .25 ).connect()

..............

Everything is set up (JXGraph and Gibberish libraries are both loaded and being

used. The problem is that when JXGraph interface mouse events occur (because of

dragging a slider for instance), the sound becomes very choppy indicating that the

interactive graphics w/ events and Gibberish are interfering with each other to compete

for cycles and memory. In a forum on Gibberish, Charlie suggested that Gibberish works

well in "canvas". So, I made sure that in front of each initBoard invocation, the render is set

to 'canvas' as follows:

JXG.Options.renderer = 'canvas';

        board2 = JXG.JSXGraph.initBoard('jxgbox2', {

            boundingbox: [-.5, 32, 25, -2.5],

            axis: true,

            grid: false,

            showCopyright: false,

            showNavigation: false,

        });

...................

However, this is not working and the sound is interrupted, with static noise, sometimes

without any mouse events. But once mouse events are generated, the sound is noisy.

Has anyone else experienced real-time event issues with JSXGraph, or overcome these

issues with a stopgap solution?

[Alfred Wassermann]

This is strange! We tested JSXGraph together with gibberish and could not find any problems. I hacked a small example into the JSXGraph wiki, see http://jsxgraph.uni-bayreuth.de/wiki/index.php/JSXGraph_and_sound.
This example does not run on my iPad, but on Firefox on Linux and Safari on OSX there are no problems. Can you give us more information about your browser and OS?
By the way, nice idea to combine JSXGraph and sound.
Best wishes,
Alfred

[Paul Fishwick]

Yes, I dug in further as well and could not find a problem when I started with the Lotka

Volterra demonstration in JSXGraph. But when I tried with my students' JSXGraph

code, we had huge issues. She thinks the problem has to do with her use of 

some methods in JSXGraph that halt or delay the graphical updates of two separate

JXSGraph canvases. Here are the functions used (that neither you nor I used in our

successful JSXGraph/Gibberish experiments):

board.suspendUpdate();

board.unsuspendUpdate();

p

[Alfred Wassermann]

The intended use of suspendUpdate() is for creating many objects without intermediate updates:

board.suspendUpdate();
p = [];

for (i=0; i<1000; ++i) {

p.push(board.create('point', [...]);

}
board.unsuspendUpdate();

The reason is, a call to board.create() triggers board.update(), which runs through all elements and calculates their new positions.
With suspendUpdate()/unsuspendUpdate(), the board.create() does not trigger board.update(), but the final board.unsuspendUpdate() does.

So, in any case the call of suspendUpdate()/unsuspendUpdate() inside of a function defining a curve or similar objects should be avoided.
This would result in too many calls of board.update(), the browser would be slowed down severly.
Best wishes,
Alfred

[Paul Fishwick]

That explains the observed behavior. Thanks.

-p