JSXGraph Wiki - User contributions [en]

User talk:GlendaPratt

2011-01-12T15:01:06Z

Bianca: Removing all content from page

User:Dejesustlco

2010-10-20T17:21:21Z

Bianca: Removing all content from page

Tetris

2010-09-01T13:00:16Z

Bianca:

<html>
<style type="text/css">
.jxgbox {
overflow:hidden;
background-color:#ffffff;
border-style:solid;
border-width:2px;
border-color:#000000;
}
body {
font-family:Arial;
}
div {
float:left;
margin-top:10px;
margin-right:50px;
}
</style>
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>

<script type="text/javascript">
var started = false;
var board = JXG.JSXGraph.initBoard('jxgbox', {originX: 0, originY: 500, unitX: 25, unitY: 25, showCopyright:false, showNavigation:false});
var board2 = JXG.JSXGraph.initBoard('jxgbox2', {originX: 0, originY: 125, unitX: 25, unitY: 25, showCopyright:false, showNavigation:false});
var usedPolys = new Array(10);
var i,j;
for(i=0;i<10;i++) {
usedPolys[i] = new Array(20);
for(j=0;j<20;j++) {
usedPolys[i][j] = 0;
}
}
var colors = ['none','#DC143C','#FF8C00','#87CEEB','#FFD700','#4B0082','#0000CD','#32CD32'];

function drawPointsAndPolys(board,width,height,vorschau) {
var i,j,pArr = {};
board.suspendUpdate();
for(i=0;i<=width;i++) {
for(j=0; j<=height;j++) {
pArr[i+''+j] = board.createElement('point',[i,j],{withLabel:false,face:'plus',draft:true});
}
}
for(i=0;i<width;i++) {
for(j=0; j<height;j++) {
var idpoly = 'poly_'+i+'_'+j;
if(vorschau) {
idpoly = 'poly_'+i+'_'+j+'_v';
}
var poly = board.createElement('polygon',
[pArr[i+''+j], pArr[(i+1)+''+j], pArr[(i+1)+''+(j+1)], pArr[i+''+(j+1)]],
{fillColor:'white',visible:false,id:idpoly});
for(k=0;k<4;k++) {
poly.borders[k].setProperty('strokeColor:#666666');
}
}
}
board.unsuspendUpdate();
return pArr;
}

function shape(style) {
if(style == 1) { // I
return {face:[[1,1,1,1],[0,0,0,0],[0,0,0,0],[0,0,0,0]],size:4};
}
else if(style == 2) { // T
return {face:[[2,0,0],[2,2,0],[2,0,0]],size:3};
}
else if(style == 3) { // O
return {face:[[3,3],[3,3]],size:2};
}
else if(style == 4) { // L
return {face:[[4,4,4],[4,0,0],[0,0,0]],size:3};
}
else if(style == 5) { // J
return {face:[[5,0,0],[5,5,5],[0,0,0]],size:3};
}
else if(style == 6) { // S
return {face:[[6,0,0],[6,6,0],[0,6,0]],size:3};
}
else if(style == 7) { // Z
return {face:[[0,7,0],[7,7,0],[7,0,0]],size:3};
}
}

function compareWithAbsoluteShape(s,posX,posY) {
for(i=0;i<s.size;i++) {
for(j=0;j<s.size;j++) {
if(s.face[i][j] != 0) {
if(i+posX < 0 || i+posX > 9) {
return false;
}
if(j+posY < 0 || j+posY > 19) {
return false;
}
if(usedPolys[i+posX][j+posY] == 1) {
return false;
}
}
}
}
return true;
}

function drawShape(s,posX,posY) {
board.suspendUpdate();
var i,j;
for(i=0;i<s.size;i++) {
for(j=0;j<s.size;j++) {
if(s.face[i][j] != 0) {
showCube(i+posX,j+posY,colors[s.face[i][j]]);
usedPolys[i+posX][j+posY] = 1;
}
}
}
board.unsuspendUpdate();
return {shape:s,x:posX,y:posY};
}

function removeShape(s,posX,posY) {
board.suspendUpdate();
var i,j, shape = new Array();
for(i=0;i<s.size;i++) {
for(j=0;j<s.size;j++) {
if(s.face[i][j] != 0) {
hideCube(i+posX,j+posY);
usedPolys[i+posX][j+posY] = 0;
}
}
}
board.unsuspendUpdate();
return {shape:s,x:posX,y:posY};
}

function drawVorschauShape(s,posX,posY) {
board2.suspendUpdate();
var i,j;
for(i=0;i<s.size;i++) {
for(j=0;j<s.size;j++) {
if(s.face[i][j] != 0) {
showCubeV(i+posX,j+posY,colors[s.face[i][j]]);
}
}
}
board2.unsuspendUpdate();
}

function clearVorschau() {
for(i=0;i<5;i++) {
for(j=0;j<5;j++) {
hideCubeV(i,j);
}
}
}

function showCube(posX,posY,color) {
board.objects['poly_'+posX+'_'+posY].setProperty('visible:true');
board.objects['poly_'+posX+'_'+posY].setProperty('fillColor:'+color);
}

function hideCube(posX,posY) {
board.objects['poly_'+posX+'_'+posY].setProperty('visible:false');
}

function showCubeV(posX,posY,color) {
board2.objects['poly_'+posX+'_'+posY+'_v'].setProperty('visible:true');
board2.objects['poly_'+posX+'_'+posY+'_v'].setProperty('fillColor:'+color);
}

function hideCubeV(posX,posY) {
board2.objects['poly_'+posX+'_'+posY+'_v'].setProperty('visible:false');
}

function rotate(shape) { // gegen den Uhrzeigersinn drehen
if(shape.size == 2) {
shape.face = [[shape.face[0][1],shape.face[1][1]],
[shape.face[0][0],shape.face[1][1]]];
}
else if(shape.size == 3) {
shape.face = [[shape.face[0][2],shape.face[1][2],shape.face[2][2]],
[shape.face[0][1],shape.face[1][1],shape.face[2][1]],
[shape.face[0][0],shape.face[1][0],shape.face[2][0]]];
}
else if(shape.size == 4) {
shape.face = [[shape.face[0][3],shape.face[1][3],shape.face[2][3],shape.face[3][3]],
[shape.face[0][2],shape.face[1][2],shape.face[2][2],shape.face[3][2]],
[shape.face[0][1],shape.face[1][1],shape.face[2][1],shape.face[3][1]],
[shape.face[0][0],shape.face[1][0],shape.face[2][0],shape.face[3][0]]];
}
return shape;
}

function getRandom() {
return parseInt(1+Math.random()*7);
}

function testLine(i) {
var j;
for(j=0; j<10; j++) {
if(usedPolys[j][i] == 0) {
return false;
}
}
return true;
}

function testLines() {
var i, arr = new Array();
for(i=0; i<20; i++) {
if(testLine(i)) {
arr.push(i);
}
}
return arr;
}

/* doesn't work properly */
function removeLines() {
var arr = testLines(),i,j,k, line;
if(arr.length > 0) {
board.suspendUpdate();
if(arr.length == 1) {
score += (level+1)*40;
}
else if(arr.length == 2) {
score += (level+1)*100;
}
else if(arr.length == 3) {
score += (level+1)*300;
}
else if(arr.length == 4) {
score += (level+1)*1200;
}
scoreNode.innerHTML = score;
for(i=0;i<arr.length;i++) {
line = arr[i];
for(j=line+1-i;j<20;j++) {
for(k=0;k<10;k++) {
if(usedPolys[k][j] == 1) {
showCube(k,j-1,board.objects['poly_'+k+'_'+j].visProp['fillColor']);
usedPolys[k][j-1] = 1;
hideCube(k,j);
usedPolys[k][j] = 0;
}
else {
hideCube(k,j-1);
usedPolys[k][j-1] = 0;
}
}
}
}
board.unsuspendUpdate();
}
}

function keyDown(Evt) {
var code;
if (!Evt) {
Evt = window.event;
}
if (Evt.which) {
code = Evt.which;
} else if (Evt.keyCode) {
code = Evt.keyCode;
}
// 37: left, 38: up, 39: right, 40: down
if (code==38) {
removeShape(curShape.shape,curShape.x,curShape.y);
// echte Kopie anlegen...
var s = {};
s.size = curShape.shape.size;
s.face = (new Array()).concat(curShape.shape.face);
if(compareWithAbsoluteShape(rotate(s),curShape.x,curShape.y)) {
curShape = drawShape(rotate(curShape.shape),curShape.x,curShape.y);
}
else {
curShape = drawShape(curShape.shape,curShape.x,curShape.y);
}
return false;
}
else if(code==39) {
removeShape(curShape.shape,curShape.x,curShape.y);
if(compareWithAbsoluteShape(curShape.shape,curShape.x+1,curShape.y)) {
curShape = drawShape(curShape.shape,curShape.x+1,curShape.y);
}
else {
curShape = drawShape(curShape.shape,curShape.x,curShape.y);
}
return false;
}
else if(code==37) {
removeShape(curShape.shape,curShape.x,curShape.y);
if(compareWithAbsoluteShape(curShape.shape,curShape.x-1,curShape.y)) {
curShape = drawShape(curShape.shape,curShape.x-1,curShape.y);
}
else {
curShape = drawShape(curShape.shape,curShape.x,curShape.y);
}
return false;
}
else if(code==40) {
removeShape(curShape.shape,curShape.x,curShape.y);
if(compareWithAbsoluteShape(curShape.shape,curShape.x,curShape.y-1)) {
curShape = drawShape(curShape.shape,curShape.x,curShape.y-1);
score += (level + 1);
scoreNode.innerHTML = score;
}
else {
curShape = drawShape(curShape.shape,curShape.x,curShape.y);
}
return false;
}
else if(code==32) { // Space
if(curShape.y > 0) {
removeShape(curShape.shape,curShape.x,curShape.y);
var i=curShape.y-1;
var min = curShape.y;
while(i>=0) {
if(compareWithAbsoluteShape(curShape.shape,curShape.x,i)) {
min = i
}
else {
i=0;
}
i--;
}
score += (level + 1)*(curShape.y-min);
scoreNode.innerHTML = score;
curShape = drawShape(curShape.shape,curShape.x,min);
}
}
return true;
}

function gameOver() {
for(i=0;i<10; i++) {
if(usedPolys[i][18] == 1) {
return true;
}
}
return false;
}

function goDownByTime() {
removeShape(curShape.shape,curShape.x,curShape.y);
if(compareWithAbsoluteShape(curShape.shape,curShape.x,curShape.y-1)) {
curShape = drawShape(curShape.shape,curShape.x,curShape.y-1);
setTimeout(goDownByTime,timeOutTimes[level]);
}
else {
curShape = drawShape(curShape.shape,curShape.x,curShape.y);
document.getElementById('score').innerHTML
if(!gameOver()) {
removeLines();
if(compareWithAbsoluteShape(shape(next),4,16)) {
curShape = drawShape(shape(next),4,16);
next = getRandom();
clearVorschau();
drawVorschauShape(shape(next),1,1);
setTimeout(goDownByTime,timeOutTimes[level]);
}
else {
curShape = drawShape(shape(next),4,16);
alert("Game Over!");
}
}
else {
alert("Game Over!");
}
}

}

function levelUp() {
if(level < 15) {
level += 1;
document.getElementById('level').innerHTML = level;
setTimeout(levelUp,1000*30);
}
}
var pArray = drawPointsAndPolys(board,10,20,false);
drawPointsAndPolys(board2,5,5,true);

var score = 0;
var scoreNode = document.getElementById('score');
var level = 1;
var timeOutTimes = [2000,1000,900,800,700,600,500,400,350,300,250,200,150,100,50,25]
var curShape;
var next;

function startTetris() {
document.getElementById('jxgbox').focus();
if(!started) {
started = true;
curShape = drawShape(shape(getRandom()),4,16);
next = getRandom();
drawVorschauShape(shape(next),1,1);

document.onkeydown = keyDown;
setTimeout(goDownByTime,timeOutTimes[level]);
setTimeout(levelUp,1000*30);
}
}
</script>
</html>

Tetris

2010-09-01T12:44:25Z

Bianca: Removing all content from page

Tetris

2010-09-01T12:40:10Z

Bianca:

Even Tetris can be implemented with JSXGraph.
<html>
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
<style type="text/css">
.jxgbox {
overflow:hidden;
background-color:#ffffff;
border-style:solid;
border-width:2px;
border-color:#000000;
}
body {
font-family:Arial;
}
</style>

<script type="text/javascript">
/* <![CDATA[ */
var started = false;
var board = JXG.JSXGraph.initBoard('jxgbox', {originX: 0, originY: 500, unitX: 25, unitY: 25, showCopyright:false, showNavigation:false}); // Spielfeld 10x20
var board2 = JXG.JSXGraph.initBoard('jxgbox2', {originX: 0, originY: 125, unitX: 25, unitY: 25, showCopyright:false, showNavigation:false});
var usedPolys = new Array(10);
var i,j;
for(i=0;i<10;i++) {
usedPolys[i] = new Array(20);
for(j=0;j<20;j++) {
usedPolys[i][j] = 0;
}
}
var colors = ['none','#DC143C','#FF8C00','#87CEEB','#FFD700','#4B0082','#0000CD','#32CD32'];

function drawPointsAndPolys(board,width,height,vorschau) {
var i,j,pArr = {};
board.suspendUpdate();
for(i=0;i<=width;i++) {
for(j=0; j<=height;j++) {
pArr[i+''+j] = board.createElement('point',[i,j],{withLabel:false,face:'plus',draft:true});
}
}
for(i=0;i<width;i++) {
for(j=0; j<height;j++) {
var idpoly = 'poly_'+i+'_'+j;
if(vorschau) {
idpoly = 'poly_'+i+'_'+j+'_v';
}
var poly = board.createElement('polygon',
[pArr[i+''+j], pArr[(i+1)+''+j], pArr[(i+1)+''+(j+1)], pArr[i+''+(j+1)]],
{fillColor:'white',visible:false,id:idpoly});
for(k=0;k<4;k++) {
poly.borders[k].setProperty('strokeColor:#666666');
}
}
}
board.unsuspendUpdate();
return pArr;
}

function shape(style) {
if(style == 1) { // I
return {face:[[1,1,1,1],[0,0,0,0],[0,0,0,0],[0,0,0,0]],size:4};
}
else if(style == 2) { // T
return {face:[[2,0,0],[2,2,0],[2,0,0]],size:3};
}
else if(style == 3) { // O
return {face:[[3,3],[3,3]],size:2};
}
else if(style == 4) { // L
return {face:[[4,4,4],[4,0,0],[0,0,0]],size:3};
}
else if(style == 5) { // J
return {face:[[5,0,0],[5,5,5],[0,0,0]],size:3};
}
else if(style == 6) { // S
return {face:[[6,0,0],[6,6,0],[0,6,0]],size:3};
}
else if(style == 7) { // Z
return {face:[[0,7,0],[7,7,0],[7,0,0]],size:3};
}
}

function compareWithAbsoluteShape(s,posX,posY) {
for(i=0;i<s.size;i++) {
for(j=0;j<s.size;j++) {
if(s.face[i][j] != 0) {
if(i+posX < 0 || i+posX > 9) {
return false;
}
if(j+posY < 0 || j+posY > 19) {
return false;
}
if(usedPolys[i+posX][j+posY] == 1) {
return false;
}
}
}
}
return true;
}

function drawShape(s,posX,posY) {
board.suspendUpdate();
var i,j;
for(i=0;i<s.size;i++) {
for(j=0;j<s.size;j++) {
if(s.face[i][j] != 0) {
showCube(i+posX,j+posY,colors[s.face[i][j]]);
usedPolys[i+posX][j+posY] = 1;
}
}
}
board.unsuspendUpdate();
return {shape:s,x:posX,y:posY};
}

function removeShape(s,posX,posY) {
board.suspendUpdate();
var i,j, shape = new Array();
for(i=0;i<s.size;i++) {
for(j=0;j<s.size;j++) {
if(s.face[i][j] != 0) {
hideCube(i+posX,j+posY);
usedPolys[i+posX][j+posY] = 0;
}
}
}
board.unsuspendUpdate();
return {shape:s,x:posX,y:posY};
}

function drawVorschauShape(s,posX,posY) {
board2.suspendUpdate();
var i,j;
for(i=0;i<s.size;i++) {
for(j=0;j<s.size;j++) {
if(s.face[i][j] != 0) {
showCubeV(i+posX,j+posY,colors[s.face[i][j]]);
}
}
}
board2.unsuspendUpdate();
}

function clearVorschau() {
for(i=0;i<5;i++) {
for(j=0;j<5;j++) {
hideCubeV(i,j);
}
}
}

function showCube(posX,posY,color) {
board.objects['poly_'+posX+'_'+posY].setProperty('visible:true');
board.objects['poly_'+posX+'_'+posY].setProperty('fillColor:'+color);
}

function hideCube(posX,posY) {
board.objects['poly_'+posX+'_'+posY].setProperty('visible:false');
}

function showCubeV(posX,posY,color) {
board2.objects['poly_'+posX+'_'+posY+'_v'].setProperty('visible:true');
board2.objects['poly_'+posX+'_'+posY+'_v'].setProperty('fillColor:'+color);
}

function hideCubeV(posX,posY) {
board2.objects['poly_'+posX+'_'+posY+'_v'].setProperty('visible:false');
}

function rotate(shape) { // gegen den Uhrzeigersinn drehen
if(shape.size == 2) {
shape.face = [[shape.face[0][1],shape.face[1][1]],
[shape.face[0][0],shape.face[1][1]]];
}
else if(shape.size == 3) {
shape.face = [[shape.face[0][2],shape.face[1][2],shape.face[2][2]],
[shape.face[0][1],shape.face[1][1],shape.face[2][1]],
[shape.face[0][0],shape.face[1][0],shape.face[2][0]]];
}
else if(shape.size == 4) {
shape.face = [[shape.face[0][3],shape.face[1][3],shape.face[2][3],shape.face[3][3]],
[shape.face[0][2],shape.face[1][2],shape.face[2][2],shape.face[3][2]],
[shape.face[0][1],shape.face[1][1],shape.face[2][1],shape.face[3][1]],
[shape.face[0][0],shape.face[1][0],shape.face[2][0],shape.face[3][0]]];
}
return shape;
}

function getRandom() {
return parseInt(1+Math.random()*7);
}

function testLine(i) {
var j;
for(j=0; j<10; j++) {
if(usedPolys[j][i] == 0) {
return false;
}
}
return true;
}

function testLines() {
var i, arr = new Array();
for(i=0; i<20; i++) {
if(testLine(i)) {
arr.push(i);
}
}
return arr;
}

/* doesn't work properly */
function removeLines() {
var arr = testLines(),i,j,k, line;
if(arr.length > 0) {
board.suspendUpdate();
if(arr.length == 1) {
score += (level+1)*40;
}
else if(arr.length == 2) {
score += (level+1)*100;
}
else if(arr.length == 3) {
score += (level+1)*300;
}
else if(arr.length == 4) {
score += (level+1)*1200;
}
scoreNode.innerHTML = score;
for(i=0;i<arr.length;i++) {
line = arr[i];
for(j=line+1-i;j<20;j++) {
for(k=0;k<10;k++) {
if(usedPolys[k][j] == 1) {
showCube(k,j-1,board.objects['poly_'+k+'_'+j].visProp['fillColor']);
usedPolys[k][j-1] = 1;
hideCube(k,j);
usedPolys[k][j] = 0;
}
else {
hideCube(k,j-1);
usedPolys[k][j-1] = 0;
}
}
}
}
board.unsuspendUpdate();
}
}

function keyDown(Evt) {
var code;
if (!Evt) {
Evt = window.event;
}
if (Evt.which) {
code = Evt.which;
} else if (Evt.keyCode) {
code = Evt.keyCode;
}
// 37: left, 38: up, 39: right, 40: down
if (code==38) {
removeShape(curShape.shape,curShape.x,curShape.y);
// echte Kopie anlegen...
var s = {};
s.size = curShape.shape.size;
s.face = (new Array()).concat(curShape.shape.face);
if(compareWithAbsoluteShape(rotate(s),curShape.x,curShape.y)) {
curShape = drawShape(rotate(curShape.shape),curShape.x,curShape.y);
}
else {
curShape = drawShape(curShape.shape,curShape.x,curShape.y);
}
return false;
}
else if(code==39) {
removeShape(curShape.shape,curShape.x,curShape.y);
if(compareWithAbsoluteShape(curShape.shape,curShape.x+1,curShape.y)) {
curShape = drawShape(curShape.shape,curShape.x+1,curShape.y);
}
else {
curShape = drawShape(curShape.shape,curShape.x,curShape.y);
}
return false;
}
else if(code==37) {
removeShape(curShape.shape,curShape.x,curShape.y);
if(compareWithAbsoluteShape(curShape.shape,curShape.x-1,curShape.y)) {
curShape = drawShape(curShape.shape,curShape.x-1,curShape.y);
}
else {
curShape = drawShape(curShape.shape,curShape.x,curShape.y);
}
return false;
}
else if(code==40) {
removeShape(curShape.shape,curShape.x,curShape.y);
if(compareWithAbsoluteShape(curShape.shape,curShape.x,curShape.y-1)) {
curShape = drawShape(curShape.shape,curShape.x,curShape.y-1);
score += (level + 1);
scoreNode.innerHTML = score;
}
else {
curShape = drawShape(curShape.shape,curShape.x,curShape.y);
}
return false;
}
else if(code==32) { // Space
if(curShape.y > 0) {
removeShape(curShape.shape,curShape.x,curShape.y);
var i=curShape.y-1;
var min = curShape.y;
while(i>=0) {
if(compareWithAbsoluteShape(curShape.shape,curShape.x,i)) {
min = i
}
else {
i=0;
}
i--;
}
score += (level + 1)*(curShape.y-min);
scoreNode.innerHTML = score;
curShape = drawShape(curShape.shape,curShape.x,min);
}
}
return true;
}

function gameOver() {
for(i=0;i<10; i++) {
if(usedPolys[i][18] == 1) {
return true;
}
}
return false;
}

function goDownByTime() {
removeShape(curShape.shape,curShape.x,curShape.y);
if(compareWithAbsoluteShape(curShape.shape,curShape.x,curShape.y-1)) {
curShape = drawShape(curShape.shape,curShape.x,curShape.y-1);
setTimeout(goDownByTime,timeOutTimes[level]);
}
else {
curShape = drawShape(curShape.shape,curShape.x,curShape.y);
document.getElementById('score').innerHTML
if(!gameOver()) {
removeLines();
if(compareWithAbsoluteShape(shape(next),4,16)) {
curShape = drawShape(shape(next),4,16);
next = getRandom();
clearVorschau();
drawVorschauShape(shape(next),1,1);
setTimeout(goDownByTime,timeOutTimes[level]);
}
else {
curShape = drawShape(shape(next),4,16);
alert("Game Over!");
}
}
else {
alert("Game Over!");
}
}

}

function levelUp() {
if(level < 15) {
level += 1;
document.getElementById('level').innerHTML = level;
setTimeout(levelUp,1000*30);
}
}
var pArray = drawPointsAndPolys(board,10,20,false);
drawPointsAndPolys(board2,5,5,true);

var score = 0;
var scoreNode = document.getElementById('score');
var level = 1;
var timeOutTimes = [2000,1000,900,800,700,600,500,400,350,300,250,200,150,100,50,25]
var curShape;
var next;

function startTetris() {
if(!started) {
started = true;
curShape = drawShape(shape(getRandom()),4,16);
next = getRandom();
drawVorschauShape(shape(next),1,1);

document.onkeydown = keyDown;
setTimeout(goDownByTime,timeOutTimes[level]);
setTimeout(levelUp,1000*30);
}
}
/* ]]> */
</script>
</html>

Tetris

2010-09-01T12:39:32Z

Bianca:

Even Tetris can be implemented with JSXGraph.
<html>

<script type="text/javascript">
/* <![CDATA[ */
var started = false;
var board = JXG.JSXGraph.initBoard('jxgbox', {originX: 0, originY: 500, unitX: 25, unitY: 25, showCopyright:false, showNavigation:false}); // Spielfeld 10x20
var board2 = JXG.JSXGraph.initBoard('jxgbox2', {originX: 0, originY: 125, unitX: 25, unitY: 25, showCopyright:false, showNavigation:false});
var usedPolys = new Array(10);
var i,j;
for(i=0;i<10;i++) {
usedPolys[i] = new Array(20);
for(j=0;j<20;j++) {
usedPolys[i][j] = 0;
}
}
var colors = ['none','#DC143C','#FF8C00','#87CEEB','#FFD700','#4B0082','#0000CD','#32CD32'];

function drawPointsAndPolys(board,width,height,vorschau) {
var i,j,pArr = {};
board.suspendUpdate();
for(i=0;i<=width;i++) {
for(j=0; j<=height;j++) {
pArr[i+''+j] = board.createElement('point',[i,j],{withLabel:false,face:'plus',draft:true});
}
}
for(i=0;i<width;i++) {
for(j=0; j<height;j++) {
var idpoly = 'poly_'+i+'_'+j;
if(vorschau) {
idpoly = 'poly_'+i+'_'+j+'_v';
}
var poly = board.createElement('polygon',
[pArr[i+''+j], pArr[(i+1)+''+j], pArr[(i+1)+''+(j+1)], pArr[i+''+(j+1)]],
{fillColor:'white',visible:false,id:idpoly});
for(k=0;k<4;k++) {
poly.borders[k].setProperty('strokeColor:#666666');
}
}
}
board.unsuspendUpdate();
return pArr;
}

function shape(style) {
if(style == 1) { // I
return {face:[[1,1,1,1],[0,0,0,0],[0,0,0,0],[0,0,0,0]],size:4};
}
else if(style == 2) { // T
return {face:[[2,0,0],[2,2,0],[2,0,0]],size:3};
}
else if(style == 3) { // O
return {face:[[3,3],[3,3]],size:2};
}
else if(style == 4) { // L
return {face:[[4,4,4],[4,0,0],[0,0,0]],size:3};
}
else if(style == 5) { // J
return {face:[[5,0,0],[5,5,5],[0,0,0]],size:3};
}
else if(style == 6) { // S
return {face:[[6,0,0],[6,6,0],[0,6,0]],size:3};
}
else if(style == 7) { // Z
return {face:[[0,7,0],[7,7,0],[7,0,0]],size:3};
}
}

function compareWithAbsoluteShape(s,posX,posY) {
for(i=0;i<s.size;i++) {
for(j=0;j<s.size;j++) {
if(s.face[i][j] != 0) {
if(i+posX < 0 || i+posX > 9) {
return false;
}
if(j+posY < 0 || j+posY > 19) {
return false;
}
if(usedPolys[i+posX][j+posY] == 1) {
return false;
}
}
}
}
return true;
}

function drawShape(s,posX,posY) {
board.suspendUpdate();
var i,j;
for(i=0;i<s.size;i++) {
for(j=0;j<s.size;j++) {
if(s.face[i][j] != 0) {
showCube(i+posX,j+posY,colors[s.face[i][j]]);
usedPolys[i+posX][j+posY] = 1;
}
}
}
board.unsuspendUpdate();
return {shape:s,x:posX,y:posY};
}

function removeShape(s,posX,posY) {
board.suspendUpdate();
var i,j, shape = new Array();
for(i=0;i<s.size;i++) {
for(j=0;j<s.size;j++) {
if(s.face[i][j] != 0) {
hideCube(i+posX,j+posY);
usedPolys[i+posX][j+posY] = 0;
}
}
}
board.unsuspendUpdate();
return {shape:s,x:posX,y:posY};
}

function drawVorschauShape(s,posX,posY) {
board2.suspendUpdate();
var i,j;
for(i=0;i<s.size;i++) {
for(j=0;j<s.size;j++) {
if(s.face[i][j] != 0) {
showCubeV(i+posX,j+posY,colors[s.face[i][j]]);
}
}
}
board2.unsuspendUpdate();
}

function clearVorschau() {
for(i=0;i<5;i++) {
for(j=0;j<5;j++) {
hideCubeV(i,j);
}
}
}

function showCube(posX,posY,color) {
board.objects['poly_'+posX+'_'+posY].setProperty('visible:true');
board.objects['poly_'+posX+'_'+posY].setProperty('fillColor:'+color);
}

function hideCube(posX,posY) {
board.objects['poly_'+posX+'_'+posY].setProperty('visible:false');
}

function showCubeV(posX,posY,color) {
board2.objects['poly_'+posX+'_'+posY+'_v'].setProperty('visible:true');
board2.objects['poly_'+posX+'_'+posY+'_v'].setProperty('fillColor:'+color);
}

function hideCubeV(posX,posY) {
board2.objects['poly_'+posX+'_'+posY+'_v'].setProperty('visible:false');
}

function rotate(shape) { // gegen den Uhrzeigersinn drehen
if(shape.size == 2) {
shape.face = [[shape.face[0][1],shape.face[1][1]],
[shape.face[0][0],shape.face[1][1]]];
}
else if(shape.size == 3) {
shape.face = [[shape.face[0][2],shape.face[1][2],shape.face[2][2]],
[shape.face[0][1],shape.face[1][1],shape.face[2][1]],
[shape.face[0][0],shape.face[1][0],shape.face[2][0]]];
}
else if(shape.size == 4) {
shape.face = [[shape.face[0][3],shape.face[1][3],shape.face[2][3],shape.face[3][3]],
[shape.face[0][2],shape.face[1][2],shape.face[2][2],shape.face[3][2]],
[shape.face[0][1],shape.face[1][1],shape.face[2][1],shape.face[3][1]],
[shape.face[0][0],shape.face[1][0],shape.face[2][0],shape.face[3][0]]];
}
return shape;
}

function getRandom() {
return parseInt(1+Math.random()*7);
}

function testLine(i) {
var j;
for(j=0; j<10; j++) {
if(usedPolys[j][i] == 0) {
return false;
}
}
return true;
}

function testLines() {
var i, arr = new Array();
for(i=0; i<20; i++) {
if(testLine(i)) {
arr.push(i);
}
}
return arr;
}

/* doesn't work properly */
function removeLines() {
var arr = testLines(),i,j,k, line;
if(arr.length > 0) {
board.suspendUpdate();
if(arr.length == 1) {
score += (level+1)*40;
}
else if(arr.length == 2) {
score += (level+1)*100;
}
else if(arr.length == 3) {
score += (level+1)*300;
}
else if(arr.length == 4) {
score += (level+1)*1200;
}
scoreNode.innerHTML = score;
for(i=0;i<arr.length;i++) {
line = arr[i];
for(j=line+1-i;j<20;j++) {
for(k=0;k<10;k++) {
if(usedPolys[k][j] == 1) {
showCube(k,j-1,board.objects['poly_'+k+'_'+j].visProp['fillColor']);
usedPolys[k][j-1] = 1;
hideCube(k,j);
usedPolys[k][j] = 0;
}
else {
hideCube(k,j-1);
usedPolys[k][j-1] = 0;
}
}
}
}
board.unsuspendUpdate();
}
}

function keyDown(Evt) {
var code;
if (!Evt) {
Evt = window.event;
}
if (Evt.which) {
code = Evt.which;
} else if (Evt.keyCode) {
code = Evt.keyCode;
}
// 37: left, 38: up, 39: right, 40: down
if (code==38) {
removeShape(curShape.shape,curShape.x,curShape.y);
// echte Kopie anlegen...
var s = {};
s.size = curShape.shape.size;
s.face = (new Array()).concat(curShape.shape.face);
if(compareWithAbsoluteShape(rotate(s),curShape.x,curShape.y)) {
curShape = drawShape(rotate(curShape.shape),curShape.x,curShape.y);
}
else {
curShape = drawShape(curShape.shape,curShape.x,curShape.y);
}
return false;
}
else if(code==39) {
removeShape(curShape.shape,curShape.x,curShape.y);
if(compareWithAbsoluteShape(curShape.shape,curShape.x+1,curShape.y)) {
curShape = drawShape(curShape.shape,curShape.x+1,curShape.y);
}
else {
curShape = drawShape(curShape.shape,curShape.x,curShape.y);
}
return false;
}
else if(code==37) {
removeShape(curShape.shape,curShape.x,curShape.y);
if(compareWithAbsoluteShape(curShape.shape,curShape.x-1,curShape.y)) {
curShape = drawShape(curShape.shape,curShape.x-1,curShape.y);
}
else {
curShape = drawShape(curShape.shape,curShape.x,curShape.y);
}
return false;
}
else if(code==40) {
removeShape(curShape.shape,curShape.x,curShape.y);
if(compareWithAbsoluteShape(curShape.shape,curShape.x,curShape.y-1)) {
curShape = drawShape(curShape.shape,curShape.x,curShape.y-1);
score += (level + 1);
scoreNode.innerHTML = score;
}
else {
curShape = drawShape(curShape.shape,curShape.x,curShape.y);
}
return false;
}
else if(code==32) { // Space
if(curShape.y > 0) {
removeShape(curShape.shape,curShape.x,curShape.y);
var i=curShape.y-1;
var min = curShape.y;
while(i>=0) {
if(compareWithAbsoluteShape(curShape.shape,curShape.x,i)) {
min = i
}
else {
i=0;
}
i--;
}
score += (level + 1)*(curShape.y-min);
scoreNode.innerHTML = score;
curShape = drawShape(curShape.shape,curShape.x,min);
}
}
return true;
}

function gameOver() {
for(i=0;i<10; i++) {
if(usedPolys[i][18] == 1) {
return true;
}
}
return false;
}

function goDownByTime() {
removeShape(curShape.shape,curShape.x,curShape.y);
if(compareWithAbsoluteShape(curShape.shape,curShape.x,curShape.y-1)) {
curShape = drawShape(curShape.shape,curShape.x,curShape.y-1);
setTimeout(goDownByTime,timeOutTimes[level]);
}
else {
curShape = drawShape(curShape.shape,curShape.x,curShape.y);
document.getElementById('score').innerHTML
if(!gameOver()) {
removeLines();
if(compareWithAbsoluteShape(shape(next),4,16)) {
curShape = drawShape(shape(next),4,16);
next = getRandom();
clearVorschau();
drawVorschauShape(shape(next),1,1);
setTimeout(goDownByTime,timeOutTimes[level]);
}
else {
curShape = drawShape(shape(next),4,16);
alert("Game Over!");
}
}
else {
alert("Game Over!");
}
}

}

function levelUp() {
if(level < 15) {
level += 1;
document.getElementById('level').innerHTML = level;
setTimeout(levelUp,1000*30);
}
}
var pArray = drawPointsAndPolys(board,10,20,false);
drawPointsAndPolys(board2,5,5,true);

var score = 0;
var scoreNode = document.getElementById('score');
var level = 1;
var timeOutTimes = [2000,1000,900,800,700,600,500,400,350,300,250,200,150,100,50,25]
var curShape;
var next;

function startTetris() {
if(!started) {
started = true;
curShape = drawShape(shape(getRandom()),4,16);
next = getRandom();
drawVorschauShape(shape(next),1,1);

document.onkeydown = keyDown;
setTimeout(goDownByTime,timeOutTimes[level]);
setTimeout(levelUp,1000*30);
}
}
/* ]]> */
</script>
</html>

Tetris

2010-09-01T12:38:22Z

Bianca:

Even Tetris can be implemented with JSXGraph.

Tetris

2010-09-01T12:38:09Z

Bianca: New page: Blubb

Blubb

Showcases

2010-09-01T12:29:57Z

Bianca: /* Various topics */

===Various topics===
* [["Infinity"]]
* [[Snake - the game]]
* [[Tetris]]
* [[Circles on circles]] using jQuery sliders
* [[Colorful circles]]
* [[The HSV color scheme]] (hue, saturation and value)

===Charts===
* [[Animated age pyramid]]
* [[German election 2009]]
* [[Google style chart]]
* [[Dynamic bar chart]]
* [[Pie chart]]
* [[Spline chart with special highlight]]
* [[Charts from HTML tables]]
* [[Different chart styles]]
* [[Display stock quotes from Yahoo!]]
* [[Map with German administrative districts]]
* [[Real-time graphing]]
* [[Time series II]]

* All examples from [[:Category:Charts]]

===Geometry===
* [[Euler line II]]
* [[Displaying GEONExT constructions]]
* [[Geometric constructions with JessieScript]] and [[Interactive JessieScript]]
* [[Apollonian circle packing]]
* [[Trigonometric functions]]
* [[Approximation of the circle area]] and [[Circle approximation]]
* [[Five Circle Theorem]]
* [[Circum circles of subtriangles]]
* [[Sine and cosine]]
* [[Circle inversion]] and [[Poincare disc model]] (hyperbolic geometry)
* All examples from [[:Category:Geometry]]

===Statistics===
* [[Data plot of live data via AJAX]]
* [[Analyze data with the Statistics software R]]
* [[Time series forecasting: double exponential smoothing]]
* [[Polynomial regression I]], [[Polynomial regression II]]

===Calculus and function plotting===
* [[Newton's root finding method]]
* [[Power Series for sine]]
* [[Even simpler function plotter]] and [[Simple function plotter]] (JavaScript syntax), [[Parametric curve plotter]], [[Polar curve plotter]]
* [[Rational functions]]
* [[Riemann sums]], [[Riemann sum II]], [[Riemann sum III]], [[Arc length]], [[Continuous functions]], [[Riemann integrability]]
* [[Antiderivative]]
* [[Lagrange interpolation]] and [[Cubic spline interpolation]]
* [[Differential equations]] and [[Systems of differential equations]]
* [[Population growth models]]
* All examples from [[:Category:Calculus]]

===Curves===
* [[Hypotrochoid]]
* [[Limacon|Limaçon of Pascal]]
* [[Watt curve|Watt's curve]]
* [[Archimedean spiral]]
* [[Lissajous curves]]
* [[B-splines]], [[Bezier curves]], [[Bezier curves II]]
* [[Circles on circles]]
* All examples from [[:Category:Curves]]

===Fractals===
* [[Sierpinski triangle]]
* [[Koch curve]]
* All examples from [[:Category:Fractals]], see also [[Turtle Graphics]] and [[L-systems]]

===Turtle Graphics===
* [[L-systems]], or Lindenmayer Systems
* [[Epidemiology: The SIR model]] (Simulation of differential equations with turtle graphics)
* [[Turtle spiral]]
* [[Random walks]]
* All examples from [[:Category:Turtle Graphics]]

User:Noellaiwebstern

2010-09-01T06:52:07Z

Bianca: Spam

User:Ashienvtylers

2010-09-01T06:51:53Z

Bianca: Spam

User:Anissajbrooksg

2010-08-31T15:23:09Z

Bianca: Spam

User:Ulisesmhornev

2010-08-30T09:10:37Z

Bianca: Spam

User:Rhebammullenu

2010-08-29T08:16:26Z

Bianca: Spam

User:Keeliaehubbardj

2010-08-28T13:52:45Z

Bianca: Spam

User:Stevezzamoray

2010-08-28T13:52:31Z

Bianca: Spam

User:Jameljhartmanv

2010-08-13T20:12:50Z

Bianca: Removing all content from page

Spirograph

2010-07-19T19:39:40Z

Bianca:

<jsxgraph width="600" height="600">
var brd = JXG.JSXGraph.initBoard('jxgbox',{boundingbox:[-5,5,5,-5], keepaspectratio:true});
var R = 2.0;
var r = brd.create('slider',[[-3,4],[3,4],[-5,1,5]],{name:'r'});
var a = brd.create('slider',[[-3,3],[3,3],[-5,1,5]],{name:'a'});

var c = brd.create('curve',[
function(t){
var r1 = Math.round(100.0*r.Value())/100.0;
var a1 = Math.round(100.0*a.Value())/100.0;
return (R-r1)*Math.cos(r1/R*t)+a1*Math.cos((1-r1/R)*t);
},
function(t){
var r1 = Math.round(100.0*r.Value())/100.0;
var a1 = Math.round(100.0*a.Value())/100.0;
return (R-r1)*Math.sin(r1/R*t)+a1*Math.sin((1-r1/R)*t);
},
-40*Math.PI,40*Math.PI
], {strokeWidth:3, strokeColor:'#3355ff', strokeOpacity:0.7});
</jsxgraph>

===The underlying JavaScript code===
<source lang="javascript">
var brd = JXG.JSXGraph.initBoard('jxgbox',{boundingbox:[-5,5,5,-5], keepaspectratio:true});
var R = 2.0;
var r = brd.create('slider',[[-3,4],[3,4],[-5,1,5]],{name:'r'});
var a = brd.create('slider',[[-3,3],[3,3],[-5,1,5]],{name:'a'});

var c = brd.create('curve',[
function(t){
var r1 = Math.round(100.0*r.Value())/100.0;
var a1 = Math.round(100.0*a.Value())/100.0;
return (R-r1)*Math.cos(r1/R*t)+a1*Math.cos((1-r1/R)*t);
},
function(t){
var r1 = Math.round(100.0*r.Value())/100.0;
var a1 = Math.round(100.0*a.Value())/100.0;
return (R-r1)*Math.sin(r1/R*t)+a1*Math.sin((1-r1/R)*t);
},
-40*Math.PI,40*Math.PI
], {strokeWidth:3, strokeColor:'#3355ff', strokeOpacity:0.7});
</source>

[[Category:Examples]]
[[Category:Curves]]

SIR model: swine flu

2010-06-26T12:36:15Z

Bianca:

The SIR model (see also [[Epidemiology: The SIR model]]) tries to predict influenza epidemics. Here, we try to model the spreading of the H1N1 virus, aka swine flu.
* According to the [http://www.cdc.gov/ CDC Centers of Disease Control and Prevention]: "Adults shed influenza virus from the day before symptoms begin through 5-10 days after illness onset. However, the amount of virus shed, and presumably infectivity, decreases rapidly by 3-5 days after onset in an experimental human infection model." So, here we set <math>\gamma=1/7=0.1428</math> as the recovery rate. This means, on average an infected person sheds the virus for 7 days.
* In [http://www.pubmedcentral.nih.gov/articlerender.fcgi?artid=2715422 Modeling influenza epidemics and pandemics: insights into the future of swine flu (H1N1)] the authors estimate the reproduction rate <math>R_0</math> of the virus to be about <math>2</math>. For the SIR model this means: the reproduction rate <math>R_0</math> for influenza is equal to the infection rate of the strain (<math>\beta</math>) multiplied by the duration of the infectious period (<math>1/\gamma</math>), i.e.
:<math>\beta = R_0\cdot \gamma</math>. Therefore, we set <math>\beta = 2\cdot 1/7 = 0.2857.</math> For the 1918–1919 pandemic <math>R_0</math> is estimated to be between 2 and 3, whereas for the seasonal flu the range for <math>R_0</math> is 0.9 to 2.1.
* In [http://www.newscientist.com/article/dn17109-first-analysis-of-swine-flu-spread-supports-pandemic-plan.html] the mortality is estimated to be approximately 0.4 per cent.
* We run the simulation for a population of 1 million people, where 1 person is infected initially, i.e. <math>s=1E{-6}</math>. Thus, S(0) = 1, I(0) = 1.E-6, R(0) = 0.

The lines in the JSXGraph-simulation below have the following meaning:
* <span style="color:Blue">Blue: Rate of susceptible population</span>
* <span style="color:red">Red: Rate of infected population</span>
* <span style="color:green">Green: Rate of recovered population
<html>
<form><input type="button" value="clear and run a simulation of 200 days" onClick="clearturtle();run()">
<input type="button" value="stop" onClick="stop()">
<input type="button" value="continue" onClick="goOn()"></form>
</html>
<jsxgraph width="700" height="500">
var brd = JXG.JSXGraph.initBoard('jxgbox', {originX: 20, originY: 300, unitX: 3, unitY: 250, axis:true});

var S = brd.createElement('turtle',[],{strokeColor:'blue',strokeWidth:3});
var I = brd.createElement('turtle',[],{strokeColor:'red',strokeWidth:3});
var R = brd.createElement('turtle',[],{strokeColor:'green',strokeWidth:3});

var s = brd.createElement('slider', [[0,-0.3], [60,-0.3],[0,1E-6,1]], {name:'s'});
var beta = brd.createElement('slider', [[0,-0.4], [60,-0.4],[0,0.2857,1]], {name:'β'});
var gamma = brd.createElement('slider', [[0,-0.5], [60,-0.5],[0,0.1428,0.5]], {name:'γ'});
var mort = brd.createElement('slider', [[0,-0.6], [60,-0.6],[0,0.4,10.0]], {name:'% mortality'});
brd.createElement('text', [90,-0.3, "initially infected population rate"]);
brd.createElement('text', [90,-0.4, function(){ return "β: infection rate, R<sub>0</sub>="+(beta.Value()/gamma.Value()).toFixed(2);}]);
brd.createElement('text', [90,-0.5, function(){ return "γ: recovery rate = 1/(days of infection), days of infection= "+(1/gamma.Value()).toFixed(1);}]);

var t = 0; // global

brd.createElement('text', [100,-0.2,
function() {return "Day "+t+
": infected="+(1000000*I.Y()).toFixed(1)+
" recovered="+(1000000*R.Y()).toFixed(1)+
" dead="+(1000000*R.Y()*mort.Value()*0.01).toFixed(0);}]);

S.hideTurtle();
I.hideTurtle();
R.hideTurtle();

function clearturtle() {
S.cs();
I.cs();
R.cs();

S.hideTurtle();
I.hideTurtle();
R.hideTurtle();
}

function run() {
S.setPos(0,1.0-s.Value());
R.setPos(0,0);
I.setPos(0,s.Value());

delta = 1; // global
t = 0; // global
loop();
}

function turtleMove(turtle,dx,dy) {
turtle.moveTo([dx+turtle.X(),dy+turtle.Y()]);
}

function loop() {
var dS = -beta.Value()*S.Y()*I.Y();
var dR = gamma.Value()*I.Y();
var dI = -(dS+dR);
turtleMove(S,delta,dS);
turtleMove(R,delta,dR);
turtleMove(I,delta,dI);

t += delta;
if (t<200.0) {
active = setTimeout(loop,10);
}
}
function stop() {
if (active) clearTimeout(active);
active = null;
}
function goOn() {
if (t>0) {
if (active==null) {
active = setTimeout(loop,10);
}
} else {
run();
}

}
</jsxgraph>

===External links===
* [http://www.cdc.gov/flu/professionals/acip/clinical.htm Clinical Signs and Symptoms of Influenza]
* [http://www.pubmedcentral.nih.gov/articlerender.fcgi?artid=2715422 Modeling influenza epidemics and pandemics: insights into the future of swine flu (H1N1)]
* [http://www.newscientist.com/article/dn17109-first-analysis-of-swine-flu-spread-supports-pandemic-plan.html First analysis of swine flu spread supports pandemic plan]
* [http://jsxgraph.org JSXGraph Homepage]

===The underlying JavaScript code===
<source lang="xml">
<html>
<form><input type="button" value="clear and run a simulation of 200 days" onClick="clearturtle();run()">
<input type="button" value="stop" onClick="stop()">
<input type="button" value="continue" onClick="goOn()"></form>
</html>
<jsxgraph width="700" height="500">
var brd = JXG.JSXGraph.initBoard('jxgbox', {originX: 20, originY: 300, unitX: 3, unitY: 250, axis:true});

var S = brd.createElement('turtle',[],{strokeColor:'blue',strokeWidth:3});
var I = brd.createElement('turtle',[],{strokeColor:'red',strokeWidth:3});
var R = brd.createElement('turtle',[],{strokeColor:'green',strokeWidth:3});

var s = brd.createElement('slider', [[0,-0.3], [60,-0.3],[0,1E-6,1]], {name:'s'});
var beta = brd.createElement('slider', [[0,-0.4], [60,-0.4],[0,0.2857,1]], {name:'β'});
var gamma = brd.createElement('slider', [[0,-0.5], [60,-0.5],[0,0.1428,0.5]], {name:'γ'});
var mort = brd.createElement('slider', [[0,-0.6], [60,-0.6],[0,0.4,10.0]], {name:'% mortality'});
brd.createElement('text', [90,-0.3, "initially infected population rate"]);
brd.createElement('text', [90,-0.4, function(){ return "β: infection rate, R<sub>0</sub>="+(beta.Value()/gamma.Value()).toFixed(2);}]);
brd.createElement('text', [90,-0.5, function(){ return "γ: recovery rate = 1/(days of infection), days of infection= "+(1/gamma.Value()).toFixed(1);}]);

var t = 0; // global

brd.createElement('text', [100,-0.2,
function() {return "Day "+t+
": infected="+(1000000*I.Y()).toFixed(1)+
" recovered="+(1000000*R.Y()).toFixed(1)+
" dead="+(1000000*R.Y()*mort.Value()*0.01).toFixed(0);}]);

S.hideTurtle();
I.hideTurtle();
R.hideTurtle();

function clearturtle() {
S.cs();
I.cs();
R.cs();

S.hideTurtle();
I.hideTurtle();
R.hideTurtle();
}

function run() {
S.setPos(0,1.0-s.Value());
R.setPos(0,0);
I.setPos(0,s.Value());

delta = 1; // global
t = 0; // global
loop();
}

function turtleMove(turtle,dx,dy) {
turtle.moveTo([dx+turtle.X(),dy+turtle.Y()]);
}

function loop() {
var dS = -beta.Value()*S.Y()*I.Y();
var dR = gamma.Value()*I.Y();
var dI = -(dS+dR);
turtleMove(S,delta,dS);
turtleMove(R,delta,dR);
turtleMove(I,delta,dI);

t += delta;
if (t<200.0) {
active = setTimeout(loop,10);
}
}
function stop() {
if (active) clearTimeout(active);
active = null;
}
function goOn() {
if (t>0) {
if (active==null) {
active = setTimeout(loop,10);
}
} else {
run();
}

}
</jsxgraph>
</source>

[[Category:Examples]]
[[Category:Turtle Graphics]]

Main Page

2010-06-26T12:35:15Z

Bianca:

== 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]]
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]].

Interactive JessieScript

2010-03-23T16:28:48Z

Bianca:

<jsxgraph width="600" height="450" box="box">
var board, construction = [];
board = JXG.JSXGraph.initBoard('box', {grid:true, boundingbox:[-1,6,11,-3], keepaspectratio:true, axis:true});

function construct() {
var t = document.getElementById('input').value;
construction.push(board.construct(t));
}

</jsxgraph>

<br>
<html>
<form><textarea id="input" cols=50 rows=4>
A(1,1);B(2,2.5);C(1,3);[AB];k(B,[AC]);
</textarea>
<br>
<input type="button" value="set" onClick="construct()">
</form>
</html>

===Possible elements:===
{| cellpadding="8" cellspacing="0" border="1"
! Construction !! Description
|-
| A(1,1) || Point with name 'A' at position (1,1)
|-
| ZY(0.5<nowiki>|</nowiki>1) || Point with name 'ZY' at position (0.5,1)
|-
| ]AB[ || straight line through points A and B
|-
| [AB[ || ray through points A and B, stopping at A
|-
| ]AB] || ray through points A and B, stopping at B
|-
| [AB] || segment through points A and B
|-
| g=[AB] || segment through points A and B, named by 'g'
|-
| k(A,1) || circle with midpoint A and radius 1
|-
| k(A,B) || circle with midpoint A through point B on the circle line
|-
| k(A,[BC]) || circle with midpoint A and radius defined by the length of the (not necessarily existing) segement [BC]
|-
| k_1=k(A,1) || circle with midpoint A and radius 1, named by 'k_1'
|}
The different elements have to be separated by semicolon.

===The JavaScript code===
<source lang="javascript">
var board, construction = [];
board = JXG.JSXGraph.initBoard('box', {grid:true, boundingbox:[-1,6,11,-3], keepaspectratio:true, axis:true});

function construct() {
var t = document.getElementById('input').value;
construction.push(board.construct(t));
}
</source>

[[Category:Geometry]]
[[Category:Examples]]

Geometric constructions with JessieScript

2010-03-23T16:28:08Z

Bianca:

Easy JSXGraph constructions with geometric elements can be created by a mathematical syntax by using the function
<source>
board.construct(...);
</source>
Possible elements:
{| cellpadding="8" cellspacing="0" border="1"
! Construction !! Description
|-
| A(1,1) || Point with name 'A' at position (1,1)
|-
| ZY(0.5<nowiki>|</nowiki>1) || Point with name 'ZY' at position (0.5,1)
|-
| ]AB[ || straight line through points A and B
|-
| [AB[ || ray through points A and B, stopping at A
|-
| ]AB] || ray through points A and B, stopping at B
|-
| [AB] || segment through points A and B
|-
| g=[AB] || segment through points A and B, named by 'g'
|-
| k(A,1) || circle with midpoint A and radius 1
|-
| k(A,B) || circle with midpoint A through point B on the circle line
|-
| k(A,[BC]) || circle with midpoint A and radius defined by the length of the (not necessarily existing) segement [BC]
|-
| k_1=k(A,1) || circle with midpoint A and radius 1, named by 'k_1'
|}
The different elements have to be separated by semicolon.

The function returns an object with all the created elements so that afterwards properties can be set.
The access works by
{| cellpadding="8" cellspacing="0" border="1"
! Element !! Description
|-
| constr.points[i] || take i-th point of the construction 'constr'
|-
| constr.lines[i] || take i-th line (or rays or segement) of the construction 'constr'
|-
| constr.circles[i] || take i-th circle of the construction 'constr'
|-
| constr.A || take element with name 'A' of the construction 'constr'
|}
===Example===
<jsxgraph width="600" height="450" box="jxgbox">
var board, cons1, cons2;
board = JXG.JSXGraph.initBoard('jxgbox', {grid:true, originX: 50, originY: 300, unitX: 50, unitY: 50, axis:true});

cons1 = board.construct("A(1,1);B(2,2.5);C(1,3);G(5,3);H(6,4);[GH];k(G,1);AB(5,-1);X(6,-1);Y(7,-2);k(Y,X);k(A,[BC]);k(B,[AC]);");
cons2 = board.construct("J(7,4);[GJ[;K(8,4);]GK[;L(2.4|5);f=[AC];k1=k(C,0.5);C_1(4|4);l_2=[BC]");

cons1.points[0].setProperty({face:'diamond',size:7,strokeColor:'#8B2252',fillColor:'#8B2252'});
cons1.circles[1].setProperty({strokeColor:'#BA55D3'});
cons2.J.setProperty({face:'triangleUp',size:8,strokeColor:'black',fillColor:'#EE82EE'});
cons2.lines[1].setProperty({strokeColor:'#32CD32',shadow:true});

cons1.X.strokeColor('black');
cons1.X.fillColor('#FFB90F');
cons1.X.shadow(true);
cons1.Y.visible(false);
cons2.l_2.strokeWidth(4);
cons1.X.face('>');
cons1.X.size(8);
cons1.X.labelColor('#FFB90F');
cons2.k1.dash(2);

</jsxgraph>

===The JavaScript code===

<source lang="xml">
<jsxgraph width="600" height="450" box="box">
var board, cons1, cons2;
board = JXG.JSXGraph.initBoard('box', {grid:true, originX: 50, originY: 300, unitX: 50, unitY: 50, axis:true});

cons1 = board.construct("A(1,1);B(2,2.5);C(1,3);G(5,3);H(6,4);[GH];k(G,1);AB(5,-1);X(6,-1);Y(7,-2);k(Y,X);k(A,[BC]);k(B,[AC]);");
cons2 = board.construct("J(7,4);[GJ[;K(8,4);]GK[;L(2.4|5);f=[AC];k1=k(C,0.5);C_1(4|4);l_2=[BC]");

cons1.points[0].setProperty({face:'diamond',size:7,strokeColor:'#8B2252',fillColor:'#8B2252'});
cons1.circles[1].setProperty({strokeColor:'#BA55D3'});
cons2.J.setProperty({face:'triangleUp',size:8,strokeColor:'black',fillColor:'#EE82EE'});
cons2.lines[1].setProperty({strokeColor:'#32CD32',shadow:true});

cons1.X.strokeColor('black');
cons1.X.fillColor('#FFB90F');
cons1.X.shadow(true);
cons1.Y.visible(false);
cons2.l_2.strokeWidth(4);
cons1.X.face('>');
cons1.X.size(8);
cons1.X.labelColor('#FFB90F');
cons2.k1.dash(2);
</jsxgraph></source>

[[Category:Examples]]
[[Category:Geometry]]

Geometric constructions with JessieScript

2010-03-21T14:34:47Z

Bianca:

Easy JSXGraph constructions with geometric elements can be created by a mathematical syntax by using the function
<source>
board.construct(...);
</source>
Possible elements:
{| cellpadding="8" cellspacing="0" border="1"
! Construction !! Description
|-
| A(1,1) || Point with name 'A' at the position (1,1)
|-
| ZY(0.5<nowiki>|</nowiki>1) || Point with name 'ZY' at the position (0.5,1)
|-
| ]AB[ || straight line through the points A and B
|-
| [AB[ || ray through the points A and B, stopping at A
|-
| ]AB] || ray through the points A and B, stopping at B
|-
| [AB] || segment through the points A and B
|-
| g=[AB] || segment through the points A and B, named by 'g'
|-
| k(A,1) || circle with midpoint A and radius 1
|-
| k(A,B) || circle with midpoint A through the point B on the circle line
|-
| k(A,[BC]) || circle with midpoint A and radius defined by the length of the (not necessarily existing) segement [BC]
|-
| k_1=k(A,1) || circle with midpoint A and radius 1, named by 'k_1'
|}
The different elements have to be separated by semicolon.

The function returns an object with all the created elements so that afterwards properties can be set.
The access works by
{| cellpadding="8" cellspacing="0" border="1"
! Element !! Description
|-
| constr.points[i] || take the i-th point of the construction 'constr'
|-
| constr.lines[i] || take the i-th line (or rays or segement) of the construction 'constr'
|-
| constr.circles[i] || take the i-th circle of the construction 'constr'
|-
| constr.A || take the element with name 'A' of the construction 'constr'
|}
===Example===
<jsxgraph width="600" height="450" box="box">
var cons1, cons2;
board = JXG.JSXGraph.initBoard('jxgbox', {grid:true, originX: 50, originY: 300, unitX: 50, unitY: 50, axis:true});

cons1 = board.construct("A(1,1);B(2,2.5);C(1,3);G(5,3);H(6,4);[GH];k(G,1);AB(5,-1);X(6,-1);Y(7,-2);k(Y,X);k(A,[BC]);k(B,[AC]);");
cons2 = board.construct("J(7,4);[GJ[;K(8,4);]GK[;L(2.4|5);f=[AC];k1=k(C,0.5);C_1(4|4);l_2=[BC]");

cons1.points[0].setProperty({face:'diamond',size:7,strokeColor:'#8B2252',fillColor:'#8B2252'});
cons1.circles[1].setProperty({strokeColor:'#BA55D3'});
cons2.J.setProperty({face:'triangleUp',size:8,strokeColor:'black',fillColor:'#EE82EE'});
cons2.lines[1].setProperty({strokeColor:'#32CD32',shadow:true});

cons1.X.strokeColor('black');
cons1.X.fillColor('#FFB90F');
cons1.X.shadow(true);
cons1.Y.visible(false);
cons2.l_2.strokeWidth(4);
cons1.X.face('>');
cons1.X.size(8);
cons1.X.labelColor('#FFB90F');
cons2.k1.dash(2);

</jsxgraph>

===The JavaScript code===

<source lang="xml">
<jsxgraph width="600" height="450" box="box">
var cons1, cons2;
board = JXG.JSXGraph.initBoard('box', {grid:true, originX: 50, originY: 300, unitX: 50, unitY: 50, axis:true});

cons1 = board.construct("A(1,1);B(2,2.5);C(1,3);G(5,3);H(6,4);[GH];k(G,1);AB(5,-1);X(6,-1);Y(7,-2);k(Y,X);k(A,[BC]);k(B,[AC]);");
cons2 = board.construct("J(7,4);[GJ[;K(8,4);]GK[;L(2.4|5);f=[AC];k1=k(C,0.5);C_1(4|4);l_2=[BC]");

cons1.points[0].setProperty({face:'diamond',size:7,strokeColor:'#8B2252',fillColor:'#8B2252'});
cons1.circles[1].setProperty({strokeColor:'#BA55D3'});
cons2.J.setProperty({face:'triangleUp',size:8,strokeColor:'black',fillColor:'#EE82EE'});
cons2.lines[1].setProperty({strokeColor:'#32CD32',shadow:true});

cons1.X.strokeColor('black');
cons1.X.fillColor('#FFB90F');
cons1.X.shadow(true);
cons1.Y.visible(false);
cons2.l_2.strokeWidth(4);
cons1.X.face('>');
cons1.X.size(8);
cons1.X.labelColor('#FFB90F');
cons2.k1.dash(2);
</jsxgraph></source>

[[Category:Examples]]
[[Category:Geometry]]

Geometric constructions with JessieScript

2010-03-21T14:33:01Z

Bianca:

Easy JSXGraph constructions with geometric elements can be created by a mathematical syntax by using the function
<source>
board.construct(...);
</source>
Possible elements:
{| cellpadding="8" cellspacing="0" border="1"
! Construction !! Description
|-
| A(1,1) || Point with name 'A' at the position (1,1)
|-
| ZY(0.5<nowiki>|</nowiki>1) || Point with name 'ZY' at the position (0.5,1)
|-
| ]AB[ || straight line through the points A and B
|-
| [AB[ || ray through the points A and B, stopping at A
|-
| ]AB] || ray through the points A and B, stopping at B
|-
| [AB] || segment through the points A and B
|-
| g=[AB] || segment through the points A and B, named by 'g'
|-
| k(A,1) || circle with midpoint A and radius 1
|-
| k(A,B) || circle with midpoint A through the point B on the circle line
|-
| k(A,[BC]) || circle with midpoint A and radius defined by the length of the (not necessarily existing) segement [BC]
|-
| k_1=k(A,1) || circle with midpoint A and radius 1, named by 'k_1'
|}
The different elements have to be separated by semicolon.

The function returns an object with all the created elements so that afterwards properties can be set.
The access works by
{| cellpadding="8" cellspacing="0" border="1"
! Element !! Description
|-
| constr.points[i] || take the i-th point of the construction 'constr'
|-
| constr.lines[i] || take the i-th line (or rays or segement) of the construction 'constr'
|-
| constr.circles[i] || take the i-th circle of the construction 'constr'
|-
| constr.A || take the element with name 'A' of the construction 'constr'
|}
===Example===
<jsxgraph width="400" height="400" box="box">
var cons1, cons2;
board = JXG.JSXGraph.initBoard('jxgbox', {grid:true, originX: 50, originY: 300, unitX: 50, unitY: 50, axis:true});

cons1 = board.construct("A(1,1);B(2,2.5);C(1,3);G(5,3);H(6,4);[GH];k(G,1);AB(5,-1);X(6,-1);Y(7,-2);k(Y,X);k(A,[BC]);k(B,[AC]);");
cons2 = board.construct("J(7,4);[GJ[;K(8,4);]GK[;L(2.4|5);f=[AC];k1=k(C,0.5);C_1(4|4);l_2=[BC]");

cons1.points[0].setProperty({face:'diamond',size:7,strokeColor:'#8B2252',fillColor:'#8B2252'});
cons1.circles[1].setProperty({strokeColor:'#BA55D3'});
cons2.J.setProperty({face:'triangleUp',size:8,strokeColor:'black',fillColor:'#EE82EE'});
cons2.lines[1].setProperty({strokeColor:'#32CD32',shadow:true});

cons1.X.strokeColor('black');
cons1.X.fillColor('#FFB90F');
cons1.X.shadow(true);
cons1.Y.visible(false);
cons2.l_2.strokeWidth(4);
cons1.X.face('>');
cons1.X.size(8);
cons1.X.labelColor('#FFB90F');
cons2.k1.dash(2);

</jsxgraph>

===The JavaScript code===

<source lang="xml">
<jsxgraph width="500" height="400" box="box">
var cons1, cons2;
board = JXG.JSXGraph.initBoard('box', {grid:true, originX: 50, originY: 300, unitX: 50, unitY: 50, axis:true});

cons1 = board.construct("A(1,1);B(2,2.5);C(1,3);G(5,3);H(6,4);[GH];k(G,1);AB(5,-1);X(6,-1);Y(7,-2);k(Y,X);k(A,[BC]);k(B,[AC]);");
cons2 = board.construct("J(7,4);[GJ[;K(8,4);]GK[;L(2.4|5);f=[AC];k1=k(C,0.5);C_1(4|4);l_2=[BC]");

cons1.points[0].setProperty({face:'diamond',size:7,strokeColor:'#8B2252',fillColor:'#8B2252'});
cons1.circles[1].setProperty({strokeColor:'#BA55D3'});
cons2.J.setProperty({face:'triangleUp',size:8,strokeColor:'black',fillColor:'#EE82EE'});
cons2.lines[1].setProperty({strokeColor:'#32CD32',shadow:true});

cons1.X.strokeColor('black');
cons1.X.fillColor('#FFB90F');
cons1.X.shadow(true);
cons1.Y.visible(false);
cons2.l_2.strokeWidth(4);
cons1.X.face('>');
cons1.X.size(8);
cons1.X.labelColor('#FFB90F');
cons2.k1.dash(2);
</jsxgraph></source>

[[Category:Examples]]
[[Category:Geometry]]

Geometric constructions with JessieScript

2010-03-21T14:28:19Z

Bianca:

Easy JSXGraph constructions with geometric elements can be created by a mathematical syntax by using the function
<source>
board.construct(...);
</source>
Possible elements:
{| cellpadding="8" cellspacing="0" border="1"
! Construction !! Description
|-
| A(1,1) || Point with name 'A' at the position (1,1)
|-
| ZY(0.5<nowiki>|</nowiki>1) || Point with name 'ZY' at the position (0.5,1)
|-
| ]AB[ || straight line through the points A and B
|-
| [AB[ || ray through the points A and B, stopping at A
|-
| ]AB] || ray through the points A and B, stopping at B
|-
| [AB] || segment through the points A and B
|-
| g=[AB] || segment through the points A and B, named by 'g'
|-
| k(A,1) || circle with midpoint A and radius 1
|-
| k(A,B) || circle with midpoint A through the point B on the circle line
|-
| k(A,[BC]) || circle with midpoint A and radius defined by the length of the (not necessarily existing) segement [BC]
|-
| k_1=k(A,1) || circle with midpoint A and radius 1, named by 'k_1'
|}
The different elements have to be separated by semicolon.

===Example===
<jsxgraph width="400" height="400" box="box">
var cons1, cons2;
board = JXG.JSXGraph.initBoard('jxgbox', {grid:true, originX: 50, originY: 300, unitX: 50, unitY: 50, axis:true});

cons1 = board.construct("A(1,1);B(2,2.5);C(1,3);G(5,3);H(6,4);[GH];k(G,1);AB(5,-1);X(6,-1);Y(7,-2);k(Y,X);k(A,[BC]);k(B,[AC]);");
cons2 = board.construct("J(7,4);[GJ[;K(8,4);]GK[;L(2.4|5);f=[AC];k1=k(C,0.5);C_1(4|4);l_2=[BC]");

cons1.points[0].setProperty({face:'diamond',size:7,strokeColor:'#8B2252',fillColor:'#8B2252'});
cons1.circles[1].setProperty({strokeColor:'#BA55D3'});
cons2.J.setProperty({face:'triangleUp',size:8,strokeColor:'black',fillColor:'#EE82EE'});
cons2.lines[1].setProperty({strokeColor:'#32CD32',shadow:true});

cons1.X.strokeColor('black');
cons1.X.fillColor('#FFB90F');
cons1.X.shadow(true);
cons1.Y.visible(false);
cons2.l_2.strokeWidth(4);
cons1.X.face('>');
cons1.X.size(8);
cons1.X.labelColor('#FFB90F');
cons2.k1.dash(2);

</jsxgraph>

===The JavaScript code===

<source lang="xml">
<jsxgraph width="500" height="400" box="box">
var cons1, cons2;
board = JXG.JSXGraph.initBoard('box', {grid:true, originX: 50, originY: 300, unitX: 50, unitY: 50, axis:true});

cons1 = board.construct("A(1,1);B(2,2.5);C(1,3);G(5,3);H(6,4);[GH];k(G,1);AB(5,-1);X(6,-1);Y(7,-2);k(Y,X);k(A,[BC]);k(B,[AC]);");
cons2 = board.construct("J(7,4);[GJ[;K(8,4);]GK[;L(2.4|5);f=[AC];k1=k(C,0.5);C_1(4|4);l_2=[BC]");

cons1.points[0].setProperty({face:'diamond',size:7,strokeColor:'#8B2252',fillColor:'#8B2252'});
cons1.circles[1].setProperty({strokeColor:'#BA55D3'});
cons2.J.setProperty({face:'triangleUp',size:8,strokeColor:'black',fillColor:'#EE82EE'});
cons2.lines[1].setProperty({strokeColor:'#32CD32',shadow:true});

cons1.X.strokeColor('black');
cons1.X.fillColor('#FFB90F');
cons1.X.shadow(true);
cons1.Y.visible(false);
cons2.l_2.strokeWidth(4);
cons1.X.face('>');
cons1.X.size(8);
cons1.X.labelColor('#FFB90F');
cons2.k1.dash(2);
</jsxgraph></source>

[[Category:Examples]]
[[Category:Geometry]]

Geometric constructions with JessieScript

2010-03-21T14:25:45Z

Bianca:

Easy JSXGraph constructions with geometric elements can be created by a mathematical syntax by using the function
<source>
board.construct(...);
</source>
Possible elements:
{| cellpadding="8" cellspacing="0" border="1"
! Construction !! Description
|-
| A(1,1) || Point with name 'A' at the position (1,1)
|-
| ZY(1|1) || Point with name 'ZY' at the position (1,1)
|-
| ]AB[ || straight line through the points A and B
|-
| [AB[ || ray through the points A and B, stopping at A
|-
| ]AB] || ray through the points A and B, stopping at B
|-
| [AB] || segment through the points A and B
|-
| g=[AB] || segment through the points A and B, named by 'g'
|-
| k(A,1) || circle with midpoint A and radius 1
|-
| k(A,B) || circle with midpoint A through the point B on the circle line
|-
| k(A,[BC]) || circle with midpoint A and radius defined by the length of the (not necessarily existing) segement [BC]
|-
| k_1=k(A,1) || circle with midpoint A and radius 1, named by 'k_1'
|}
The different elements have to be separated by semicolon.

===Example===
<jsxgraph width="400" height="400" box="box">
var cons1, cons2;
board = JXG.JSXGraph.initBoard('jxgbox', {grid:true, originX: 50, originY: 300, unitX: 50, unitY: 50, axis:true});

cons1 = board.construct("A(1,1);B(2,2.5);C(1,3);G(5,3);H(6,4);[GH];k(G,1);AB(5,-1);X(6,-1);Y(7,-2);k(Y,X);k(A,[BC]);k(B,[AC]);");
cons2 = board.construct("J(7,4);[GJ[;K(8,4);]GK[;L(2.4|5);f=[AC];k1=k(C,0.5);C_1(4|4);l_2=[BC]");

cons1.points[0].setProperty({face:'diamond',size:7,strokeColor:'#8B2252',fillColor:'#8B2252'});
cons1.circles[1].setProperty({strokeColor:'#BA55D3'});
cons2.J.setProperty({face:'triangleUp',size:8,strokeColor:'black',fillColor:'#EE82EE'});
cons2.lines[1].setProperty({strokeColor:'#32CD32',shadow:true});

cons1.X.strokeColor('black');
cons1.X.fillColor('#FFB90F');
cons1.X.shadow(true);
cons1.Y.visible(false);
cons2.l_2.strokeWidth(4);
cons1.X.face('>');
cons1.X.size(8);
cons1.X.labelColor('#FFB90F');
cons2.k1.dash(2);

</jsxgraph>

===The JavaScript code===

<source lang="xml">
<jsxgraph width="500" height="400" box="box">
var cons1, cons2;
board = JXG.JSXGraph.initBoard('box', {grid:true, originX: 50, originY: 300, unitX: 50, unitY: 50, axis:true});

cons1 = board.construct("A(1,1);B(2,2.5);C(1,3);G(5,3);H(6,4);[GH];k(G,1);AB(5,-1);X(6,-1);Y(7,-2);k(Y,X);k(A,[BC]);k(B,[AC]);");
cons2 = board.construct("J(7,4);[GJ[;K(8,4);]GK[;L(2.4|5);f=[AC];k1=k(C,0.5);C_1(4|4);l_2=[BC]");

cons1.points[0].setProperty({face:'diamond',size:7,strokeColor:'#8B2252',fillColor:'#8B2252'});
cons1.circles[1].setProperty({strokeColor:'#BA55D3'});
cons2.J.setProperty({face:'triangleUp',size:8,strokeColor:'black',fillColor:'#EE82EE'});
cons2.lines[1].setProperty({strokeColor:'#32CD32',shadow:true});

cons1.X.strokeColor('black');
cons1.X.fillColor('#FFB90F');
cons1.X.shadow(true);
cons1.Y.visible(false);
cons2.l_2.strokeWidth(4);
cons1.X.face('>');
cons1.X.size(8);
cons1.X.labelColor('#FFB90F');
cons2.k1.dash(2);
</jsxgraph></source>

[[Category:Examples]]
[[Category:Geometry]]

Geometric constructions with JessieScript

2010-03-21T14:25:06Z

Bianca:

Easy JSXGraph constructions with geometric elements can be created by a mathematical syntax by using the function
<source>
board.construct(...);
</source>
Possible elements:
{| cellpadding="8" cellspacing="0" border="1"
! Construction !! Description
|-
| A(1,1) || Point with name 'A' at the position (1,1)
|-
| XY(1|1) || Point with name 'XY' at the position (1,1)
|-
| ]AB[ || straight line through the points A and B
|-
| [AB[ || ray through the points A and B, stopping at A
|-
| ]AB] || ray through the points A and B, stopping at B
|-
| [AB] || segment through the points A and B
|-
| g=[AB] || segment through the points A and B, named by 'g'
|-
| k(A,1) || circle with midpoint A and radius 1
|-
| k(A,B) || circle with midpoint A through the point B on the circle line
|-
| k(A,[BC]) || circle with midpoint A and radius defined by the length of the (not necessarily existing) segement [BC]
|-
| k_1=k(A,1) || circle with midpoint A and radius 1, named by 'k_1'
|}
The different elements have to be separated by semicolon.

===Example===
<jsxgraph width="400" height="400" box="box">
var cons1, cons2;
board = JXG.JSXGraph.initBoard('jxgbox', {grid:true, originX: 50, originY: 300, unitX: 50, unitY: 50, axis:true});

cons1 = board.construct("A(1,1);B(2,2.5);C(1,3);G(5,3);H(6,4);[GH];k(G,1);AB(5,-1);X(6,-1);Y(7,-2);k(Y,X);k(A,[BC]);k(B,[AC]);");
cons2 = board.construct("J(7,4);[GJ[;K(8,4);]GK[;L(2.4|5);f=[AC];k1=k(C,0.5);C_1(4|4);l_2=[BC]");

cons1.points[0].setProperty({face:'diamond',size:7,strokeColor:'#8B2252',fillColor:'#8B2252'});
cons1.circles[1].setProperty({strokeColor:'#BA55D3'});
cons2.J.setProperty({face:'triangleUp',size:8,strokeColor:'black',fillColor:'#EE82EE'});
cons2.lines[1].setProperty({strokeColor:'#32CD32',shadow:true});

cons1.X.strokeColor('black');
cons1.X.fillColor('#FFB90F');
cons1.X.shadow(true);
cons1.Y.visible(false);
cons2.l_2.strokeWidth(4);
cons1.X.face('>');
cons1.X.size(8);
cons1.X.labelColor('#FFB90F');
cons2.k1.dash(2);

</jsxgraph>

===The JavaScript code===

<source lang="xml">
<jsxgraph width="500" height="400" box="box">
var cons1, cons2;
board = JXG.JSXGraph.initBoard('box', {grid:true, originX: 50, originY: 300, unitX: 50, unitY: 50, axis:true});

cons1 = board.construct("A(1,1);B(2,2.5);C(1,3);G(5,3);H(6,4);[GH];k(G,1);AB(5,-1);X(6,-1);Y(7,-2);k(Y,X);k(A,[BC]);k(B,[AC]);");
cons2 = board.construct("J(7,4);[GJ[;K(8,4);]GK[;L(2.4|5);f=[AC];k1=k(C,0.5);C_1(4|4);l_2=[BC]");

cons1.points[0].setProperty({face:'diamond',size:7,strokeColor:'#8B2252',fillColor:'#8B2252'});
cons1.circles[1].setProperty({strokeColor:'#BA55D3'});
cons2.J.setProperty({face:'triangleUp',size:8,strokeColor:'black',fillColor:'#EE82EE'});
cons2.lines[1].setProperty({strokeColor:'#32CD32',shadow:true});

cons1.X.strokeColor('black');
cons1.X.fillColor('#FFB90F');
cons1.X.shadow(true);
cons1.Y.visible(false);
cons2.l_2.strokeWidth(4);
cons1.X.face('>');
cons1.X.size(8);
cons1.X.labelColor('#FFB90F');
cons2.k1.dash(2);
</jsxgraph></source>

[[Category:Examples]]
[[Category:Geometry]]

Geometric constructions with JessieScript

2010-03-21T14:24:44Z

Bianca:

Easy JSXGraph constructions with geometric elements can be created by a mathematical syntax by using the function
<source>
board.construct(...);
</source>
Possible elements:
{| cellpadding="8" cellspacing="0" border="1"
! Construction !! Description
|-
| A(1,1) || Point with name 'A' at the position (1,1)
|-
| XY(1|1) || Point with name 'XY' at the position (1,1)
|-
| ]AB[ || straight line through the points A and B
|-
| [AB[ || ray through the points A and B, stopping at A
|-
| ]AB] || ray through the points A and B, stopping at B
|-
| [AB] || segment through the points A and B
|-
| g=[AB] || segment through the points A and B, named by 'g'
|-
| k(A,1) || circle with midpoint A and radius 1
|-
| k(A,B) || circle with midpoint A through the point B on the circle line
|-
| k(A,[BC]) || circle with midpoint A and radius defined by the length of the (not necessarily existing) segement [BC]
|-
| k_1=k(A,1) || circle with midpoint A and radius 1, named by 'k_1'
|}
The different elements have to be separated by semicolon.

Example:
<jsxgraph width="400" height="400" box="box">
var cons1, cons2;
board = JXG.JSXGraph.initBoard('jxgbox', {grid:true, originX: 50, originY: 300, unitX: 50, unitY: 50, axis:true});

cons1 = board.construct("A(1,1);B(2,2.5);C(1,3);G(5,3);H(6,4);[GH];k(G,1);AB(5,-1);X(6,-1);Y(7,-2);k(Y,X);k(A,[BC]);k(B,[AC]);");
cons2 = board.construct("J(7,4);[GJ[;K(8,4);]GK[;L(2.4|5);f=[AC];k1=k(C,0.5);C_1(4|4);l_2=[BC]");

cons1.points[0].setProperty({face:'diamond',size:7,strokeColor:'#8B2252',fillColor:'#8B2252'});
cons1.circles[1].setProperty({strokeColor:'#BA55D3'});
cons2.J.setProperty({face:'triangleUp',size:8,strokeColor:'black',fillColor:'#EE82EE'});
cons2.lines[1].setProperty({strokeColor:'#32CD32',shadow:true});

cons1.X.strokeColor('black');
cons1.X.fillColor('#FFB90F');
cons1.X.shadow(true);
cons1.Y.visible(false);
cons2.l_2.strokeWidth(4);
cons1.X.face('>');
cons1.X.size(8);
cons1.X.labelColor('#FFB90F');
cons2.k1.dash(2);

</jsxgraph>

===The JavaScript code===

<source lang="xml">
<jsxgraph width="500" height="400" box="box">
var cons1, cons2;
board = JXG.JSXGraph.initBoard('box', {grid:true, originX: 50, originY: 300, unitX: 50, unitY: 50, axis:true});

cons1 = board.construct("A(1,1);B(2,2.5);C(1,3);G(5,3);H(6,4);[GH];k(G,1);AB(5,-1);X(6,-1);Y(7,-2);k(Y,X);k(A,[BC]);k(B,[AC]);");
cons2 = board.construct("J(7,4);[GJ[;K(8,4);]GK[;L(2.4|5);f=[AC];k1=k(C,0.5);C_1(4|4);l_2=[BC]");

cons1.points[0].setProperty({face:'diamond',size:7,strokeColor:'#8B2252',fillColor:'#8B2252'});
cons1.circles[1].setProperty({strokeColor:'#BA55D3'});
cons2.J.setProperty({face:'triangleUp',size:8,strokeColor:'black',fillColor:'#EE82EE'});
cons2.lines[1].setProperty({strokeColor:'#32CD32',shadow:true});

cons1.X.strokeColor('black');
cons1.X.fillColor('#FFB90F');
cons1.X.shadow(true);
cons1.Y.visible(false);
cons2.l_2.strokeWidth(4);
cons1.X.face('>');
cons1.X.size(8);
cons1.X.labelColor('#FFB90F');
cons2.k1.dash(2);
</jsxgraph></source>

[[Category:Examples]]
[[Category:Geometry]]

Geometric constructions with JessieScript

2010-03-21T14:14:07Z

Bianca: New page: <jsxgraph width="400" height="400" box="box"> var cons1, cons2; board = JXG.JSXGraph.initBoard('jxgbox', {grid:true, originX: 50, originY: 300, unitX: 50, unitY: 50, axis:t...

<jsxgraph width="400" height="400" box="box">
var cons1, cons2;
board = JXG.JSXGraph.initBoard('jxgbox', {grid:true, originX: 50, originY: 300, unitX: 50, unitY: 50, axis:true});

cons1 = board.construct("A(1,1);B(2,2.5);C(1,3);G(5,3);H(6,4);[GH];k(G,1);AB(5,-1);X(6,-1);Y(7,-2);k(Y,X);k(A,[BC]);k(B,[AC]);");
cons2 = board.construct("J(7,4);[GJ[;K(8,4);]GK[;L(2.4|5);f=[AC];k1=k(C,0.5);C_1(4|4);l_2=[BC]");

cons1.points[0].setProperty({face:'diamond',size:7,strokeColor:'#8B2252',fillColor:'#8B2252'});
cons1.circles[1].setProperty({strokeColor:'#BA55D3'});
cons2.J.setProperty({face:'triangleUp',size:8,strokeColor:'black',fillColor:'#EE82EE'});
cons2.lines[1].setProperty({strokeColor:'#32CD32',shadow:true});

cons1.X.strokeColor('black');
cons1.X.fillColor('#FFB90F');
cons1.X.shadow(true);
cons1.Y.visible(false);
cons2.l_2.strokeWidth(4);
cons1.X.face('>');
cons1.X.size(8);
cons1.X.labelColor('#FFB90F');
cons2.k1.dash(2);

</jsxgraph>

===The JavaScript code===

<source lang="xml">
<jsxgraph width="500" height="400" box="box">
var cons1, cons2;
board = JXG.JSXGraph.initBoard('box', {grid:true, originX: 50, originY: 300, unitX: 50, unitY: 50, axis:true});

cons1 = board.construct("A(1,1);B(2,2.5);C(1,3);G(5,3);H(6,4);[GH];k(G,1);AB(5,-1);X(6,-1);Y(7,-2);k(Y,X);k(A,[BC]);k(B,[AC]);");
cons2 = board.construct("J(7,4);[GJ[;K(8,4);]GK[;L(2.4|5);f=[AC];k1=k(C,0.5);C_1(4|4);l_2=[BC]");

cons1.points[0].setProperty({face:'diamond',size:7,strokeColor:'#8B2252',fillColor:'#8B2252'});
cons1.circles[1].setProperty({strokeColor:'#BA55D3'});
cons2.J.setProperty({face:'triangleUp',size:8,strokeColor:'black',fillColor:'#EE82EE'});
cons2.lines[1].setProperty({strokeColor:'#32CD32',shadow:true});

cons1.X.strokeColor('black');
cons1.X.fillColor('#FFB90F');
cons1.X.shadow(true);
cons1.Y.visible(false);
cons2.l_2.strokeWidth(4);
cons1.X.face('>');
cons1.X.size(8);
cons1.X.labelColor('#FFB90F');
cons2.k1.dash(2);
</jsxgraph></source>

[[Category:Examples]]
[[Category:Geometry]]

Showcases

2010-03-21T14:10:16Z

Bianca: /* Geometry */

===Various topics===
* [["Infinity"]]
* [[Snake - the game]]
* [[Circles on circles]] using jQuery sliders
* [[Colorful circles]]
* [[The HSV color scheme]] (hue, saturation and value)

===Charts===
* [[Animated age pyramid]]
* [[German election 2009]]
* [[Google style chart]]
* [[Dynamic bar chart]]
* [[Pie chart]]
* [[Spline chart with special highlight]]
* [[Charts from HTML tables]]
* [[Charts from HTML tables - tutorial]]
* [[Different chart styles]]
* [[Display stock quotes from Yahoo!]]
* [[Map with German administrative districts]]
* [[Real-time graphing]]
* [[Time series II]]
* [[Data plot]]
* All examples from [[:Category:Charts]]

===Geometry===
* [[Euler line]], [[Euler line II]]
* [[Displaying GEONExT constructions]]
* [[Displaying constructions with math syntax]]
* [[Apollonian circle packing]]
* [[Trigonometric functions]]
* [[Approximation of the circle area]]
* [[Circle approximation]]
* [[Five Circle Theorem]]
* [[Circum circles of subtriangles]]
* [[Tangents on circle]]
* [[Sine and cosine]]
* All examples from [[:Category:Geometry]]

===Statistics===
* [[Random points]]
* [[Data plot of live data via AJAX]]
* [[Analyze data with the Statistics software R]]
* [[Time series forecasting: double exponential smoothing]]
* [[Polynomial regression I]], [[Polynomial regression II]]

===Calculus and function plotting===
* [[Power Series for sine and cosine]]
* [[Lagrange interpolation]]
* [[Simple function plotter]], [[Parametric curve plotter]], [[Polar curve plotter]]
* [[Rational functions]]
* [[Riemann sums]], [[Riemann sum II]], [[Riemann sum III]], [[Arc length]], [[Continuous functions]]
* [[Cubic spline interpolation]]
* [[Newton's root finding method]]
* [[Interpolation: Neville's algorithm]]
* [[Population growth models]]
* All examples from [[:Category:Calculus]]

===Curves===
* [[Hypotrochoid]]
* [[Limacon|Limaçon of Pascal]]
* [[Watt curve|Watt's curve]]
* [[Archimedean spiral]]
* [[Lissajous curves]]
* [[Bezier curves]]
* [[Bezier curves II]]
* All examples from [[:Category:Curves]]

===Fractals===
* [[Sierpinski triangle]]
* [[Koch curve]]
* All examples from [[:Category:Fractals]], see also [[Turtle Graphics]] and [[L-systems]]

===Turtle Graphics===
* [[n-gones]]
* [[L-systems]], or Lindenmayer Systems
* [[Epidemiology: The SIR model]] (Simulation of differential equations with turtle graphics)
* [[SIR model: swine flu]]
* [[Turtle spiral]]
* [[Random walks]]
* All examples from [[:Category:Turtle Graphics]]

Options

2009-11-16T14:50:14Z

Bianca:

Below are the default values for many parameters of a JSXGraph construction. These values have to be overwritten before the initialization of the JSXGraph board via
<source lang="javascript">
JXG.Options.fontSize = 14;
JXG.Options.text.useASCIIMathML = true;
</source>

Here is the complete list of default values:
<source lang="javascript">
JXG.Options = {
/* Options that are used directly within the board class */
fontSize : 12,
showCopyright : true,
showNavigation : true,
takeSizeFromFile : true, // If true, the construction - when read from a file or string - the size of the div can be changed.

/* grid options */
grid : {
/* grid styles */
hasGrid : false,
gridX : 2,
gridY : 2,
gridColor : '#C0C0C0',
gridOpacity : '0.5',
gridDash : true,
/* snap to grid options */
snapToGrid : false,
snapSizeX : 2,
snapSizeY : 2
},
/* zoom options */
zoom : {
factor : 1.25
},

/* geometry element options */
elements : {
/* color options */
color : {
strokeOpacity : 1,
highlightStrokeOpacity : 1,
fillOpacity : 1,
highlightFillOpacity : 1,

strokeColor : '#0000ff',
highlightStrokeColor : '#C3D9FF',
fillColor : 'none',
highlightFillColor : 'none'
},
strokeWidth : '2px',

/*draft options */
draft : {
draft : false,
color : '#565656',
opacity : 0.8,
strokeWidth : '1px'
}
},

/* special point options */
point : {
style : 5, //1;
fillColor : '#ff0000',
highlightFillColor : '#EEEEEE',
strokeColor : '#0000ff',
highlightStrokeColor : '#C3D9FF'
},

/* special line options */
line : {
firstArrow : false,
lastArrow : false,
straightFirst : true,
straightLast : true,
fillColor : '#000000',
highlightFillColor : 'none',
strokeColor : '#0000ff',
highlightStrokeColor : '#888888',
/* line ticks options */
ticks : {
drawLabels : true,
drawZero : false,
insertTicks : false,
minTicksDistance : 50,
maxTicksDistance : 300,
minorHeight : 4,
majorHeight : 10,
minorTicks : 4,
defaultDistance : 1
}
},

/*special circle options */
circle : {
fillColor : 'none',
highlightFillColor : 'none',
strokeColor : '#0000ff',
highlightStrokeColor : '#C3D9FF'
},

/* special angle options */
angle : {
radius : 1.0,
fillColor : '#FF7F00',
highlightFillColor : '#FF7F00',
strokeColor : '#FF7F00',
fillOpacity : 0.3,
highlightFillOpacity : 0.3
},

/* special arc options */
arc : {
firstArrow : false,
lastArrow : false,
fillColor : 'none',
highlightFillColor : 'none',
strokeColor : '#0000ff',
highlightStrokeColor : '#C3D9FF'
},

/* special polygon options */
polygon : {
fillColor : '#00FF00',
highlightFillColor : '#00FF00',
fillOpacity : 0.3,
highlightFillOpacity : 0.3
},

/* special sector options */
sector : {
fillColor : '#00FF00',
highlightFillColor : '#00FF00',
fillOpacity : 0.3,
highlightFillOpacity : 0.3
},

/* special text options */
text : {
strokeColor : '#000000',
useASCIIMathML : false,
defaultType : 'html' //'html' or 'internal'
},

/* special curve options */
curve : {
strokeWidth : '1px',
strokeColor : '#0000ff',
RDPsmoothing : false, // Apply the Ramen-Douglas-Peuker algorithm
numberPointsHigh : 1600, // Number of points on curves after mouseUp
numberPointsLow : 400, // Number of points on curves after mousemove
doAdvancedPlot : true // Use the algorithm by Gillam and Hohenwarter
// It is much slower, but the result is better
},

/* precision options */
precision : {
hasPoint : 4,
epsilon : 0.0001
}
};

</source>

Koch curve

2009-10-30T14:22:26Z

Bianca:

<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/jsxgraphcore.js"></script>
<form><textarea id="inputtext" rows=10 cols=35 wrap="off" style="width:600px;">
function koch(x,level) {
if (level<1) {
t.fd(x);
} else {
koch(x/3,level-1);
t.lt(60);
koch(x/3,level-1);
t.rt(120);
koch(x/3,level-1);
t.lt(60);
koch(x/3,level-1);
}
}

t.cs();
t.hideTurtle();
t.setPos(-250,0);
t.rt(90);
koch(400,7);

</textarea><br />
<input type="button" value="run" onClick="run()">
<input type="button" value="clear" onClick="clearturtle()">
</form>
<div id="box" class="jxgbox" style="width:600px; height:400px;"></div>
<script language="JavaScript">
var brd = JXG.JSXGraph.initBoard('box', {originX: 300, originY: 300, unitX: 1, unitY: 1});
var t = brd.createElement('turtle');
function run() {
brd.suspendUpdate();
var code = document.getElementById('inputtext').value;
if (code=='') { return; }
eval(code);
brd.unsuspendUpdate();
}
function clearturtle() {
t.cs();
}
run();
</script>
</html>

===References===
* [http://www.mathcurve.com/fractals/koch/koch.shtml http://www.mathcurve.com/fractals/koch/koch.shtml]

===Source code===
<source lang="javascript">
var brd = JXG.JSXGraph.initBoard('box', {originX: 300, originY: 300, unitX: 1, unitY: 1});
var t = brd.createElement('turtle');
function run() {
brd.suspendUpdate();
var code = document.getElementById('inputtext').value;
if (code=='') { return; }
eval(code);
brd.unsuspendUpdate();
}
function clearturtle() {
t.cs();
}
run();

function koch(x,level) {
if (level<1) {
t.fd(x);
} else {
koch(x/3,level-1);

t.lt(60);
koch(x/3,level-1);
t.rt(120);
koch(x/3,level-1);
t.lt(60);
koch(x/3,level-1);
}
}

t.cs();
t.hideTurtle();
t.setPos(-250,0);
t.rt(90);
koch(400,7);
</source>

[[Category:Examples]]

[[Category:Turtle Graphics]]
[[Category:Fractals]]
[[Category:Curves]]

Riemann sum II

2009-08-30T18:00:32Z

Bianca:

<jsxgraph width="800" height="400" box="box">
var brd = JXG.JSXGraph.initBoard('box', {originX: 400, originY: 200, grid:true, unitX: 50, unitY: 50});
brd.createElement('axis', [[0,0], [1,0]], {strokeColor:'black'});
brd.createElement('axis', [[0,0], [0,1]], {strokeColor:'black'});
var b = brd.createElement('slider',[[1,3.5],[5,3.5],[0,1,3]],{name:'a', strokeColor:'black', fillColor:'white'});
var f = function(x){ return b.Value()*Math.sin(x); }
var plot = brd.createElement('functiongraph',[f,-7,7], {strokeColor:'#32CD32', strokeWidth:'4px'});
var g = brd.D(f);
var plot2 = brd.createElement('functiongraph',[g,-7,7], {strokeColor:'#9370DB', strokeWidth:'2px'});
var os = brd.createElement('riemannsum',[f, 35, 'middle', -7, 7], {fillColor:'#B22222', fillOpacity:0.3, strokeColor:'#8B1A1A', strokeWidth:'2px'});
var t1 = brd.createElement('text',[-7,2,"(a*sin(x))'"],{strokeColor:'#9370DB'});
var t2 = brd.createElement('text',[-7,-1.5,"a*sin(x)"],{strokeColor:'#32CD32'});
</jsxgraph>

===The underlying JavaScript code===
<source lang="xml">
<jsxgraph width="800" height="400" box="box">
var brd = JXG.JSXGraph.initBoard('box', {originX: 400, originY: 200, grid:true, unitX: 50, unitY: 50});
brd.createElement('axis', [[0,0], [1,0]], {strokeColor:'black'});
brd.createElement('axis', [[0,0], [0,1]], {strokeColor:'black'});
var b = brd.createElement('slider',[[1,3.5],[5,3.5],[0,1,3]],{name:'a', strokeColor:'black', fillColor:'white'});
var f = function(x){ return b.Value()*Math.sin(x); }
var plot = brd.createElement('functiongraph',[f,-7,7], {strokeColor:'#32CD32', strokeWidth:'4px'});
var g = brd.D(f);
var plot2 = brd.createElement('functiongraph',[g,-7,7], {strokeColor:'#9370DB', strokeWidth:'2px'});
var os = brd.createElement('riemannsum',[f, 35, 'middle', -7, 7], {fillColor:'#B22222', fillOpacity:0.3, strokeColor:'#8B1A1A', strokeWidth:'2px'});
var t1 = brd.createElement('text',[-7,2,"(a*sin(x))'"],{strokeColor:'#9370DB'});
var t2 = brd.createElement('text',[-7,-1.5,"a*sin(x)"],{strokeColor:'#32CD32'});
</jsxgraph>
</source>

[[Category:Examples]]
[[Category:Calculus]]

Riemann sum II

2009-08-30T17:59:10Z

Bianca:

<html>
<jsxgraph width="800" height="400" box="box">
var brd = JXG.JSXGraph.initBoard('jxgbox', {originX: 400, originY: 200, grid:true, unitX: 50, unitY: 50});
brd.createElement('axis', [[0,0], [1,0]], {strokeColor:'black'});
brd.createElement('axis', [[0,0], [0,1]], {strokeColor:'black'});
var b = brd.createElement('slider',[[1,3.5],[5,3.5],[0,1,3]],{name:'a', strokeColor:'black', fillColor:'white'});
var f = function(x){ return b.Value()*Math.sin(x); }
var plot = brd.createElement('functiongraph',[f,-7,7], {strokeColor:'#32CD32', strokeWidth:'4px'});
var g = brd.D(f);
var plot2 = brd.createElement('functiongraph',[g,-7,7], {strokeColor:'#9370DB', strokeWidth:'2px'});
var os = brd.createElement('riemannsum',[f, 35, 'middle', -7, 7], {fillColor:'#B22222', fillOpacity:0.3, strokeColor:'#8B1A1A', strokeWidth:'2px'});
var t1 = brd.createElement('text',[-7,2,"(a*sin(x))'"],{strokeColor:'#9370DB'});
var t2 = brd.createElement('text',[-7,-1.5,"a*sin(x)"],{strokeColor:'#32CD32'});
</jsxgraph>

===The underlying JavaScript code===
<source lang="xml">
<jsxgraph width="800" height="400" box="box">
var brd = JXG.JSXGraph.initBoard('jxgbox', {originX: 400, originY: 200, grid:true, unitX: 50, unitY: 50});
brd.createElement('axis', [[0,0], [1,0]], {strokeColor:'black'});
brd.createElement('axis', [[0,0], [0,1]], {strokeColor:'black'});
var b = brd.createElement('slider',[[1,3.5],[5,3.5],[0,1,3]],{name:'a', strokeColor:'black', fillColor:'white'});
var f = function(x){ return b.Value()*Math.sin(x); }
var plot = brd.createElement('functiongraph',[f,-7,7], {strokeColor:'#32CD32', strokeWidth:'4px'});
var g = brd.D(f);
var plot2 = brd.createElement('functiongraph',[g,-7,7], {strokeColor:'#9370DB', strokeWidth:'2px'});
var os = brd.createElement('riemannsum',[f, 35, 'middle', -7, 7], {fillColor:'#B22222', fillOpacity:0.3, strokeColor:'#8B1A1A', strokeWidth:'2px'});
var t1 = brd.createElement('text',[-7,2,"(a*sin(x))'"],{strokeColor:'#9370DB'});
var t2 = brd.createElement('text',[-7,-1.5,"a*sin(x)"],{strokeColor:'#32CD32'});
</jsxgraph>
</source>

</html>
[[Category:Examples]]
[[Category:Calculus]]

Riemann sum II

2009-08-30T17:58:46Z

Bianca: New page: <html> <form>Riemann sum type: <select id="sumtype"> <option value='left' selected> left <option value='right'> right <option value='middle'> middle <option value='trapezodial'> trapezodia...

<html>
<form>Riemann sum type: <select id="sumtype">
<option value='left' selected> left
<option value='right'> right
<option value='middle'> middle
<option value='trapezodial'> trapezodial
<option value='lower'> lower
<option value='upper'> upper
</select></form>
</html>
<jsxgraph width="800" height="400" box="box">
var brd = JXG.JSXGraph.initBoard('jxgbox', {originX: 400, originY: 200, grid:true, unitX: 50, unitY: 50});
brd.createElement('axis', [[0,0], [1,0]], {strokeColor:'black'});
brd.createElement('axis', [[0,0], [0,1]], {strokeColor:'black'});
var b = brd.createElement('slider',[[1,3.5],[5,3.5],[0,1,3]],{name:'a', strokeColor:'black', fillColor:'white'});
var f = function(x){ return b.Value()*Math.sin(x); }
var plot = brd.createElement('functiongraph',[f,-7,7], {strokeColor:'#32CD32', strokeWidth:'4px'});
var g = brd.D(f);
var plot2 = brd.createElement('functiongraph',[g,-7,7], {strokeColor:'#9370DB', strokeWidth:'2px'});
var os = brd.createElement('riemannsum',[f, 35, 'middle', -7, 7], {fillColor:'#B22222', fillOpacity:0.3, strokeColor:'#8B1A1A', strokeWidth:'2px'});
var t1 = brd.createElement('text',[-7,2,"(a*sin(x))'"],{strokeColor:'#9370DB'});
var t2 = brd.createElement('text',[-7,-1.5,"a*sin(x)"],{strokeColor:'#32CD32'});
</jsxgraph>

===The underlying JavaScript code===
<source lang="xml">
<jsxgraph width="800" height="400" box="box">
var brd = JXG.JSXGraph.initBoard('jxgbox', {originX: 400, originY: 200, grid:true, unitX: 50, unitY: 50});
brd.createElement('axis', [[0,0], [1,0]], {strokeColor:'black'});
brd.createElement('axis', [[0,0], [0,1]], {strokeColor:'black'});
var b = brd.createElement('slider',[[1,3.5],[5,3.5],[0,1,3]],{name:'a', strokeColor:'black', fillColor:'white'});
var f = function(x){ return b.Value()*Math.sin(x); }
var plot = brd.createElement('functiongraph',[f,-7,7], {strokeColor:'#32CD32', strokeWidth:'4px'});
var g = brd.D(f);
var plot2 = brd.createElement('functiongraph',[g,-7,7], {strokeColor:'#9370DB', strokeWidth:'2px'});
var os = brd.createElement('riemannsum',[f, 35, 'middle', -7, 7], {fillColor:'#B22222', fillOpacity:0.3, strokeColor:'#8B1A1A', strokeWidth:'2px'});
var t1 = brd.createElement('text',[-7,2,"(a*sin(x))'"],{strokeColor:'#9370DB'});
var t2 = brd.createElement('text',[-7,-1.5,"a*sin(x)"],{strokeColor:'#32CD32'});
</jsxgraph>
</source>

[[Category:Examples]]
[[Category:Calculus]]

Showcases

2009-08-30T17:57:44Z

Bianca: /* Calculus and function plotting */

===Various topics===
* [["Infinity"]]
* [[Snake - the game]]
* [[Circles on circles]] using jQuery sliders
* [[Display stock quotes from Yahoo!]]

===Charts===
* [[Different chart styles]]
* [[Google style chart]]
* [[Dynamic bar chart]]
* [[Pie chart]]
* [[Spline chart with special highlight]]
* All examples from [[:Category:Charts]]

===Geometry===
* [[Sine and cosine]]
* [[Displaying GEONExT constructions]]
* [[Euler line]], [[Euler line II]]
* [[Apollonian circle packing]]
* [[Trigonometric functions]]
* [[Approximation of the circle area]]
* [[Circle approximation]]
* All examples from [[:Category:Geometry]]

===Statistics===
* [[Random points]]
* [[Data plot of live data via AJAX]]
* [[Analyze data with the Statistics software R]]
* [[Time series forecasting: double exponential smoothing]]
* [[Polynomial regression I]], [[Polynomial regression II]]

===Calculus and function plotting===
* [[Power Series for sine and cosine]]
* [[Lagrange interpolation]]
* [[Simple function plotter]], [[Parametric curve plotter]], [[Polar curve plotter]]
* [[Rational functions]]
* [[Riemann sums]], [[Riemann sum II]], [[Arc length]], [[Continuous functions]]
* [[Cubic spline interpolation]]
* [[Interpolation: Neville's algorithm]]
* [[Population growth models]]
* All examples from [[:Category:Calculus]]

===Curves===
* [[Hypotrochoid]]
* [[Limacon|Limaçon of Pascal]]
* [[Watt curve|Watt's curve]]
* [[Archimedean spiral]]
* [[Lissajous curves]]
* All examples from [[:Category:Curves]]

===Fractals===
* [[Sierpinski triangle]]
* [[Koch curve]]
* All examples from [[:Category:Fractals]], see also [[Turtle Graphics]] and [[L-systems]]

===Turtle Graphics===
* [[n-gones]]
* [[L-systems]], or Lindenmayer Systems
* [[Epidemiology: The SIR model]] (Simulation of differential equations with turtle graphics)
* [[SIR model: swine flu]]
* [[Turtle spiral]]
* [[Random walks]]
* All examples from [[:Category:Turtle Graphics]]

Showcases

2009-08-30T17:57:22Z

Bianca: /* Calculus and function plotting */

===Various topics===
* [["Infinity"]]
* [[Snake - the game]]
* [[Circles on circles]] using jQuery sliders
* [[Display stock quotes from Yahoo!]]

===Charts===
* [[Different chart styles]]
* [[Google style chart]]
* [[Dynamic bar chart]]
* [[Pie chart]]
* [[Spline chart with special highlight]]
* All examples from [[:Category:Charts]]

===Geometry===
* [[Sine and cosine]]
* [[Displaying GEONExT constructions]]
* [[Euler line]], [[Euler line II]]
* [[Apollonian circle packing]]
* [[Trigonometric functions]]
* [[Approximation of the circle area]]
* [[Circle approximation]]
* All examples from [[:Category:Geometry]]

===Statistics===
* [[Random points]]
* [[Data plot of live data via AJAX]]
* [[Analyze data with the Statistics software R]]
* [[Time series forecasting: double exponential smoothing]]
* [[Polynomial regression I]], [[Polynomial regression II]]

===Calculus and function plotting===
* [[Power Series for sine and cosine]]
* [[Lagrange interpolation]]
* [[Simple function plotter]], [[Parametric curve plotter]], [[Polar curve plotter]]
* [[Rational functions]]
* [[Riemann sums]],[[Riemann sum II]], [[Arc length]], [[Continuous functions]]
* [[Cubic spline interpolation]]
* [[Interpolation: Neville's algorithm]]
* [[Population growth models]]
* All examples from [[:Category:Calculus]]

===Curves===
* [[Hypotrochoid]]
* [[Limacon|Limaçon of Pascal]]
* [[Watt curve|Watt's curve]]
* [[Archimedean spiral]]
* [[Lissajous curves]]
* All examples from [[:Category:Curves]]

===Fractals===
* [[Sierpinski triangle]]
* [[Koch curve]]
* All examples from [[:Category:Fractals]], see also [[Turtle Graphics]] and [[L-systems]]

===Turtle Graphics===
* [[n-gones]]
* [[L-systems]], or Lindenmayer Systems
* [[Epidemiology: The SIR model]] (Simulation of differential equations with turtle graphics)
* [[SIR model: swine flu]]
* [[Turtle spiral]]
* [[Random walks]]
* All examples from [[:Category:Turtle Graphics]]

Euler line

2009-08-26T11:51:27Z

Bianca:

<jsxgraph width="500" height="400" box="box">
brd = JXG.JSXGraph.initBoard('box', {boundingbox: [-2, 2, 2, -1.5], keepaspectratio:true});

brd.suspendUpdate();
A = brd.createElement('point',[1,0],{strokeColor:'#901B77',fillColor:'#CA147A'});
B = brd.createElement('point',[-1,0],{strokeColor:'#901B77',fillColor:'#CA147A'});
C = brd.createElement('point',[0.2,1.5],{strokeColor:'#901B77',fillColor:'#CA147A'});
pol = brd.createElement('polygon',[A,B,C], {fillColor:'#FFFF0050'});
for(i=0;i<=2;i++) {
pol.borders[i].setProperty('strokeColor:#009256');
}

pABC = brd.createElement('perpendicular',[pol.borders[0],C],{strokeWidth:1,dash:2, name:['','H_c']});
pBCA = brd.createElement('perpendicular',[pol.borders[1],A],{strokeWidth:1,dash:2, name:['','H_a']});
pCAB = brd.createElement('perpendicular',[pol.borders[2],B],{strokeWidth:1,dash:2, name:['','H_b']});
pABC[1].setProperty('strokeColor:#901B77','fillColor:#CA147A');
pBCA[1].setProperty('strokeColor:#901B77','fillColor:#CA147A');
pCAB[1].setProperty('strokeColor:#901B77','fillColor:#CA147A');
i1 = brd.createElement('intersection',[pABC[0],pCAB[0],0],{strokeColor:'#009256',fillColor:'#65B72E',name:'H'});
pABC[0].setProperty({strokeColor:'#000000',dash:1,strokeWidth:1});
pBCA[0].setProperty({strokeColor:'#000000',dash:1,strokeWidth:1});
pCAB[0].setProperty({strokeColor:'#000000',dash:1,strokeWidth:1});

mAB = brd.createElement('midpoint',[A,B],{strokeColor:'#901B77',fillColor:'#CA147A',name:'M_c'});
mBC = brd.createElement('midpoint',[B,C],{strokeColor:'#901B77',fillColor:'#CA147A',name:'M_a'});
mCA = brd.createElement('midpoint',[C,A],{strokeColor:'#901B77',fillColor:'#CA147A',name:'M_b'});
ma = brd.createElement('line',[mBC,A],{straightFirst:false,straightLast:false,strokeWidth:1,strokeColor:'#333333',dash:2});
mb = brd.createElement('line',[mCA,B],{straightFirst:false,straightLast:false,strokeWidth:1,strokeColor:'#333333',dash:2});
mc = brd.createElement('line',[mAB,C],{straightFirst:false,straightLast:false,strokeWidth:1,strokeColor:'#333333',dash:2});
i2 = brd.createElement('intersection',[ma,mc,0],{strokeColor:'#009256',fillColor:'#65B72E',name:'S'});

i3 = brd.createElement('circumcirclemidpoint',[A,B,C],{strokeColor:'#009256',fillColor:'#65B72E',name:'U'});
c = brd.createElement('circumcircle',[A,B,C],{strokeColor:'#000000',dash:3,strokeWidth:1});
c[0].setProperty('visible:false');
c[1].setProperty({strokeColor:'#000000',dash:3,strokeWidth:1});

euler = brd.createElement('line',[i1,i3],{strokeWidth:2,strokeColor:'#901B77'});
brd.unsuspendUpdate();

</jsxgraph>

===The JavaScript code===

<source lang="xml">
<jsxgraph width="500" height="400" box="box">
brd = JXG.JSXGraph.initBoard('box', {boundingbox: [-2, 2, 2, -1.5], keepaspectratio:true});

brd.suspendUpdate();
A = brd.createElement('point',[1,0],{strokeColor:'#901B77',fillColor:'#CA147A'});
B = brd.createElement('point',[-1,0],{strokeColor:'#901B77',fillColor:'#CA147A'});
C = brd.createElement('point',[0.2,1.5],{strokeColor:'#901B77',fillColor:'#CA147A'});
pol = brd.createElement('polygon',[A,B,C], {fillColor:'#FFFF0050'});
for(i=0;i<=2;i++) {
pol.borders[i].setProperty('strokeColor:#009256');
}

pABC = brd.createElement('perpendicular',[pol.borders[0],C],{strokeWidth:1,dash:2, name:['','H_c']});
pBCA = brd.createElement('perpendicular',[pol.borders[1],A],{strokeWidth:1,dash:2, name:['','H_a']});
pCAB = brd.createElement('perpendicular',[pol.borders[2],B],{strokeWidth:1,dash:2, name:['','H_b']});
pABC[1].setProperty('strokeColor:#901B77','fillColor:#CA147A');
pBCA[1].setProperty('strokeColor:#901B77','fillColor:#CA147A');
pCAB[1].setProperty('strokeColor:#901B77','fillColor:#CA147A');
i1 = brd.createElement('intersection',[pABC[0],pCAB[0],0],{strokeColor:'#009256',fillColor:'#65B72E',name:'H'});
pABC[0].setProperty({strokeColor:'#000000',dash:1,strokeWidth:1});
pBCA[0].setProperty({strokeColor:'#000000',dash:1,strokeWidth:1});
pCAB[0].setProperty({strokeColor:'#000000',dash:1,strokeWidth:1});

mAB = brd.createElement('midpoint',[A,B],{strokeColor:'#901B77',fillColor:'#CA147A',name:'M_c'});
mBC = brd.createElement('midpoint',[B,C],{strokeColor:'#901B77',fillColor:'#CA147A',name:'M_a'});
mCA = brd.createElement('midpoint',[C,A],{strokeColor:'#901B77',fillColor:'#CA147A',name:'M_b'});
ma = brd.createElement('line',[mBC,A],{straightFirst:false,straightLast:false,strokeWidth:1,strokeColor:'#333333',dash:2});
mb = brd.createElement('line',[mCA,B],{straightFirst:false,straightLast:false,strokeWidth:1,strokeColor:'#333333',dash:2});
mc = brd.createElement('line',[mAB,C],{straightFirst:false,straightLast:false,strokeWidth:1,strokeColor:'#333333',dash:2});
i2 = brd.createElement('intersection',[ma,mc,0],{strokeColor:'#009256',fillColor:'#65B72E',name:'S'});

i3 = brd.createElement('circumcirclemidpoint',[A,B,C],{strokeColor:'#009256',fillColor:'#65B72E',name:'U'});
c = brd.createElement('circumcircle',[A,B,C],{strokeColor:'#000000',dash:3,strokeWidth:1});
c[0].setProperty('visible:false');
c[1].setProperty({strokeColor:'#000000',dash:3,strokeWidth:1});

euler = brd.createElement('line',[i1,i3],{strokeWidth:2,strokeColor:'#901B77'});
brd.unsuspendUpdate();

</jsxgraph></source>

[[Category:Examples]]
[[Category:Geometry]]

Euler line

2009-08-26T11:51:03Z

Bianca:

<jsxgraph width="500" height="400" box="box">
brd = JXG.JSXGraph.initBoard('box', {boundingbox: [-2, 2, 2, -1.5], keepaspectratio:true});

brd.suspendUpdate();
A = brd.createElement('point',[1,0],{strokeColor:'#901B77',fillColor:'#CA147A'});
B = brd.createElement('point',[-1,0],{strokeColor:'#901B77',fillColor:'#CA147A'});
C = brd.createElement('point',[0.2,1.5],{strokeColor:'#901B77',fillColor:'#CA147A'});
pol = brd.createElement('polygon',[A,B,C], {fillColor:'#FFFF0050'});
for(i=0;i<=2;i++) {
pol.borders[i].setProperty('strokeColor:#009256');
}

pABC = brd.createElement('perpendicular',[pol.borders[0],C],{strokeWidth:1,dash:2, name:['','H_c']});
pBCA = brd.createElement('perpendicular',[pol.borders[1],A],{strokeWidth:1,dash:2, name:['','H_a']});
pCAB = brd.createElement('perpendicular',[pol.borders[2],B],{strokeWidth:1,dash:2, name:['','H_b']});
pABC[1].setProperty('strokeColor:#901B77','fillColor:#CA147A');
pBCA[1].setProperty('strokeColor:#901B77','fillColor:#CA147A');
pCAB[1].setProperty('strokeColor:#901B77','fillColor:#CA147A');
i1 = brd.createElement('intersection',[pABC[0],pCAB[0],0],{strokeColor:'#009256',fillColor:'#65B72E',name:'H'});
pABC[0].setProperty({strokeColor:'#000000',dash:1,strokeWidth:1});
pBCA[0].setProperty({strokeColor:'#000000',dash:1,strokeWidth:1});
pCAB[0].setProperty({strokeColor:'#000000',dash:1,strokeWidth:1});

mAB = brd.createElement('midpoint',[A,B],{strokeColor:'#901B77',fillColor:'#CA147A',name:'M_c'});
mBC = brd.createElement('midpoint',[B,C],{strokeColor:'#901B77',fillColor:'#CA147A',name:'M_a'});
mCA = brd.createElement('midpoint',[C,A],{strokeColor:'#901B77',fillColor:'#CA147A',name:'M_b'});
ma = brd.createElement('line',[mBC,A],{straightFirst:false,straightLast:false,strokeWidth:1,strokeColor:'#333333',dash:2});
mb = brd.createElement('line',[mCA,B],{straightFirst:false,straightLast:false,strokeWidth:1,strokeColor:'#333333',dash:2});
mc = brd.createElement('line',[mAB,C],{straightFirst:false,straightLast:false,strokeWidth:1,strokeColor:'#333333',dash:2});
i2 = brd.createElement('intersection',[ma,mc,0],{strokeColor:'#009256',fillColor:'#65B72E',name:'S'});

i3 = brd.createElement('circumcirclemidpoint',[A,B,C],{strokeColor:'#009256',fillColor:'#65B72E',name:'U'});
c = brd.createElement('circumcircle',[A,B,C],{strokeColor:'#000000',dash:3,strokeWidth:1});
c[0].setProperty('visible:false');
c[1].setProperty({strokeColor:'#000000',dash:3,strokeWidth:1});

euler = brd.createElement('line',[i1,i3],{strokeWidth:2,strokeColor:'#901B77'});
brd.unsuspendUpdate();

</jsxgraph>

===The JavaScript code===

<source lang="xml">
<jsxgraph width="500" height="500" box="box">
brd = JXG.JSXGraph.initBoard('box', {boundingbox: [-2, 2, 2, -2], keepaspectratio:true});

brd.suspendUpdate();
A = brd.createElement('point',[1,0],{strokeColor:'#901B77',fillColor:'#CA147A'});
B = brd.createElement('point',[-1,0],{strokeColor:'#901B77',fillColor:'#CA147A'});
C = brd.createElement('point',[0.2,1.5],{strokeColor:'#901B77',fillColor:'#CA147A'});
pol = brd.createElement('polygon',[A,B,C], {fillColor:'#FFFF0050'});
for(i=0;i<=2;i++) {
pol.borders[i].setProperty('strokeColor:#009256');
}

pABC = brd.createElement('perpendicular',[pol.borders[0],C],{strokeWidth:1,dash:2, name:['','H_c']});
pBCA = brd.createElement('perpendicular',[pol.borders[1],A],{strokeWidth:1,dash:2, name:['','H_a']});
pCAB = brd.createElement('perpendicular',[pol.borders[2],B],{strokeWidth:1,dash:2, name:['','H_b']});
pABC[1].setProperty('strokeColor:#901B77','fillColor:#CA147A');
pBCA[1].setProperty('strokeColor:#901B77','fillColor:#CA147A');
pCAB[1].setProperty('strokeColor:#901B77','fillColor:#CA147A');
i1 = brd.createElement('intersection',[pABC[0],pCAB[0],0],{strokeColor:'#009256',fillColor:'#65B72E',name:'H'});
pABC[0].setProperty({strokeColor:'#000000',dash:1,strokeWidth:1});
pBCA[0].setProperty({strokeColor:'#000000',dash:1,strokeWidth:1});
pCAB[0].setProperty({strokeColor:'#000000',dash:1,strokeWidth:1});

mAB = brd.createElement('midpoint',[A,B],{strokeColor:'#901B77',fillColor:'#CA147A',name:'M_c'});
mBC = brd.createElement('midpoint',[B,C],{strokeColor:'#901B77',fillColor:'#CA147A',name:'M_a'});
mCA = brd.createElement('midpoint',[C,A],{strokeColor:'#901B77',fillColor:'#CA147A',name:'M_b'});
ma = brd.createElement('line',[mBC,A],{straightFirst:false,straightLast:false,strokeWidth:1,strokeColor:'#333333',dash:2});
mb = brd.createElement('line',[mCA,B],{straightFirst:false,straightLast:false,strokeWidth:1,strokeColor:'#333333',dash:2});
mc = brd.createElement('line',[mAB,C],{straightFirst:false,straightLast:false,strokeWidth:1,strokeColor:'#333333',dash:2});
i2 = brd.createElement('intersection',[ma,mc,0],{strokeColor:'#009256',fillColor:'#65B72E',name:'S'});

i3 = brd.createElement('circumcirclemidpoint',[A,B,C],{strokeColor:'#009256',fillColor:'#65B72E',name:'U'});
c = brd.createElement('circumcircle',[A,B,C],{strokeColor:'#000000',dash:3,strokeWidth:1});
c[0].setProperty('visible:false');
c[1].setProperty({strokeColor:'#000000',dash:3,strokeWidth:1});

euler = brd.createElement('line',[i1,i3],{strokeWidth:2,strokeColor:'#901B77'});
brd.unsuspendUpdate();

</jsxgraph></source>

[[Category:Examples]]
[[Category:Geometry]]

Dynamic bar chart

2009-08-26T11:42:06Z

Bianca:

<jsxgraph width="700" height="600" box="box">
board = JXG.JSXGraph.initBoard('box', {originX: 50, originY: 450, unitX: 50, unitY: 50, axis:false});
board.suspendUpdate();
board.createElement('axis', [[0,0], [1,0]], {strokeColor:'black'});
board.createElement('axis', [[0,0], [0,1]], {strokeColor:'black'});

var s = board.createElement('slider', [[8,7],[11,7],[1,1,1.5]], {name:'S',strokeColor:'black',fillColor:'white'});
var f = [function(){return this.board.round(s.Value()*4.5,2);},
function(){return this.board.round(s.Value()*(-1),2);},
function(){return this.board.round(s.Value()*3,2);},
function(){return this.board.round(s.Value()*2,2);},
function(){return this.board.round(s.Value()*(-0.5),2);},
function(){return this.board.round(s.Value()*5.5,2);},
function(){return this.board.round(s.Value()*2.5,2);},
function(){return this.board.round(s.Value()*(-0.75),2);},
function(){return this.board.round(s.Value()*(3.5),2);},
function(){return this.board.round(s.Value()*(2),2);},
function(){return this.board.round(s.Value()*(-1.25),2);}
];
var chart = board.createElement('chart', [f], {chartStyle:'bar',width:0.8,labels:f});
chart[0][0].setProperty('fillColor:#8E1B77');
chart[0][1].setProperty('fillColor:#BE1679');
chart[0][2].setProperty('fillColor:#DC1765');
chart[0][3].setProperty('fillColor:#DA2130');
chart[0][4].setProperty('fillColor:#DB311B');
chart[0][5].setProperty('fillColor:#DF4917');
chart[0][6].setProperty('fillColor:#E36317');
chart[0][7].setProperty('fillColor:#E87F1A');
chart[0][8].setProperty('fillColor:#F1B112');
chart[0][9].setProperty('fillColor:#FCF302');
chart[0][10].setProperty('fillColor:#C1E212');

var dataArr = [4,1,3,2,5,6.5,1.5,2,0.5,1.5,-1];
var chart2 = board.createElement('chart', dataArr, {chartStyle:'line,point'});
chart2[0].setProperty('strokeColor:black','strokeWidth:2pt');
for(var i=0; i<11;i++) {
chart2[1][i].setProperty('strokeColor:black','fillColor:white','style:9','strokeWidth:2pt');
}
board.unsuspendUpdate();

</jsxgraph>

===The JavaScript code===

<source lang="xml">
<jsxgraph width="700" height="600" box="box">
board = JXG.JSXGraph.initBoard('box', {originX: 50, originY: 450, unitX: 50, unitY: 50, axis:false});
board.suspendUpdate();
board.createElement('axis', [[0,0], [1,0]], {strokeColor:'black'});
board.createElement('axis', [[0,0], [0,1]], {strokeColor:'black'});

var s = board.createElement('slider', [[8,7],[11,7],[1,1,1.5]], {name:'S',strokeColor:'black',fillColor:'white'});
var f = [function(){return this.board.round(s.Value()*4.5,2);},
function(){return this.board.round(s.Value()*(-1),2);},
function(){return this.board.round(s.Value()*3,2);},
function(){return this.board.round(s.Value()*2,2);},
function(){return this.board.round(s.Value()*(-0.5),2);},
function(){return this.board.round(s.Value()*5.5,2);},
function(){return this.board.round(s.Value()*2.5,2);},
function(){return this.board.round(s.Value()*(-0.75),2);},
function(){return this.board.round(s.Value()*(3.5),2);},
function(){return this.board.round(s.Value()*(2),2);},
function(){return this.board.round(s.Value()*(-1.25),2);}
];
var chart = board.createElement('chart', [f], {chartStyle:'bar',width:0.8,labels:f});
chart[0][0].setProperty('fillColor:#8E1B77');
chart[0][1].setProperty('fillColor:#BE1679');
chart[0][2].setProperty('fillColor:#DC1765');
chart[0][3].setProperty('fillColor:#DA2130');
chart[0][4].setProperty('fillColor:#DB311B');
chart[0][5].setProperty('fillColor:#DF4917');
chart[0][6].setProperty('fillColor:#E36317');
chart[0][7].setProperty('fillColor:#E87F1A');
chart[0][8].setProperty('fillColor:#F1B112');
chart[0][9].setProperty('fillColor:#FCF302');
chart[0][10].setProperty('fillColor:#C1E212');

var dataArr = [4,1,3,2,5,6.5,1.5,2,0.5,1.5,-1];
var chart2 = board.createElement('chart', dataArr, {chartStyle:'line,point'});
chart2[0].setProperty('strokeColor:black','strokeWidth:2pt');
for(var i=0; i<11;i++) {
chart2[1][i].setProperty('strokeColor:black','fillColor:white','style:9','strokeWidth:2pt');
}
board.unsuspendUpdate();

</jsxgraph>
</source>

[[Category:Examples]]
[[Category:Charts]]

Dynamic bar chart

2009-08-26T11:40:15Z

Bianca:

<jsxgraph width="550" height="400" box="box">
board = JXG.JSXGraph.initBoard('box', //{originX: 50, originY: 450, unitX: 50, unitY: 50, axis:false});
{originX: 25, originY: 325, unitX: 40, unitY: 40, axis:false});
board.suspendUpdate();
board.createElement('axis', [[0,0], [1,0]], {strokeColor:'black'});
board.createElement('axis', [[0,0], [0,1]], {strokeColor:'black'});

var s = board.createElement('slider', [[8,7],[11,7],[1,1,1.5]], {name:'S',strokeColor:'black',fillColor:'white'});
var f = [function(){return this.board.round(s.Value()*4.5,2);},
function(){return this.board.round(s.Value()*(-1),2);},
function(){return this.board.round(s.Value()*3,2);},
function(){return this.board.round(s.Value()*2,2);},
function(){return this.board.round(s.Value()*(-0.5),2);},
function(){return this.board.round(s.Value()*5.5,2);},
function(){return this.board.round(s.Value()*2.5,2);},
function(){return this.board.round(s.Value()*(-0.75),2);},
function(){return this.board.round(s.Value()*(3.5),2);},
function(){return this.board.round(s.Value()*(2),2);},
function(){return this.board.round(s.Value()*(-1.25),2);}
];
var chart = board.createElement('chart', [f], {chartStyle:'bar',width:0.8,labels:f});
chart[0][0].setProperty('fillColor:#8E1B77');
chart[0][1].setProperty('fillColor:#BE1679');
chart[0][2].setProperty('fillColor:#DC1765');
chart[0][3].setProperty('fillColor:#DA2130');
chart[0][4].setProperty('fillColor:#DB311B');
chart[0][5].setProperty('fillColor:#DF4917');
chart[0][6].setProperty('fillColor:#E36317');
chart[0][7].setProperty('fillColor:#E87F1A');
chart[0][8].setProperty('fillColor:#F1B112');
chart[0][9].setProperty('fillColor:#FCF302');
chart[0][10].setProperty('fillColor:#C1E212');

var dataArr = [4,1,3,2,5,6.5,1.5,2,0.5,1.5,-1];
var chart2 = board.createElement('chart', dataArr, {chartStyle:'line,point'});
chart2[0].setProperty('strokeColor:black','strokeWidth:2pt');
for(var i=0; i<11;i++) {
chart2[1][i].setProperty('strokeColor:black','fillColor:white','style:9','strokeWidth:2pt');
}
board.unsuspendUpdate();

</jsxgraph>

===The JavaScript code===

<source lang="xml">
<jsxgraph width="700" height="600" box="box">
board = JXG.JSXGraph.initBoard('box', {originX: 50, originY: 450, unitX: 50, unitY: 50, axis:false});
board.suspendUpdate();
board.createElement('axis', [[0,0], [1,0]], {strokeColor:'black'});
board.createElement('axis', [[0,0], [0,1]], {strokeColor:'black'});

var s = board.createElement('slider', [[8,7],[11,7],[1,1,1.5]], {name:'S',strokeColor:'black',fillColor:'white'});
var f = [function(){return this.board.round(s.Value()*4.5,2);},
function(){return this.board.round(s.Value()*(-1),2);},
function(){return this.board.round(s.Value()*3,2);},
function(){return this.board.round(s.Value()*2,2);},
function(){return this.board.round(s.Value()*(-0.5),2);},
function(){return this.board.round(s.Value()*5.5,2);},
function(){return this.board.round(s.Value()*2.5,2);},
function(){return this.board.round(s.Value()*(-0.75),2);},
function(){return this.board.round(s.Value()*(3.5),2);},
function(){return this.board.round(s.Value()*(2),2);},
function(){return this.board.round(s.Value()*(-1.25),2);}
];
var chart = board.createElement('chart', [f], {chartStyle:'bar',width:0.8,labels:f});
chart[0][0].setProperty('fillColor:#8E1B77');
chart[0][1].setProperty('fillColor:#BE1679');
chart[0][2].setProperty('fillColor:#DC1765');
chart[0][3].setProperty('fillColor:#DA2130');
chart[0][4].setProperty('fillColor:#DB311B');
chart[0][5].setProperty('fillColor:#DF4917');
chart[0][6].setProperty('fillColor:#E36317');
chart[0][7].setProperty('fillColor:#E87F1A');
chart[0][8].setProperty('fillColor:#F1B112');
chart[0][9].setProperty('fillColor:#FCF302');
chart[0][10].setProperty('fillColor:#C1E212');

var dataArr = [4,1,3,2,5,6.5,1.5,2,0.5,1.5,-1];
var chart2 = board.createElement('chart', dataArr, {chartStyle:'line,point'});
chart2[0].setProperty('strokeColor:black','strokeWidth:2pt');
for(var i=0; i<11;i++) {
chart2[1][i].setProperty('strokeColor:black','fillColor:white','style:9','strokeWidth:2pt');
}
board.unsuspendUpdate();

</jsxgraph>
</source>

[[Category:Examples]]
[[Category:Charts]]

Dynamic bar chart

2009-08-26T11:38:45Z

Bianca:

<jsxgraph width="350" height="300" box="box">
board = JXG.JSXGraph.initBoard('box', //{originX: 50, originY: 450, unitX: 50, unitY: 50, axis:false});
{originX: 25, originY: 225, unitX: 25, unitY: 25, axis:false});
board.suspendUpdate();
board.createElement('axis', [[0,0], [1,0]], {strokeColor:'black'});
board.createElement('axis', [[0,0], [0,1]], {strokeColor:'black'});

var s = board.createElement('slider', [[8,7],[11,7],[1,1,1.5]], {name:'S',strokeColor:'black',fillColor:'white'});
var f = [function(){return this.board.round(s.Value()*4.5,2);},
function(){return this.board.round(s.Value()*(-1),2);},
function(){return this.board.round(s.Value()*3,2);},
function(){return this.board.round(s.Value()*2,2);},
function(){return this.board.round(s.Value()*(-0.5),2);},
function(){return this.board.round(s.Value()*5.5,2);},
function(){return this.board.round(s.Value()*2.5,2);},
function(){return this.board.round(s.Value()*(-0.75),2);},
function(){return this.board.round(s.Value()*(3.5),2);},
function(){return this.board.round(s.Value()*(2),2);},
function(){return this.board.round(s.Value()*(-1.25),2);}
];
var chart = board.createElement('chart', [f], {chartStyle:'bar',width:0.8,labels:f});
chart[0][0].setProperty('fillColor:#8E1B77');
chart[0][1].setProperty('fillColor:#BE1679');
chart[0][2].setProperty('fillColor:#DC1765');
chart[0][3].setProperty('fillColor:#DA2130');
chart[0][4].setProperty('fillColor:#DB311B');
chart[0][5].setProperty('fillColor:#DF4917');
chart[0][6].setProperty('fillColor:#E36317');
chart[0][7].setProperty('fillColor:#E87F1A');
chart[0][8].setProperty('fillColor:#F1B112');
chart[0][9].setProperty('fillColor:#FCF302');
chart[0][10].setProperty('fillColor:#C1E212');

var dataArr = [4,1,3,2,5,6.5,1.5,2,0.5,1.5,-1];
var chart2 = board.createElement('chart', dataArr, {chartStyle:'line,point'});
chart2[0].setProperty('strokeColor:black','strokeWidth:2pt');
for(var i=0; i<11;i++) {
chart2[1][i].setProperty('strokeColor:black','fillColor:white','style:9','strokeWidth:2pt');
}
board.unsuspendUpdate();

</jsxgraph>

===The JavaScript code===

<source lang="xml">
<jsxgraph width="700" height="600" box="box">
board = JXG.JSXGraph.initBoard('box', {originX: 50, originY: 450, unitX: 50, unitY: 50, axis:false});
board.suspendUpdate();
board.createElement('axis', [[0,0], [1,0]], {strokeColor:'black'});
board.createElement('axis', [[0,0], [0,1]], {strokeColor:'black'});

var s = board.createElement('slider', [[8,7],[11,7],[1,1,1.5]], {name:'S',strokeColor:'black',fillColor:'white'});
var f = [function(){return this.board.round(s.Value()*4.5,2);},
function(){return this.board.round(s.Value()*(-1),2);},
function(){return this.board.round(s.Value()*3,2);},
function(){return this.board.round(s.Value()*2,2);},
function(){return this.board.round(s.Value()*(-0.5),2);},
function(){return this.board.round(s.Value()*5.5,2);},
function(){return this.board.round(s.Value()*2.5,2);},
function(){return this.board.round(s.Value()*(-0.75),2);},
function(){return this.board.round(s.Value()*(3.5),2);},
function(){return this.board.round(s.Value()*(2),2);},
function(){return this.board.round(s.Value()*(-1.25),2);}
];
var chart = board.createElement('chart', [f], {chartStyle:'bar',width:0.8,labels:f});
chart[0][0].setProperty('fillColor:#8E1B77');
chart[0][1].setProperty('fillColor:#BE1679');
chart[0][2].setProperty('fillColor:#DC1765');
chart[0][3].setProperty('fillColor:#DA2130');
chart[0][4].setProperty('fillColor:#DB311B');
chart[0][5].setProperty('fillColor:#DF4917');
chart[0][6].setProperty('fillColor:#E36317');
chart[0][7].setProperty('fillColor:#E87F1A');
chart[0][8].setProperty('fillColor:#F1B112');
chart[0][9].setProperty('fillColor:#FCF302');
chart[0][10].setProperty('fillColor:#C1E212');

var dataArr = [4,1,3,2,5,6.5,1.5,2,0.5,1.5,-1];
var chart2 = board.createElement('chart', dataArr, {chartStyle:'line,point'});
chart2[0].setProperty('strokeColor:black','strokeWidth:2pt');
for(var i=0; i<11;i++) {
chart2[1][i].setProperty('strokeColor:black','fillColor:white','style:9','strokeWidth:2pt');
}
board.unsuspendUpdate();

</jsxgraph>
</source>

[[Category:Examples]]
[[Category:Charts]]

Spline chart with special highlight

2009-08-24T12:52:32Z

Bianca: New page: A mixed chart with splines and points. The points get special highlight and noHighlight-methods in order to have an animated highlighting with a growing resp. decreasing radius. <jsxgraph...

A mixed chart with splines and points. The points get special highlight and noHighlight-methods in order to have an animated highlighting with a growing resp. decreasing radius.

<jsxgraph width="600" height="600">
board = JXG.JSXGraph.initBoard('jxgbox', {originX: 50, originY: 500, unitX: 50, unitY: 50});
board.suspendUpdate();
var s = board.createElement('slider', [[1,9],[4,9],[1,1,1.5]], {name:'S',strokeColor:'black',fillColor:'white'});
var dataArr = [[0,1,2,3,4,5,6,7,8,9,10], [4,1,3,2,5,7,1.5,2,4.5,8,5]];
var axisx = board.createElement('axis', [[0,0], [1,0]], {strokeColor:'black'});
var axisy = board.createElement('axis', [[0,0], [0,1]], {strokeColor:'black'});
var chart = board.createElement('chart', dataArr, {chartStyle:'spline,point',labels:dataArr});
chart[0].setProperty({strokeColor:'#32CD32',highlightStrokeColor:'#32CD32',strokeWidth:'3px',shadow:true});
board.unsuspendUpdate();
var i;
for(i=0; i<chart[1].length; i++) {
chart[1][i].setProperty({face:'square',size:5,strokeColor:'#32CD32',fillColor:'#EEE9BF',strokeWidth:'3px',shadow:true});
chart[1][i].highlight = function() {
var ms = 200, to = 10, from = 5, difference, el = this, start = new Date, animate;
difference = (to-from)/ms;

function step() {
var time = new Date - start, current;
if(time < ms) {
current = from + time * difference;
el.visProp['size'] = current;
el.board.renderer.updatePoint(el);
animate = setTimeout(step,1);
}
else {
current = from + ms * difference;
el.visProp['size'] = current;
el.board.renderer.updatePoint(el);
clearTimeout(animate);
}
}
animate = setTimeout(step,1);

}
chart[1][i].noHighlight = function() {
var ms = 200, from = 10, to = 5, difference, el = this, start = new Date;
difference = (to-from)/ms;

function step() {
var time = new Date - start, current;
if(time < ms) {
current = from + time * difference;
el.visProp['size'] = current;
el.board.renderer.updatePoint(el);
animate = setTimeout(step,1);
}
else {
current = from + ms * difference;
el.visProp['size'] = current;
el.board.renderer.updatePoint(el);
clearTimeout(animate);
}
}
animate = setTimeout(step,1);
}
}
</jsxgraph>

===JavaScript code to produce this chart===
<source lang="xml">
<jsxgraph width="600" height="600">
board = JXG.JSXGraph.initBoard('jxgbox', {originX: 50, originY: 500, unitX: 50, unitY: 50});
board.suspendUpdate();
var s = board.createElement('slider', [[1,9],[4,9],[1,1,1.5]], {name:'S',strokeColor:'black',fillColor:'white'});
var dataArr = [[0,1,2,3,4,5,6,7,8,9,10], [4,1,3,2,5,7,1.5,2,4.5,8,5]];
var axisx = board.createElement('axis', [[0,0], [1,0]], {strokeColor:'black'});
var axisy = board.createElement('axis', [[0,0], [0,1]], {strokeColor:'black'});
var chart = board.createElement('chart', dataArr, {chartStyle:'spline,point',labels:dataArr});
chart[0].setProperty({strokeColor:'#32CD32',highlightStrokeColor:'#32CD32',strokeWidth:'3px',shadow:true});
board.unsuspendUpdate();
var i;
for(i=0; i<chart[1].length; i++) {
chart[1][i].setProperty({face:'square',size:5,strokeColor:'#32CD32',fillColor:'#EEE9BF',strokeWidth:'3px',shadow:true});
chart[1][i].highlight = function() {
var ms = 200, to = 10, from = 5, difference, el = this, start = new Date, animate;
difference = (to-from)/ms;

function step() {
var time = new Date - start, current;
if(time < ms) {
current = from + time * difference;
el.visProp['size'] = current;
el.board.renderer.updatePoint(el);
animate = setTimeout(step,1);
}
else {
current = from + ms * difference;
el.visProp['size'] = current;
el.board.renderer.updatePoint(el);
clearTimeout(animate);
}
}
animate = setTimeout(step,1);

}
chart[1][i].noHighlight = function() {
var ms = 200, from = 10, to = 5, difference, el = this, start = new Date;
difference = (to-from)/ms;

function step() {
var time = new Date - start, current;
if(time < ms) {
current = from + time * difference;
el.visProp['size'] = current;
el.board.renderer.updatePoint(el);
animate = setTimeout(step,1);
}
else {
current = from + ms * difference;
el.visProp['size'] = current;
el.board.renderer.updatePoint(el);
clearTimeout(animate);
}
}
animate = setTimeout(step,1);
}
}
</jsxgraph>
</source>

[[Category:Examples]]
[[Category:Charts]]

Showcases

2009-08-24T12:47:57Z

Bianca: /* Charts */

===Various topics===
* [["Infinity"]]
* [[Snake - the game]]
* [[Circles on circles]] using jQuery sliders
* [[Display stock quotes from Yahoo!]]

===Charts===
* [[Different chart styles]]
* [[Google style chart]]
* [[Dynamic bar chart]]
* [[Pie chart]]
* [[Spline chart with special highlight]]
* All examples from [[:Category:Charts]]

===Geometry===
* [[Sine and cosine]]
* [[Displaying GEONExT constructions]]
* [[Euler line]], [[Euler line II]]
* [[Apollonian circle packing]]
* [[Trigonometric functions]]
* [[Approximation of the circle area]]
* [[Circle approximation]]
* All examples from [[:Category:Geometry]]

===Statistics===
* [[Random points]]
* [[Data plot of live data via AJAX]]
* [[Analyze data with the Statistics software R]]
* [[Time series forecasting: double exponential smoothing]]
* [[Polynomial regression I]], [[Polynomial regression II]]

===Calculus and function plotting===
* [[Power Series for sine and cosine]]
* [[Lagrange interpolation]]
* [[Simple function plotter]], [[Parametric curve plotter]], [[Polar curve plotter]]
* [[Rational functions]]
* [[Riemann sums]], [[Arc length]], [[Continuous functions]]
* [[Cubic spline interpolation]]
* [[Interpolation: Neville's algorithm]]
* [[Population growth models]]
* All examples from [[:Category:Calculus]]

===Curves===
* [[Hypotrochoid]]
* [[Limacon|Limaçon of Pascal]]
* [[Watt curve|Watt's curve]]
* [[Archimedean spiral]]
* [[Lissajous curves]]
* All examples from [[:Category:Curves]]

===Fractals===
* [[Sierpinski triangle]]
* [[Koch curve]]
* All examples from [[:Category:Fractals]], see also [[Turtle Graphics]] and [[L-systems]]

===Turtle Graphics===
* [[n-gones]]
* [[L-systems]], or Lindenmayer Systems
* [[Epidemiology: The SIR model]] (Simulation of differential equations with turtle graphics)
* [[SIR model: swine flu]]
* [[Turtle spiral]]
* [[Random walks]]
* All examples from [[:Category:Turtle Graphics]]

Dynamic pie chart

2009-08-20T12:04:30Z

Bianca: Dynamic pie chart moved to Pie chart

#REDIRECT [[Pie chart]]

Pie chart

2009-08-20T12:04:30Z

Bianca: Dynamic pie chart moved to Pie chart

A pie chart with highlight on the whole sector, enlarging labels on highlight and a gradient fill.

<jsxgraph width="900" height="600">
var dataArr = [30,16,12,8,8,8,6,4,4,2];
var board = JXG.JSXGraph.initBoard('jxgbox', {originX: 250, originY: 450, unitX: 50, unitY: 50});
board.containerObj.style.backgroundColor = 'black';

var a = board.createElement('chart', dataArr,
{chartStyle:'pie', colorArray:['#DA2228','#E8801B','#FCF302','#8DC922','#15993C','#87CCEE','#0092CE','#0F408D','#6F1B75','#CA147A'],
fillOpacity:0.9,center:[5,2],strokeColor:'white',highlightStrokeColor:'white',strokeWidth:4,
labelArray:['Ruby','JavaScript', 'Shell','Python', 'PHP', 'C','Perl', 'C++', 'Java', 'Flash'],
highlightColorArray:['#E46F6A','#F9DF82','#F7FA7B','#B0D990','#69BF8E','#BDDDE4','#92C2DF','#637CB0','#AB91BC','#EB8EBF'],
highlightOnSector:true,
gradient:'linear'}
);
</jsxgraph>

===JavaScript code to produce this chart===
<source lang="xml">
<jsxgraph width="900" height="600">
var dataArr = [30,16,12,8,8,8,6,4,4,2];
var board = JXG.JSXGraph.initBoard('jxgbox', {originX: 250, originY: 450, unitX: 50, unitY: 50});
board.containerObj.style.backgroundColor = 'black';

var a = board.createElement('chart', dataArr,
{chartStyle:'pie',
colorArray:['#DA2228','#E8801B','#FCF302','#8DC922','#15993C','#87CCEE','#0092CE','#0F408D','#6F1B75','#CA147A'],
fillOpacity:0.9, center:[5,2], strokeColor:'white', highlightStrokeColor:'white', strokeWidth:4,
labelArray:['Ruby','JavaScript', 'Shell','Python', 'PHP', 'C','Perl', 'C++', 'Java', 'Flash'],
highlightColorArray:['#E46F6A','#F9DF82','#F7FA7B','#B0D990','#69BF8E','#BDDDE4','#92C2DF','#637CB0','#AB91BC','#EB8EBF'],
highlightOnSector:true,
gradient:'linear'}
);
</jsxgraph>
</source>

[[Category:Examples]]
[[Category:Charts]]

Showcases

2009-08-20T12:04:10Z

Bianca: /* Various topics */

===Various topics===
* [[Different chart styles]]
* [[Google style chart]]
* [[Dynamic bar chart]]
* [[Pie chart]]
* [["Infinity"]]
* [[Snake - the game]]
* [[Circles on circles]] using jQuery sliders

===Calculus and function plotting===
* [[Power Series for sine and cosine]]
* [[Lagrange interpolation]]
* [[Simple function plotter]]
* [[Continuous functions]]
* [[Rational functions]]
* [[Riemann sums]], [[Arc length]]
* [[Cubic spline interpolation]]
* [[Interpolation: Neville's algorithm]]
* [[Population growth models]]
* All examples from [[:Category:Calculus]]

===Geometry===
* [[Sine and cosine]]
* [[Displaying GEONExT constructions]]
* [[Euler line]], [[Euler line II]]
* [[Apollonian circle packing]]
* [[Trigonometric functions]]
* [[Approximation of the circle area]]
* [[Circle approximation]]
* All examples from [[:Category:Geometry]]

===Statistics===
* [[Random points]]
* [[Data plot of live data via AJAX]]
* [[Analyze data with the Statistics software R]]
* [[Time series forecasting: double exponential smoothing]]
* [[Polynomial regression I]], [[Polynomial regression II]]

===Curves===
* [[Parametric curve plotter]]
* [[Polar curve plotter]]
* [[Hypotrochoid]]
* [[Limacon|Limaçon of Pascal]]
* [[Watt curve|Watt's curve]]
* [[Archimedean spiral]]
* [[Lissajous curves]]
* All examples from [[:Category:Curves]]

===Fractals===
* [[Sierpinski triangle]]
* [[Koch curve]]
* All examples from [[:Category:Fractals]], see also [[Turtle Graphics]] and [[L-systems]]

===Turtle Graphics===
* [[n-gones]]
* [[L-systems]], or Lindenmayer Systems
* [[Epidemiology: The SIR model]] (Simulation of differential equations with turtle graphics)
* [[SIR model: swine flu]]
* [[Turtle spiral]]
* [[Random walks]]
* All examples from [[:Category:Turtle Graphics]]

Pie chart

2009-08-20T12:03:26Z

Bianca: New page: A pie chart with highlight on the whole sector, enlarging labels on highlight and a gradient fill. <jsxgraph width="900" height="600"> var dataArr = [30,16,12,8,8,8,6,4,4,2]; var ...

Showcases

2009-08-20T11:57:28Z

Bianca: /* Various topics */

===Various topics===
* [[Different chart styles]]
* [[Google style chart]]
* [[Dynamic bar chart]]
* [[Dynamic pie chart]]
* [["Infinity"]]
* [[Snake - the game]]
* [[Circles on circles]] using jQuery sliders

===Calculus and function plotting===
* [[Power Series for sine and cosine]]
* [[Lagrange interpolation]]
* [[Simple function plotter]]
* [[Continuous functions]]
* [[Rational functions]]
* [[Riemann sums]], [[Arc length]]
* [[Cubic spline interpolation]]
* [[Interpolation: Neville's algorithm]]
* [[Population growth models]]
* All examples from [[:Category:Calculus]]

===Geometry===
* [[Sine and cosine]]
* [[Displaying GEONExT constructions]]
* [[Euler line]], [[Euler line II]]
* [[Apollonian circle packing]]
* [[Trigonometric functions]]
* [[Approximation of the circle area]]
* [[Circle approximation]]
* All examples from [[:Category:Geometry]]

===Statistics===
* [[Random points]]
* [[Data plot of live data via AJAX]]
* [[Analyze data with the Statistics software R]]
* [[Time series forecasting: double exponential smoothing]]
* [[Polynomial regression I]], [[Polynomial regression II]]

===Curves===
* [[Parametric curve plotter]]
* [[Polar curve plotter]]
* [[Hypotrochoid]]
* [[Limacon|Limaçon of Pascal]]
* [[Watt curve|Watt's curve]]
* [[Archimedean spiral]]
* [[Lissajous curves]]
* All examples from [[:Category:Curves]]

===Fractals===
* [[Sierpinski triangle]]
* [[Koch curve]]
* All examples from [[:Category:Fractals]], see also [[Turtle Graphics]] and [[L-systems]]

===Turtle Graphics===
* [[n-gones]]
* [[L-systems]], or Lindenmayer Systems
* [[Epidemiology: The SIR model]] (Simulation of differential equations with turtle graphics)
* [[SIR model: swine flu]]
* [[Turtle spiral]]
* [[Random walks]]
* All examples from [[:Category:Turtle Graphics]]

Showcases

2009-08-20T11:57:04Z

Bianca: /* Various topics */

===Various topics===
* [[Different chart styles]]
* [[Google style chart]]
* [[Dynamic bar chart]]
* [["Infinity"]]
* [[Snake - the game]]
* [[Circles on circles]] using jQuery sliders

===Calculus and function plotting===
* [[Power Series for sine and cosine]]
* [[Lagrange interpolation]]
* [[Simple function plotter]]
* [[Continuous functions]]
* [[Rational functions]]
* [[Riemann sums]], [[Arc length]]
* [[Cubic spline interpolation]]
* [[Interpolation: Neville's algorithm]]
* [[Population growth models]]
* All examples from [[:Category:Calculus]]

===Geometry===
* [[Sine and cosine]]
* [[Displaying GEONExT constructions]]
* [[Euler line]], [[Euler line II]]
* [[Apollonian circle packing]]
* [[Trigonometric functions]]
* [[Approximation of the circle area]]
* [[Circle approximation]]
* All examples from [[:Category:Geometry]]

===Statistics===
* [[Random points]]
* [[Data plot of live data via AJAX]]
* [[Analyze data with the Statistics software R]]
* [[Time series forecasting: double exponential smoothing]]
* [[Polynomial regression I]], [[Polynomial regression II]]

===Curves===
* [[Parametric curve plotter]]
* [[Polar curve plotter]]
* [[Hypotrochoid]]
* [[Limacon|Limaçon of Pascal]]
* [[Watt curve|Watt's curve]]
* [[Archimedean spiral]]
* [[Lissajous curves]]
* All examples from [[:Category:Curves]]

===Fractals===
* [[Sierpinski triangle]]
* [[Koch curve]]
* All examples from [[:Category:Fractals]], see also [[Turtle Graphics]] and [[L-systems]]

===Turtle Graphics===
* [[n-gones]]
* [[L-systems]], or Lindenmayer Systems
* [[Epidemiology: The SIR model]] (Simulation of differential equations with turtle graphics)
* [[SIR model: swine flu]]
* [[Turtle spiral]]
* [[Random walks]]
* All examples from [[:Category:Turtle Graphics]]