http://jsxgraph.org/wiki/api.php?action=feedcontributions&user=Bianca&feedformat=atom
JSXGraph Wiki - User contributions [en]
2024-03-29T05:07:25Z
User contributions
MediaWiki 1.40.1
http://jsxgraph.org/wiki/index.php?title=User_talk:GlendaPratt&diff=4841
User talk:GlendaPratt
2011-01-12T15:01:06Z
<p>Bianca: Removing all content from page</p>
<hr />
<div></div>
Bianca
http://jsxgraph.org/wiki/index.php?title=User:Dejesustlco&diff=4657
User:Dejesustlco
2010-10-20T17:21:21Z
<p>Bianca: Removing all content from page</p>
<hr />
<div></div>
Bianca
http://jsxgraph.org/wiki/index.php?title=Tetris&diff=4356
Tetris
2010-09-01T13:00:16Z
<p>Bianca: </p>
<hr />
<div><html><br />
<style type="text/css"><br />
.jxgbox {<br />
overflow:hidden;<br />
background-color:#ffffff;<br />
border-style:solid;<br />
border-width:2px;<br />
border-color:#000000;<br />
}<br />
body {<br />
font-family:Arial;<br />
}<br />
div {<br />
float:left;<br />
margin-top:10px;<br />
margin-right:50px;<br />
}<br />
</style> <br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script><br />
<br />
<script type="text/javascript"><br />
var started = false;<br />
var board = JXG.JSXGraph.initBoard('jxgbox', {originX: 0, originY: 500, unitX: 25, unitY: 25, showCopyright:false, showNavigation:false});<br />
var board2 = JXG.JSXGraph.initBoard('jxgbox2', {originX: 0, originY: 125, unitX: 25, unitY: 25, showCopyright:false, showNavigation:false});<br />
var usedPolys = new Array(10);<br />
var i,j;<br />
for(i=0;i<10;i++) {<br />
usedPolys[i] = new Array(20);<br />
for(j=0;j<20;j++) {<br />
usedPolys[i][j] = 0;<br />
}<br />
}<br />
var colors = ['none','#DC143C','#FF8C00','#87CEEB','#FFD700','#4B0082','#0000CD','#32CD32'];<br />
<br />
function drawPointsAndPolys(board,width,height,vorschau) {<br />
var i,j,pArr = {};<br />
board.suspendUpdate();<br />
for(i=0;i<=width;i++) {<br />
for(j=0; j<=height;j++) {<br />
pArr[i+''+j] = board.createElement('point',[i,j],{withLabel:false,face:'plus',draft:true});<br />
}<br />
}<br />
for(i=0;i<width;i++) {<br />
for(j=0; j<height;j++) {<br />
var idpoly = 'poly_'+i+'_'+j;<br />
if(vorschau) {<br />
idpoly = 'poly_'+i+'_'+j+'_v';<br />
}<br />
var poly = board.createElement('polygon',<br />
[pArr[i+''+j], pArr[(i+1)+''+j], pArr[(i+1)+''+(j+1)], pArr[i+''+(j+1)]],<br />
{fillColor:'white',visible:false,id:idpoly});<br />
for(k=0;k<4;k++) {<br />
poly.borders[k].setProperty('strokeColor:#666666');<br />
} <br />
}<br />
}<br />
board.unsuspendUpdate();<br />
return pArr;<br />
} <br />
<br />
function shape(style) {<br />
if(style == 1) { // I<br />
return {face:[[1,1,1,1],[0,0,0,0],[0,0,0,0],[0,0,0,0]],size:4};<br />
}<br />
else if(style == 2) { // T<br />
return {face:[[2,0,0],[2,2,0],[2,0,0]],size:3};<br />
}<br />
else if(style == 3) { // O<br />
return {face:[[3,3],[3,3]],size:2};<br />
}<br />
else if(style == 4) { // L<br />
return {face:[[4,4,4],[4,0,0],[0,0,0]],size:3};<br />
} <br />
else if(style == 5) { // J<br />
return {face:[[5,0,0],[5,5,5],[0,0,0]],size:3};<br />
}<br />
else if(style == 6) { // S<br />
return {face:[[6,0,0],[6,6,0],[0,6,0]],size:3};<br />
} <br />
else if(style == 7) { // Z<br />
return {face:[[0,7,0],[7,7,0],[7,0,0]],size:3};<br />
} <br />
} <br />
<br />
function compareWithAbsoluteShape(s,posX,posY) {<br />
for(i=0;i<s.size;i++) {<br />
for(j=0;j<s.size;j++) {<br />
if(s.face[i][j] != 0) {<br />
if(i+posX < 0 || i+posX > 9) {<br />
return false;<br />
}<br />
if(j+posY < 0 || j+posY > 19) {<br />
return false;<br />
} <br />
if(usedPolys[i+posX][j+posY] == 1) {<br />
return false;<br />
}<br />
}<br />
}<br />
}<br />
return true;<br />
}<br />
<br />
function drawShape(s,posX,posY) {<br />
board.suspendUpdate();<br />
var i,j;<br />
for(i=0;i<s.size;i++) {<br />
for(j=0;j<s.size;j++) {<br />
if(s.face[i][j] != 0) {<br />
showCube(i+posX,j+posY,colors[s.face[i][j]]);<br />
usedPolys[i+posX][j+posY] = 1;<br />
}<br />
}<br />
}<br />
board.unsuspendUpdate(); <br />
return {shape:s,x:posX,y:posY};<br />
}<br />
<br />
function removeShape(s,posX,posY) {<br />
board.suspendUpdate();<br />
var i,j, shape = new Array();<br />
for(i=0;i<s.size;i++) {<br />
for(j=0;j<s.size;j++) {<br />
if(s.face[i][j] != 0) {<br />
hideCube(i+posX,j+posY);<br />
usedPolys[i+posX][j+posY] = 0;<br />
}<br />
}<br />
}<br />
board.unsuspendUpdate(); <br />
return {shape:s,x:posX,y:posY};<br />
} <br />
<br />
function drawVorschauShape(s,posX,posY) {<br />
board2.suspendUpdate();<br />
var i,j;<br />
for(i=0;i<s.size;i++) {<br />
for(j=0;j<s.size;j++) {<br />
if(s.face[i][j] != 0) {<br />
showCubeV(i+posX,j+posY,colors[s.face[i][j]]);<br />
}<br />
}<br />
}<br />
board2.unsuspendUpdate();<br />
} <br />
<br />
function clearVorschau() {<br />
for(i=0;i<5;i++) {<br />
for(j=0;j<5;j++) {<br />
hideCubeV(i,j);<br />
}<br />
}<br />
}<br />
<br />
function showCube(posX,posY,color) {<br />
board.objects['poly_'+posX+'_'+posY].setProperty('visible:true');<br />
board.objects['poly_'+posX+'_'+posY].setProperty('fillColor:'+color);<br />
}<br />
<br />
function hideCube(posX,posY) {<br />
board.objects['poly_'+posX+'_'+posY].setProperty('visible:false');<br />
} <br />
<br />
function showCubeV(posX,posY,color) {<br />
board2.objects['poly_'+posX+'_'+posY+'_v'].setProperty('visible:true');<br />
board2.objects['poly_'+posX+'_'+posY+'_v'].setProperty('fillColor:'+color);<br />
}<br />
<br />
function hideCubeV(posX,posY) {<br />
board2.objects['poly_'+posX+'_'+posY+'_v'].setProperty('visible:false');<br />
} <br />
<br />
function rotate(shape) { // gegen den Uhrzeigersinn drehen<br />
if(shape.size == 2) {<br />
shape.face = [[shape.face[0][1],shape.face[1][1]],<br />
[shape.face[0][0],shape.face[1][1]]];<br />
}<br />
else if(shape.size == 3) {<br />
shape.face = [[shape.face[0][2],shape.face[1][2],shape.face[2][2]],<br />
[shape.face[0][1],shape.face[1][1],shape.face[2][1]],<br />
[shape.face[0][0],shape.face[1][0],shape.face[2][0]]];<br />
}<br />
else if(shape.size == 4) {<br />
shape.face = [[shape.face[0][3],shape.face[1][3],shape.face[2][3],shape.face[3][3]],<br />
[shape.face[0][2],shape.face[1][2],shape.face[2][2],shape.face[3][2]],<br />
[shape.face[0][1],shape.face[1][1],shape.face[2][1],shape.face[3][1]],<br />
[shape.face[0][0],shape.face[1][0],shape.face[2][0],shape.face[3][0]]];<br />
} <br />
return shape;<br />
}<br />
<br />
function getRandom() {<br />
return parseInt(1+Math.random()*7);<br />
}<br />
<br />
function testLine(i) {<br />
var j;<br />
for(j=0; j<10; j++) {<br />
if(usedPolys[j][i] == 0) {<br />
return false;<br />
}<br />
}<br />
return true;<br />
}<br />
<br />
function testLines() {<br />
var i, arr = new Array();<br />
for(i=0; i<20; i++) {<br />
if(testLine(i)) {<br />
arr.push(i);<br />
}<br />
}<br />
return arr;<br />
}<br />
<br />
/* doesn't work properly */<br />
function removeLines() {<br />
var arr = testLines(),i,j,k, line;<br />
if(arr.length > 0) {<br />
board.suspendUpdate();<br />
if(arr.length == 1) {<br />
score += (level+1)*40;<br />
}<br />
else if(arr.length == 2) {<br />
score += (level+1)*100;<br />
}<br />
else if(arr.length == 3) {<br />
score += (level+1)*300;<br />
}<br />
else if(arr.length == 4) {<br />
score += (level+1)*1200;<br />
} <br />
scoreNode.innerHTML = score; <br />
for(i=0;i<arr.length;i++) {<br />
line = arr[i];<br />
for(j=line+1-i;j<20;j++) {<br />
for(k=0;k<10;k++) {<br />
if(usedPolys[k][j] == 1) {<br />
showCube(k,j-1,board.objects['poly_'+k+'_'+j].visProp['fillColor']);<br />
usedPolys[k][j-1] = 1;<br />
hideCube(k,j);<br />
usedPolys[k][j] = 0;<br />
}<br />
else {<br />
hideCube(k,j-1);<br />
usedPolys[k][j-1] = 0;<br />
}<br />
}<br />
}<br />
}<br />
board.unsuspendUpdate();<br />
}<br />
}<br />
<br />
function keyDown(Evt) {<br />
var code;<br />
if (!Evt) {<br />
Evt = window.event;<br />
}<br />
if (Evt.which) {<br />
code = Evt.which;<br />
} else if (Evt.keyCode) {<br />
code = Evt.keyCode;<br />
}<br />
// 37: left, 38: up, 39: right, 40: down<br />
if (code==38) { <br />
removeShape(curShape.shape,curShape.x,curShape.y);<br />
// echte Kopie anlegen...<br />
var s = {};<br />
s.size = curShape.shape.size;<br />
s.face = (new Array()).concat(curShape.shape.face);<br />
if(compareWithAbsoluteShape(rotate(s),curShape.x,curShape.y)) {<br />
curShape = drawShape(rotate(curShape.shape),curShape.x,curShape.y);<br />
}<br />
else {<br />
curShape = drawShape(curShape.shape,curShape.x,curShape.y);<br />
}<br />
return false;<br />
}<br />
else if(code==39) {<br />
removeShape(curShape.shape,curShape.x,curShape.y); <br />
if(compareWithAbsoluteShape(curShape.shape,curShape.x+1,curShape.y)) { <br />
curShape = drawShape(curShape.shape,curShape.x+1,curShape.y);<br />
}<br />
else {<br />
curShape = drawShape(curShape.shape,curShape.x,curShape.y);<br />
}<br />
return false;<br />
}<br />
else if(code==37) {<br />
removeShape(curShape.shape,curShape.x,curShape.y);<br />
if(compareWithAbsoluteShape(curShape.shape,curShape.x-1,curShape.y)) { <br />
curShape = drawShape(curShape.shape,curShape.x-1,curShape.y);<br />
}<br />
else {<br />
curShape = drawShape(curShape.shape,curShape.x,curShape.y);<br />
}<br />
return false;<br />
} <br />
else if(code==40) {<br />
removeShape(curShape.shape,curShape.x,curShape.y);<br />
if(compareWithAbsoluteShape(curShape.shape,curShape.x,curShape.y-1)) { <br />
curShape = drawShape(curShape.shape,curShape.x,curShape.y-1);<br />
score += (level + 1);<br />
scoreNode.innerHTML = score;<br />
}<br />
else {<br />
curShape = drawShape(curShape.shape,curShape.x,curShape.y);<br />
}<br />
return false;<br />
} <br />
else if(code==32) { // Space<br />
if(curShape.y > 0) {<br />
removeShape(curShape.shape,curShape.x,curShape.y);<br />
var i=curShape.y-1; <br />
var min = curShape.y;<br />
while(i>=0) {<br />
if(compareWithAbsoluteShape(curShape.shape,curShape.x,i)) { <br />
min = i<br />
}<br />
else {<br />
i=0;<br />
}<br />
i--;<br />
}<br />
score += (level + 1)*(curShape.y-min);<br />
scoreNode.innerHTML = score; <br />
curShape = drawShape(curShape.shape,curShape.x,min);<br />
}<br />
}<br />
return true;<br />
}<br />
<br />
function gameOver() {<br />
for(i=0;i<10; i++) {<br />
if(usedPolys[i][18] == 1) {<br />
return true;<br />
}<br />
}<br />
return false;<br />
}<br />
<br />
function goDownByTime() {<br />
removeShape(curShape.shape,curShape.x,curShape.y);<br />
if(compareWithAbsoluteShape(curShape.shape,curShape.x,curShape.y-1)) { <br />
curShape = drawShape(curShape.shape,curShape.x,curShape.y-1);<br />
setTimeout(goDownByTime,timeOutTimes[level]);<br />
}<br />
else {<br />
curShape = drawShape(curShape.shape,curShape.x,curShape.y);<br />
document.getElementById('score').innerHTML<br />
if(!gameOver()) {<br />
removeLines();<br />
if(compareWithAbsoluteShape(shape(next),4,16)) {<br />
curShape = drawShape(shape(next),4,16);<br />
next = getRandom();<br />
clearVorschau();<br />
drawVorschauShape(shape(next),1,1);<br />
setTimeout(goDownByTime,timeOutTimes[level]);<br />
}<br />
else {<br />
curShape = drawShape(shape(next),4,16);<br />
alert("Game Over!");<br />
}<br />
}<br />
else {<br />
alert("Game Over!");<br />
}<br />
}<br />
<br />
}<br />
<br />
function levelUp() {<br />
if(level < 15) {<br />
level += 1;<br />
document.getElementById('level').innerHTML = level;<br />
setTimeout(levelUp,1000*30);<br />
}<br />
}<br />
var pArray = drawPointsAndPolys(board,10,20,false);<br />
drawPointsAndPolys(board2,5,5,true);<br />
<br />
var score = 0;<br />
var scoreNode = document.getElementById('score');<br />
var level = 1;<br />
var timeOutTimes = [2000,1000,900,800,700,600,500,400,350,300,250,200,150,100,50,25]<br />
var curShape;<br />
var next;<br />
<br />
function startTetris() {<br />
document.getElementById('jxgbox').focus();<br />
if(!started) {<br />
started = true;<br />
curShape = drawShape(shape(getRandom()),4,16); <br />
next = getRandom(); <br />
drawVorschauShape(shape(next),1,1);<br />
<br />
document.onkeydown = keyDown; <br />
setTimeout(goDownByTime,timeOutTimes[level]);<br />
setTimeout(levelUp,1000*30);<br />
}<br />
}<br />
</script><br />
</html></div>
Bianca
http://jsxgraph.org/wiki/index.php?title=Tetris&diff=4355
Tetris
2010-09-01T12:44:25Z
<p>Bianca: Removing all content from page</p>
<hr />
<div></div>
Bianca
http://jsxgraph.org/wiki/index.php?title=Tetris&diff=4354
Tetris
2010-09-01T12:40:10Z
<p>Bianca: </p>
<hr />
<div>Even Tetris can be implemented with JSXGraph.<br />
<html><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script><br />
<style type="text/css"><br />
.jxgbox {<br />
overflow:hidden;<br />
background-color:#ffffff;<br />
border-style:solid;<br />
border-width:2px;<br />
border-color:#000000;<br />
}<br />
body {<br />
font-family:Arial;<br />
}<br />
</style> <br />
<br />
<script type="text/javascript"><br />
/* <![CDATA[ */<br />
var started = false;<br />
var board = JXG.JSXGraph.initBoard('jxgbox', {originX: 0, originY: 500, unitX: 25, unitY: 25, showCopyright:false, showNavigation:false}); // Spielfeld 10x20<br />
var board2 = JXG.JSXGraph.initBoard('jxgbox2', {originX: 0, originY: 125, unitX: 25, unitY: 25, showCopyright:false, showNavigation:false});<br />
var usedPolys = new Array(10);<br />
var i,j;<br />
for(i=0;i<10;i++) {<br />
usedPolys[i] = new Array(20);<br />
for(j=0;j<20;j++) {<br />
usedPolys[i][j] = 0;<br />
}<br />
}<br />
var colors = ['none','#DC143C','#FF8C00','#87CEEB','#FFD700','#4B0082','#0000CD','#32CD32'];<br />
<br />
function drawPointsAndPolys(board,width,height,vorschau) {<br />
var i,j,pArr = {};<br />
board.suspendUpdate();<br />
for(i=0;i<=width;i++) {<br />
for(j=0; j<=height;j++) {<br />
pArr[i+''+j] = board.createElement('point',[i,j],{withLabel:false,face:'plus',draft:true});<br />
}<br />
}<br />
for(i=0;i<width;i++) {<br />
for(j=0; j<height;j++) {<br />
var idpoly = 'poly_'+i+'_'+j;<br />
if(vorschau) {<br />
idpoly = 'poly_'+i+'_'+j+'_v';<br />
}<br />
var poly = board.createElement('polygon',<br />
[pArr[i+''+j], pArr[(i+1)+''+j], pArr[(i+1)+''+(j+1)], pArr[i+''+(j+1)]],<br />
{fillColor:'white',visible:false,id:idpoly});<br />
for(k=0;k<4;k++) {<br />
poly.borders[k].setProperty('strokeColor:#666666');<br />
} <br />
}<br />
}<br />
board.unsuspendUpdate();<br />
return pArr;<br />
} <br />
<br />
function shape(style) {<br />
if(style == 1) { // I<br />
return {face:[[1,1,1,1],[0,0,0,0],[0,0,0,0],[0,0,0,0]],size:4};<br />
}<br />
else if(style == 2) { // T<br />
return {face:[[2,0,0],[2,2,0],[2,0,0]],size:3};<br />
}<br />
else if(style == 3) { // O<br />
return {face:[[3,3],[3,3]],size:2};<br />
}<br />
else if(style == 4) { // L<br />
return {face:[[4,4,4],[4,0,0],[0,0,0]],size:3};<br />
} <br />
else if(style == 5) { // J<br />
return {face:[[5,0,0],[5,5,5],[0,0,0]],size:3};<br />
}<br />
else if(style == 6) { // S<br />
return {face:[[6,0,0],[6,6,0],[0,6,0]],size:3};<br />
} <br />
else if(style == 7) { // Z<br />
return {face:[[0,7,0],[7,7,0],[7,0,0]],size:3};<br />
} <br />
} <br />
<br />
function compareWithAbsoluteShape(s,posX,posY) {<br />
for(i=0;i<s.size;i++) {<br />
for(j=0;j<s.size;j++) {<br />
if(s.face[i][j] != 0) {<br />
if(i+posX < 0 || i+posX > 9) {<br />
return false;<br />
}<br />
if(j+posY < 0 || j+posY > 19) {<br />
return false;<br />
} <br />
if(usedPolys[i+posX][j+posY] == 1) {<br />
return false;<br />
}<br />
}<br />
}<br />
}<br />
return true;<br />
}<br />
<br />
function drawShape(s,posX,posY) {<br />
board.suspendUpdate();<br />
var i,j;<br />
for(i=0;i<s.size;i++) {<br />
for(j=0;j<s.size;j++) {<br />
if(s.face[i][j] != 0) {<br />
showCube(i+posX,j+posY,colors[s.face[i][j]]);<br />
usedPolys[i+posX][j+posY] = 1;<br />
}<br />
}<br />
}<br />
board.unsuspendUpdate(); <br />
return {shape:s,x:posX,y:posY};<br />
}<br />
<br />
function removeShape(s,posX,posY) {<br />
board.suspendUpdate();<br />
var i,j, shape = new Array();<br />
for(i=0;i<s.size;i++) {<br />
for(j=0;j<s.size;j++) {<br />
if(s.face[i][j] != 0) {<br />
hideCube(i+posX,j+posY);<br />
usedPolys[i+posX][j+posY] = 0;<br />
}<br />
}<br />
}<br />
board.unsuspendUpdate(); <br />
return {shape:s,x:posX,y:posY};<br />
} <br />
<br />
function drawVorschauShape(s,posX,posY) {<br />
board2.suspendUpdate();<br />
var i,j;<br />
for(i=0;i<s.size;i++) {<br />
for(j=0;j<s.size;j++) {<br />
if(s.face[i][j] != 0) {<br />
showCubeV(i+posX,j+posY,colors[s.face[i][j]]);<br />
}<br />
}<br />
}<br />
board2.unsuspendUpdate();<br />
} <br />
<br />
function clearVorschau() {<br />
for(i=0;i<5;i++) {<br />
for(j=0;j<5;j++) {<br />
hideCubeV(i,j);<br />
}<br />
}<br />
}<br />
<br />
function showCube(posX,posY,color) {<br />
board.objects['poly_'+posX+'_'+posY].setProperty('visible:true');<br />
board.objects['poly_'+posX+'_'+posY].setProperty('fillColor:'+color);<br />
}<br />
<br />
function hideCube(posX,posY) {<br />
board.objects['poly_'+posX+'_'+posY].setProperty('visible:false');<br />
} <br />
<br />
function showCubeV(posX,posY,color) {<br />
board2.objects['poly_'+posX+'_'+posY+'_v'].setProperty('visible:true');<br />
board2.objects['poly_'+posX+'_'+posY+'_v'].setProperty('fillColor:'+color);<br />
}<br />
<br />
function hideCubeV(posX,posY) {<br />
board2.objects['poly_'+posX+'_'+posY+'_v'].setProperty('visible:false');<br />
} <br />
<br />
function rotate(shape) { // gegen den Uhrzeigersinn drehen<br />
if(shape.size == 2) {<br />
shape.face = [[shape.face[0][1],shape.face[1][1]],<br />
[shape.face[0][0],shape.face[1][1]]];<br />
}<br />
else if(shape.size == 3) {<br />
shape.face = [[shape.face[0][2],shape.face[1][2],shape.face[2][2]],<br />
[shape.face[0][1],shape.face[1][1],shape.face[2][1]],<br />
[shape.face[0][0],shape.face[1][0],shape.face[2][0]]];<br />
}<br />
else if(shape.size == 4) {<br />
shape.face = [[shape.face[0][3],shape.face[1][3],shape.face[2][3],shape.face[3][3]],<br />
[shape.face[0][2],shape.face[1][2],shape.face[2][2],shape.face[3][2]],<br />
[shape.face[0][1],shape.face[1][1],shape.face[2][1],shape.face[3][1]],<br />
[shape.face[0][0],shape.face[1][0],shape.face[2][0],shape.face[3][0]]];<br />
} <br />
return shape;<br />
}<br />
<br />
function getRandom() {<br />
return parseInt(1+Math.random()*7);<br />
}<br />
<br />
function testLine(i) {<br />
var j;<br />
for(j=0; j<10; j++) {<br />
if(usedPolys[j][i] == 0) {<br />
return false;<br />
}<br />
}<br />
return true;<br />
}<br />
<br />
function testLines() {<br />
var i, arr = new Array();<br />
for(i=0; i<20; i++) {<br />
if(testLine(i)) {<br />
arr.push(i);<br />
}<br />
}<br />
return arr;<br />
}<br />
<br />
/* doesn't work properly */<br />
function removeLines() {<br />
var arr = testLines(),i,j,k, line;<br />
if(arr.length > 0) {<br />
board.suspendUpdate();<br />
if(arr.length == 1) {<br />
score += (level+1)*40;<br />
}<br />
else if(arr.length == 2) {<br />
score += (level+1)*100;<br />
}<br />
else if(arr.length == 3) {<br />
score += (level+1)*300;<br />
}<br />
else if(arr.length == 4) {<br />
score += (level+1)*1200;<br />
} <br />
scoreNode.innerHTML = score; <br />
for(i=0;i<arr.length;i++) {<br />
line = arr[i];<br />
for(j=line+1-i;j<20;j++) {<br />
for(k=0;k<10;k++) {<br />
if(usedPolys[k][j] == 1) {<br />
showCube(k,j-1,board.objects['poly_'+k+'_'+j].visProp['fillColor']);<br />
usedPolys[k][j-1] = 1;<br />
hideCube(k,j);<br />
usedPolys[k][j] = 0;<br />
}<br />
else {<br />
hideCube(k,j-1);<br />
usedPolys[k][j-1] = 0;<br />
}<br />
}<br />
}<br />
}<br />
board.unsuspendUpdate();<br />
}<br />
}<br />
<br />
function keyDown(Evt) {<br />
var code;<br />
if (!Evt) {<br />
Evt = window.event;<br />
}<br />
if (Evt.which) {<br />
code = Evt.which;<br />
} else if (Evt.keyCode) {<br />
code = Evt.keyCode;<br />
}<br />
// 37: left, 38: up, 39: right, 40: down<br />
if (code==38) { <br />
removeShape(curShape.shape,curShape.x,curShape.y);<br />
// echte Kopie anlegen...<br />
var s = {};<br />
s.size = curShape.shape.size;<br />
s.face = (new Array()).concat(curShape.shape.face);<br />
if(compareWithAbsoluteShape(rotate(s),curShape.x,curShape.y)) {<br />
curShape = drawShape(rotate(curShape.shape),curShape.x,curShape.y);<br />
}<br />
else {<br />
curShape = drawShape(curShape.shape,curShape.x,curShape.y);<br />
}<br />
return false;<br />
}<br />
else if(code==39) {<br />
removeShape(curShape.shape,curShape.x,curShape.y); <br />
if(compareWithAbsoluteShape(curShape.shape,curShape.x+1,curShape.y)) { <br />
curShape = drawShape(curShape.shape,curShape.x+1,curShape.y);<br />
}<br />
else {<br />
curShape = drawShape(curShape.shape,curShape.x,curShape.y);<br />
}<br />
return false;<br />
}<br />
else if(code==37) {<br />
removeShape(curShape.shape,curShape.x,curShape.y);<br />
if(compareWithAbsoluteShape(curShape.shape,curShape.x-1,curShape.y)) { <br />
curShape = drawShape(curShape.shape,curShape.x-1,curShape.y);<br />
}<br />
else {<br />
curShape = drawShape(curShape.shape,curShape.x,curShape.y);<br />
}<br />
return false;<br />
} <br />
else if(code==40) {<br />
removeShape(curShape.shape,curShape.x,curShape.y);<br />
if(compareWithAbsoluteShape(curShape.shape,curShape.x,curShape.y-1)) { <br />
curShape = drawShape(curShape.shape,curShape.x,curShape.y-1);<br />
score += (level + 1);<br />
scoreNode.innerHTML = score;<br />
}<br />
else {<br />
curShape = drawShape(curShape.shape,curShape.x,curShape.y);<br />
}<br />
return false;<br />
} <br />
else if(code==32) { // Space<br />
if(curShape.y > 0) {<br />
removeShape(curShape.shape,curShape.x,curShape.y);<br />
var i=curShape.y-1; <br />
var min = curShape.y;<br />
while(i>=0) {<br />
if(compareWithAbsoluteShape(curShape.shape,curShape.x,i)) { <br />
min = i<br />
}<br />
else {<br />
i=0;<br />
}<br />
i--;<br />
}<br />
score += (level + 1)*(curShape.y-min);<br />
scoreNode.innerHTML = score; <br />
curShape = drawShape(curShape.shape,curShape.x,min);<br />
}<br />
}<br />
return true;<br />
}<br />
<br />
function gameOver() {<br />
for(i=0;i<10; i++) {<br />
if(usedPolys[i][18] == 1) {<br />
return true;<br />
}<br />
}<br />
return false;<br />
}<br />
<br />
function goDownByTime() {<br />
removeShape(curShape.shape,curShape.x,curShape.y);<br />
if(compareWithAbsoluteShape(curShape.shape,curShape.x,curShape.y-1)) { <br />
curShape = drawShape(curShape.shape,curShape.x,curShape.y-1);<br />
setTimeout(goDownByTime,timeOutTimes[level]);<br />
}<br />
else {<br />
curShape = drawShape(curShape.shape,curShape.x,curShape.y);<br />
document.getElementById('score').innerHTML<br />
if(!gameOver()) {<br />
removeLines();<br />
if(compareWithAbsoluteShape(shape(next),4,16)) {<br />
curShape = drawShape(shape(next),4,16);<br />
next = getRandom();<br />
clearVorschau();<br />
drawVorschauShape(shape(next),1,1);<br />
setTimeout(goDownByTime,timeOutTimes[level]);<br />
}<br />
else {<br />
curShape = drawShape(shape(next),4,16);<br />
alert("Game Over!");<br />
}<br />
}<br />
else {<br />
alert("Game Over!");<br />
}<br />
}<br />
<br />
}<br />
<br />
function levelUp() {<br />
if(level < 15) {<br />
level += 1;<br />
document.getElementById('level').innerHTML = level;<br />
setTimeout(levelUp,1000*30);<br />
}<br />
}<br />
var pArray = drawPointsAndPolys(board,10,20,false);<br />
drawPointsAndPolys(board2,5,5,true);<br />
<br />
var score = 0;<br />
var scoreNode = document.getElementById('score');<br />
var level = 1;<br />
var timeOutTimes = [2000,1000,900,800,700,600,500,400,350,300,250,200,150,100,50,25]<br />
var curShape;<br />
var next;<br />
<br />
function startTetris() {<br />
if(!started) {<br />
started = true;<br />
curShape = drawShape(shape(getRandom()),4,16); <br />
next = getRandom(); <br />
drawVorschauShape(shape(next),1,1);<br />
<br />
document.onkeydown = keyDown; <br />
setTimeout(goDownByTime,timeOutTimes[level]);<br />
setTimeout(levelUp,1000*30);<br />
}<br />
}<br />
/* ]]> */<br />
</script><br />
</html></div>
Bianca
http://jsxgraph.org/wiki/index.php?title=Tetris&diff=4353
Tetris
2010-09-01T12:39:32Z
<p>Bianca: </p>
<hr />
<div>Even Tetris can be implemented with JSXGraph.<br />
<html><br />
<br />
<script type="text/javascript"><br />
/* <![CDATA[ */<br />
var started = false;<br />
var board = JXG.JSXGraph.initBoard('jxgbox', {originX: 0, originY: 500, unitX: 25, unitY: 25, showCopyright:false, showNavigation:false}); // Spielfeld 10x20<br />
var board2 = JXG.JSXGraph.initBoard('jxgbox2', {originX: 0, originY: 125, unitX: 25, unitY: 25, showCopyright:false, showNavigation:false});<br />
var usedPolys = new Array(10);<br />
var i,j;<br />
for(i=0;i<10;i++) {<br />
usedPolys[i] = new Array(20);<br />
for(j=0;j<20;j++) {<br />
usedPolys[i][j] = 0;<br />
}<br />
}<br />
var colors = ['none','#DC143C','#FF8C00','#87CEEB','#FFD700','#4B0082','#0000CD','#32CD32'];<br />
<br />
function drawPointsAndPolys(board,width,height,vorschau) {<br />
var i,j,pArr = {};<br />
board.suspendUpdate();<br />
for(i=0;i<=width;i++) {<br />
for(j=0; j<=height;j++) {<br />
pArr[i+''+j] = board.createElement('point',[i,j],{withLabel:false,face:'plus',draft:true});<br />
}<br />
}<br />
for(i=0;i<width;i++) {<br />
for(j=0; j<height;j++) {<br />
var idpoly = 'poly_'+i+'_'+j;<br />
if(vorschau) {<br />
idpoly = 'poly_'+i+'_'+j+'_v';<br />
}<br />
var poly = board.createElement('polygon',<br />
[pArr[i+''+j], pArr[(i+1)+''+j], pArr[(i+1)+''+(j+1)], pArr[i+''+(j+1)]],<br />
{fillColor:'white',visible:false,id:idpoly});<br />
for(k=0;k<4;k++) {<br />
poly.borders[k].setProperty('strokeColor:#666666');<br />
} <br />
}<br />
}<br />
board.unsuspendUpdate();<br />
return pArr;<br />
} <br />
<br />
function shape(style) {<br />
if(style == 1) { // I<br />
return {face:[[1,1,1,1],[0,0,0,0],[0,0,0,0],[0,0,0,0]],size:4};<br />
}<br />
else if(style == 2) { // T<br />
return {face:[[2,0,0],[2,2,0],[2,0,0]],size:3};<br />
}<br />
else if(style == 3) { // O<br />
return {face:[[3,3],[3,3]],size:2};<br />
}<br />
else if(style == 4) { // L<br />
return {face:[[4,4,4],[4,0,0],[0,0,0]],size:3};<br />
} <br />
else if(style == 5) { // J<br />
return {face:[[5,0,0],[5,5,5],[0,0,0]],size:3};<br />
}<br />
else if(style == 6) { // S<br />
return {face:[[6,0,0],[6,6,0],[0,6,0]],size:3};<br />
} <br />
else if(style == 7) { // Z<br />
return {face:[[0,7,0],[7,7,0],[7,0,0]],size:3};<br />
} <br />
} <br />
<br />
function compareWithAbsoluteShape(s,posX,posY) {<br />
for(i=0;i<s.size;i++) {<br />
for(j=0;j<s.size;j++) {<br />
if(s.face[i][j] != 0) {<br />
if(i+posX < 0 || i+posX > 9) {<br />
return false;<br />
}<br />
if(j+posY < 0 || j+posY > 19) {<br />
return false;<br />
} <br />
if(usedPolys[i+posX][j+posY] == 1) {<br />
return false;<br />
}<br />
}<br />
}<br />
}<br />
return true;<br />
}<br />
<br />
function drawShape(s,posX,posY) {<br />
board.suspendUpdate();<br />
var i,j;<br />
for(i=0;i<s.size;i++) {<br />
for(j=0;j<s.size;j++) {<br />
if(s.face[i][j] != 0) {<br />
showCube(i+posX,j+posY,colors[s.face[i][j]]);<br />
usedPolys[i+posX][j+posY] = 1;<br />
}<br />
}<br />
}<br />
board.unsuspendUpdate(); <br />
return {shape:s,x:posX,y:posY};<br />
}<br />
<br />
function removeShape(s,posX,posY) {<br />
board.suspendUpdate();<br />
var i,j, shape = new Array();<br />
for(i=0;i<s.size;i++) {<br />
for(j=0;j<s.size;j++) {<br />
if(s.face[i][j] != 0) {<br />
hideCube(i+posX,j+posY);<br />
usedPolys[i+posX][j+posY] = 0;<br />
}<br />
}<br />
}<br />
board.unsuspendUpdate(); <br />
return {shape:s,x:posX,y:posY};<br />
} <br />
<br />
function drawVorschauShape(s,posX,posY) {<br />
board2.suspendUpdate();<br />
var i,j;<br />
for(i=0;i<s.size;i++) {<br />
for(j=0;j<s.size;j++) {<br />
if(s.face[i][j] != 0) {<br />
showCubeV(i+posX,j+posY,colors[s.face[i][j]]);<br />
}<br />
}<br />
}<br />
board2.unsuspendUpdate();<br />
} <br />
<br />
function clearVorschau() {<br />
for(i=0;i<5;i++) {<br />
for(j=0;j<5;j++) {<br />
hideCubeV(i,j);<br />
}<br />
}<br />
}<br />
<br />
function showCube(posX,posY,color) {<br />
board.objects['poly_'+posX+'_'+posY].setProperty('visible:true');<br />
board.objects['poly_'+posX+'_'+posY].setProperty('fillColor:'+color);<br />
}<br />
<br />
function hideCube(posX,posY) {<br />
board.objects['poly_'+posX+'_'+posY].setProperty('visible:false');<br />
} <br />
<br />
function showCubeV(posX,posY,color) {<br />
board2.objects['poly_'+posX+'_'+posY+'_v'].setProperty('visible:true');<br />
board2.objects['poly_'+posX+'_'+posY+'_v'].setProperty('fillColor:'+color);<br />
}<br />
<br />
function hideCubeV(posX,posY) {<br />
board2.objects['poly_'+posX+'_'+posY+'_v'].setProperty('visible:false');<br />
} <br />
<br />
function rotate(shape) { // gegen den Uhrzeigersinn drehen<br />
if(shape.size == 2) {<br />
shape.face = [[shape.face[0][1],shape.face[1][1]],<br />
[shape.face[0][0],shape.face[1][1]]];<br />
}<br />
else if(shape.size == 3) {<br />
shape.face = [[shape.face[0][2],shape.face[1][2],shape.face[2][2]],<br />
[shape.face[0][1],shape.face[1][1],shape.face[2][1]],<br />
[shape.face[0][0],shape.face[1][0],shape.face[2][0]]];<br />
}<br />
else if(shape.size == 4) {<br />
shape.face = [[shape.face[0][3],shape.face[1][3],shape.face[2][3],shape.face[3][3]],<br />
[shape.face[0][2],shape.face[1][2],shape.face[2][2],shape.face[3][2]],<br />
[shape.face[0][1],shape.face[1][1],shape.face[2][1],shape.face[3][1]],<br />
[shape.face[0][0],shape.face[1][0],shape.face[2][0],shape.face[3][0]]];<br />
} <br />
return shape;<br />
}<br />
<br />
function getRandom() {<br />
return parseInt(1+Math.random()*7);<br />
}<br />
<br />
function testLine(i) {<br />
var j;<br />
for(j=0; j<10; j++) {<br />
if(usedPolys[j][i] == 0) {<br />
return false;<br />
}<br />
}<br />
return true;<br />
}<br />
<br />
function testLines() {<br />
var i, arr = new Array();<br />
for(i=0; i<20; i++) {<br />
if(testLine(i)) {<br />
arr.push(i);<br />
}<br />
}<br />
return arr;<br />
}<br />
<br />
/* doesn't work properly */<br />
function removeLines() {<br />
var arr = testLines(),i,j,k, line;<br />
if(arr.length > 0) {<br />
board.suspendUpdate();<br />
if(arr.length == 1) {<br />
score += (level+1)*40;<br />
}<br />
else if(arr.length == 2) {<br />
score += (level+1)*100;<br />
}<br />
else if(arr.length == 3) {<br />
score += (level+1)*300;<br />
}<br />
else if(arr.length == 4) {<br />
score += (level+1)*1200;<br />
} <br />
scoreNode.innerHTML = score; <br />
for(i=0;i<arr.length;i++) {<br />
line = arr[i];<br />
for(j=line+1-i;j<20;j++) {<br />
for(k=0;k<10;k++) {<br />
if(usedPolys[k][j] == 1) {<br />
showCube(k,j-1,board.objects['poly_'+k+'_'+j].visProp['fillColor']);<br />
usedPolys[k][j-1] = 1;<br />
hideCube(k,j);<br />
usedPolys[k][j] = 0;<br />
}<br />
else {<br />
hideCube(k,j-1);<br />
usedPolys[k][j-1] = 0;<br />
}<br />
}<br />
}<br />
}<br />
board.unsuspendUpdate();<br />
}<br />
}<br />
<br />
function keyDown(Evt) {<br />
var code;<br />
if (!Evt) {<br />
Evt = window.event;<br />
}<br />
if (Evt.which) {<br />
code = Evt.which;<br />
} else if (Evt.keyCode) {<br />
code = Evt.keyCode;<br />
}<br />
// 37: left, 38: up, 39: right, 40: down<br />
if (code==38) { <br />
removeShape(curShape.shape,curShape.x,curShape.y);<br />
// echte Kopie anlegen...<br />
var s = {};<br />
s.size = curShape.shape.size;<br />
s.face = (new Array()).concat(curShape.shape.face);<br />
if(compareWithAbsoluteShape(rotate(s),curShape.x,curShape.y)) {<br />
curShape = drawShape(rotate(curShape.shape),curShape.x,curShape.y);<br />
}<br />
else {<br />
curShape = drawShape(curShape.shape,curShape.x,curShape.y);<br />
}<br />
return false;<br />
}<br />
else if(code==39) {<br />
removeShape(curShape.shape,curShape.x,curShape.y); <br />
if(compareWithAbsoluteShape(curShape.shape,curShape.x+1,curShape.y)) { <br />
curShape = drawShape(curShape.shape,curShape.x+1,curShape.y);<br />
}<br />
else {<br />
curShape = drawShape(curShape.shape,curShape.x,curShape.y);<br />
}<br />
return false;<br />
}<br />
else if(code==37) {<br />
removeShape(curShape.shape,curShape.x,curShape.y);<br />
if(compareWithAbsoluteShape(curShape.shape,curShape.x-1,curShape.y)) { <br />
curShape = drawShape(curShape.shape,curShape.x-1,curShape.y);<br />
}<br />
else {<br />
curShape = drawShape(curShape.shape,curShape.x,curShape.y);<br />
}<br />
return false;<br />
} <br />
else if(code==40) {<br />
removeShape(curShape.shape,curShape.x,curShape.y);<br />
if(compareWithAbsoluteShape(curShape.shape,curShape.x,curShape.y-1)) { <br />
curShape = drawShape(curShape.shape,curShape.x,curShape.y-1);<br />
score += (level + 1);<br />
scoreNode.innerHTML = score;<br />
}<br />
else {<br />
curShape = drawShape(curShape.shape,curShape.x,curShape.y);<br />
}<br />
return false;<br />
} <br />
else if(code==32) { // Space<br />
if(curShape.y > 0) {<br />
removeShape(curShape.shape,curShape.x,curShape.y);<br />
var i=curShape.y-1; <br />
var min = curShape.y;<br />
while(i>=0) {<br />
if(compareWithAbsoluteShape(curShape.shape,curShape.x,i)) { <br />
min = i<br />
}<br />
else {<br />
i=0;<br />
}<br />
i--;<br />
}<br />
score += (level + 1)*(curShape.y-min);<br />
scoreNode.innerHTML = score; <br />
curShape = drawShape(curShape.shape,curShape.x,min);<br />
}<br />
}<br />
return true;<br />
}<br />
<br />
function gameOver() {<br />
for(i=0;i<10; i++) {<br />
if(usedPolys[i][18] == 1) {<br />
return true;<br />
}<br />
}<br />
return false;<br />
}<br />
<br />
function goDownByTime() {<br />
removeShape(curShape.shape,curShape.x,curShape.y);<br />
if(compareWithAbsoluteShape(curShape.shape,curShape.x,curShape.y-1)) { <br />
curShape = drawShape(curShape.shape,curShape.x,curShape.y-1);<br />
setTimeout(goDownByTime,timeOutTimes[level]);<br />
}<br />
else {<br />
curShape = drawShape(curShape.shape,curShape.x,curShape.y);<br />
document.getElementById('score').innerHTML<br />
if(!gameOver()) {<br />
removeLines();<br />
if(compareWithAbsoluteShape(shape(next),4,16)) {<br />
curShape = drawShape(shape(next),4,16);<br />
next = getRandom();<br />
clearVorschau();<br />
drawVorschauShape(shape(next),1,1);<br />
setTimeout(goDownByTime,timeOutTimes[level]);<br />
}<br />
else {<br />
curShape = drawShape(shape(next),4,16);<br />
alert("Game Over!");<br />
}<br />
}<br />
else {<br />
alert("Game Over!");<br />
}<br />
}<br />
<br />
}<br />
<br />
function levelUp() {<br />
if(level < 15) {<br />
level += 1;<br />
document.getElementById('level').innerHTML = level;<br />
setTimeout(levelUp,1000*30);<br />
}<br />
}<br />
var pArray = drawPointsAndPolys(board,10,20,false);<br />
drawPointsAndPolys(board2,5,5,true);<br />
<br />
var score = 0;<br />
var scoreNode = document.getElementById('score');<br />
var level = 1;<br />
var timeOutTimes = [2000,1000,900,800,700,600,500,400,350,300,250,200,150,100,50,25]<br />
var curShape;<br />
var next;<br />
<br />
function startTetris() {<br />
if(!started) {<br />
started = true;<br />
curShape = drawShape(shape(getRandom()),4,16); <br />
next = getRandom(); <br />
drawVorschauShape(shape(next),1,1);<br />
<br />
document.onkeydown = keyDown; <br />
setTimeout(goDownByTime,timeOutTimes[level]);<br />
setTimeout(levelUp,1000*30);<br />
}<br />
}<br />
/* ]]> */<br />
</script><br />
</html></div>
Bianca
http://jsxgraph.org/wiki/index.php?title=Tetris&diff=4352
Tetris
2010-09-01T12:38:22Z
<p>Bianca: </p>
<hr />
<div>Even Tetris can be implemented with JSXGraph.</div>
Bianca
http://jsxgraph.org/wiki/index.php?title=Tetris&diff=4351
Tetris
2010-09-01T12:38:09Z
<p>Bianca: New page: Blubb</p>
<hr />
<div>Blubb</div>
Bianca
http://jsxgraph.org/wiki/index.php?title=Showcases&diff=4350
Showcases
2010-09-01T12:29:57Z
<p>Bianca: /* Various topics */</p>
<hr />
<div>===Various topics===<br />
* [["Infinity"]]<br />
* [[Snake - the game]]<br />
* [[Tetris]]<br />
* [[Circles on circles]] using jQuery sliders<br />
* [[Colorful circles]]<br />
* [[The HSV color scheme]] (hue, saturation and value)<br />
<br />
===Charts===<br />
* [[Animated age pyramid]]<br />
* [[German election 2009]]<br />
* [[Google style chart]]<br />
* [[Dynamic bar chart]]<br />
* [[Pie chart]]<br />
* [[Spline chart with special highlight]]<br />
* [[Charts from HTML tables]]<br />
* [[Different chart styles]]<br />
* [[Display stock quotes from Yahoo!]]<br />
* [[Map with German administrative districts]]<br />
* [[Real-time graphing]]<br />
* [[Time series II]]<br />
<br />
* All examples from [[:Category:Charts]]<br />
<br />
===Geometry===<br />
* [[Euler line II]]<br />
* [[Displaying GEONExT constructions]]<br />
* [[Geometric constructions with JessieScript]] and [[Interactive JessieScript]]<br />
* [[Apollonian circle packing]]<br />
* [[Trigonometric functions]]<br />
* [[Approximation of the circle area]] and [[Circle approximation]]<br />
* [[Five Circle Theorem]]<br />
* [[Circum circles of subtriangles]]<br />
* [[Sine and cosine]]<br />
* [[Circle inversion]] and [[Poincare disc model]] (hyperbolic geometry)<br />
* All examples from [[:Category:Geometry]]<br />
<br />
===Statistics===<br />
* [[Data plot of live data via AJAX]]<br />
* [[Analyze data with the Statistics software R]]<br />
* [[Time series forecasting: double exponential smoothing]]<br />
* [[Polynomial regression I]], [[Polynomial regression II]]<br />
<br />
===Calculus and function plotting===<br />
* [[Newton's root finding method]]<br />
* [[Power Series for sine]]<br />
* [[Even simpler function plotter]] and [[Simple function plotter]] (JavaScript syntax), [[Parametric curve plotter]], [[Polar curve plotter]]<br />
* [[Rational functions]]<br />
* [[Riemann sums]], [[Riemann sum II]], [[Riemann sum III]], [[Arc length]], [[Continuous functions]], [[Riemann integrability]]<br />
* [[Antiderivative]]<br />
* [[Lagrange interpolation]] and [[Cubic spline interpolation]]<br />
* [[Differential equations]] and [[Systems of differential equations]]<br />
* [[Population growth models]]<br />
* All examples from [[:Category:Calculus]]<br />
<br />
===Curves===<br />
* [[Hypotrochoid]]<br />
* [[Limacon|Lima&ccedil;on of Pascal]]<br />
* [[Watt curve|Watt's curve]]<br />
* [[Archimedean spiral]]<br />
* [[Lissajous curves]]<br />
* [[B-splines]], [[Bezier curves]], [[Bezier curves II]]<br />
* [[Circles on circles]]<br />
* All examples from [[:Category:Curves]]<br />
<br />
===Fractals===<br />
* [[Sierpinski triangle]]<br />
* [[Koch curve]]<br />
* All examples from [[:Category:Fractals]], see also [[Turtle Graphics]] and [[L-systems]]<br />
<br />
===Turtle Graphics===<br />
* [[L-systems]], or Lindenmayer Systems<br />
* [[Epidemiology: The SIR model]] (Simulation of differential equations with turtle graphics)<br />
* [[Turtle spiral]]<br />
* [[Random walks]]<br />
* All examples from [[:Category:Turtle Graphics]]</div>
Bianca
http://jsxgraph.org/wiki/index.php?title=User:Noellaiwebstern&diff=4349
User:Noellaiwebstern
2010-09-01T06:52:07Z
<p>Bianca: Spam</p>
<hr />
<div></div>
Bianca
http://jsxgraph.org/wiki/index.php?title=User:Ashienvtylers&diff=4348
User:Ashienvtylers
2010-09-01T06:51:53Z
<p>Bianca: Spam</p>
<hr />
<div></div>
Bianca
http://jsxgraph.org/wiki/index.php?title=User:Anissajbrooksg&diff=4345
User:Anissajbrooksg
2010-08-31T15:23:09Z
<p>Bianca: Spam</p>
<hr />
<div></div>
Bianca
http://jsxgraph.org/wiki/index.php?title=User:Ulisesmhornev&diff=4340
User:Ulisesmhornev
2010-08-30T09:10:37Z
<p>Bianca: Spam</p>
<hr />
<div></div>
Bianca
http://jsxgraph.org/wiki/index.php?title=User:Rhebammullenu&diff=4336
User:Rhebammullenu
2010-08-29T08:16:26Z
<p>Bianca: Spam</p>
<hr />
<div></div>
Bianca
http://jsxgraph.org/wiki/index.php?title=User:Keeliaehubbardj&diff=4334
User:Keeliaehubbardj
2010-08-28T13:52:45Z
<p>Bianca: Spam</p>
<hr />
<div></div>
Bianca
http://jsxgraph.org/wiki/index.php?title=User:Stevezzamoray&diff=4333
User:Stevezzamoray
2010-08-28T13:52:31Z
<p>Bianca: Spam</p>
<hr />
<div></div>
Bianca
http://jsxgraph.org/wiki/index.php?title=User:Jameljhartmanv&diff=4321
User:Jameljhartmanv
2010-08-13T20:12:50Z
<p>Bianca: Removing all content from page</p>
<hr />
<div></div>
Bianca
http://jsxgraph.org/wiki/index.php?title=Spirograph&diff=4154
Spirograph
2010-07-19T19:39:40Z
<p>Bianca: </p>
<hr />
<div><jsxgraph width="600" height="600"><br />
var brd = JXG.JSXGraph.initBoard('jxgbox',{boundingbox:[-5,5,5,-5], keepaspectratio:true});<br />
var R = 2.0;<br />
var r = brd.create('slider',[[-3,4],[3,4],[-5,1,5]],{name:'r'});<br />
var a = brd.create('slider',[[-3,3],[3,3],[-5,1,5]],{name:'a'});<br />
<br />
var c = brd.create('curve',[<br />
function(t){ <br />
var r1 = Math.round(100.0*r.Value())/100.0; <br />
var a1 = Math.round(100.0*a.Value())/100.0; <br />
return (R-r1)*Math.cos(r1/R*t)+a1*Math.cos((1-r1/R)*t); <br />
},<br />
function(t){ <br />
var r1 = Math.round(100.0*r.Value())/100.0; <br />
var a1 = Math.round(100.0*a.Value())/100.0; <br />
return (R-r1)*Math.sin(r1/R*t)+a1*Math.sin((1-r1/R)*t); <br />
}, <br />
-40*Math.PI,40*Math.PI<br />
], {strokeWidth:3, strokeColor:'#3355ff', strokeOpacity:0.7});<br />
</jsxgraph><br />
<br />
===The underlying JavaScript code===<br />
<source lang="javascript"><br />
var brd = JXG.JSXGraph.initBoard('jxgbox',{boundingbox:[-5,5,5,-5], keepaspectratio:true});<br />
var R = 2.0;<br />
var r = brd.create('slider',[[-3,4],[3,4],[-5,1,5]],{name:'r'});<br />
var a = brd.create('slider',[[-3,3],[3,3],[-5,1,5]],{name:'a'});<br />
<br />
var c = brd.create('curve',[<br />
function(t){ <br />
var r1 = Math.round(100.0*r.Value())/100.0; <br />
var a1 = Math.round(100.0*a.Value())/100.0; <br />
return (R-r1)*Math.cos(r1/R*t)+a1*Math.cos((1-r1/R)*t); <br />
},<br />
function(t){ <br />
var r1 = Math.round(100.0*r.Value())/100.0; <br />
var a1 = Math.round(100.0*a.Value())/100.0; <br />
return (R-r1)*Math.sin(r1/R*t)+a1*Math.sin((1-r1/R)*t); <br />
}, <br />
-40*Math.PI,40*Math.PI<br />
], {strokeWidth:3, strokeColor:'#3355ff', strokeOpacity:0.7});<br />
</source><br />
<br />
[[Category:Examples]]<br />
[[Category:Curves]]</div>
Bianca
http://jsxgraph.org/wiki/index.php?title=SIR_model:_swine_flu&diff=3992
SIR model: swine flu
2010-06-26T12:36:15Z
<p>Bianca: </p>
<hr />
<div>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. <br />
* 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.<br />
* 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. <br />
:<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.<br />
* 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.<br />
* 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.<br />
<br />
The lines in the JSXGraph-simulation below have the following meaning:<br />
* <span style="color:Blue">Blue: Rate of susceptible population</span><br />
* <span style="color:red">Red: Rate of infected population</span><br />
* <span style="color:green">Green: Rate of recovered population<br />
<html><br />
<form><input type="button" value="clear and run a simulation of 200 days" onClick="clearturtle();run()"><br />
<input type="button" value="stop" onClick="stop()"><br />
<input type="button" value="continue" onClick="goOn()"></form><br />
</html><br />
<jsxgraph width="700" height="500"><br />
var brd = JXG.JSXGraph.initBoard('jxgbox', {originX: 20, originY: 300, unitX: 3, unitY: 250, axis:true});<br />
<br />
var S = brd.createElement('turtle',[],{strokeColor:'blue',strokeWidth:3});<br />
var I = brd.createElement('turtle',[],{strokeColor:'red',strokeWidth:3});<br />
var R = brd.createElement('turtle',[],{strokeColor:'green',strokeWidth:3});<br />
<br />
var s = brd.createElement('slider', [[0,-0.3], [60,-0.3],[0,1E-6,1]], {name:'s'});<br />
var beta = brd.createElement('slider', [[0,-0.4], [60,-0.4],[0,0.2857,1]], {name:'&beta;'});<br />
var gamma = brd.createElement('slider', [[0,-0.5], [60,-0.5],[0,0.1428,0.5]], {name:'&gamma;'});<br />
var mort = brd.createElement('slider', [[0,-0.6], [60,-0.6],[0,0.4,10.0]], {name:'% mortality'});<br />
brd.createElement('text', [90,-0.3, "initially infected population rate"]);<br />
brd.createElement('text', [90,-0.4, function(){ return "&beta;: infection rate, R<sub>0</sub>="+(beta.Value()/gamma.Value()).toFixed(2);}]);<br />
brd.createElement('text', [90,-0.5, function(){ return "&gamma;: recovery rate = 1/(days of infection), days of infection= "+(1/gamma.Value()).toFixed(1);}]);<br />
<br />
var t = 0; // global<br />
<br />
brd.createElement('text', [100,-0.2, <br />
function() {return "Day "+t+<br />
": infected="+(1000000*I.Y()).toFixed(1)+<br />
" recovered="+(1000000*R.Y()).toFixed(1)+<br />
" dead="+(1000000*R.Y()*mort.Value()*0.01).toFixed(0);}]);<br />
<br />
S.hideTurtle();<br />
I.hideTurtle();<br />
R.hideTurtle();<br />
<br />
function clearturtle() {<br />
S.cs();<br />
I.cs();<br />
R.cs();<br />
<br />
S.hideTurtle();<br />
I.hideTurtle();<br />
R.hideTurtle();<br />
}<br />
<br />
function run() {<br />
S.setPos(0,1.0-s.Value());<br />
R.setPos(0,0);<br />
I.setPos(0,s.Value());<br />
<br />
delta = 1; // global<br />
t = 0; // global<br />
loop();<br />
}<br />
<br />
function turtleMove(turtle,dx,dy) {<br />
turtle.moveTo([dx+turtle.X(),dy+turtle.Y()]);<br />
}<br />
<br />
function loop() {<br />
var dS = -beta.Value()*S.Y()*I.Y();<br />
var dR = gamma.Value()*I.Y();<br />
var dI = -(dS+dR);<br />
turtleMove(S,delta,dS);<br />
turtleMove(R,delta,dR);<br />
turtleMove(I,delta,dI);<br />
<br />
t += delta;<br />
if (t<200.0) {<br />
active = setTimeout(loop,10);<br />
}<br />
}<br />
function stop() {<br />
if (active) clearTimeout(active);<br />
active = null;<br />
}<br />
function goOn() {<br />
if (t>0) {<br />
if (active==null) {<br />
active = setTimeout(loop,10);<br />
}<br />
} else {<br />
run();<br />
}<br />
<br />
}<br />
</jsxgraph><br />
<br />
===External links===<br />
* [http://www.cdc.gov/flu/professionals/acip/clinical.htm Clinical Signs and Symptoms of Influenza]<br />
* [http://www.pubmedcentral.nih.gov/articlerender.fcgi?artid=2715422 Modeling influenza epidemics and pandemics: insights into the future of swine flu (H1N1)]<br />
* [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]<br />
* [http://jsxgraph.org JSXGraph Homepage]<br />
<br />
===The underlying JavaScript code===<br />
<source lang="xml"><br />
<html><br />
<form><input type="button" value="clear and run a simulation of 200 days" onClick="clearturtle();run()"><br />
<input type="button" value="stop" onClick="stop()"><br />
<input type="button" value="continue" onClick="goOn()"></form><br />
</html><br />
<jsxgraph width="700" height="500"><br />
var brd = JXG.JSXGraph.initBoard('jxgbox', {originX: 20, originY: 300, unitX: 3, unitY: 250, axis:true});<br />
<br />
var S = brd.createElement('turtle',[],{strokeColor:'blue',strokeWidth:3});<br />
var I = brd.createElement('turtle',[],{strokeColor:'red',strokeWidth:3});<br />
var R = brd.createElement('turtle',[],{strokeColor:'green',strokeWidth:3});<br />
<br />
var s = brd.createElement('slider', [[0,-0.3], [60,-0.3],[0,1E-6,1]], {name:'s'});<br />
var beta = brd.createElement('slider', [[0,-0.4], [60,-0.4],[0,0.2857,1]], {name:'&beta;'});<br />
var gamma = brd.createElement('slider', [[0,-0.5], [60,-0.5],[0,0.1428,0.5]], {name:'&gamma;'});<br />
var mort = brd.createElement('slider', [[0,-0.6], [60,-0.6],[0,0.4,10.0]], {name:'% mortality'});<br />
brd.createElement('text', [90,-0.3, "initially infected population rate"]);<br />
brd.createElement('text', [90,-0.4, function(){ return "&beta;: infection rate, R<sub>0</sub>="+(beta.Value()/gamma.Value()).toFixed(2);}]);<br />
brd.createElement('text', [90,-0.5, function(){ return "&gamma;: recovery rate = 1/(days of infection), days of infection= "+(1/gamma.Value()).toFixed(1);}]);<br />
<br />
var t = 0; // global<br />
<br />
brd.createElement('text', [100,-0.2, <br />
function() {return "Day "+t+<br />
": infected="+(1000000*I.Y()).toFixed(1)+<br />
" recovered="+(1000000*R.Y()).toFixed(1)+<br />
" dead="+(1000000*R.Y()*mort.Value()*0.01).toFixed(0);}]);<br />
<br />
S.hideTurtle();<br />
I.hideTurtle();<br />
R.hideTurtle();<br />
<br />
function clearturtle() {<br />
S.cs();<br />
I.cs();<br />
R.cs();<br />
<br />
S.hideTurtle();<br />
I.hideTurtle();<br />
R.hideTurtle();<br />
}<br />
<br />
function run() {<br />
S.setPos(0,1.0-s.Value());<br />
R.setPos(0,0);<br />
I.setPos(0,s.Value());<br />
<br />
delta = 1; // global<br />
t = 0; // global<br />
loop();<br />
}<br />
<br />
function turtleMove(turtle,dx,dy) {<br />
turtle.moveTo([dx+turtle.X(),dy+turtle.Y()]);<br />
}<br />
<br />
function loop() {<br />
var dS = -beta.Value()*S.Y()*I.Y();<br />
var dR = gamma.Value()*I.Y();<br />
var dI = -(dS+dR);<br />
turtleMove(S,delta,dS);<br />
turtleMove(R,delta,dR);<br />
turtleMove(I,delta,dI);<br />
<br />
t += delta;<br />
if (t<200.0) {<br />
active = setTimeout(loop,10);<br />
}<br />
}<br />
function stop() {<br />
if (active) clearTimeout(active);<br />
active = null;<br />
}<br />
function goOn() {<br />
if (t>0) {<br />
if (active==null) {<br />
active = setTimeout(loop,10);<br />
}<br />
} else {<br />
run();<br />
}<br />
<br />
}<br />
</jsxgraph><br />
</source><br />
<br />
[[Category:Examples]]<br />
[[Category:Turtle Graphics]]</div>
Bianca
http://jsxgraph.org/wiki/index.php?title=Main_Page&diff=3991
Main Page
2010-06-26T12:35:15Z
<p>Bianca: </p>
<hr />
<div>== JSXGraph Wiki ==<br />
Welcome to the JSXGraph Wiki. This Wiki provides information and examples about the use of JSXGraph. <br />
* [[Showcases]]<br />
* [[Documentation| First steps]]<br />
* [[Advanced constructions]]<br />
* [[FAQ - Frequently asked questions]]<br />
* [[Contributions]]<br />
* [[Bringing JavaScript to its edge]]<br />
To learn more about creating constructions with JSXGraph from the scratch visit the the examples category: [[:Category:Examples]]<br />
<br />
[http://jsxgraph.org Homepage of the JSXGraph project]<br />
<br />
== Message to all contributors ==<br />
The JSXGraph team appreciates your valuable contributions to the JSXGraph wiki!<br />
<br />
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]].</div>
Bianca
http://jsxgraph.org/wiki/index.php?title=Interactive_JessieScript&diff=3844
Interactive JessieScript
2010-03-23T16:28:48Z
<p>Bianca: </p>
<hr />
<div><jsxgraph width="600" height="450" box="box"><br />
var board, construction = [];<br />
board = JXG.JSXGraph.initBoard('box', {grid:true, boundingbox:[-1,6,11,-3], keepaspectratio:true, axis:true});<br />
<br />
function construct() {<br />
var t = document.getElementById('input').value;<br />
construction.push(board.construct(t));<br />
}<br />
<br />
</jsxgraph><br />
<br />
<br><br />
<html><br />
<form><textarea id="input" cols=50 rows=4><br />
A(1,1);B(2,2.5);C(1,3);[AB];k(B,[AC]);<br />
</textarea><br />
<br><br />
<input type="button" value="set" onClick="construct()"><br />
</form><br />
</html><br />
<br />
===Possible elements:===<br />
{| cellpadding="8" cellspacing="0" border="1"<br />
! Construction !! Description<br />
|-<br />
| A(1,1) || Point with name 'A' at position (1,1)<br />
|-<br />
| ZY(0.5<nowiki>|</nowiki>1) || Point with name 'ZY' at position (0.5,1)<br />
|-<br />
| ]AB[ || straight line through points A and B<br />
|-<br />
| [AB[ || ray through points A and B, stopping at A<br />
|-<br />
| ]AB] || ray through points A and B, stopping at B<br />
|-<br />
| [AB] || segment through points A and B<br />
|-<br />
| g=[AB] || segment through points A and B, named by 'g'<br />
|-<br />
| k(A,1) || circle with midpoint A and radius 1<br />
|-<br />
| k(A,B) || circle with midpoint A through point B on the circle line<br />
|-<br />
| k(A,[BC]) || circle with midpoint A and radius defined by the length of the (not necessarily existing) segement [BC]<br />
|-<br />
| k_1=k(A,1) || circle with midpoint A and radius 1, named by 'k_1'<br />
|}<br />
The different elements have to be separated by semicolon.<br />
<br />
===The JavaScript code===<br />
<source lang="javascript"><br />
var board, construction = [];<br />
board = JXG.JSXGraph.initBoard('box', {grid:true, boundingbox:[-1,6,11,-3], keepaspectratio:true, axis:true});<br />
<br />
function construct() {<br />
var t = document.getElementById('input').value;<br />
construction.push(board.construct(t));<br />
}<br />
</source><br />
<br />
[[Category:Geometry]]<br />
[[Category:Examples]]</div>
Bianca
http://jsxgraph.org/wiki/index.php?title=Geometric_constructions_with_JessieScript&diff=3843
Geometric constructions with JessieScript
2010-03-23T16:28:08Z
<p>Bianca: </p>
<hr />
<div>Easy JSXGraph constructions with geometric elements can be created by a mathematical syntax by using the function<br />
<source><br />
board.construct(...);<br />
</source><br />
Possible elements:<br />
{| cellpadding="8" cellspacing="0" border="1"<br />
! Construction !! Description<br />
|-<br />
| A(1,1) || Point with name 'A' at position (1,1)<br />
|-<br />
| ZY(0.5<nowiki>|</nowiki>1) || Point with name 'ZY' at position (0.5,1)<br />
|-<br />
| ]AB[ || straight line through points A and B<br />
|-<br />
| [AB[ || ray through points A and B, stopping at A<br />
|-<br />
| ]AB] || ray through points A and B, stopping at B<br />
|-<br />
| [AB] || segment through points A and B<br />
|-<br />
| g=[AB] || segment through points A and B, named by 'g'<br />
|-<br />
| k(A,1) || circle with midpoint A and radius 1<br />
|-<br />
| k(A,B) || circle with midpoint A through point B on the circle line<br />
|-<br />
| k(A,[BC]) || circle with midpoint A and radius defined by the length of the (not necessarily existing) segement [BC]<br />
|-<br />
| k_1=k(A,1) || circle with midpoint A and radius 1, named by 'k_1'<br />
|}<br />
The different elements have to be separated by semicolon.<br />
<br />
The function returns an object with all the created elements so that afterwards properties can be set.<br />
The access works by<br />
{| cellpadding="8" cellspacing="0" border="1"<br />
! Element !! Description<br />
|-<br />
| constr.points[i] || take i-th point of the construction 'constr'<br />
|-<br />
| constr.lines[i] || take i-th line (or rays or segement) of the construction 'constr'<br />
|-<br />
| constr.circles[i] || take i-th circle of the construction 'constr'<br />
|-<br />
| constr.A || take element with name 'A' of the construction 'constr'<br />
|}<br />
===Example===<br />
<jsxgraph width="600" height="450" box="jxgbox"><br />
var board, cons1, cons2;<br />
board = JXG.JSXGraph.initBoard('jxgbox', {grid:true, originX: 50, originY: 300, unitX: 50, unitY: 50, axis:true});<br />
<br />
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]);");<br />
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]");<br />
<br />
cons1.points[0].setProperty({face:'diamond',size:7,strokeColor:'#8B2252',fillColor:'#8B2252'});<br />
cons1.circles[1].setProperty({strokeColor:'#BA55D3'});<br />
cons2.J.setProperty({face:'triangleUp',size:8,strokeColor:'black',fillColor:'#EE82EE'});<br />
cons2.lines[1].setProperty({strokeColor:'#32CD32',shadow:true});<br />
<br />
cons1.X.strokeColor('black');<br />
cons1.X.fillColor('#FFB90F');<br />
cons1.X.shadow(true);<br />
cons1.Y.visible(false);<br />
cons2.l_2.strokeWidth(4);<br />
cons1.X.face('>');<br />
cons1.X.size(8);<br />
cons1.X.labelColor('#FFB90F');<br />
cons2.k1.dash(2);<br />
<br />
</jsxgraph><br />
<br />
===The JavaScript code===<br />
<br />
<source lang="xml"><br />
<jsxgraph width="600" height="450" box="box"><br />
var board, cons1, cons2;<br />
board = JXG.JSXGraph.initBoard('box', {grid:true, originX: 50, originY: 300, unitX: 50, unitY: 50, axis:true});<br />
<br />
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]);");<br />
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]");<br />
<br />
cons1.points[0].setProperty({face:'diamond',size:7,strokeColor:'#8B2252',fillColor:'#8B2252'});<br />
cons1.circles[1].setProperty({strokeColor:'#BA55D3'});<br />
cons2.J.setProperty({face:'triangleUp',size:8,strokeColor:'black',fillColor:'#EE82EE'});<br />
cons2.lines[1].setProperty({strokeColor:'#32CD32',shadow:true});<br />
<br />
cons1.X.strokeColor('black');<br />
cons1.X.fillColor('#FFB90F');<br />
cons1.X.shadow(true);<br />
cons1.Y.visible(false);<br />
cons2.l_2.strokeWidth(4);<br />
cons1.X.face('>');<br />
cons1.X.size(8);<br />
cons1.X.labelColor('#FFB90F');<br />
cons2.k1.dash(2);<br />
</jsxgraph></source><br />
<br />
[[Category:Examples]]<br />
[[Category:Geometry]]</div>
Bianca
http://jsxgraph.org/wiki/index.php?title=Geometric_constructions_with_JessieScript&diff=3813
Geometric constructions with JessieScript
2010-03-21T14:34:47Z
<p>Bianca: </p>
<hr />
<div>Easy JSXGraph constructions with geometric elements can be created by a mathematical syntax by using the function<br />
<source><br />
board.construct(...);<br />
</source><br />
Possible elements:<br />
{| cellpadding="8" cellspacing="0" border="1"<br />
! Construction !! Description<br />
|-<br />
| A(1,1) || Point with name 'A' at the position (1,1)<br />
|-<br />
| ZY(0.5<nowiki>|</nowiki>1) || Point with name 'ZY' at the position (0.5,1)<br />
|-<br />
| ]AB[ || straight line through the points A and B<br />
|-<br />
| [AB[ || ray through the points A and B, stopping at A<br />
|-<br />
| ]AB] || ray through the points A and B, stopping at B<br />
|-<br />
| [AB] || segment through the points A and B<br />
|-<br />
| g=[AB] || segment through the points A and B, named by 'g'<br />
|-<br />
| k(A,1) || circle with midpoint A and radius 1<br />
|-<br />
| k(A,B) || circle with midpoint A through the point B on the circle line<br />
|-<br />
| k(A,[BC]) || circle with midpoint A and radius defined by the length of the (not necessarily existing) segement [BC]<br />
|-<br />
| k_1=k(A,1) || circle with midpoint A and radius 1, named by 'k_1'<br />
|}<br />
The different elements have to be separated by semicolon.<br />
<br />
The function returns an object with all the created elements so that afterwards properties can be set.<br />
The access works by<br />
{| cellpadding="8" cellspacing="0" border="1"<br />
! Element !! Description<br />
|-<br />
| constr.points[i] || take the i-th point of the construction 'constr'<br />
|-<br />
| constr.lines[i] || take the i-th line (or rays or segement) of the construction 'constr'<br />
|-<br />
| constr.circles[i] || take the i-th circle of the construction 'constr'<br />
|-<br />
| constr.A || take the element with name 'A' of the construction 'constr'<br />
|}<br />
===Example===<br />
<jsxgraph width="600" height="450" box="box"><br />
var cons1, cons2;<br />
board = JXG.JSXGraph.initBoard('jxgbox', {grid:true, originX: 50, originY: 300, unitX: 50, unitY: 50, axis:true});<br />
<br />
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]);");<br />
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]");<br />
<br />
cons1.points[0].setProperty({face:'diamond',size:7,strokeColor:'#8B2252',fillColor:'#8B2252'});<br />
cons1.circles[1].setProperty({strokeColor:'#BA55D3'});<br />
cons2.J.setProperty({face:'triangleUp',size:8,strokeColor:'black',fillColor:'#EE82EE'});<br />
cons2.lines[1].setProperty({strokeColor:'#32CD32',shadow:true});<br />
<br />
cons1.X.strokeColor('black');<br />
cons1.X.fillColor('#FFB90F');<br />
cons1.X.shadow(true);<br />
cons1.Y.visible(false);<br />
cons2.l_2.strokeWidth(4);<br />
cons1.X.face('>');<br />
cons1.X.size(8);<br />
cons1.X.labelColor('#FFB90F');<br />
cons2.k1.dash(2);<br />
<br />
</jsxgraph><br />
<br />
===The JavaScript code===<br />
<br />
<source lang="xml"><br />
<jsxgraph width="600" height="450" box="box"><br />
var cons1, cons2;<br />
board = JXG.JSXGraph.initBoard('box', {grid:true, originX: 50, originY: 300, unitX: 50, unitY: 50, axis:true});<br />
<br />
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]);");<br />
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]");<br />
<br />
cons1.points[0].setProperty({face:'diamond',size:7,strokeColor:'#8B2252',fillColor:'#8B2252'});<br />
cons1.circles[1].setProperty({strokeColor:'#BA55D3'});<br />
cons2.J.setProperty({face:'triangleUp',size:8,strokeColor:'black',fillColor:'#EE82EE'});<br />
cons2.lines[1].setProperty({strokeColor:'#32CD32',shadow:true});<br />
<br />
cons1.X.strokeColor('black');<br />
cons1.X.fillColor('#FFB90F');<br />
cons1.X.shadow(true);<br />
cons1.Y.visible(false);<br />
cons2.l_2.strokeWidth(4);<br />
cons1.X.face('>');<br />
cons1.X.size(8);<br />
cons1.X.labelColor('#FFB90F');<br />
cons2.k1.dash(2);<br />
</jsxgraph></source><br />
<br />
[[Category:Examples]]<br />
[[Category:Geometry]]</div>
Bianca
http://jsxgraph.org/wiki/index.php?title=Geometric_constructions_with_JessieScript&diff=3812
Geometric constructions with JessieScript
2010-03-21T14:33:01Z
<p>Bianca: </p>
<hr />
<div>Easy JSXGraph constructions with geometric elements can be created by a mathematical syntax by using the function<br />
<source><br />
board.construct(...);<br />
</source><br />
Possible elements:<br />
{| cellpadding="8" cellspacing="0" border="1"<br />
! Construction !! Description<br />
|-<br />
| A(1,1) || Point with name 'A' at the position (1,1)<br />
|-<br />
| ZY(0.5<nowiki>|</nowiki>1) || Point with name 'ZY' at the position (0.5,1)<br />
|-<br />
| ]AB[ || straight line through the points A and B<br />
|-<br />
| [AB[ || ray through the points A and B, stopping at A<br />
|-<br />
| ]AB] || ray through the points A and B, stopping at B<br />
|-<br />
| [AB] || segment through the points A and B<br />
|-<br />
| g=[AB] || segment through the points A and B, named by 'g'<br />
|-<br />
| k(A,1) || circle with midpoint A and radius 1<br />
|-<br />
| k(A,B) || circle with midpoint A through the point B on the circle line<br />
|-<br />
| k(A,[BC]) || circle with midpoint A and radius defined by the length of the (not necessarily existing) segement [BC]<br />
|-<br />
| k_1=k(A,1) || circle with midpoint A and radius 1, named by 'k_1'<br />
|}<br />
The different elements have to be separated by semicolon.<br />
<br />
The function returns an object with all the created elements so that afterwards properties can be set.<br />
The access works by<br />
{| cellpadding="8" cellspacing="0" border="1"<br />
! Element !! Description<br />
|-<br />
| constr.points[i] || take the i-th point of the construction 'constr'<br />
|-<br />
| constr.lines[i] || take the i-th line (or rays or segement) of the construction 'constr'<br />
|-<br />
| constr.circles[i] || take the i-th circle of the construction 'constr'<br />
|-<br />
| constr.A || take the element with name 'A' of the construction 'constr'<br />
|}<br />
===Example===<br />
<jsxgraph width="400" height="400" box="box"><br />
var cons1, cons2;<br />
board = JXG.JSXGraph.initBoard('jxgbox', {grid:true, originX: 50, originY: 300, unitX: 50, unitY: 50, axis:true});<br />
<br />
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]);");<br />
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]");<br />
<br />
cons1.points[0].setProperty({face:'diamond',size:7,strokeColor:'#8B2252',fillColor:'#8B2252'});<br />
cons1.circles[1].setProperty({strokeColor:'#BA55D3'});<br />
cons2.J.setProperty({face:'triangleUp',size:8,strokeColor:'black',fillColor:'#EE82EE'});<br />
cons2.lines[1].setProperty({strokeColor:'#32CD32',shadow:true});<br />
<br />
cons1.X.strokeColor('black');<br />
cons1.X.fillColor('#FFB90F');<br />
cons1.X.shadow(true);<br />
cons1.Y.visible(false);<br />
cons2.l_2.strokeWidth(4);<br />
cons1.X.face('>');<br />
cons1.X.size(8);<br />
cons1.X.labelColor('#FFB90F');<br />
cons2.k1.dash(2);<br />
<br />
</jsxgraph><br />
<br />
===The JavaScript code===<br />
<br />
<source lang="xml"><br />
<jsxgraph width="500" height="400" box="box"><br />
var cons1, cons2;<br />
board = JXG.JSXGraph.initBoard('box', {grid:true, originX: 50, originY: 300, unitX: 50, unitY: 50, axis:true});<br />
<br />
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]);");<br />
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]");<br />
<br />
cons1.points[0].setProperty({face:'diamond',size:7,strokeColor:'#8B2252',fillColor:'#8B2252'});<br />
cons1.circles[1].setProperty({strokeColor:'#BA55D3'});<br />
cons2.J.setProperty({face:'triangleUp',size:8,strokeColor:'black',fillColor:'#EE82EE'});<br />
cons2.lines[1].setProperty({strokeColor:'#32CD32',shadow:true});<br />
<br />
cons1.X.strokeColor('black');<br />
cons1.X.fillColor('#FFB90F');<br />
cons1.X.shadow(true);<br />
cons1.Y.visible(false);<br />
cons2.l_2.strokeWidth(4);<br />
cons1.X.face('>');<br />
cons1.X.size(8);<br />
cons1.X.labelColor('#FFB90F');<br />
cons2.k1.dash(2);<br />
</jsxgraph></source><br />
<br />
[[Category:Examples]]<br />
[[Category:Geometry]]</div>
Bianca
http://jsxgraph.org/wiki/index.php?title=Geometric_constructions_with_JessieScript&diff=3811
Geometric constructions with JessieScript
2010-03-21T14:28:19Z
<p>Bianca: </p>
<hr />
<div>Easy JSXGraph constructions with geometric elements can be created by a mathematical syntax by using the function<br />
<source><br />
board.construct(...);<br />
</source><br />
Possible elements:<br />
{| cellpadding="8" cellspacing="0" border="1"<br />
! Construction !! Description<br />
|-<br />
| A(1,1) || Point with name 'A' at the position (1,1)<br />
|-<br />
| ZY(0.5<nowiki>|</nowiki>1) || Point with name 'ZY' at the position (0.5,1)<br />
|-<br />
| ]AB[ || straight line through the points A and B<br />
|-<br />
| [AB[ || ray through the points A and B, stopping at A<br />
|-<br />
| ]AB] || ray through the points A and B, stopping at B<br />
|-<br />
| [AB] || segment through the points A and B<br />
|-<br />
| g=[AB] || segment through the points A and B, named by 'g'<br />
|-<br />
| k(A,1) || circle with midpoint A and radius 1<br />
|-<br />
| k(A,B) || circle with midpoint A through the point B on the circle line<br />
|-<br />
| k(A,[BC]) || circle with midpoint A and radius defined by the length of the (not necessarily existing) segement [BC]<br />
|-<br />
| k_1=k(A,1) || circle with midpoint A and radius 1, named by 'k_1'<br />
|}<br />
The different elements have to be separated by semicolon.<br />
<br />
===Example===<br />
<jsxgraph width="400" height="400" box="box"><br />
var cons1, cons2;<br />
board = JXG.JSXGraph.initBoard('jxgbox', {grid:true, originX: 50, originY: 300, unitX: 50, unitY: 50, axis:true});<br />
<br />
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]);");<br />
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]");<br />
<br />
cons1.points[0].setProperty({face:'diamond',size:7,strokeColor:'#8B2252',fillColor:'#8B2252'});<br />
cons1.circles[1].setProperty({strokeColor:'#BA55D3'});<br />
cons2.J.setProperty({face:'triangleUp',size:8,strokeColor:'black',fillColor:'#EE82EE'});<br />
cons2.lines[1].setProperty({strokeColor:'#32CD32',shadow:true});<br />
<br />
cons1.X.strokeColor('black');<br />
cons1.X.fillColor('#FFB90F');<br />
cons1.X.shadow(true);<br />
cons1.Y.visible(false);<br />
cons2.l_2.strokeWidth(4);<br />
cons1.X.face('>');<br />
cons1.X.size(8);<br />
cons1.X.labelColor('#FFB90F');<br />
cons2.k1.dash(2);<br />
<br />
</jsxgraph><br />
<br />
===The JavaScript code===<br />
<br />
<source lang="xml"><br />
<jsxgraph width="500" height="400" box="box"><br />
var cons1, cons2;<br />
board = JXG.JSXGraph.initBoard('box', {grid:true, originX: 50, originY: 300, unitX: 50, unitY: 50, axis:true});<br />
<br />
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]);");<br />
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]");<br />
<br />
cons1.points[0].setProperty({face:'diamond',size:7,strokeColor:'#8B2252',fillColor:'#8B2252'});<br />
cons1.circles[1].setProperty({strokeColor:'#BA55D3'});<br />
cons2.J.setProperty({face:'triangleUp',size:8,strokeColor:'black',fillColor:'#EE82EE'});<br />
cons2.lines[1].setProperty({strokeColor:'#32CD32',shadow:true});<br />
<br />
cons1.X.strokeColor('black');<br />
cons1.X.fillColor('#FFB90F');<br />
cons1.X.shadow(true);<br />
cons1.Y.visible(false);<br />
cons2.l_2.strokeWidth(4);<br />
cons1.X.face('>');<br />
cons1.X.size(8);<br />
cons1.X.labelColor('#FFB90F');<br />
cons2.k1.dash(2);<br />
</jsxgraph></source><br />
<br />
[[Category:Examples]]<br />
[[Category:Geometry]]</div>
Bianca
http://jsxgraph.org/wiki/index.php?title=Geometric_constructions_with_JessieScript&diff=3810
Geometric constructions with JessieScript
2010-03-21T14:25:45Z
<p>Bianca: </p>
<hr />
<div>Easy JSXGraph constructions with geometric elements can be created by a mathematical syntax by using the function<br />
<source><br />
board.construct(...);<br />
</source><br />
Possible elements:<br />
{| cellpadding="8" cellspacing="0" border="1"<br />
! Construction !! Description<br />
|-<br />
| A(1,1) || Point with name 'A' at the position (1,1)<br />
|-<br />
| ZY(1|1) || Point with name 'ZY' at the position (1,1)<br />
|-<br />
| ]AB[ || straight line through the points A and B<br />
|-<br />
| [AB[ || ray through the points A and B, stopping at A<br />
|-<br />
| ]AB] || ray through the points A and B, stopping at B<br />
|-<br />
| [AB] || segment through the points A and B<br />
|-<br />
| g=[AB] || segment through the points A and B, named by 'g'<br />
|-<br />
| k(A,1) || circle with midpoint A and radius 1<br />
|-<br />
| k(A,B) || circle with midpoint A through the point B on the circle line<br />
|-<br />
| k(A,[BC]) || circle with midpoint A and radius defined by the length of the (not necessarily existing) segement [BC]<br />
|-<br />
| k_1=k(A,1) || circle with midpoint A and radius 1, named by 'k_1'<br />
|}<br />
The different elements have to be separated by semicolon.<br />
<br />
===Example===<br />
<jsxgraph width="400" height="400" box="box"><br />
var cons1, cons2;<br />
board = JXG.JSXGraph.initBoard('jxgbox', {grid:true, originX: 50, originY: 300, unitX: 50, unitY: 50, axis:true});<br />
<br />
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]);");<br />
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]");<br />
<br />
cons1.points[0].setProperty({face:'diamond',size:7,strokeColor:'#8B2252',fillColor:'#8B2252'});<br />
cons1.circles[1].setProperty({strokeColor:'#BA55D3'});<br />
cons2.J.setProperty({face:'triangleUp',size:8,strokeColor:'black',fillColor:'#EE82EE'});<br />
cons2.lines[1].setProperty({strokeColor:'#32CD32',shadow:true});<br />
<br />
cons1.X.strokeColor('black');<br />
cons1.X.fillColor('#FFB90F');<br />
cons1.X.shadow(true);<br />
cons1.Y.visible(false);<br />
cons2.l_2.strokeWidth(4);<br />
cons1.X.face('>');<br />
cons1.X.size(8);<br />
cons1.X.labelColor('#FFB90F');<br />
cons2.k1.dash(2);<br />
<br />
</jsxgraph><br />
<br />
===The JavaScript code===<br />
<br />
<source lang="xml"><br />
<jsxgraph width="500" height="400" box="box"><br />
var cons1, cons2;<br />
board = JXG.JSXGraph.initBoard('box', {grid:true, originX: 50, originY: 300, unitX: 50, unitY: 50, axis:true});<br />
<br />
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]);");<br />
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]");<br />
<br />
cons1.points[0].setProperty({face:'diamond',size:7,strokeColor:'#8B2252',fillColor:'#8B2252'});<br />
cons1.circles[1].setProperty({strokeColor:'#BA55D3'});<br />
cons2.J.setProperty({face:'triangleUp',size:8,strokeColor:'black',fillColor:'#EE82EE'});<br />
cons2.lines[1].setProperty({strokeColor:'#32CD32',shadow:true});<br />
<br />
cons1.X.strokeColor('black');<br />
cons1.X.fillColor('#FFB90F');<br />
cons1.X.shadow(true);<br />
cons1.Y.visible(false);<br />
cons2.l_2.strokeWidth(4);<br />
cons1.X.face('>');<br />
cons1.X.size(8);<br />
cons1.X.labelColor('#FFB90F');<br />
cons2.k1.dash(2);<br />
</jsxgraph></source><br />
<br />
[[Category:Examples]]<br />
[[Category:Geometry]]</div>
Bianca
http://jsxgraph.org/wiki/index.php?title=Geometric_constructions_with_JessieScript&diff=3809
Geometric constructions with JessieScript
2010-03-21T14:25:06Z
<p>Bianca: </p>
<hr />
<div>Easy JSXGraph constructions with geometric elements can be created by a mathematical syntax by using the function<br />
<source><br />
board.construct(...);<br />
</source><br />
Possible elements:<br />
{| cellpadding="8" cellspacing="0" border="1"<br />
! Construction !! Description<br />
|-<br />
| A(1,1) || Point with name 'A' at the position (1,1)<br />
|-<br />
| XY(1|1) || Point with name 'XY' at the position (1,1)<br />
|-<br />
| ]AB[ || straight line through the points A and B<br />
|-<br />
| [AB[ || ray through the points A and B, stopping at A<br />
|-<br />
| ]AB] || ray through the points A and B, stopping at B<br />
|-<br />
| [AB] || segment through the points A and B<br />
|-<br />
| g=[AB] || segment through the points A and B, named by 'g'<br />
|-<br />
| k(A,1) || circle with midpoint A and radius 1<br />
|-<br />
| k(A,B) || circle with midpoint A through the point B on the circle line<br />
|-<br />
| k(A,[BC]) || circle with midpoint A and radius defined by the length of the (not necessarily existing) segement [BC]<br />
|-<br />
| k_1=k(A,1) || circle with midpoint A and radius 1, named by 'k_1'<br />
|}<br />
The different elements have to be separated by semicolon.<br />
<br />
===Example===<br />
<jsxgraph width="400" height="400" box="box"><br />
var cons1, cons2;<br />
board = JXG.JSXGraph.initBoard('jxgbox', {grid:true, originX: 50, originY: 300, unitX: 50, unitY: 50, axis:true});<br />
<br />
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]);");<br />
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]");<br />
<br />
cons1.points[0].setProperty({face:'diamond',size:7,strokeColor:'#8B2252',fillColor:'#8B2252'});<br />
cons1.circles[1].setProperty({strokeColor:'#BA55D3'});<br />
cons2.J.setProperty({face:'triangleUp',size:8,strokeColor:'black',fillColor:'#EE82EE'});<br />
cons2.lines[1].setProperty({strokeColor:'#32CD32',shadow:true});<br />
<br />
cons1.X.strokeColor('black');<br />
cons1.X.fillColor('#FFB90F');<br />
cons1.X.shadow(true);<br />
cons1.Y.visible(false);<br />
cons2.l_2.strokeWidth(4);<br />
cons1.X.face('>');<br />
cons1.X.size(8);<br />
cons1.X.labelColor('#FFB90F');<br />
cons2.k1.dash(2);<br />
<br />
</jsxgraph><br />
<br />
===The JavaScript code===<br />
<br />
<source lang="xml"><br />
<jsxgraph width="500" height="400" box="box"><br />
var cons1, cons2;<br />
board = JXG.JSXGraph.initBoard('box', {grid:true, originX: 50, originY: 300, unitX: 50, unitY: 50, axis:true});<br />
<br />
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]);");<br />
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]");<br />
<br />
cons1.points[0].setProperty({face:'diamond',size:7,strokeColor:'#8B2252',fillColor:'#8B2252'});<br />
cons1.circles[1].setProperty({strokeColor:'#BA55D3'});<br />
cons2.J.setProperty({face:'triangleUp',size:8,strokeColor:'black',fillColor:'#EE82EE'});<br />
cons2.lines[1].setProperty({strokeColor:'#32CD32',shadow:true});<br />
<br />
cons1.X.strokeColor('black');<br />
cons1.X.fillColor('#FFB90F');<br />
cons1.X.shadow(true);<br />
cons1.Y.visible(false);<br />
cons2.l_2.strokeWidth(4);<br />
cons1.X.face('>');<br />
cons1.X.size(8);<br />
cons1.X.labelColor('#FFB90F');<br />
cons2.k1.dash(2);<br />
</jsxgraph></source><br />
<br />
[[Category:Examples]]<br />
[[Category:Geometry]]</div>
Bianca
http://jsxgraph.org/wiki/index.php?title=Geometric_constructions_with_JessieScript&diff=3808
Geometric constructions with JessieScript
2010-03-21T14:24:44Z
<p>Bianca: </p>
<hr />
<div>Easy JSXGraph constructions with geometric elements can be created by a mathematical syntax by using the function<br />
<source><br />
board.construct(...);<br />
</source><br />
Possible elements:<br />
{| cellpadding="8" cellspacing="0" border="1"<br />
! Construction !! Description<br />
|-<br />
| A(1,1) || Point with name 'A' at the position (1,1)<br />
|-<br />
| XY(1|1) || Point with name 'XY' at the position (1,1)<br />
|-<br />
| ]AB[ || straight line through the points A and B<br />
|-<br />
| [AB[ || ray through the points A and B, stopping at A<br />
|-<br />
| ]AB] || ray through the points A and B, stopping at B<br />
|-<br />
| [AB] || segment through the points A and B<br />
|-<br />
| g=[AB] || segment through the points A and B, named by 'g'<br />
|-<br />
| k(A,1) || circle with midpoint A and radius 1<br />
|-<br />
| k(A,B) || circle with midpoint A through the point B on the circle line<br />
|-<br />
| k(A,[BC]) || circle with midpoint A and radius defined by the length of the (not necessarily existing) segement [BC]<br />
|-<br />
| k_1=k(A,1) || circle with midpoint A and radius 1, named by 'k_1'<br />
|}<br />
The different elements have to be separated by semicolon.<br />
<br />
Example:<br />
<jsxgraph width="400" height="400" box="box"><br />
var cons1, cons2;<br />
board = JXG.JSXGraph.initBoard('jxgbox', {grid:true, originX: 50, originY: 300, unitX: 50, unitY: 50, axis:true});<br />
<br />
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]);");<br />
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]");<br />
<br />
cons1.points[0].setProperty({face:'diamond',size:7,strokeColor:'#8B2252',fillColor:'#8B2252'});<br />
cons1.circles[1].setProperty({strokeColor:'#BA55D3'});<br />
cons2.J.setProperty({face:'triangleUp',size:8,strokeColor:'black',fillColor:'#EE82EE'});<br />
cons2.lines[1].setProperty({strokeColor:'#32CD32',shadow:true});<br />
<br />
cons1.X.strokeColor('black');<br />
cons1.X.fillColor('#FFB90F');<br />
cons1.X.shadow(true);<br />
cons1.Y.visible(false);<br />
cons2.l_2.strokeWidth(4);<br />
cons1.X.face('>');<br />
cons1.X.size(8);<br />
cons1.X.labelColor('#FFB90F');<br />
cons2.k1.dash(2);<br />
<br />
</jsxgraph><br />
<br />
===The JavaScript code===<br />
<br />
<source lang="xml"><br />
<jsxgraph width="500" height="400" box="box"><br />
var cons1, cons2;<br />
board = JXG.JSXGraph.initBoard('box', {grid:true, originX: 50, originY: 300, unitX: 50, unitY: 50, axis:true});<br />
<br />
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]);");<br />
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]");<br />
<br />
cons1.points[0].setProperty({face:'diamond',size:7,strokeColor:'#8B2252',fillColor:'#8B2252'});<br />
cons1.circles[1].setProperty({strokeColor:'#BA55D3'});<br />
cons2.J.setProperty({face:'triangleUp',size:8,strokeColor:'black',fillColor:'#EE82EE'});<br />
cons2.lines[1].setProperty({strokeColor:'#32CD32',shadow:true});<br />
<br />
cons1.X.strokeColor('black');<br />
cons1.X.fillColor('#FFB90F');<br />
cons1.X.shadow(true);<br />
cons1.Y.visible(false);<br />
cons2.l_2.strokeWidth(4);<br />
cons1.X.face('>');<br />
cons1.X.size(8);<br />
cons1.X.labelColor('#FFB90F');<br />
cons2.k1.dash(2);<br />
</jsxgraph></source><br />
<br />
[[Category:Examples]]<br />
[[Category:Geometry]]</div>
Bianca
http://jsxgraph.org/wiki/index.php?title=Geometric_constructions_with_JessieScript&diff=3807
Geometric constructions with JessieScript
2010-03-21T14:14:07Z
<p>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...</p>
<hr />
<div><jsxgraph width="400" height="400" box="box"><br />
var cons1, cons2;<br />
board = JXG.JSXGraph.initBoard('jxgbox', {grid:true, originX: 50, originY: 300, unitX: 50, unitY: 50, axis:true});<br />
<br />
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]);");<br />
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]");<br />
<br />
cons1.points[0].setProperty({face:'diamond',size:7,strokeColor:'#8B2252',fillColor:'#8B2252'});<br />
cons1.circles[1].setProperty({strokeColor:'#BA55D3'});<br />
cons2.J.setProperty({face:'triangleUp',size:8,strokeColor:'black',fillColor:'#EE82EE'});<br />
cons2.lines[1].setProperty({strokeColor:'#32CD32',shadow:true});<br />
<br />
cons1.X.strokeColor('black');<br />
cons1.X.fillColor('#FFB90F');<br />
cons1.X.shadow(true);<br />
cons1.Y.visible(false);<br />
cons2.l_2.strokeWidth(4);<br />
cons1.X.face('>');<br />
cons1.X.size(8);<br />
cons1.X.labelColor('#FFB90F');<br />
cons2.k1.dash(2);<br />
<br />
</jsxgraph><br />
<br />
===The JavaScript code===<br />
<br />
<source lang="xml"><br />
<jsxgraph width="500" height="400" box="box"><br />
var cons1, cons2;<br />
board = JXG.JSXGraph.initBoard('box', {grid:true, originX: 50, originY: 300, unitX: 50, unitY: 50, axis:true});<br />
<br />
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]);");<br />
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]");<br />
<br />
cons1.points[0].setProperty({face:'diamond',size:7,strokeColor:'#8B2252',fillColor:'#8B2252'});<br />
cons1.circles[1].setProperty({strokeColor:'#BA55D3'});<br />
cons2.J.setProperty({face:'triangleUp',size:8,strokeColor:'black',fillColor:'#EE82EE'});<br />
cons2.lines[1].setProperty({strokeColor:'#32CD32',shadow:true});<br />
<br />
cons1.X.strokeColor('black');<br />
cons1.X.fillColor('#FFB90F');<br />
cons1.X.shadow(true);<br />
cons1.Y.visible(false);<br />
cons2.l_2.strokeWidth(4);<br />
cons1.X.face('>');<br />
cons1.X.size(8);<br />
cons1.X.labelColor('#FFB90F');<br />
cons2.k1.dash(2);<br />
</jsxgraph></source><br />
<br />
[[Category:Examples]]<br />
[[Category:Geometry]]</div>
Bianca
http://jsxgraph.org/wiki/index.php?title=Showcases&diff=3806
Showcases
2010-03-21T14:10:16Z
<p>Bianca: /* Geometry */</p>
<hr />
<div>===Various topics===<br />
* [["Infinity"]]<br />
* [[Snake - the game]]<br />
* [[Circles on circles]] using jQuery sliders<br />
* [[Colorful circles]]<br />
* [[The HSV color scheme]] (hue, saturation and value)<br />
<br />
===Charts===<br />
* [[Animated age pyramid]]<br />
* [[German election 2009]]<br />
* [[Google style chart]]<br />
* [[Dynamic bar chart]]<br />
* [[Pie chart]]<br />
* [[Spline chart with special highlight]]<br />
* [[Charts from HTML tables]]<br />
* [[Charts from HTML tables - tutorial]]<br />
* [[Different chart styles]]<br />
* [[Display stock quotes from Yahoo!]]<br />
* [[Map with German administrative districts]]<br />
* [[Real-time graphing]]<br />
* [[Time series II]]<br />
* [[Data plot]]<br />
* All examples from [[:Category:Charts]]<br />
<br />
===Geometry===<br />
* [[Euler line]], [[Euler line II]]<br />
* [[Displaying GEONExT constructions]]<br />
* [[Displaying constructions with math syntax]]<br />
* [[Apollonian circle packing]]<br />
* [[Trigonometric functions]]<br />
* [[Approximation of the circle area]]<br />
* [[Circle approximation]]<br />
* [[Five Circle Theorem]]<br />
* [[Circum circles of subtriangles]]<br />
* [[Tangents on circle]]<br />
* [[Sine and cosine]]<br />
* All examples from [[:Category:Geometry]]<br />
<br />
===Statistics===<br />
* [[Random points]]<br />
* [[Data plot of live data via AJAX]]<br />
* [[Analyze data with the Statistics software R]]<br />
* [[Time series forecasting: double exponential smoothing]]<br />
* [[Polynomial regression I]], [[Polynomial regression II]]<br />
<br />
===Calculus and function plotting===<br />
* [[Power Series for sine and cosine]]<br />
* [[Lagrange interpolation]]<br />
* [[Simple function plotter]], [[Parametric curve plotter]], [[Polar curve plotter]]<br />
* [[Rational functions]]<br />
* [[Riemann sums]], [[Riemann sum II]], [[Riemann sum III]], [[Arc length]], [[Continuous functions]]<br />
* [[Cubic spline interpolation]]<br />
* [[Newton's root finding method]]<br />
* [[Interpolation: Neville's algorithm]]<br />
* [[Population growth models]]<br />
* All examples from [[:Category:Calculus]]<br />
<br />
===Curves===<br />
* [[Hypotrochoid]]<br />
* [[Limacon|Lima&ccedil;on of Pascal]]<br />
* [[Watt curve|Watt's curve]]<br />
* [[Archimedean spiral]]<br />
* [[Lissajous curves]]<br />
* [[Bezier curves]]<br />
* [[Bezier curves II]]<br />
* All examples from [[:Category:Curves]]<br />
<br />
===Fractals===<br />
* [[Sierpinski triangle]]<br />
* [[Koch curve]]<br />
* All examples from [[:Category:Fractals]], see also [[Turtle Graphics]] and [[L-systems]]<br />
<br />
===Turtle Graphics===<br />
* [[n-gones]]<br />
* [[L-systems]], or Lindenmayer Systems<br />
* [[Epidemiology: The SIR model]] (Simulation of differential equations with turtle graphics)<br />
* [[SIR model: swine flu]]<br />
* [[Turtle spiral]]<br />
* [[Random walks]]<br />
* All examples from [[:Category:Turtle Graphics]]</div>
Bianca
http://jsxgraph.org/wiki/index.php?title=Options&diff=3305
Options
2009-11-16T14:50:14Z
<p>Bianca: </p>
<hr />
<div>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<br />
<source lang="javascript"><br />
JXG.Options.fontSize = 14;<br />
JXG.Options.text.useASCIIMathML = true;<br />
</source><br />
<br />
Here is the complete list of default values:<br />
<source lang="javascript"><br />
JXG.Options = {<br />
/* Options that are used directly within the board class */<br />
fontSize : 12,<br />
showCopyright : true,<br />
showNavigation : true,<br />
takeSizeFromFile : true, // If true, the construction - when read from a file or string - the size of the div can be changed.<br />
<br />
/* grid options */<br />
grid : {<br />
/* grid styles */<br />
hasGrid : false,<br />
gridX : 2,<br />
gridY : 2,<br />
gridColor : '#C0C0C0',<br />
gridOpacity : '0.5',<br />
gridDash : true,<br />
/* snap to grid options */<br />
snapToGrid : false,<br />
snapSizeX : 2,<br />
snapSizeY : 2<br />
},<br />
/* zoom options */<br />
zoom : {<br />
factor : 1.25<br />
},<br />
<br />
/* geometry element options */<br />
elements : {<br />
/* color options */<br />
color : {<br />
strokeOpacity : 1,<br />
highlightStrokeOpacity : 1,<br />
fillOpacity : 1,<br />
highlightFillOpacity : 1,<br />
<br />
strokeColor : '#0000ff',<br />
highlightStrokeColor : '#C3D9FF',<br />
fillColor : 'none',<br />
highlightFillColor : 'none'<br />
},<br />
strokeWidth : '2px',<br />
<br />
/*draft options */<br />
draft : {<br />
draft : false,<br />
color : '#565656',<br />
opacity : 0.8,<br />
strokeWidth : '1px'<br />
}<br />
},<br />
<br />
/* special point options */<br />
point : {<br />
style : 5, //1;<br />
fillColor : '#ff0000',<br />
highlightFillColor : '#EEEEEE',<br />
strokeColor : '#0000ff', <br />
highlightStrokeColor : '#C3D9FF' <br />
},<br />
<br />
/* special line options */<br />
line : { <br />
firstArrow : false,<br />
lastArrow : false,<br />
straightFirst : true,<br />
straightLast : true,<br />
fillColor : '#000000', <br />
highlightFillColor : 'none', <br />
strokeColor : '#0000ff', <br />
highlightStrokeColor : '#888888', <br />
/* line ticks options */<br />
ticks : {<br />
drawLabels : true,<br />
drawZero : false,<br />
insertTicks : false,<br />
minTicksDistance : 50, <br />
maxTicksDistance : 300,<br />
minorHeight : 4,<br />
majorHeight : 10,<br />
minorTicks : 4,<br />
defaultDistance : 1<br />
}<br />
},<br />
<br />
/*special circle options */<br />
circle : {<br />
fillColor : 'none', <br />
highlightFillColor : 'none', <br />
strokeColor : '#0000ff', <br />
highlightStrokeColor : '#C3D9FF' <br />
},<br />
<br />
/* special angle options */<br />
angle : {<br />
radius : 1.0,<br />
fillColor : '#FF7F00',<br />
highlightFillColor : '#FF7F00',<br />
strokeColor : '#FF7F00',<br />
fillOpacity : 0.3,<br />
highlightFillOpacity : 0.3<br />
},<br />
<br />
/* special arc options */<br />
arc : {<br />
firstArrow : false,<br />
lastArrow : false,<br />
fillColor : 'none', <br />
highlightFillColor : 'none', <br />
strokeColor : '#0000ff', <br />
highlightStrokeColor : '#C3D9FF' <br />
},<br />
<br />
/* special polygon options */<br />
polygon : {<br />
fillColor : '#00FF00',<br />
highlightFillColor : '#00FF00',<br />
fillOpacity : 0.3,<br />
highlightFillOpacity : 0.3<br />
},<br />
<br />
/* special sector options */<br />
sector : {<br />
fillColor : '#00FF00',<br />
highlightFillColor : '#00FF00',<br />
fillOpacity : 0.3,<br />
highlightFillOpacity : 0.3<br />
},<br />
<br />
/* special text options */<br />
text : {<br />
strokeColor : '#000000',<br />
useASCIIMathML : false,<br />
defaultType : 'html' //'html' or 'internal'<br />
},<br />
<br />
/* special curve options */<br />
curve : {<br />
strokeWidth : '1px',<br />
strokeColor : '#0000ff',<br />
RDPsmoothing : false, // Apply the Ramen-Douglas-Peuker algorithm<br />
numberPointsHigh : 1600, // Number of points on curves after mouseUp<br />
numberPointsLow : 400, // Number of points on curves after mousemove<br />
doAdvancedPlot : true // Use the algorithm by Gillam and Hohenwarter<br />
// It is much slower, but the result is better<br />
}, <br />
<br />
/* precision options */<br />
precision : {<br />
hasPoint : 4,<br />
epsilon : 0.0001<br />
}<br />
};<br />
<br />
</source></div>
Bianca
http://jsxgraph.org/wiki/index.php?title=Koch_curve&diff=3273
Koch curve
2009-10-30T14:22:26Z
<p>Bianca: </p>
<hr />
<div><html><br />
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" /><br />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script><br />
<form><textarea id="inputtext" rows=10 cols=35 wrap="off" style="width:600px;"><br />
function koch(x,level) {<br />
if (level<1) {<br />
t.fd(x);<br />
} else {<br />
koch(x/3,level-1);<br />
t.lt(60);<br />
koch(x/3,level-1);<br />
t.rt(120);<br />
koch(x/3,level-1);<br />
t.lt(60);<br />
koch(x/3,level-1);<br />
}<br />
}<br />
<br />
t.cs();<br />
t.hideTurtle();<br />
t.setPos(-250,0);<br />
t.rt(90);<br />
koch(400,7);<br />
<br />
</textarea><br /><br />
<input type="button" value="run" onClick="run()"><br />
<input type="button" value="clear" onClick="clearturtle()"><br />
</form><br />
<div id="box" class="jxgbox" style="width:600px; height:400px;"></div><br />
<script language="JavaScript"><br />
var brd = JXG.JSXGraph.initBoard('box', {originX: 300, originY: 300, unitX: 1, unitY: 1});<br />
var t = brd.createElement('turtle');<br />
function run() {<br />
brd.suspendUpdate();<br />
var code = document.getElementById('inputtext').value;<br />
if (code=='') { return; }<br />
eval(code);<br />
brd.unsuspendUpdate();<br />
}<br />
function clearturtle() {<br />
t.cs();<br />
}<br />
run();<br />
</script><br />
</html><br />
<br />
===References===<br />
* [http://www.mathcurve.com/fractals/koch/koch.shtml http://www.mathcurve.com/fractals/koch/koch.shtml]<br />
<br />
===Source code===<br />
<source lang="javascript"><br />
var brd = JXG.JSXGraph.initBoard('box', {originX: 300, originY: 300, unitX: 1, unitY: 1});<br />
var t = brd.createElement('turtle');<br />
function run() {<br />
brd.suspendUpdate();<br />
var code = document.getElementById('inputtext').value;<br />
if (code=='') { return; }<br />
eval(code);<br />
brd.unsuspendUpdate();<br />
}<br />
function clearturtle() {<br />
t.cs();<br />
}<br />
run();<br />
<br />
function koch(x,level) {<br />
if (level<1) {<br />
t.fd(x);<br />
} else {<br />
koch(x/3,level-1);<br />
<br />
t.lt(60);<br />
koch(x/3,level-1);<br />
t.rt(120);<br />
koch(x/3,level-1);<br />
t.lt(60);<br />
koch(x/3,level-1);<br />
}<br />
}<br />
<br />
t.cs();<br />
t.hideTurtle();<br />
t.setPos(-250,0);<br />
t.rt(90);<br />
koch(400,7);<br />
</source><br />
<br />
[[Category:Examples]]<br />
<br />
[[Category:Turtle Graphics]]<br />
[[Category:Fractals]]<br />
[[Category:Curves]]</div>
Bianca
http://jsxgraph.org/wiki/index.php?title=Riemann_sum_II&diff=2806
Riemann sum II
2009-08-30T18:00:32Z
<p>Bianca: </p>
<hr />
<div><jsxgraph width="800" height="400" box="box"><br />
var brd = JXG.JSXGraph.initBoard('box', {originX: 400, originY: 200, grid:true, unitX: 50, unitY: 50});<br />
brd.createElement('axis', [[0,0], [1,0]], {strokeColor:'black'});<br />
brd.createElement('axis', [[0,0], [0,1]], {strokeColor:'black'}); <br />
var b = brd.createElement('slider',[[1,3.5],[5,3.5],[0,1,3]],{name:'a', strokeColor:'black', fillColor:'white'});<br />
var f = function(x){ return b.Value()*Math.sin(x); }<br />
var plot = brd.createElement('functiongraph',[f,-7,7], {strokeColor:'#32CD32', strokeWidth:'4px'});<br />
var g = brd.D(f);<br />
var plot2 = brd.createElement('functiongraph',[g,-7,7], {strokeColor:'#9370DB', strokeWidth:'2px'});<br />
var os = brd.createElement('riemannsum',[f, 35, 'middle', -7, 7], {fillColor:'#B22222', fillOpacity:0.3, strokeColor:'#8B1A1A', strokeWidth:'2px'});<br />
var t1 = brd.createElement('text',[-7,2,"(a*sin(x))'"],{strokeColor:'#9370DB'});<br />
var t2 = brd.createElement('text',[-7,-1.5,"a*sin(x)"],{strokeColor:'#32CD32'}); <br />
</jsxgraph><br />
<br />
===The underlying JavaScript code===<br />
<source lang="xml"><br />
<jsxgraph width="800" height="400" box="box"><br />
var brd = JXG.JSXGraph.initBoard('box', {originX: 400, originY: 200, grid:true, unitX: 50, unitY: 50});<br />
brd.createElement('axis', [[0,0], [1,0]], {strokeColor:'black'});<br />
brd.createElement('axis', [[0,0], [0,1]], {strokeColor:'black'}); <br />
var b = brd.createElement('slider',[[1,3.5],[5,3.5],[0,1,3]],{name:'a', strokeColor:'black', fillColor:'white'});<br />
var f = function(x){ return b.Value()*Math.sin(x); }<br />
var plot = brd.createElement('functiongraph',[f,-7,7], {strokeColor:'#32CD32', strokeWidth:'4px'});<br />
var g = brd.D(f);<br />
var plot2 = brd.createElement('functiongraph',[g,-7,7], {strokeColor:'#9370DB', strokeWidth:'2px'});<br />
var os = brd.createElement('riemannsum',[f, 35, 'middle', -7, 7], {fillColor:'#B22222', fillOpacity:0.3, strokeColor:'#8B1A1A', strokeWidth:'2px'});<br />
var t1 = brd.createElement('text',[-7,2,"(a*sin(x))'"],{strokeColor:'#9370DB'});<br />
var t2 = brd.createElement('text',[-7,-1.5,"a*sin(x)"],{strokeColor:'#32CD32'}); <br />
</jsxgraph><br />
</source><br />
<br />
[[Category:Examples]]<br />
[[Category:Calculus]]</div>
Bianca
http://jsxgraph.org/wiki/index.php?title=Riemann_sum_II&diff=2805
Riemann sum II
2009-08-30T17:59:10Z
<p>Bianca: </p>
<hr />
<div><html><br />
<jsxgraph width="800" height="400" box="box"><br />
var brd = JXG.JSXGraph.initBoard('jxgbox', {originX: 400, originY: 200, grid:true, unitX: 50, unitY: 50});<br />
brd.createElement('axis', [[0,0], [1,0]], {strokeColor:'black'});<br />
brd.createElement('axis', [[0,0], [0,1]], {strokeColor:'black'}); <br />
var b = brd.createElement('slider',[[1,3.5],[5,3.5],[0,1,3]],{name:'a', strokeColor:'black', fillColor:'white'});<br />
var f = function(x){ return b.Value()*Math.sin(x); }<br />
var plot = brd.createElement('functiongraph',[f,-7,7], {strokeColor:'#32CD32', strokeWidth:'4px'});<br />
var g = brd.D(f);<br />
var plot2 = brd.createElement('functiongraph',[g,-7,7], {strokeColor:'#9370DB', strokeWidth:'2px'});<br />
var os = brd.createElement('riemannsum',[f, 35, 'middle', -7, 7], {fillColor:'#B22222', fillOpacity:0.3, strokeColor:'#8B1A1A', strokeWidth:'2px'});<br />
var t1 = brd.createElement('text',[-7,2,"(a*sin(x))'"],{strokeColor:'#9370DB'});<br />
var t2 = brd.createElement('text',[-7,-1.5,"a*sin(x)"],{strokeColor:'#32CD32'}); <br />
</jsxgraph><br />
<br />
===The underlying JavaScript code===<br />
<source lang="xml"><br />
<jsxgraph width="800" height="400" box="box"><br />
var brd = JXG.JSXGraph.initBoard('jxgbox', {originX: 400, originY: 200, grid:true, unitX: 50, unitY: 50});<br />
brd.createElement('axis', [[0,0], [1,0]], {strokeColor:'black'});<br />
brd.createElement('axis', [[0,0], [0,1]], {strokeColor:'black'}); <br />
var b = brd.createElement('slider',[[1,3.5],[5,3.5],[0,1,3]],{name:'a', strokeColor:'black', fillColor:'white'});<br />
var f = function(x){ return b.Value()*Math.sin(x); }<br />
var plot = brd.createElement('functiongraph',[f,-7,7], {strokeColor:'#32CD32', strokeWidth:'4px'});<br />
var g = brd.D(f);<br />
var plot2 = brd.createElement('functiongraph',[g,-7,7], {strokeColor:'#9370DB', strokeWidth:'2px'});<br />
var os = brd.createElement('riemannsum',[f, 35, 'middle', -7, 7], {fillColor:'#B22222', fillOpacity:0.3, strokeColor:'#8B1A1A', strokeWidth:'2px'});<br />
var t1 = brd.createElement('text',[-7,2,"(a*sin(x))'"],{strokeColor:'#9370DB'});<br />
var t2 = brd.createElement('text',[-7,-1.5,"a*sin(x)"],{strokeColor:'#32CD32'}); <br />
</jsxgraph><br />
</source><br />
<br />
</html><br />
[[Category:Examples]]<br />
[[Category:Calculus]]</div>
Bianca
http://jsxgraph.org/wiki/index.php?title=Riemann_sum_II&diff=2804
Riemann sum II
2009-08-30T17:58:46Z
<p>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...</p>
<hr />
<div><html><br />
<form>Riemann sum type: <select id="sumtype"><br />
<option value='left' selected> left<br />
<option value='right'> right<br />
<option value='middle'> middle<br />
<option value='trapezodial'> trapezodial<br />
<option value='lower'> lower<br />
<option value='upper'> upper<br />
</select></form><br />
</html><br />
<jsxgraph width="800" height="400" box="box"><br />
var brd = JXG.JSXGraph.initBoard('jxgbox', {originX: 400, originY: 200, grid:true, unitX: 50, unitY: 50});<br />
brd.createElement('axis', [[0,0], [1,0]], {strokeColor:'black'});<br />
brd.createElement('axis', [[0,0], [0,1]], {strokeColor:'black'}); <br />
var b = brd.createElement('slider',[[1,3.5],[5,3.5],[0,1,3]],{name:'a', strokeColor:'black', fillColor:'white'});<br />
var f = function(x){ return b.Value()*Math.sin(x); }<br />
var plot = brd.createElement('functiongraph',[f,-7,7], {strokeColor:'#32CD32', strokeWidth:'4px'});<br />
var g = brd.D(f);<br />
var plot2 = brd.createElement('functiongraph',[g,-7,7], {strokeColor:'#9370DB', strokeWidth:'2px'});<br />
var os = brd.createElement('riemannsum',[f, 35, 'middle', -7, 7], {fillColor:'#B22222', fillOpacity:0.3, strokeColor:'#8B1A1A', strokeWidth:'2px'});<br />
var t1 = brd.createElement('text',[-7,2,"(a*sin(x))'"],{strokeColor:'#9370DB'});<br />
var t2 = brd.createElement('text',[-7,-1.5,"a*sin(x)"],{strokeColor:'#32CD32'}); <br />
</jsxgraph><br />
<br />
===The underlying JavaScript code===<br />
<source lang="xml"><br />
<jsxgraph width="800" height="400" box="box"><br />
var brd = JXG.JSXGraph.initBoard('jxgbox', {originX: 400, originY: 200, grid:true, unitX: 50, unitY: 50});<br />
brd.createElement('axis', [[0,0], [1,0]], {strokeColor:'black'});<br />
brd.createElement('axis', [[0,0], [0,1]], {strokeColor:'black'}); <br />
var b = brd.createElement('slider',[[1,3.5],[5,3.5],[0,1,3]],{name:'a', strokeColor:'black', fillColor:'white'});<br />
var f = function(x){ return b.Value()*Math.sin(x); }<br />
var plot = brd.createElement('functiongraph',[f,-7,7], {strokeColor:'#32CD32', strokeWidth:'4px'});<br />
var g = brd.D(f);<br />
var plot2 = brd.createElement('functiongraph',[g,-7,7], {strokeColor:'#9370DB', strokeWidth:'2px'});<br />
var os = brd.createElement('riemannsum',[f, 35, 'middle', -7, 7], {fillColor:'#B22222', fillOpacity:0.3, strokeColor:'#8B1A1A', strokeWidth:'2px'});<br />
var t1 = brd.createElement('text',[-7,2,"(a*sin(x))'"],{strokeColor:'#9370DB'});<br />
var t2 = brd.createElement('text',[-7,-1.5,"a*sin(x)"],{strokeColor:'#32CD32'}); <br />
</jsxgraph><br />
</source><br />
<br />
[[Category:Examples]]<br />
[[Category:Calculus]]</div>
Bianca
http://jsxgraph.org/wiki/index.php?title=Showcases&diff=2803
Showcases
2009-08-30T17:57:44Z
<p>Bianca: /* Calculus and function plotting */</p>
<hr />
<div>===Various topics===<br />
* [["Infinity"]]<br />
* [[Snake - the game]]<br />
* [[Circles on circles]] using jQuery sliders<br />
* [[Display stock quotes from Yahoo!]]<br />
<br />
===Charts===<br />
* [[Different chart styles]]<br />
* [[Google style chart]]<br />
* [[Dynamic bar chart]]<br />
* [[Pie chart]]<br />
* [[Spline chart with special highlight]]<br />
* All examples from [[:Category:Charts]]<br />
<br />
===Geometry===<br />
* [[Sine and cosine]]<br />
* [[Displaying GEONExT constructions]]<br />
* [[Euler line]], [[Euler line II]]<br />
* [[Apollonian circle packing]]<br />
* [[Trigonometric functions]]<br />
* [[Approximation of the circle area]]<br />
* [[Circle approximation]]<br />
* All examples from [[:Category:Geometry]]<br />
<br />
===Statistics===<br />
* [[Random points]]<br />
* [[Data plot of live data via AJAX]]<br />
* [[Analyze data with the Statistics software R]]<br />
* [[Time series forecasting: double exponential smoothing]]<br />
* [[Polynomial regression I]], [[Polynomial regression II]]<br />
<br />
===Calculus and function plotting===<br />
* [[Power Series for sine and cosine]]<br />
* [[Lagrange interpolation]]<br />
* [[Simple function plotter]], [[Parametric curve plotter]], [[Polar curve plotter]]<br />
* [[Rational functions]]<br />
* [[Riemann sums]], [[Riemann sum II]], [[Arc length]], [[Continuous functions]]<br />
* [[Cubic spline interpolation]]<br />
* [[Interpolation: Neville's algorithm]]<br />
* [[Population growth models]]<br />
* All examples from [[:Category:Calculus]]<br />
<br />
===Curves===<br />
* [[Hypotrochoid]]<br />
* [[Limacon|Lima&ccedil;on of Pascal]]<br />
* [[Watt curve|Watt's curve]]<br />
* [[Archimedean spiral]]<br />
* [[Lissajous curves]]<br />
* All examples from [[:Category:Curves]]<br />
<br />
===Fractals===<br />
* [[Sierpinski triangle]]<br />
* [[Koch curve]]<br />
* All examples from [[:Category:Fractals]], see also [[Turtle Graphics]] and [[L-systems]]<br />
<br />
===Turtle Graphics===<br />
* [[n-gones]]<br />
* [[L-systems]], or Lindenmayer Systems<br />
* [[Epidemiology: The SIR model]] (Simulation of differential equations with turtle graphics)<br />
* [[SIR model: swine flu]]<br />
* [[Turtle spiral]]<br />
* [[Random walks]]<br />
* All examples from [[:Category:Turtle Graphics]]</div>
Bianca
http://jsxgraph.org/wiki/index.php?title=Showcases&diff=2802
Showcases
2009-08-30T17:57:22Z
<p>Bianca: /* Calculus and function plotting */</p>
<hr />
<div>===Various topics===<br />
* [["Infinity"]]<br />
* [[Snake - the game]]<br />
* [[Circles on circles]] using jQuery sliders<br />
* [[Display stock quotes from Yahoo!]]<br />
<br />
===Charts===<br />
* [[Different chart styles]]<br />
* [[Google style chart]]<br />
* [[Dynamic bar chart]]<br />
* [[Pie chart]]<br />
* [[Spline chart with special highlight]]<br />
* All examples from [[:Category:Charts]]<br />
<br />
===Geometry===<br />
* [[Sine and cosine]]<br />
* [[Displaying GEONExT constructions]]<br />
* [[Euler line]], [[Euler line II]]<br />
* [[Apollonian circle packing]]<br />
* [[Trigonometric functions]]<br />
* [[Approximation of the circle area]]<br />
* [[Circle approximation]]<br />
* All examples from [[:Category:Geometry]]<br />
<br />
===Statistics===<br />
* [[Random points]]<br />
* [[Data plot of live data via AJAX]]<br />
* [[Analyze data with the Statistics software R]]<br />
* [[Time series forecasting: double exponential smoothing]]<br />
* [[Polynomial regression I]], [[Polynomial regression II]]<br />
<br />
===Calculus and function plotting===<br />
* [[Power Series for sine and cosine]]<br />
* [[Lagrange interpolation]]<br />
* [[Simple function plotter]], [[Parametric curve plotter]], [[Polar curve plotter]]<br />
* [[Rational functions]]<br />
* [[Riemann sums]],[[Riemann sum II]], [[Arc length]], [[Continuous functions]]<br />
* [[Cubic spline interpolation]]<br />
* [[Interpolation: Neville's algorithm]]<br />
* [[Population growth models]]<br />
* All examples from [[:Category:Calculus]]<br />
<br />
===Curves===<br />
* [[Hypotrochoid]]<br />
* [[Limacon|Lima&ccedil;on of Pascal]]<br />
* [[Watt curve|Watt's curve]]<br />
* [[Archimedean spiral]]<br />
* [[Lissajous curves]]<br />
* All examples from [[:Category:Curves]]<br />
<br />
===Fractals===<br />
* [[Sierpinski triangle]]<br />
* [[Koch curve]]<br />
* All examples from [[:Category:Fractals]], see also [[Turtle Graphics]] and [[L-systems]]<br />
<br />
===Turtle Graphics===<br />
* [[n-gones]]<br />
* [[L-systems]], or Lindenmayer Systems<br />
* [[Epidemiology: The SIR model]] (Simulation of differential equations with turtle graphics)<br />
* [[SIR model: swine flu]]<br />
* [[Turtle spiral]]<br />
* [[Random walks]]<br />
* All examples from [[:Category:Turtle Graphics]]</div>
Bianca
http://jsxgraph.org/wiki/index.php?title=Euler_line&diff=2800
Euler line
2009-08-26T11:51:27Z
<p>Bianca: </p>
<hr />
<div><jsxgraph width="500" height="400" box="box"><br />
brd = JXG.JSXGraph.initBoard('box', {boundingbox: [-2, 2, 2, -1.5], keepaspectratio:true});<br />
<br />
brd.suspendUpdate();<br />
A = brd.createElement('point',[1,0],{strokeColor:'#901B77',fillColor:'#CA147A'});<br />
B = brd.createElement('point',[-1,0],{strokeColor:'#901B77',fillColor:'#CA147A'});<br />
C = brd.createElement('point',[0.2,1.5],{strokeColor:'#901B77',fillColor:'#CA147A'});<br />
pol = brd.createElement('polygon',[A,B,C], {fillColor:'#FFFF0050'});<br />
for(i=0;i<=2;i++) {<br />
pol.borders[i].setProperty('strokeColor:#009256');<br />
}<br />
<br />
pABC = brd.createElement('perpendicular',[pol.borders[0],C],{strokeWidth:1,dash:2, name:['','H_c']});<br />
pBCA = brd.createElement('perpendicular',[pol.borders[1],A],{strokeWidth:1,dash:2, name:['','H_a']});<br />
pCAB = brd.createElement('perpendicular',[pol.borders[2],B],{strokeWidth:1,dash:2, name:['','H_b']});<br />
pABC[1].setProperty('strokeColor:#901B77','fillColor:#CA147A');<br />
pBCA[1].setProperty('strokeColor:#901B77','fillColor:#CA147A');<br />
pCAB[1].setProperty('strokeColor:#901B77','fillColor:#CA147A');<br />
i1 = brd.createElement('intersection',[pABC[0],pCAB[0],0],{strokeColor:'#009256',fillColor:'#65B72E',name:'H'});<br />
pABC[0].setProperty({strokeColor:'#000000',dash:1,strokeWidth:1});<br />
pBCA[0].setProperty({strokeColor:'#000000',dash:1,strokeWidth:1});<br />
pCAB[0].setProperty({strokeColor:'#000000',dash:1,strokeWidth:1});<br />
<br />
mAB = brd.createElement('midpoint',[A,B],{strokeColor:'#901B77',fillColor:'#CA147A',name:'M_c'});<br />
mBC = brd.createElement('midpoint',[B,C],{strokeColor:'#901B77',fillColor:'#CA147A',name:'M_a'});<br />
mCA = brd.createElement('midpoint',[C,A],{strokeColor:'#901B77',fillColor:'#CA147A',name:'M_b'});<br />
ma = brd.createElement('line',[mBC,A],{straightFirst:false,straightLast:false,strokeWidth:1,strokeColor:'#333333',dash:2});<br />
mb = brd.createElement('line',[mCA,B],{straightFirst:false,straightLast:false,strokeWidth:1,strokeColor:'#333333',dash:2});<br />
mc = brd.createElement('line',[mAB,C],{straightFirst:false,straightLast:false,strokeWidth:1,strokeColor:'#333333',dash:2});<br />
i2 = brd.createElement('intersection',[ma,mc,0],{strokeColor:'#009256',fillColor:'#65B72E',name:'S'});<br />
<br />
i3 = brd.createElement('circumcirclemidpoint',[A,B,C],{strokeColor:'#009256',fillColor:'#65B72E',name:'U'});<br />
c = brd.createElement('circumcircle',[A,B,C],{strokeColor:'#000000',dash:3,strokeWidth:1});<br />
c[0].setProperty('visible:false');<br />
c[1].setProperty({strokeColor:'#000000',dash:3,strokeWidth:1});<br />
<br />
euler = brd.createElement('line',[i1,i3],{strokeWidth:2,strokeColor:'#901B77'});<br />
brd.unsuspendUpdate();<br />
<br />
</jsxgraph><br />
<br />
===The JavaScript code===<br />
<br />
<source lang="xml"><br />
<jsxgraph width="500" height="400" box="box"><br />
brd = JXG.JSXGraph.initBoard('box', {boundingbox: [-2, 2, 2, -1.5], keepaspectratio:true});<br />
<br />
brd.suspendUpdate();<br />
A = brd.createElement('point',[1,0],{strokeColor:'#901B77',fillColor:'#CA147A'});<br />
B = brd.createElement('point',[-1,0],{strokeColor:'#901B77',fillColor:'#CA147A'});<br />
C = brd.createElement('point',[0.2,1.5],{strokeColor:'#901B77',fillColor:'#CA147A'});<br />
pol = brd.createElement('polygon',[A,B,C], {fillColor:'#FFFF0050'});<br />
for(i=0;i<=2;i++) {<br />
pol.borders[i].setProperty('strokeColor:#009256');<br />
}<br />
<br />
pABC = brd.createElement('perpendicular',[pol.borders[0],C],{strokeWidth:1,dash:2, name:['','H_c']});<br />
pBCA = brd.createElement('perpendicular',[pol.borders[1],A],{strokeWidth:1,dash:2, name:['','H_a']});<br />
pCAB = brd.createElement('perpendicular',[pol.borders[2],B],{strokeWidth:1,dash:2, name:['','H_b']});<br />
pABC[1].setProperty('strokeColor:#901B77','fillColor:#CA147A');<br />
pBCA[1].setProperty('strokeColor:#901B77','fillColor:#CA147A');<br />
pCAB[1].setProperty('strokeColor:#901B77','fillColor:#CA147A');<br />
i1 = brd.createElement('intersection',[pABC[0],pCAB[0],0],{strokeColor:'#009256',fillColor:'#65B72E',name:'H'});<br />
pABC[0].setProperty({strokeColor:'#000000',dash:1,strokeWidth:1});<br />
pBCA[0].setProperty({strokeColor:'#000000',dash:1,strokeWidth:1});<br />
pCAB[0].setProperty({strokeColor:'#000000',dash:1,strokeWidth:1});<br />
<br />
mAB = brd.createElement('midpoint',[A,B],{strokeColor:'#901B77',fillColor:'#CA147A',name:'M_c'});<br />
mBC = brd.createElement('midpoint',[B,C],{strokeColor:'#901B77',fillColor:'#CA147A',name:'M_a'});<br />
mCA = brd.createElement('midpoint',[C,A],{strokeColor:'#901B77',fillColor:'#CA147A',name:'M_b'});<br />
ma = brd.createElement('line',[mBC,A],{straightFirst:false,straightLast:false,strokeWidth:1,strokeColor:'#333333',dash:2});<br />
mb = brd.createElement('line',[mCA,B],{straightFirst:false,straightLast:false,strokeWidth:1,strokeColor:'#333333',dash:2});<br />
mc = brd.createElement('line',[mAB,C],{straightFirst:false,straightLast:false,strokeWidth:1,strokeColor:'#333333',dash:2});<br />
i2 = brd.createElement('intersection',[ma,mc,0],{strokeColor:'#009256',fillColor:'#65B72E',name:'S'});<br />
<br />
i3 = brd.createElement('circumcirclemidpoint',[A,B,C],{strokeColor:'#009256',fillColor:'#65B72E',name:'U'});<br />
c = brd.createElement('circumcircle',[A,B,C],{strokeColor:'#000000',dash:3,strokeWidth:1});<br />
c[0].setProperty('visible:false');<br />
c[1].setProperty({strokeColor:'#000000',dash:3,strokeWidth:1});<br />
<br />
euler = brd.createElement('line',[i1,i3],{strokeWidth:2,strokeColor:'#901B77'});<br />
brd.unsuspendUpdate();<br />
<br />
</jsxgraph></source><br />
<br />
[[Category:Examples]]<br />
[[Category:Geometry]]</div>
Bianca
http://jsxgraph.org/wiki/index.php?title=Euler_line&diff=2799
Euler line
2009-08-26T11:51:03Z
<p>Bianca: </p>
<hr />
<div><jsxgraph width="500" height="400" box="box"><br />
brd = JXG.JSXGraph.initBoard('box', {boundingbox: [-2, 2, 2, -1.5], keepaspectratio:true});<br />
<br />
brd.suspendUpdate();<br />
A = brd.createElement('point',[1,0],{strokeColor:'#901B77',fillColor:'#CA147A'});<br />
B = brd.createElement('point',[-1,0],{strokeColor:'#901B77',fillColor:'#CA147A'});<br />
C = brd.createElement('point',[0.2,1.5],{strokeColor:'#901B77',fillColor:'#CA147A'});<br />
pol = brd.createElement('polygon',[A,B,C], {fillColor:'#FFFF0050'});<br />
for(i=0;i<=2;i++) {<br />
pol.borders[i].setProperty('strokeColor:#009256');<br />
}<br />
<br />
pABC = brd.createElement('perpendicular',[pol.borders[0],C],{strokeWidth:1,dash:2, name:['','H_c']});<br />
pBCA = brd.createElement('perpendicular',[pol.borders[1],A],{strokeWidth:1,dash:2, name:['','H_a']});<br />
pCAB = brd.createElement('perpendicular',[pol.borders[2],B],{strokeWidth:1,dash:2, name:['','H_b']});<br />
pABC[1].setProperty('strokeColor:#901B77','fillColor:#CA147A');<br />
pBCA[1].setProperty('strokeColor:#901B77','fillColor:#CA147A');<br />
pCAB[1].setProperty('strokeColor:#901B77','fillColor:#CA147A');<br />
i1 = brd.createElement('intersection',[pABC[0],pCAB[0],0],{strokeColor:'#009256',fillColor:'#65B72E',name:'H'});<br />
pABC[0].setProperty({strokeColor:'#000000',dash:1,strokeWidth:1});<br />
pBCA[0].setProperty({strokeColor:'#000000',dash:1,strokeWidth:1});<br />
pCAB[0].setProperty({strokeColor:'#000000',dash:1,strokeWidth:1});<br />
<br />
mAB = brd.createElement('midpoint',[A,B],{strokeColor:'#901B77',fillColor:'#CA147A',name:'M_c'});<br />
mBC = brd.createElement('midpoint',[B,C],{strokeColor:'#901B77',fillColor:'#CA147A',name:'M_a'});<br />
mCA = brd.createElement('midpoint',[C,A],{strokeColor:'#901B77',fillColor:'#CA147A',name:'M_b'});<br />
ma = brd.createElement('line',[mBC,A],{straightFirst:false,straightLast:false,strokeWidth:1,strokeColor:'#333333',dash:2});<br />
mb = brd.createElement('line',[mCA,B],{straightFirst:false,straightLast:false,strokeWidth:1,strokeColor:'#333333',dash:2});<br />
mc = brd.createElement('line',[mAB,C],{straightFirst:false,straightLast:false,strokeWidth:1,strokeColor:'#333333',dash:2});<br />
i2 = brd.createElement('intersection',[ma,mc,0],{strokeColor:'#009256',fillColor:'#65B72E',name:'S'});<br />
<br />
i3 = brd.createElement('circumcirclemidpoint',[A,B,C],{strokeColor:'#009256',fillColor:'#65B72E',name:'U'});<br />
c = brd.createElement('circumcircle',[A,B,C],{strokeColor:'#000000',dash:3,strokeWidth:1});<br />
c[0].setProperty('visible:false');<br />
c[1].setProperty({strokeColor:'#000000',dash:3,strokeWidth:1});<br />
<br />
euler = brd.createElement('line',[i1,i3],{strokeWidth:2,strokeColor:'#901B77'});<br />
brd.unsuspendUpdate();<br />
<br />
</jsxgraph><br />
<br />
===The JavaScript code===<br />
<br />
<source lang="xml"><br />
<jsxgraph width="500" height="500" box="box"><br />
brd = JXG.JSXGraph.initBoard('box', {boundingbox: [-2, 2, 2, -2], keepaspectratio:true});<br />
<br />
brd.suspendUpdate();<br />
A = brd.createElement('point',[1,0],{strokeColor:'#901B77',fillColor:'#CA147A'});<br />
B = brd.createElement('point',[-1,0],{strokeColor:'#901B77',fillColor:'#CA147A'});<br />
C = brd.createElement('point',[0.2,1.5],{strokeColor:'#901B77',fillColor:'#CA147A'});<br />
pol = brd.createElement('polygon',[A,B,C], {fillColor:'#FFFF0050'});<br />
for(i=0;i<=2;i++) {<br />
pol.borders[i].setProperty('strokeColor:#009256');<br />
}<br />
<br />
pABC = brd.createElement('perpendicular',[pol.borders[0],C],{strokeWidth:1,dash:2, name:['','H_c']});<br />
pBCA = brd.createElement('perpendicular',[pol.borders[1],A],{strokeWidth:1,dash:2, name:['','H_a']});<br />
pCAB = brd.createElement('perpendicular',[pol.borders[2],B],{strokeWidth:1,dash:2, name:['','H_b']});<br />
pABC[1].setProperty('strokeColor:#901B77','fillColor:#CA147A');<br />
pBCA[1].setProperty('strokeColor:#901B77','fillColor:#CA147A');<br />
pCAB[1].setProperty('strokeColor:#901B77','fillColor:#CA147A');<br />
i1 = brd.createElement('intersection',[pABC[0],pCAB[0],0],{strokeColor:'#009256',fillColor:'#65B72E',name:'H'});<br />
pABC[0].setProperty({strokeColor:'#000000',dash:1,strokeWidth:1});<br />
pBCA[0].setProperty({strokeColor:'#000000',dash:1,strokeWidth:1});<br />
pCAB[0].setProperty({strokeColor:'#000000',dash:1,strokeWidth:1});<br />
<br />
mAB = brd.createElement('midpoint',[A,B],{strokeColor:'#901B77',fillColor:'#CA147A',name:'M_c'});<br />
mBC = brd.createElement('midpoint',[B,C],{strokeColor:'#901B77',fillColor:'#CA147A',name:'M_a'});<br />
mCA = brd.createElement('midpoint',[C,A],{strokeColor:'#901B77',fillColor:'#CA147A',name:'M_b'});<br />
ma = brd.createElement('line',[mBC,A],{straightFirst:false,straightLast:false,strokeWidth:1,strokeColor:'#333333',dash:2});<br />
mb = brd.createElement('line',[mCA,B],{straightFirst:false,straightLast:false,strokeWidth:1,strokeColor:'#333333',dash:2});<br />
mc = brd.createElement('line',[mAB,C],{straightFirst:false,straightLast:false,strokeWidth:1,strokeColor:'#333333',dash:2});<br />
i2 = brd.createElement('intersection',[ma,mc,0],{strokeColor:'#009256',fillColor:'#65B72E',name:'S'});<br />
<br />
i3 = brd.createElement('circumcirclemidpoint',[A,B,C],{strokeColor:'#009256',fillColor:'#65B72E',name:'U'});<br />
c = brd.createElement('circumcircle',[A,B,C],{strokeColor:'#000000',dash:3,strokeWidth:1});<br />
c[0].setProperty('visible:false');<br />
c[1].setProperty({strokeColor:'#000000',dash:3,strokeWidth:1});<br />
<br />
euler = brd.createElement('line',[i1,i3],{strokeWidth:2,strokeColor:'#901B77'});<br />
brd.unsuspendUpdate();<br />
<br />
</jsxgraph></source><br />
<br />
[[Category:Examples]]<br />
[[Category:Geometry]]</div>
Bianca
http://jsxgraph.org/wiki/index.php?title=Dynamic_bar_chart&diff=2798
Dynamic bar chart
2009-08-26T11:42:06Z
<p>Bianca: </p>
<hr />
<div><jsxgraph width="700" height="600" box="box"><br />
board = JXG.JSXGraph.initBoard('box', {originX: 50, originY: 450, unitX: 50, unitY: 50, axis:false});<br />
board.suspendUpdate();<br />
board.createElement('axis', [[0,0], [1,0]], {strokeColor:'black'});<br />
board.createElement('axis', [[0,0], [0,1]], {strokeColor:'black'}); <br />
<br />
var s = board.createElement('slider', [[8,7],[11,7],[1,1,1.5]], {name:'S',strokeColor:'black',fillColor:'white'});<br />
var f = [function(){return this.board.round(s.Value()*4.5,2);},<br />
function(){return this.board.round(s.Value()*(-1),2);},<br />
function(){return this.board.round(s.Value()*3,2);},<br />
function(){return this.board.round(s.Value()*2,2);},<br />
function(){return this.board.round(s.Value()*(-0.5),2);},<br />
function(){return this.board.round(s.Value()*5.5,2);},<br />
function(){return this.board.round(s.Value()*2.5,2);},<br />
function(){return this.board.round(s.Value()*(-0.75),2);},<br />
function(){return this.board.round(s.Value()*(3.5),2);},<br />
function(){return this.board.round(s.Value()*(2),2);},<br />
function(){return this.board.round(s.Value()*(-1.25),2);}<br />
];<br />
var chart = board.createElement('chart', [f], {chartStyle:'bar',width:0.8,labels:f});<br />
chart[0][0].setProperty('fillColor:#8E1B77');<br />
chart[0][1].setProperty('fillColor:#BE1679');<br />
chart[0][2].setProperty('fillColor:#DC1765');<br />
chart[0][3].setProperty('fillColor:#DA2130');<br />
chart[0][4].setProperty('fillColor:#DB311B');<br />
chart[0][5].setProperty('fillColor:#DF4917');<br />
chart[0][6].setProperty('fillColor:#E36317');<br />
chart[0][7].setProperty('fillColor:#E87F1A');<br />
chart[0][8].setProperty('fillColor:#F1B112');<br />
chart[0][9].setProperty('fillColor:#FCF302');<br />
chart[0][10].setProperty('fillColor:#C1E212');<br />
<br />
var dataArr = [4,1,3,2,5,6.5,1.5,2,0.5,1.5,-1]; <br />
var chart2 = board.createElement('chart', dataArr, {chartStyle:'line,point'});<br />
chart2[0].setProperty('strokeColor:black','strokeWidth:2pt');<br />
for(var i=0; i<11;i++) {<br />
chart2[1][i].setProperty('strokeColor:black','fillColor:white','style:9','strokeWidth:2pt');<br />
}<br />
board.unsuspendUpdate();<br />
<br />
</jsxgraph><br />
<br />
===The JavaScript code===<br />
<br />
<source lang="xml"><br />
<jsxgraph width="700" height="600" box="box"><br />
board = JXG.JSXGraph.initBoard('box', {originX: 50, originY: 450, unitX: 50, unitY: 50, axis:false});<br />
board.suspendUpdate();<br />
board.createElement('axis', [[0,0], [1,0]], {strokeColor:'black'});<br />
board.createElement('axis', [[0,0], [0,1]], {strokeColor:'black'}); <br />
<br />
var s = board.createElement('slider', [[8,7],[11,7],[1,1,1.5]], {name:'S',strokeColor:'black',fillColor:'white'});<br />
var f = [function(){return this.board.round(s.Value()*4.5,2);},<br />
function(){return this.board.round(s.Value()*(-1),2);},<br />
function(){return this.board.round(s.Value()*3,2);},<br />
function(){return this.board.round(s.Value()*2,2);},<br />
function(){return this.board.round(s.Value()*(-0.5),2);},<br />
function(){return this.board.round(s.Value()*5.5,2);},<br />
function(){return this.board.round(s.Value()*2.5,2);},<br />
function(){return this.board.round(s.Value()*(-0.75),2);},<br />
function(){return this.board.round(s.Value()*(3.5),2);},<br />
function(){return this.board.round(s.Value()*(2),2);},<br />
function(){return this.board.round(s.Value()*(-1.25),2);}<br />
];<br />
var chart = board.createElement('chart', [f], {chartStyle:'bar',width:0.8,labels:f});<br />
chart[0][0].setProperty('fillColor:#8E1B77');<br />
chart[0][1].setProperty('fillColor:#BE1679');<br />
chart[0][2].setProperty('fillColor:#DC1765');<br />
chart[0][3].setProperty('fillColor:#DA2130');<br />
chart[0][4].setProperty('fillColor:#DB311B');<br />
chart[0][5].setProperty('fillColor:#DF4917');<br />
chart[0][6].setProperty('fillColor:#E36317');<br />
chart[0][7].setProperty('fillColor:#E87F1A');<br />
chart[0][8].setProperty('fillColor:#F1B112');<br />
chart[0][9].setProperty('fillColor:#FCF302');<br />
chart[0][10].setProperty('fillColor:#C1E212');<br />
<br />
var dataArr = [4,1,3,2,5,6.5,1.5,2,0.5,1.5,-1]; <br />
var chart2 = board.createElement('chart', dataArr, {chartStyle:'line,point'});<br />
chart2[0].setProperty('strokeColor:black','strokeWidth:2pt');<br />
for(var i=0; i<11;i++) {<br />
chart2[1][i].setProperty('strokeColor:black','fillColor:white','style:9','strokeWidth:2pt');<br />
}<br />
board.unsuspendUpdate();<br />
<br />
</jsxgraph><br />
</source><br />
<br />
[[Category:Examples]]<br />
[[Category:Charts]]</div>
Bianca
http://jsxgraph.org/wiki/index.php?title=Dynamic_bar_chart&diff=2797
Dynamic bar chart
2009-08-26T11:40:15Z
<p>Bianca: </p>
<hr />
<div><jsxgraph width="550" height="400" box="box"><br />
board = JXG.JSXGraph.initBoard('box', //{originX: 50, originY: 450, unitX: 50, unitY: 50, axis:false});<br />
{originX: 25, originY: 325, unitX: 40, unitY: 40, axis:false});<br />
board.suspendUpdate();<br />
board.createElement('axis', [[0,0], [1,0]], {strokeColor:'black'});<br />
board.createElement('axis', [[0,0], [0,1]], {strokeColor:'black'}); <br />
<br />
var s = board.createElement('slider', [[8,7],[11,7],[1,1,1.5]], {name:'S',strokeColor:'black',fillColor:'white'});<br />
var f = [function(){return this.board.round(s.Value()*4.5,2);},<br />
function(){return this.board.round(s.Value()*(-1),2);},<br />
function(){return this.board.round(s.Value()*3,2);},<br />
function(){return this.board.round(s.Value()*2,2);},<br />
function(){return this.board.round(s.Value()*(-0.5),2);},<br />
function(){return this.board.round(s.Value()*5.5,2);},<br />
function(){return this.board.round(s.Value()*2.5,2);},<br />
function(){return this.board.round(s.Value()*(-0.75),2);},<br />
function(){return this.board.round(s.Value()*(3.5),2);},<br />
function(){return this.board.round(s.Value()*(2),2);},<br />
function(){return this.board.round(s.Value()*(-1.25),2);}<br />
];<br />
var chart = board.createElement('chart', [f], {chartStyle:'bar',width:0.8,labels:f});<br />
chart[0][0].setProperty('fillColor:#8E1B77');<br />
chart[0][1].setProperty('fillColor:#BE1679');<br />
chart[0][2].setProperty('fillColor:#DC1765');<br />
chart[0][3].setProperty('fillColor:#DA2130');<br />
chart[0][4].setProperty('fillColor:#DB311B');<br />
chart[0][5].setProperty('fillColor:#DF4917');<br />
chart[0][6].setProperty('fillColor:#E36317');<br />
chart[0][7].setProperty('fillColor:#E87F1A');<br />
chart[0][8].setProperty('fillColor:#F1B112');<br />
chart[0][9].setProperty('fillColor:#FCF302');<br />
chart[0][10].setProperty('fillColor:#C1E212');<br />
<br />
var dataArr = [4,1,3,2,5,6.5,1.5,2,0.5,1.5,-1]; <br />
var chart2 = board.createElement('chart', dataArr, {chartStyle:'line,point'});<br />
chart2[0].setProperty('strokeColor:black','strokeWidth:2pt');<br />
for(var i=0; i<11;i++) {<br />
chart2[1][i].setProperty('strokeColor:black','fillColor:white','style:9','strokeWidth:2pt');<br />
}<br />
board.unsuspendUpdate();<br />
<br />
</jsxgraph><br />
<br />
===The JavaScript code===<br />
<br />
<source lang="xml"><br />
<jsxgraph width="700" height="600" box="box"><br />
board = JXG.JSXGraph.initBoard('box', {originX: 50, originY: 450, unitX: 50, unitY: 50, axis:false});<br />
board.suspendUpdate();<br />
board.createElement('axis', [[0,0], [1,0]], {strokeColor:'black'});<br />
board.createElement('axis', [[0,0], [0,1]], {strokeColor:'black'}); <br />
<br />
var s = board.createElement('slider', [[8,7],[11,7],[1,1,1.5]], {name:'S',strokeColor:'black',fillColor:'white'});<br />
var f = [function(){return this.board.round(s.Value()*4.5,2);},<br />
function(){return this.board.round(s.Value()*(-1),2);},<br />
function(){return this.board.round(s.Value()*3,2);},<br />
function(){return this.board.round(s.Value()*2,2);},<br />
function(){return this.board.round(s.Value()*(-0.5),2);},<br />
function(){return this.board.round(s.Value()*5.5,2);},<br />
function(){return this.board.round(s.Value()*2.5,2);},<br />
function(){return this.board.round(s.Value()*(-0.75),2);},<br />
function(){return this.board.round(s.Value()*(3.5),2);},<br />
function(){return this.board.round(s.Value()*(2),2);},<br />
function(){return this.board.round(s.Value()*(-1.25),2);}<br />
];<br />
var chart = board.createElement('chart', [f], {chartStyle:'bar',width:0.8,labels:f});<br />
chart[0][0].setProperty('fillColor:#8E1B77');<br />
chart[0][1].setProperty('fillColor:#BE1679');<br />
chart[0][2].setProperty('fillColor:#DC1765');<br />
chart[0][3].setProperty('fillColor:#DA2130');<br />
chart[0][4].setProperty('fillColor:#DB311B');<br />
chart[0][5].setProperty('fillColor:#DF4917');<br />
chart[0][6].setProperty('fillColor:#E36317');<br />
chart[0][7].setProperty('fillColor:#E87F1A');<br />
chart[0][8].setProperty('fillColor:#F1B112');<br />
chart[0][9].setProperty('fillColor:#FCF302');<br />
chart[0][10].setProperty('fillColor:#C1E212');<br />
<br />
var dataArr = [4,1,3,2,5,6.5,1.5,2,0.5,1.5,-1]; <br />
var chart2 = board.createElement('chart', dataArr, {chartStyle:'line,point'});<br />
chart2[0].setProperty('strokeColor:black','strokeWidth:2pt');<br />
for(var i=0; i<11;i++) {<br />
chart2[1][i].setProperty('strokeColor:black','fillColor:white','style:9','strokeWidth:2pt');<br />
}<br />
board.unsuspendUpdate();<br />
<br />
</jsxgraph><br />
</source><br />
<br />
[[Category:Examples]]<br />
[[Category:Charts]]</div>
Bianca
http://jsxgraph.org/wiki/index.php?title=Dynamic_bar_chart&diff=2796
Dynamic bar chart
2009-08-26T11:38:45Z
<p>Bianca: </p>
<hr />
<div><jsxgraph width="350" height="300" box="box"><br />
board = JXG.JSXGraph.initBoard('box', //{originX: 50, originY: 450, unitX: 50, unitY: 50, axis:false});<br />
{originX: 25, originY: 225, unitX: 25, unitY: 25, axis:false});<br />
board.suspendUpdate();<br />
board.createElement('axis', [[0,0], [1,0]], {strokeColor:'black'});<br />
board.createElement('axis', [[0,0], [0,1]], {strokeColor:'black'}); <br />
<br />
var s = board.createElement('slider', [[8,7],[11,7],[1,1,1.5]], {name:'S',strokeColor:'black',fillColor:'white'});<br />
var f = [function(){return this.board.round(s.Value()*4.5,2);},<br />
function(){return this.board.round(s.Value()*(-1),2);},<br />
function(){return this.board.round(s.Value()*3,2);},<br />
function(){return this.board.round(s.Value()*2,2);},<br />
function(){return this.board.round(s.Value()*(-0.5),2);},<br />
function(){return this.board.round(s.Value()*5.5,2);},<br />
function(){return this.board.round(s.Value()*2.5,2);},<br />
function(){return this.board.round(s.Value()*(-0.75),2);},<br />
function(){return this.board.round(s.Value()*(3.5),2);},<br />
function(){return this.board.round(s.Value()*(2),2);},<br />
function(){return this.board.round(s.Value()*(-1.25),2);}<br />
];<br />
var chart = board.createElement('chart', [f], {chartStyle:'bar',width:0.8,labels:f});<br />
chart[0][0].setProperty('fillColor:#8E1B77');<br />
chart[0][1].setProperty('fillColor:#BE1679');<br />
chart[0][2].setProperty('fillColor:#DC1765');<br />
chart[0][3].setProperty('fillColor:#DA2130');<br />
chart[0][4].setProperty('fillColor:#DB311B');<br />
chart[0][5].setProperty('fillColor:#DF4917');<br />
chart[0][6].setProperty('fillColor:#E36317');<br />
chart[0][7].setProperty('fillColor:#E87F1A');<br />
chart[0][8].setProperty('fillColor:#F1B112');<br />
chart[0][9].setProperty('fillColor:#FCF302');<br />
chart[0][10].setProperty('fillColor:#C1E212');<br />
<br />
var dataArr = [4,1,3,2,5,6.5,1.5,2,0.5,1.5,-1]; <br />
var chart2 = board.createElement('chart', dataArr, {chartStyle:'line,point'});<br />
chart2[0].setProperty('strokeColor:black','strokeWidth:2pt');<br />
for(var i=0; i<11;i++) {<br />
chart2[1][i].setProperty('strokeColor:black','fillColor:white','style:9','strokeWidth:2pt');<br />
}<br />
board.unsuspendUpdate();<br />
<br />
</jsxgraph><br />
<br />
===The JavaScript code===<br />
<br />
<source lang="xml"><br />
<jsxgraph width="700" height="600" box="box"><br />
board = JXG.JSXGraph.initBoard('box', {originX: 50, originY: 450, unitX: 50, unitY: 50, axis:false});<br />
board.suspendUpdate();<br />
board.createElement('axis', [[0,0], [1,0]], {strokeColor:'black'});<br />
board.createElement('axis', [[0,0], [0,1]], {strokeColor:'black'}); <br />
<br />
var s = board.createElement('slider', [[8,7],[11,7],[1,1,1.5]], {name:'S',strokeColor:'black',fillColor:'white'});<br />
var f = [function(){return this.board.round(s.Value()*4.5,2);},<br />
function(){return this.board.round(s.Value()*(-1),2);},<br />
function(){return this.board.round(s.Value()*3,2);},<br />
function(){return this.board.round(s.Value()*2,2);},<br />
function(){return this.board.round(s.Value()*(-0.5),2);},<br />
function(){return this.board.round(s.Value()*5.5,2);},<br />
function(){return this.board.round(s.Value()*2.5,2);},<br />
function(){return this.board.round(s.Value()*(-0.75),2);},<br />
function(){return this.board.round(s.Value()*(3.5),2);},<br />
function(){return this.board.round(s.Value()*(2),2);},<br />
function(){return this.board.round(s.Value()*(-1.25),2);}<br />
];<br />
var chart = board.createElement('chart', [f], {chartStyle:'bar',width:0.8,labels:f});<br />
chart[0][0].setProperty('fillColor:#8E1B77');<br />
chart[0][1].setProperty('fillColor:#BE1679');<br />
chart[0][2].setProperty('fillColor:#DC1765');<br />
chart[0][3].setProperty('fillColor:#DA2130');<br />
chart[0][4].setProperty('fillColor:#DB311B');<br />
chart[0][5].setProperty('fillColor:#DF4917');<br />
chart[0][6].setProperty('fillColor:#E36317');<br />
chart[0][7].setProperty('fillColor:#E87F1A');<br />
chart[0][8].setProperty('fillColor:#F1B112');<br />
chart[0][9].setProperty('fillColor:#FCF302');<br />
chart[0][10].setProperty('fillColor:#C1E212');<br />
<br />
var dataArr = [4,1,3,2,5,6.5,1.5,2,0.5,1.5,-1]; <br />
var chart2 = board.createElement('chart', dataArr, {chartStyle:'line,point'});<br />
chart2[0].setProperty('strokeColor:black','strokeWidth:2pt');<br />
for(var i=0; i<11;i++) {<br />
chart2[1][i].setProperty('strokeColor:black','fillColor:white','style:9','strokeWidth:2pt');<br />
}<br />
board.unsuspendUpdate();<br />
<br />
</jsxgraph><br />
</source><br />
<br />
[[Category:Examples]]<br />
[[Category:Charts]]</div>
Bianca
http://jsxgraph.org/wiki/index.php?title=Spline_chart_with_special_highlight&diff=2795
Spline chart with special highlight
2009-08-24T12:52:32Z
<p>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...</p>
<hr />
<div>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.<br />
<br />
<jsxgraph width="600" height="600"><br />
board = JXG.JSXGraph.initBoard('jxgbox', {originX: 50, originY: 500, unitX: 50, unitY: 50});<br />
board.suspendUpdate();<br />
var s = board.createElement('slider', [[1,9],[4,9],[1,1,1.5]], {name:'S',strokeColor:'black',fillColor:'white'});<br />
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]]; <br />
var axisx = board.createElement('axis', [[0,0], [1,0]], {strokeColor:'black'});<br />
var axisy = board.createElement('axis', [[0,0], [0,1]], {strokeColor:'black'});<br />
var chart = board.createElement('chart', dataArr, {chartStyle:'spline,point',labels:dataArr});<br />
chart[0].setProperty({strokeColor:'#32CD32',highlightStrokeColor:'#32CD32',strokeWidth:'3px',shadow:true});<br />
board.unsuspendUpdate(); <br />
var i;<br />
for(i=0; i<chart[1].length; i++) {<br />
chart[1][i].setProperty({face:'square',size:5,strokeColor:'#32CD32',fillColor:'#EEE9BF',strokeWidth:'3px',shadow:true});<br />
chart[1][i].highlight = function() { <br />
var ms = 200, to = 10, from = 5, difference, el = this, start = new Date, animate;<br />
difference = (to-from)/ms;<br />
<br />
function step() {<br />
var time = new Date - start, current;<br />
if(time < ms) { <br />
current = from + time * difference;<br />
el.visProp['size'] = current;<br />
el.board.renderer.updatePoint(el);<br />
animate = setTimeout(step,1);<br />
}<br />
else {<br />
current = from + ms * difference;<br />
el.visProp['size'] = current;<br />
el.board.renderer.updatePoint(el);<br />
clearTimeout(animate);<br />
}<br />
}<br />
animate = setTimeout(step,1);<br />
<br />
}<br />
chart[1][i].noHighlight = function() {<br />
var ms = 200, from = 10, to = 5, difference, el = this, start = new Date;<br />
difference = (to-from)/ms;<br />
<br />
function step() {<br />
var time = new Date - start, current;<br />
if(time < ms) { <br />
current = from + time * difference;<br />
el.visProp['size'] = current;<br />
el.board.renderer.updatePoint(el);<br />
animate = setTimeout(step,1);<br />
}<br />
else {<br />
current = from + ms * difference;<br />
el.visProp['size'] = current;<br />
el.board.renderer.updatePoint(el);<br />
clearTimeout(animate);<br />
}<br />
}<br />
animate = setTimeout(step,1); <br />
} <br />
} <br />
</jsxgraph><br />
<br />
===JavaScript code to produce this chart===<br />
<source lang="xml"><br />
<jsxgraph width="600" height="600"><br />
board = JXG.JSXGraph.initBoard('jxgbox', {originX: 50, originY: 500, unitX: 50, unitY: 50});<br />
board.suspendUpdate();<br />
var s = board.createElement('slider', [[1,9],[4,9],[1,1,1.5]], {name:'S',strokeColor:'black',fillColor:'white'});<br />
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]]; <br />
var axisx = board.createElement('axis', [[0,0], [1,0]], {strokeColor:'black'});<br />
var axisy = board.createElement('axis', [[0,0], [0,1]], {strokeColor:'black'});<br />
var chart = board.createElement('chart', dataArr, {chartStyle:'spline,point',labels:dataArr});<br />
chart[0].setProperty({strokeColor:'#32CD32',highlightStrokeColor:'#32CD32',strokeWidth:'3px',shadow:true});<br />
board.unsuspendUpdate(); <br />
var i;<br />
for(i=0; i<chart[1].length; i++) {<br />
chart[1][i].setProperty({face:'square',size:5,strokeColor:'#32CD32',fillColor:'#EEE9BF',strokeWidth:'3px',shadow:true});<br />
chart[1][i].highlight = function() { <br />
var ms = 200, to = 10, from = 5, difference, el = this, start = new Date, animate;<br />
difference = (to-from)/ms;<br />
<br />
function step() {<br />
var time = new Date - start, current;<br />
if(time < ms) { <br />
current = from + time * difference;<br />
el.visProp['size'] = current;<br />
el.board.renderer.updatePoint(el);<br />
animate = setTimeout(step,1);<br />
}<br />
else {<br />
current = from + ms * difference;<br />
el.visProp['size'] = current;<br />
el.board.renderer.updatePoint(el);<br />
clearTimeout(animate);<br />
}<br />
}<br />
animate = setTimeout(step,1);<br />
<br />
}<br />
chart[1][i].noHighlight = function() {<br />
var ms = 200, from = 10, to = 5, difference, el = this, start = new Date;<br />
difference = (to-from)/ms;<br />
<br />
function step() {<br />
var time = new Date - start, current;<br />
if(time < ms) { <br />
current = from + time * difference;<br />
el.visProp['size'] = current;<br />
el.board.renderer.updatePoint(el);<br />
animate = setTimeout(step,1);<br />
}<br />
else {<br />
current = from + ms * difference;<br />
el.visProp['size'] = current;<br />
el.board.renderer.updatePoint(el);<br />
clearTimeout(animate);<br />
}<br />
}<br />
animate = setTimeout(step,1); <br />
} <br />
} <br />
</jsxgraph><br />
</source><br />
<br />
[[Category:Examples]]<br />
[[Category:Charts]]</div>
Bianca
http://jsxgraph.org/wiki/index.php?title=Showcases&diff=2794
Showcases
2009-08-24T12:47:57Z
<p>Bianca: /* Charts */</p>
<hr />
<div>===Various topics===<br />
* [["Infinity"]]<br />
* [[Snake - the game]]<br />
* [[Circles on circles]] using jQuery sliders<br />
* [[Display stock quotes from Yahoo!]]<br />
<br />
===Charts===<br />
* [[Different chart styles]]<br />
* [[Google style chart]]<br />
* [[Dynamic bar chart]]<br />
* [[Pie chart]]<br />
* [[Spline chart with special highlight]]<br />
* All examples from [[:Category:Charts]]<br />
<br />
===Geometry===<br />
* [[Sine and cosine]]<br />
* [[Displaying GEONExT constructions]]<br />
* [[Euler line]], [[Euler line II]]<br />
* [[Apollonian circle packing]]<br />
* [[Trigonometric functions]]<br />
* [[Approximation of the circle area]]<br />
* [[Circle approximation]]<br />
* All examples from [[:Category:Geometry]]<br />
<br />
===Statistics===<br />
* [[Random points]]<br />
* [[Data plot of live data via AJAX]]<br />
* [[Analyze data with the Statistics software R]]<br />
* [[Time series forecasting: double exponential smoothing]]<br />
* [[Polynomial regression I]], [[Polynomial regression II]]<br />
<br />
===Calculus and function plotting===<br />
* [[Power Series for sine and cosine]]<br />
* [[Lagrange interpolation]]<br />
* [[Simple function plotter]], [[Parametric curve plotter]], [[Polar curve plotter]]<br />
* [[Rational functions]]<br />
* [[Riemann sums]], [[Arc length]], [[Continuous functions]]<br />
* [[Cubic spline interpolation]]<br />
* [[Interpolation: Neville's algorithm]]<br />
* [[Population growth models]]<br />
* All examples from [[:Category:Calculus]]<br />
<br />
===Curves===<br />
* [[Hypotrochoid]]<br />
* [[Limacon|Lima&ccedil;on of Pascal]]<br />
* [[Watt curve|Watt's curve]]<br />
* [[Archimedean spiral]]<br />
* [[Lissajous curves]]<br />
* All examples from [[:Category:Curves]]<br />
<br />
===Fractals===<br />
* [[Sierpinski triangle]]<br />
* [[Koch curve]]<br />
* All examples from [[:Category:Fractals]], see also [[Turtle Graphics]] and [[L-systems]]<br />
<br />
===Turtle Graphics===<br />
* [[n-gones]]<br />
* [[L-systems]], or Lindenmayer Systems<br />
* [[Epidemiology: The SIR model]] (Simulation of differential equations with turtle graphics)<br />
* [[SIR model: swine flu]]<br />
* [[Turtle spiral]]<br />
* [[Random walks]]<br />
* All examples from [[:Category:Turtle Graphics]]</div>
Bianca
http://jsxgraph.org/wiki/index.php?title=Dynamic_pie_chart&diff=2750
Dynamic pie chart
2009-08-20T12:04:30Z
<p>Bianca: Dynamic pie chart moved to Pie chart</p>
<hr />
<div>#REDIRECT [[Pie chart]]</div>
Bianca
http://jsxgraph.org/wiki/index.php?title=Pie_chart&diff=2749
Pie chart
2009-08-20T12:04:30Z
<p>Bianca: Dynamic pie chart moved to Pie chart</p>
<hr />
<div>A pie chart with highlight on the whole sector, enlarging labels on highlight and a gradient fill.<br />
<br />
<jsxgraph width="900" height="600"><br />
var dataArr = [30,16,12,8,8,8,6,4,4,2];<br />
var board = JXG.JSXGraph.initBoard('jxgbox', {originX: 250, originY: 450, unitX: 50, unitY: 50});<br />
board.containerObj.style.backgroundColor = 'black';<br />
<br />
var a = board.createElement('chart', dataArr, <br />
{chartStyle:'pie', colorArray:['#DA2228','#E8801B','#FCF302','#8DC922','#15993C','#87CCEE','#0092CE','#0F408D','#6F1B75','#CA147A'],<br />
fillOpacity:0.9,center:[5,2],strokeColor:'white',highlightStrokeColor:'white',strokeWidth:4,<br />
labelArray:['Ruby','JavaScript', 'Shell','Python', 'PHP', 'C','Perl', 'C++', 'Java', 'Flash'],<br />
highlightColorArray:['#E46F6A','#F9DF82','#F7FA7B','#B0D990','#69BF8E','#BDDDE4','#92C2DF','#637CB0','#AB91BC','#EB8EBF'],<br />
highlightOnSector:true,<br />
gradient:'linear'}<br />
);<br />
</jsxgraph><br />
<br />
===JavaScript code to produce this chart===<br />
<source lang="xml"><br />
<jsxgraph width="900" height="600"><br />
var dataArr = [30,16,12,8,8,8,6,4,4,2];<br />
var board = JXG.JSXGraph.initBoard('jxgbox', {originX: 250, originY: 450, unitX: 50, unitY: 50});<br />
board.containerObj.style.backgroundColor = 'black';<br />
<br />
var a = board.createElement('chart', dataArr, <br />
{chartStyle:'pie', <br />
colorArray:['#DA2228','#E8801B','#FCF302','#8DC922','#15993C','#87CCEE','#0092CE','#0F408D','#6F1B75','#CA147A'],<br />
fillOpacity:0.9, center:[5,2], strokeColor:'white', highlightStrokeColor:'white', strokeWidth:4,<br />
labelArray:['Ruby','JavaScript', 'Shell','Python', 'PHP', 'C','Perl', 'C++', 'Java', 'Flash'],<br />
highlightColorArray:['#E46F6A','#F9DF82','#F7FA7B','#B0D990','#69BF8E','#BDDDE4','#92C2DF','#637CB0','#AB91BC','#EB8EBF'],<br />
highlightOnSector:true,<br />
gradient:'linear'}<br />
);<br />
</jsxgraph><br />
</source><br />
<br />
[[Category:Examples]]<br />
[[Category:Charts]]</div>
Bianca
http://jsxgraph.org/wiki/index.php?title=Showcases&diff=2748
Showcases
2009-08-20T12:04:10Z
<p>Bianca: /* Various topics */</p>
<hr />
<div>===Various topics===<br />
* [[Different chart styles]]<br />
* [[Google style chart]]<br />
* [[Dynamic bar chart]]<br />
* [[Pie chart]]<br />
* [["Infinity"]]<br />
* [[Snake - the game]]<br />
* [[Circles on circles]] using jQuery sliders<br />
<br />
===Calculus and function plotting===<br />
* [[Power Series for sine and cosine]]<br />
* [[Lagrange interpolation]]<br />
* [[Simple function plotter]]<br />
* [[Continuous functions]]<br />
* [[Rational functions]]<br />
* [[Riemann sums]], [[Arc length]]<br />
* [[Cubic spline interpolation]]<br />
* [[Interpolation: Neville's algorithm]]<br />
* [[Population growth models]]<br />
* All examples from [[:Category:Calculus]]<br />
<br />
===Geometry===<br />
* [[Sine and cosine]]<br />
* [[Displaying GEONExT constructions]]<br />
* [[Euler line]], [[Euler line II]]<br />
* [[Apollonian circle packing]]<br />
* [[Trigonometric functions]]<br />
* [[Approximation of the circle area]]<br />
* [[Circle approximation]]<br />
* All examples from [[:Category:Geometry]]<br />
<br />
===Statistics===<br />
* [[Random points]]<br />
* [[Data plot of live data via AJAX]]<br />
* [[Analyze data with the Statistics software R]]<br />
* [[Time series forecasting: double exponential smoothing]]<br />
* [[Polynomial regression I]], [[Polynomial regression II]]<br />
<br />
===Curves===<br />
* [[Parametric curve plotter]]<br />
* [[Polar curve plotter]]<br />
* [[Hypotrochoid]]<br />
* [[Limacon|Lima&ccedil;on of Pascal]]<br />
* [[Watt curve|Watt's curve]]<br />
* [[Archimedean spiral]]<br />
* [[Lissajous curves]]<br />
* All examples from [[:Category:Curves]]<br />
<br />
===Fractals===<br />
* [[Sierpinski triangle]]<br />
* [[Koch curve]]<br />
* All examples from [[:Category:Fractals]], see also [[Turtle Graphics]] and [[L-systems]]<br />
<br />
===Turtle Graphics===<br />
* [[n-gones]]<br />
* [[L-systems]], or Lindenmayer Systems<br />
* [[Epidemiology: The SIR model]] (Simulation of differential equations with turtle graphics)<br />
* [[SIR model: swine flu]]<br />
* [[Turtle spiral]]<br />
* [[Random walks]]<br />
* All examples from [[:Category:Turtle Graphics]]</div>
Bianca
http://jsxgraph.org/wiki/index.php?title=Pie_chart&diff=2747
Pie chart
2009-08-20T12:03:26Z
<p>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 ...</p>
<hr />
<div>A pie chart with highlight on the whole sector, enlarging labels on highlight and a gradient fill.<br />
<br />
<jsxgraph width="900" height="600"><br />
var dataArr = [30,16,12,8,8,8,6,4,4,2];<br />
var board = JXG.JSXGraph.initBoard('jxgbox', {originX: 250, originY: 450, unitX: 50, unitY: 50});<br />
board.containerObj.style.backgroundColor = 'black';<br />
<br />
var a = board.createElement('chart', dataArr, <br />
{chartStyle:'pie', colorArray:['#DA2228','#E8801B','#FCF302','#8DC922','#15993C','#87CCEE','#0092CE','#0F408D','#6F1B75','#CA147A'],<br />
fillOpacity:0.9,center:[5,2],strokeColor:'white',highlightStrokeColor:'white',strokeWidth:4,<br />
labelArray:['Ruby','JavaScript', 'Shell','Python', 'PHP', 'C','Perl', 'C++', 'Java', 'Flash'],<br />
highlightColorArray:['#E46F6A','#F9DF82','#F7FA7B','#B0D990','#69BF8E','#BDDDE4','#92C2DF','#637CB0','#AB91BC','#EB8EBF'],<br />
highlightOnSector:true,<br />
gradient:'linear'}<br />
);<br />
</jsxgraph><br />
<br />
===JavaScript code to produce this chart===<br />
<source lang="xml"><br />
<jsxgraph width="900" height="600"><br />
var dataArr = [30,16,12,8,8,8,6,4,4,2];<br />
var board = JXG.JSXGraph.initBoard('jxgbox', {originX: 250, originY: 450, unitX: 50, unitY: 50});<br />
board.containerObj.style.backgroundColor = 'black';<br />
<br />
var a = board.createElement('chart', dataArr, <br />
{chartStyle:'pie', <br />
colorArray:['#DA2228','#E8801B','#FCF302','#8DC922','#15993C','#87CCEE','#0092CE','#0F408D','#6F1B75','#CA147A'],<br />
fillOpacity:0.9, center:[5,2], strokeColor:'white', highlightStrokeColor:'white', strokeWidth:4,<br />
labelArray:['Ruby','JavaScript', 'Shell','Python', 'PHP', 'C','Perl', 'C++', 'Java', 'Flash'],<br />
highlightColorArray:['#E46F6A','#F9DF82','#F7FA7B','#B0D990','#69BF8E','#BDDDE4','#92C2DF','#637CB0','#AB91BC','#EB8EBF'],<br />
highlightOnSector:true,<br />
gradient:'linear'}<br />
);<br />
</jsxgraph><br />
</source><br />
<br />
[[Category:Examples]]<br />
[[Category:Charts]]</div>
Bianca
http://jsxgraph.org/wiki/index.php?title=Showcases&diff=2746
Showcases
2009-08-20T11:57:28Z
<p>Bianca: /* Various topics */</p>
<hr />
<div>===Various topics===<br />
* [[Different chart styles]]<br />
* [[Google style chart]]<br />
* [[Dynamic bar chart]]<br />
* [[Dynamic pie chart]]<br />
* [["Infinity"]]<br />
* [[Snake - the game]]<br />
* [[Circles on circles]] using jQuery sliders<br />
<br />
===Calculus and function plotting===<br />
* [[Power Series for sine and cosine]]<br />
* [[Lagrange interpolation]]<br />
* [[Simple function plotter]]<br />
* [[Continuous functions]]<br />
* [[Rational functions]]<br />
* [[Riemann sums]], [[Arc length]]<br />
* [[Cubic spline interpolation]]<br />
* [[Interpolation: Neville's algorithm]]<br />
* [[Population growth models]]<br />
* All examples from [[:Category:Calculus]]<br />
<br />
===Geometry===<br />
* [[Sine and cosine]]<br />
* [[Displaying GEONExT constructions]]<br />
* [[Euler line]], [[Euler line II]]<br />
* [[Apollonian circle packing]]<br />
* [[Trigonometric functions]]<br />
* [[Approximation of the circle area]]<br />
* [[Circle approximation]]<br />
* All examples from [[:Category:Geometry]]<br />
<br />
===Statistics===<br />
* [[Random points]]<br />
* [[Data plot of live data via AJAX]]<br />
* [[Analyze data with the Statistics software R]]<br />
* [[Time series forecasting: double exponential smoothing]]<br />
* [[Polynomial regression I]], [[Polynomial regression II]]<br />
<br />
===Curves===<br />
* [[Parametric curve plotter]]<br />
* [[Polar curve plotter]]<br />
* [[Hypotrochoid]]<br />
* [[Limacon|Lima&ccedil;on of Pascal]]<br />
* [[Watt curve|Watt's curve]]<br />
* [[Archimedean spiral]]<br />
* [[Lissajous curves]]<br />
* All examples from [[:Category:Curves]]<br />
<br />
===Fractals===<br />
* [[Sierpinski triangle]]<br />
* [[Koch curve]]<br />
* All examples from [[:Category:Fractals]], see also [[Turtle Graphics]] and [[L-systems]]<br />
<br />
===Turtle Graphics===<br />
* [[n-gones]]<br />
* [[L-systems]], or Lindenmayer Systems<br />
* [[Epidemiology: The SIR model]] (Simulation of differential equations with turtle graphics)<br />
* [[SIR model: swine flu]]<br />
* [[Turtle spiral]]<br />
* [[Random walks]]<br />
* All examples from [[:Category:Turtle Graphics]]</div>
Bianca
http://jsxgraph.org/wiki/index.php?title=Showcases&diff=2745
Showcases
2009-08-20T11:57:04Z
<p>Bianca: /* Various topics */</p>
<hr />
<div>===Various topics===<br />
* [[Different chart styles]]<br />
* [[Google style chart]]<br />
* [[Dynamic bar chart]]<br />
* [["Infinity"]]<br />
* [[Snake - the game]]<br />
* [[Circles on circles]] using jQuery sliders<br />
<br />
===Calculus and function plotting===<br />
* [[Power Series for sine and cosine]]<br />
* [[Lagrange interpolation]]<br />
* [[Simple function plotter]]<br />
* [[Continuous functions]]<br />
* [[Rational functions]]<br />
* [[Riemann sums]], [[Arc length]]<br />
* [[Cubic spline interpolation]]<br />
* [[Interpolation: Neville's algorithm]]<br />
* [[Population growth models]]<br />
* All examples from [[:Category:Calculus]]<br />
<br />
===Geometry===<br />
* [[Sine and cosine]]<br />
* [[Displaying GEONExT constructions]]<br />
* [[Euler line]], [[Euler line II]]<br />
* [[Apollonian circle packing]]<br />
* [[Trigonometric functions]]<br />
* [[Approximation of the circle area]]<br />
* [[Circle approximation]]<br />
* All examples from [[:Category:Geometry]]<br />
<br />
===Statistics===<br />
* [[Random points]]<br />
* [[Data plot of live data via AJAX]]<br />
* [[Analyze data with the Statistics software R]]<br />
* [[Time series forecasting: double exponential smoothing]]<br />
* [[Polynomial regression I]], [[Polynomial regression II]]<br />
<br />
===Curves===<br />
* [[Parametric curve plotter]]<br />
* [[Polar curve plotter]]<br />
* [[Hypotrochoid]]<br />
* [[Limacon|Lima&ccedil;on of Pascal]]<br />
* [[Watt curve|Watt's curve]]<br />
* [[Archimedean spiral]]<br />
* [[Lissajous curves]]<br />
* All examples from [[:Category:Curves]]<br />
<br />
===Fractals===<br />
* [[Sierpinski triangle]]<br />
* [[Koch curve]]<br />
* All examples from [[:Category:Fractals]], see also [[Turtle Graphics]] and [[L-systems]]<br />
<br />
===Turtle Graphics===<br />
* [[n-gones]]<br />
* [[L-systems]], or Lindenmayer Systems<br />
* [[Epidemiology: The SIR model]] (Simulation of differential equations with turtle graphics)<br />
* [[SIR model: swine flu]]<br />
* [[Turtle spiral]]<br />
* [[Random walks]]<br />
* All examples from [[:Category:Turtle Graphics]]</div>
Bianca