JSXGraph Wiki - User contributions [en]

Quick start on Ubuntu

2015-07-01T12:37:05Z

Nicolas.adenis.lamarre: Created page with "It is recommended to clone the git repository on github and pull requests to the main project. This quick start guide shows how to get sources, compile them quickly on Ubuntu. ..."

It is recommended to clone the git repository on github and pull requests to the main project.

This quick start guide shows how to get sources, compile them quickly on Ubuntu.

=Prerequisites=
==Ubuntu packages==
sudo apt-get install npm pkg-config libcairo2-dev nodejs-legacy

==Get sources==
git clone https://github.com/jsxgraph/jsxgraph.git
cd jsxgraph

==Npm prerequisites==
npm install

=Compile=
make core
or
make core-min

Main Page

2015-07-01T08:39:07Z

Nicolas.adenis.lamarre: /* Development links */

== JSXGraph Wiki ==
Welcome to the JSXGraph Wiki. This Wiki provides information and examples about the use of JSXGraph.
* [[Showcases]]
* [[Documentation| First steps]]
* [[Advanced constructions]]
* [[FAQ - Frequently asked questions]]
* [[Contributions]]
* [[Bringing JavaScript to its edge]]
* [[:Category:Examples]] contains a list of all examples
* [[:Category:Text]] Examples featuring the text element
To learn more about creating constructions with JSXGraph from the scratch visit the the examples category: [[:Category:Examples]]

[http://jsxgraph.org Homepage of the JSXGraph project]

== Message to all contributors ==
The JSXGraph team appreciates your valuable contributions to the JSXGraph wiki!

But due to security reasons we had to enforce email based registration. Now, all users have to confirm their email address once. If you have not done so, please press "Confirm email" in [[Special:Preferences]]. Additionally to create new and edit existing wiki pages you have to [http://jsxgraph.uni-bayreuth.de/wp/contact/ contact us].

== Development links ==

* [http://jsxgraph.org Homepage]
* [https://github.com/jsxgraph/jsxgraph GitHub project], [https://sourceforge.net/projects/jsxgraph/ SF project]
* Browse [https://github.com/jsxgraph/jsxgraph our repository]
* [https://github.com/jsxgraph/jsxgraph/issues Issue tracker]
* [https://groups.google.com/forum/#!forum/jsxgraph Discussion group]
* [[Quick start on Ubuntu]]

Add custom methods to objects

2015-06-25T19:39:25Z

Nicolas.adenis.lamarre: Created page with "JSXGraph objects can be extended to support your own custom method. For example, to add a method called isAlmostOrigin() to the Point objects, write the following code : <source> ..."

JSXGraph objects can be extended to support your own custom method.
For example, to add a method called isAlmostOrigin() to the Point objects, write the following code :

<source>
JXG.extend(JXG.Point.prototype, {
isAlmostOrigin: function () {
return Math.abs(this.X()) < 0.5 && Math.abs(this.Y()) < 0.5
}
})

board = JXG.JSXGraph.initBoard('box', { axis:true })
A = board.create('point', [1, 0], {name:'A'});
alert(A.isAlmostOrigin()) // false
</source>

Advanced constructions

2015-06-25T19:34:05Z

Nicolas.adenis.lamarre:

Here are advanced constructions which require a comparatively high knowledge of JSXGraph and JavaScript.

Complex constructions:
* [[Power Series]]
* [[Change Equation of a Graph]]
* [[Nowhere differentiable continuous function]]
* [["Infinity"]]
* [[Harmonic Waves]]
* [[Hilbert curve]]
* [[Fern (fractal)]]
* [[Lagrange interpolation]]
* [[Interpolation: Neville's algorithm]] (curves)
* [[Data plot of live data via AJAX]]
* [[Polygon through ordered set of gliders]]
* [[Charts from HTML tables - tutorial]]
* [[Bearing]]
* [[Data plot]]
* [[Tangents on circle]]
* [[SIR model: swine flu]]
* [[n-gones]] with turtles
* [[Stomachion]]
* [[Tangram]]
* [[Matrix multiplication II]]
* [[Heat map]]
* [[Parallel projection of a sphere]]
* [[Trace curve]]
* [[Plot data with slider]]
* [[Circular arc approximation by cubic Bezier curve]]
* [[Point 'fixed' in one direction]]
* [[Function graph animation]]
* [[Rectangles]]
* [[Vertex equations of a quadratic function and it's inverse]]
* [[Inequalities]]

Special features and tricks:
* [[Random points]]
* [[Highlight curve via slider]]
* [[The HSV color scheme]]
* [[Using MathJax]]

* [[Animation of lines]]
* [[Adapt highlighting of objects]]
* [[Adding events]]
* [[Working with layers]]
* [[Adjust the visual appearance]]

* [[Dependent gliders]]
* [[Mutually dependent line and gliders]]
* [[Using CSS styles]]
* [[Fill the intersection area of two circles]]
* [[Aligning text]]
* [[Positioning of labels]]

* [[Curly braces]]
* [[Restrict points to limited area]]
* [[Number line]]
* [[JSXGraph and sound]]
* [[Circle with ticks]]
* [[Fine tuning of labels]]

* [[Movable functiongraph]]

Extend JSXGraph:
* [[Add custom methods to objects]]

Advanced constructions

2015-06-25T19:31:51Z

Nicolas.adenis.lamarre:

Movable functiongraph

2015-06-25T19:30:32Z

Nicolas.adenis.lamarre:

By default, the function graph can not be dragged around.
When we allow to the function graph to be movable by setting "fixed:false" we have to notify JSXGraph that the function graph depends on the two free points A and B.

This example shows that a functiongraph can be made movable.

It is produced by the following commands:
<source lang="xml">
<div id="jxgbox" class="jxgbox" style="width:500px; height:200px;"></div>
<script type="text/javascript">
var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5, 2, 5, -2], axis: true});
var A = board.create('point', [1, 0], {name:'A'});
var B = board.create('point', [3, 1], {name:'B'});

var f = board.create('functiongraph', function(x) {
var ax = A.X(),
ay = A.Y(),
bx = B.X(),
by = B.Y(),
a = (by - ay) / ( (bx - ax) * (bx - ax) );
return a * (x - ax) * (x - ax) + ay;
}, {fixed: false});

f.addParents([A, B]);
</script>
</source>

<jsxgraph box="jxgbox" width="500" height="200">
var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5, 2, 5, -2], axis: true});
var A = board.create('point', [1, 0], {name:'A'});
var B = board.create('point', [3, 1], {name:'B'});

var f = board.create('functiongraph', function(x) {
var ax = A.X(),
ay = A.Y(),
bx = B.X(),
by = B.Y(),
a = (by - ay) / ( (bx - ax) * (bx - ax) );
return a * (x - ax) * (x - ax) + ay;
}, {fixed: false});

f.addParents([A, B]);
</jsxgraph>

Movable functiongraph

2015-06-25T19:28:27Z

Nicolas.adenis.lamarre: Created page with "This example shows that a functiongraph can be made movable. It is produced by the following commands: <source lang="xml"> <div id="jxgbox" class="jxgbox" style="width:500px; height:200px..."

This example shows that a functiongraph can be made movable.
It is produced by the following commands:
<source lang="xml">
<div id="jxgbox" class="jxgbox" style="width:500px; height:200px;"></div>
<script type="text/javascript">
var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5, 2, 5, -2], axis: true});
var A = board.create('point', [1, 0], {name:'A'});
var B = board.create('point', [3, 1], {name:'B'});

var f = board.create('functiongraph', function(x) {
var ax = A.X(),
ay = A.Y(),
bx = B.X(),
by = B.Y(),
a = (by - ay) / ( (bx - ax) * (bx - ax) );
return a * (x - ax) * (x - ax) + ay;
}, {fixed: false});

f.addParents([A, B]);
</script>
</source>

<jsxgraph box="jxgbox" width="500" height="200">
var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5, 2, 5, -2], axis: true});
var A = board.create('point', [1, 0], {name:'A'});
var B = board.create('point', [3, 1], {name:'B'});

var f = board.create('functiongraph', function(x) {
var ax = A.X(),
ay = A.Y(),
bx = B.X(),
by = B.Y(),
a = (by - ay) / ( (bx - ax) * (bx - ax) );
return a * (x - ax) * (x - ax) + ay;
}, {fixed: false});

f.addParents([A, B]);
</jsxgraph>

Advanced constructions

2015-06-25T19:23:51Z

Nicolas.adenis.lamarre:

Advanced constructions

2015-06-25T19:21:42Z

Nicolas.adenis.lamarre: add a link to the page dependant functiongraph and points