JSXGraph Wiki - User contributions [en]

Line

2014-08-30T20:07:44Z

Cleonis: Added that 'line' also accepts an array of two numbers, [x,y], as input for each of the points.

== Construction of a line ==
A line needs two points. Lets construct two points "A" and "B".
<source lang="javascript">
var b = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5, 2, 5, -2]});
var p1 = b.create('point',[-1,1], {name:'A',size:4});
var p2 = b.create('point',[2,-1], {name:'B',size:4});
</source>
Then we construct a line through "A" and "B". The setting of a new color and changing the stroke-width is not necessary.
<source lang="javascript">
var li = b.create('line',["A","B"], {strokeColor:'#00ff00',strokeWidth:2});
</source>

<jsxgraph box="jxgbox" width="500" height="200">
var b = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5, 2, 5, -2]});
var p1 = b.create('point',[-1,1], {name:'A',size:4});
var p2 = b.create('point',[2,-1], {name:'B',size:4});
var li = b.createElement('line',["A","B"], {strokeColor:'#00ff00',strokeWidth:2});
</jsxgraph>

Generally it is better to use JavaScript variables and not Geometry-Element names when constructing.
Now, we do the same examples with JavaScript variables. Further, we don't show the whole line, but only a segment. To show another variation, we use a dashed line style.

<source lang="javascript">
var li2 = b.create('line',[p1,p2],
{straightFirst:false, straightLast:false, strokeWidth:2, dash:2});
</source>

<jsxgraph box="jxgbox2" width="500" height="200">
var b2 = JXG.JSXGraph.initBoard('jxgbox2', {boundingbox: [-5, 2, 5, -2]});
var p1 = b2.create('point',[-1,1], {name:'A',size:4});
var p2 = b2.create('point',[2,-1], {name:'B',size:4});
var li2 = b2.create('line',[p1,p2], {straightFirst:false, straightLast:false, strokeWidth:2, dash:2});
</jsxgraph>

"Line" also accepts point coordinates as input, so you can create a line without having to declare the points separately.

<source lang="javascript">
var li3 = b3.create('line',[[-1,1],[2,-1]], {straightFirst:false, straightLast:false, strokeWidth:2});
</source>

<jsxgraph box="jxgbox3" width="500" height="200">
var b3 = JXG.JSXGraph.initBoard('jxgbox3', {boundingbox: [-5, 2, 5, -2]});
var li3 = b3.create('line',[[-1,1],[2,-1]], {straightFirst:false, straightLast:false, strokeWidth:2});
</jsxgraph>

Here are some of the options that can be used with lines. A complete list can be found on our [http://jsxgraph.uni-bayreuth.de/docs/symbols/Line.html Line reference page].
{| cellpadding="8" cellspacing="0" border="1"
! Attribute !! Type !! Effect
|-
| strokeColor || HTML colorstring || Colors the line in the color specified.
|-
| highlightStrokeColor || HTML colorstring || Colors the line, when moused over, in the color specified. If same as strokeColor , removes highlighting.
|-
| strokeColorOpacity || float || Colors the line with the given opacity. Must be between 0 and 1.<br>0: Line is fully transparent.<br>1: Line is not transparent.
|-
| highlightStrokeColorOpacity || float || Colors the line, when moused over, with the given opacity. Must be between 0 and 1.<br>0: Line is fully transparent.<br>1: Line is not transparent.
|-
| dash || int || Creates a dashed line. Value must be between 0 and 6. <br> 0: solid line<br> 1: dotted line<br>2: line with small dashes<br>3: line with normal dashes<br>4: line with long dashes<br>5: line with alternating medium and big dashes and large gaps<br>6: line with alternating medium and big dashes and small gaps
|-
| strokeWidth || int || Determines the thickness of the line
|-
| straightFirst || bool || Determines whether the line is drawn beyond the first defining point.
|-
| straightLast || bool || Determines whether the line is drawn beyond the second defining point.
|-
| firstArrow || bool || Determines whether the line has an arrow at the first defining point.
|-
| lastArrow || bool || Determines whether the line has an arrow at the second defining point.
|-
| trace || bool || Determines whether the line is traced.
|-
| shadow || bool || Determines whether the line has a shadow.
|-
| visible || bool || Determines whether the line is shown.
|}

[[Category:Examples]]

User:Cleonis/sandbox/setInterval

2014-08-30T19:25:56Z

Cleonis:

<jsxgraph width="500" height="500">

var board = JXG.JSXGraph.initBoard(
'jxgbox',
{boundingbox:[-1.5,1.5,1.5,-1.5], keepaspectratio:true, axis:true}
);

var isPlaying = false;
var starttime = 0;
var timeElapsed = 0;
var interval;

var p = board.create(
'point',
[function() {return Math.cos(timeElapsed)}, function() {return Math.sin(timeElapsed)}]
);

function playing() {
timeElapsed = (Date.now() - starttime)/1000;
board.update();
}

function play() {
if (!isPlaying) {
starttime = Date.now();
isPlaying = true;
interval = setInterval(playing,50);
}
}

function resetAnimation() {
clearInterval(interval);
timeElapsed = 0;
isPlaying = false;
board.update();
}
</jsxgraph>

<html>
<br>
  <button id="playbutton" onclick="play()">play</button>  <button id="resetanimation" onclick="resetAnimation()">reset</button>
</html>

===The JavaScript code===
<source lang="javascript">

var board = JXG.JSXGraph.initBoard(
'jxgbox',
{boundingbox:[-1.5,1.5,1.5,-1.5], keepaspectratio:true, axis:true}
);

var isPlaying = false;
var starttime = 0;
var timeElapsed = 0;
var interval;

var p = board.create(
'point',
[function() {return Math.cos(timeElapsed)}, function() {return Math.sin(timeElapsed)}]
);

function playing() {
timeElapsed = (Date.now() - starttime)/1000;
board.update();
}

function play() {
if (!isPlaying) {
starttime = Date.now();
isPlaying = true;
interval = setInterval(playing,50);
}
}

function resetAnimation() {
clearInterval(interval);
timeElapsed = 0;
isPlaying = false;
board.update();
}
</source>

===The HTML===
<source>
<button id="playbutton" onclick="play()">play</button><button id="resetanimation" onclick="resetAnimation()">reset</button>
</source>

[[Category:Examples]]

User:Cleonis/sandbox/setInterval

2014-08-30T19:23:22Z

Cleonis: Created page with "<jsxgraph width="500" height="500"> var board = JXG.JSXGraph.initBoard( 'jxgbox', {boundingbox:[-1.5,1.5,1.5,-1.5], keepaspectratio:true, axis:true} ); var isPlaying = fals..."

<jsxgraph width="500" height="500">

var board = JXG.JSXGraph.initBoard(
'jxgbox',
{boundingbox:[-1.5,1.5,1.5,-1.5], keepaspectratio:true, axis:true}
);

var isPlaying = false;
var starttime = 0;
var timeElapsed = 0;
var requestId = 0;

var p = board.create(
'point',
[function() {return Math.cos(timeElapsed)}, function() {return Math.sin(timeElapsed)}]
);

function playing() {
timeElapsed = (Date.now() - starttime)/1000;
board.update();
}

function play() {
if (!isPlaying) {
starttime = Date.now();
isPlaying = true;
interval = setInterval(playing,50);
}
}

function resetAnimation() {
clearInterval(interval);
timeElapsed = 0;
isPlaying = false;
board.update();
}
</jsxgraph>

<html>
<br>
  <button id="playbutton" onclick="play()">play</button>  <button id="resetanimation" onclick="resetAnimation()">reset</button>
</html>

===The JavaScript code===
<source lang="javascript">

var board = JXG.JSXGraph.initBoard(
'jxgbox',
{boundingbox:[-1.5,1.5,1.5,-1.5], keepaspectratio:true, axis:true}
);

var isPlaying = false;
var starttime = 0;
var timeElapsed = 0;
var requestId = 0;

var p = board.create(
'point',
[function() {return Math.cos(timeElapsed)}, function() {return Math.sin(timeElapsed)}]
);

function playing() {
timeElapsed = (Date.now() - starttime)/1000;
board.update();
}

function play() {
if (!isPlaying) {
starttime = Date.now();
isPlaying = true;
interval = setInterval(playing,50);
}
}

function resetAnimation() {
clearInterval(interval);
timeElapsed = 0;
isPlaying = false;
board.update();
}
</source>

===The HTML===
<source>
<button id="playbutton" onclick="play()">play</button><button id="resetanimation" onclick="resetAnimation()">reset</button>
</source>

[[Category:Examples]]

User:Cleonis/sandbox/requestAnimationFrame

2014-08-26T21:00:10Z

Cleonis:

<jsxgraph width="500" height="500">

var board = JXG.JSXGraph.initBoard(
'jxgbox',
{boundingbox:[-1.5,1.5,1.5,-1.5], keepaspectratio:true, axis:true}
);

var isPlaying = false;
var starttime = 0;
var timeElapsed = 0;
var requestId = 0;

var p = board.create(
'point',
[function() {return Math.cos(timeElapsed)}, function() {return Math.sin(timeElapsed)}]
);

function playing() {
timeElapsed = (Date.now() - starttime)/1000;
board.update();
requestId = window.requestAnimationFrame(playing);
};

function play() {
if (!isPlaying) {
starttime = Date.now();
isPlaying = true;
window.requestAnimationFrame(playing);
}
};

function resetAnimation() {
if (requestId) {
window.cancelAnimationFrame(requestId);
}
timeElapsed = 0;
isPlaying = false;
board.update();
};

</jsxgraph>

<html>
<br>
  <button id="playbutton" onclick="play()">play</button>  <button id="resetanimation" onclick="resetAnimation()">reset</button>
</html>

===The JavaScript code===
<source lang="javascript">

var board = JXG.JSXGraph.initBoard(
'jxgbox',
{boundingbox:[-1.5,1.5,1.5,-1.5], keepaspectratio:true, axis:true}
);

var isPlaying = false;
var starttime = 0;
var timeElapsed = 0;
var requestId = 0;

var p = board.create(
'point',
[function() {return Math.cos(timeElapsed)}, function() {return Math.sin(timeElapsed)}]
);

function playing() {
timeElapsed = (Date.now() - starttime)/1000;
board.update();
requestId = window.requestAnimationFrame(playing);
};

function play() {
if (!isPlaying) {
starttime = Date.now();
isPlaying = true;
window.requestAnimationFrame(playing);
}
};

function resetAnimation() {
if (requestId) {
window.cancelAnimationFrame(requestId);
}
timeElapsed = 0;
isPlaying = false;
board.update();
};
</source>

===The HTML===
<source>
  <button id="playbutton" onclick="play()">play</button>  <button id="resetanimation" onclick="resetAnimation()">reset</button>
</source>

Note that the command 'requestAnimationFrame' must be given twice; it's present both in the function 'play()' and in the function 'playing()'.<br>
<br>
The function Date.now() returns a timestamp in miliseconds. To make the variable timeElapsed count time in seconds the number (Date.now() - starttime) is divided by 1000.<br>
<br>
The function Date.now() is a relative new addition to Javascript. In the case of Internet Explorer: support of Date.now() was introduced in IE9.

[[Category:Examples]]

User:Cleonis/sandbox/requestAnimationFrame

2014-08-26T18:47:18Z

<jsxgraph width="500" height="500">

var board = JXG.JSXGraph.initBoard(
'jxgbox',
{boundingbox:[-1.5,1.5,1.5,-1.5], keepaspectratio:true, axis:true}
);

var isPlaying = false;
var starttime = 0;
var timeElapsed = 0;
var requestId = 0;

var p = board.create(
'point',
[function() {return Math.cos(timeElapsed)}, function() {return Math.sin(timeElapsed)}]
);

function playing() {
timeElapsed = (Date.now() - starttime)/1000;
board.update();
requestId = window.requestAnimationFrame(playing);
}

function play() {
if (!isPlaying) {
starttime = Date.now();
isPlaying = true;
window.requestAnimationFrame(playing);
}
}

function resetAnimation() {
if (requestId) {
window.cancelAnimationFrame(requestId);
}
timeElapsed = 0;
isPlaying = false;
board.update();
}

</jsxgraph>

<html>
<br>
  <button id="playbutton" onclick="play()">play</button>  <button id="resetanimation" onclick="resetAnimation()">reset</button>
</html>

===The JavaScript code===
<source lang="javascript">

var board = JXG.JSXGraph.initBoard(
'jxgbox',
{boundingbox:[-1.5,1.5,1.5,-1.5], keepaspectratio:true, axis:true}
);

var isPlaying = false;
var starttime = 0;
var timeElapsed = 0;
var requestId = 0;

var p = board.create(
'point',
[function() {return Math.cos(timeElapsed)}, function() {return Math.sin(timeElapsed)}]
);

function playing() {
timeElapsed = (Date.now() - starttime)/1000;
board.update();
requestId = window.requestAnimationFrame(playing);
}

function play() {
if (!isPlaying) {
starttime = Date.now();
isPlaying = true;
window.requestAnimationFrame(playing);
}
}

function resetAnimation() {
if (requestId) {
window.cancelAnimationFrame(requestId);
}
timeElapsed = 0;
isPlaying = false;
board.update();
}
</source>

===The HTML===
<source>
  <button id="playbutton" onclick="play()">play</button>  <button id="resetanimation" onclick="resetAnimation()">reset</button>
</source>

[[Category:Examples]]