Random points: Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
Line 1: Line 1:
===Draw 50 random points===
===Draw 50 random points - version 1===
In the first version at construction time each point receives random coordinates.
<html>
<html>
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />
Line 41: Line 42:
</source>
</source>


===Draw 50 random points===
===Draw 50 random points - version 2===
These 50 points are updated on the onmouseover event and get
Here, at construction time ech 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.
new random coordinates.
The 50 points are updated on the onmousemove event.
<html>
<html>
<div id="box2" class="jxgbox" style="width:400px; height:400px;" onmouseover="board2.update()"></div>
<div id="box2" class="jxgbox" style="width:400px; height:400px;" onmousemove="board2.update()"></div>
<script language="JavaScript">
<script language="JavaScript">
  board2 = JXG.JSXGraph.initBoard('box2', {originX: 10, originY:390 , unitX:380 , unitY: 380});
  board2 = JXG.JSXGraph.initBoard('box2', {originX: 10, originY:390 , unitX:380 , unitY: 380});
Line 59: Line 60:


<source lang="html4strict">
<source lang="html4strict">
<div id="box2" class="jxgbox" style="width:400px; height:400px;" onmouseover="board2.update()"></div>
<div id="box2" class="jxgbox" style="width:400px; height:400px;" onmousemove="board2.update()"></div>
</source>
</source>



Revision as of 17:40, 7 December 2008

Draw 50 random points - version 1

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

        board = JXG.JSXGraph.initBoard('box', {originX: 10, originY:390 , unitX:380 , unitY: 380});
                
        function reload() {
            JXG.JSXGraph.freeBoard(board);        
            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.createElement('point',
                       [Math.random(),Math.random()],{style:5,name:' '});
            }
            board.unsuspendUpdate();
        }
        reload();

Draw 50 random points - version 2

Here, at construction time ech 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.

<div id="box2" class="jxgbox" style="width:400px; height:400px;" onmousemove="board2.update()"></div>
 board2 = JXG.JSXGraph.initBoard('box2', {originX: 10, originY:390 , unitX:380 , unitY: 380});
 board2.suspendUpdate();
 for (var i=0;i<50;i++) {
   var p2 = board2.createElement('point',
           [function(){return Math.random();},function(){ return Math.random()}],
           {style:5,name:' '});
 }
 board2.unsuspendUpdate();