Difference between revisions of "JSXGraph and sound"

From JSXGraph Wiki
Jump to navigationJump to search
 
(18 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
<html>
 
<html>
<script type="text/javascript" src="http://www.charlie-roberts.com/gibberish/scripts/build/gibberish_2.0.js"></script>
+
<script type="text/javascript" src="https://www.charlie-roberts.com/gibberish/build/gibberish.js"></script>
 
</html>
 
</html>
JSXGraph and sound
+
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:[-5,10,100,-10], axis:true});
+
var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-1,10,10,-10], axis:false});
  
var slide = board.create('slider', [[10, 5], [60, 5], [100, 440, 1000]]);
 
 
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(x / 100); }]);
+
 
 +
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() {
    console.log(sinewave.frequency);
 
 
     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();
  
</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]]

Latest revision as of 21: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();
});