JSXGraph and sound: Difference between revisions
From JSXGraph Wiki
| A WASSERMANN (talk | contribs) No edit summary | A WASSERMANN (talk | contribs) No edit summary | ||
| (12 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
| <html> | <html> | ||
| <script type="text/javascript" src=" | <script type="text/javascript" src="https://www.charlie-roberts.com/gibberish/build/gibberish.js"></script> | ||
| </html> | </html> | ||
| JSXGraph  | JSXGraph can be used together with the excellent JavaScript audio library [http://www.charlie-roberts.com/gibberish/ gibberish]. | ||
| <jsxgraph width="600" height="400"> | <jsxgraph width="600" height="400"> | ||
| Gibberish.init(); | Gibberish.init(); | ||
| Line 8: | Line 9: | ||
| Gibberish.Binops.export(); | Gibberish.Binops.export(); | ||
| var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[- | var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-1,10,10,-10], axis:false}); | ||
| var sinewave = new Gibberish.Sine( 440, .25 ).connect(); | var sinewave = new Gibberish.Sine( 440, .25 ).connect(); | ||
| var sinecurve = board.create('functiongraph', [function(x) { return 5 * Math.sin( | |||
| 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() { | board.on('update', function() { | ||
|      sinewave.frequency = slide.Value(); |      sinewave.frequency = slide.Value(); | ||
| }); | }); | ||
| </jsxgraph> | |||
| ===The underlying JavaScript code=== | |||
| Additionally embed gibberish.js: | |||
| <source lang="html4strict"> | |||
| <script type="text/javascript" src="https://www.charlie-roberts.com/gibberish/build/gibberish.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]] | ||
Latest revision as of 20:46, 23 March 2021
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="https://www.charlie-roberts.com/gibberish/build/gibberish.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();
});
