JSXGraph and sound: Difference between revisions
From JSXGraph Wiki
A WASSERMANN (talk | contribs) No edit summary |
A WASSERMANN (talk | contribs) 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 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(); | |||
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();
});