Random points: Difference between revisions

From JSXGraph Wiki
(New page: <html> <link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" /> <script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/pro...)
 
No edit summary
 
(21 intermediate revisions by 2 users not shown)
Line 1: Line 1:
===Draw 50 random points - version 1===
In the first version each point receives random coordinates once at construction time.
<html>
<html>
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />
<form><input type='button' value="Reload" onClick="reload();"></form>
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script>
</html>
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
 
<form><input type='button' value="Next iteration" onClick="run();"></form>
<jsxgraph box="box" width="400" height="400">
<div id="box" class="jxgbox" style="width:400px; height:400px;"></div>
board = JXG.JSXGraph.initBoard('box', {boundingbox: [-0.02, 1.02, 1.02, -0.02]});
<script language="JavaScript">
        board = JXG.JSXGraph.initBoard('box', {originX: 10, originY:390 , unitX:380 , unitY: 380});
                  
                  
         var level = 0;
function reload() {
        function run() {
    JXG.JSXGraph.freeBoard(board);       
            JXG.JSXGraph.freeBoard(board);         
    board = JXG.JSXGraph.initBoard('box', {boundingbox: [-0.02, 1.02, 1.02, -0.02]});
             board = JXG.JSXGraph.initBoard('box', {originX: 10, originY: 390, unitX: 380, unitY: 380});          
 
    board.suspendUpdate();
    for (var i=0;i<50;i++) {
         var p = board.create('point',
            [Math.random(),Math.random()],{size:3,withLabel:false});
    }
    board.unsuspendUpdate();
}
reload();
</jsxgraph>
 
<source lang="javascript">
board = JXG.JSXGraph.initBoard('box', {boundingbox: [-0.02, 1.02, 1.02, -0.02]});
               
function reload() {
    JXG.JSXGraph.freeBoard(board);         
    board = JXG.JSXGraph.initBoard('box', {boundingbox: [-0.02, 1.02, 1.02, -0.02]});
 
    board.suspendUpdate();
    for (var i=0;i<50;i++) {
        var p = board.create('point',
             [Math.random(),Math.random()],{size:3,withLabel:false});
    }
    board.unsuspendUpdate();
}
reload();
</source>
 
===Draw 50 random points - version 2===
Here, at construction time each point receives a function pair as coordinates. In each update these functions which return Math.random() are called. Thus in each update each point receives new random coordinates.
The 50 points are updated on the onmousemove event.
 
Please, move the mouse pointer over this area:
 
<jsxgraph box="box2" width="400" height="400">
board2 = JXG.JSXGraph.initBoard('box2', {boundingbox: [-0.02, 1.02, 1.02, -0.02]});
board2.suspendUpdate();
for (var i=0;i<50;i++) {
    var p2 = board2.create('point', [function(){return Math.random();},function(){ return Math.random()}], {size:3, withLabel: false});
}
board2.unsuspendUpdate();
JXG.addEvent(document.getElementById('box2'), 'mousemove', function () { this.update(); }, board2);
</jsxgraph>
 
<source lang="javascript">
board2 = JXG.JSXGraph.initBoard('box2', {boundingbox: [-0.02, 1.02, 1.02, -0.02]});
board2.suspendUpdate();
for (var i=0;i<50;i++) {
    var p2 = board2.create('point', [function(){return Math.random();},function(){ return Math.random()}], {size:3, withLabel: false});
}
board2.unsuspendUpdate();
JXG.addEvent(document.getElementById('box2'), 'mousemove', function () { this.update(); }, board2);
</source>


            for (var i=0;i<1000;i++) {
[[Category:Examples]]
                var p = board.createElement('point',
[[Category:Statistics]]
                      [Math.random(),Math.random()],{style:5});
            board.unsuspendUpdate();
        }

Latest revision as of 08:19, 3 March 2021

Draw 50 random points - version 1

In the first version each point receives random coordinates once at construction time.

board = JXG.JSXGraph.initBoard('box', {boundingbox: [-0.02, 1.02, 1.02, -0.02]});
                
function reload() {
    JXG.JSXGraph.freeBoard(board);        
    board = JXG.JSXGraph.initBoard('box', {boundingbox: [-0.02, 1.02, 1.02, -0.02]});

    board.suspendUpdate();
    for (var i=0;i<50;i++) {
        var p = board.create('point',
            [Math.random(),Math.random()],{size:3,withLabel:false});
    }
    board.unsuspendUpdate();
}
reload();

Draw 50 random points - version 2

Here, at construction time each point receives a function pair as coordinates. In each update these functions which return Math.random() are called. Thus in each update each point receives new random coordinates. The 50 points are updated on the onmousemove event.

Please, move the mouse pointer over this area:

board2 = JXG.JSXGraph.initBoard('box2', {boundingbox: [-0.02, 1.02, 1.02, -0.02]});
board2.suspendUpdate();
for (var i=0;i<50;i++) {
    var p2 = board2.create('point', [function(){return Math.random();},function(){ return Math.random()}], {size:3, withLabel: false});
}
board2.unsuspendUpdate();
JXG.addEvent(document.getElementById('box2'), 'mousemove', function () { this.update(); }, board2);