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