JSXGraph and sound: Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
Line 10: Line 10:


var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-1,10,10,-10], axis:false});
var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-1,10,10,-10], axis:false});
var sinewave = new Gibberish.Sine( 440, .25 ).connect();


var slide = board.create('slider', [[2, 8], [8, 8], [100, 440, 1000]]);
var slide = board.create('slider', [[2, 8], [8, 8], [100, 440, 1000]]);
var sinewave = new Gibberish.Sine( 440, .25 ).connect();
var sinecurve = board.create('functiongraph', [function(x) { return 5 * Math.sin((sinewave.frequency / 200.0) * 2* Math.PI * x); }]);
var sinecurve = board.create('functiongraph', [function(x) { return 5 * Math.sin((sinewave.frequency / 200.0) * 2* Math.PI * x); }]);
board.on('update', function() {
board.on('update', function() {
     sinewave.frequency = slide.Value();
     sinewave.frequency = slide.Value();
});
});
</jsxgraph>
===The underlying JavaScript code===
Additionally embed gibberish.js:
<source lang="xhtml">
<script type="text/javascript" src="http://www.charlie-roberts.com/gibberish/scripts/build/gibberish_2.0.js"></script>
</source>
<source lang="javascript">
Gibberish.init();
Gibberish.Time.export();
Gibberish.Binops.export();
 
var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-1,10,10,-10], axis:false});
 
var sinewave = new Gibberish.Sine( 440, .25 ).connect();


</jsxgraph>
var slide = board.create('slider', [[2, 8], [8, 8], [100, 440, 1000]]);
var sinecurve = board.create('functiongraph', [function(x) { return 5 * Math.sin((sinewave.frequency / 200.0) * 2* Math.PI * x); }]);


board.on('update', function() {
    sinewave.frequency = slide.Value();
});
</source>
[[Category:Examples]]
[[Category:Examples]]
[[Category:Curves]]
[[Category:Curves]]

Revision as of 15:55, 6 February 2014

JSXGraph can be used together with the excellent JavaScript audio library gibberish.

The underlying JavaScript code

Additionally embed gibberish.js:

<script type="text/javascript" src="http://www.charlie-roberts.com/gibberish/scripts/build/gibberish_2.0.js"></script>
Gibberish.init();
Gibberish.Time.export();
Gibberish.Binops.export();

var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-1,10,10,-10], axis:false});

var sinewave = new Gibberish.Sine( 440, .25 ).connect();

var slide = board.create('slider', [[2, 8], [8, 8], [100, 440, 1000]]);
var sinecurve = board.create('functiongraph', [function(x) { return 5 * Math.sin((sinewave.frequency / 200.0) * 2* Math.PI * x); }]);

board.on('update', function() {
    sinewave.frequency = slide.Value();
});