var board = JXG.JSXGraph.initBoard('box', {boundingbox: [-1.33, 1.33, 1.33, -1.33], axis: true}); board.suspendUpdate(); var b1c1 = board.create('circle', 0,0], [1,0); var b1p1 = board.create('point', [2, 0], {slideObject: b1c1}); var perp = board.create('perpendicular', [board.defaultAxes.x,b1p1],[{strokeColor: '#ff0000', visible: true}, {visible: false}]); var perp2 = board.create('perpendicular',[board.defaultAxes.y,b1p1],[{strokeColor: '#0000ff', visible: true}, {visible: false}]); board.unsuspendUpdate();

Animation var animated = false; function animate(point, direction, count) { if(animated) { point.stopAnimation(); animated = false; } else { point.startAnimation(direction, count); animated = true; } } var board2 = JXG.JSXGraph.initBoard('box2', {boundingbox: [-1, 1.33, 7, -1.33]}); board2.suspendUpdate(); var xax2 = board2.create('axis', 0,0], [1,0); board2.create('axis', 0,0], [0,1); board2.create('ticks', [xax2, [Math.PI, 2*Math.PI]], {strokeColor: 'green', strokeWidth: 2}); sine: var b2p1 = board2.create('point', [

           function(){ return JXG.Math.Geometry.rad([1,0],[0,0],b1p1); }, 
           function() { return b1p1.Y() }], 
           {fixed: true, trace: true, color: '#ff0000', name: 'S'});

cosine: var b2p2 = board2.create('point', [ function(){ return JXG.Math.Geometry.rad([1,0],[0,0],b1p1); }, function() { return b1p1.X() }], {fixed: true, trace: true, color: '#0000ff', name: 'C'}); Dependencies (only necessary if b2p1 or b2p2 is deleted) b1p1.addChild(b2p1); b1p1.addChild(b2p2); board2.unsuspendUpdate();

board.addChild(board2);