Turtle Graphics - Revision history

Michael at 07:40, 9 June 2011

2011-06-09T07:40:10Z

← Older revision		Revision as of 07:40, 9 June 2011
Line 104:		Line 104:
	</textarea>		</textarea>
	<input type="button" value="run example 1" onClick="run(1)">		<input type="button" value="run example 1" onClick="run(1)">
	~~<jsxgraph width="600" height="600" box="box0">~~
	</source>		</source>

Michael at 07:39, 9 June 2011

2011-06-09T07:39:52Z

← Older revision		Revision as of 07:39, 9 June 2011
Line 86:		Line 86:
	</html>		</html>
	<jsxgraph width="600" height="600" box="box">		<jsxgraph width="600" height="600" box="box">
	var brd = JXG.JSXGraph.initBoard('box', {~~originX~~: 300, ~~originY:~~ 300, ~~unitX: 1~~, ~~unitY: 1~~});		var brd = JXG.JSXGraph.initBoard('box', {boundingbox: [-300, 300, 300, -300]});
	var t = brd.create('turtle');		var t = brd.create('turtle');
	function run(nr) {		function run(nr) {
Line 108:		Line 108:

	<source lang="javascript">		<source lang="javascript">
	var brd = JXG.JSXGraph.initBoard('box', {~~originX~~: 300, ~~originY:~~ 300, ~~unitX: 1~~, ~~unitY: 1~~});		var brd = JXG.JSXGraph.initBoard('box', {boundingbox: [-300, 300, 300, -300]});
	var t = brd.create('turtle');		var t = brd.create('turtle');

A WASSERMANN at 10:04, 25 March 2011

2011-03-25T10:04:37Z

← Older revision		Revision as of 10:04, 25 March 2011
Line 1:		Line 1:
	This is a very basic implementation of turtle graphics in JavaScript with [http://jsxgraph.org JSXGraph]~~. Here, we use SVG (on Firefox, Safari, Opera and Chrome) and VML (on Internet Explorer)~~.		This is a very basic implementation of turtle graphics in JavaScript with [http://jsxgraph.org JSXGraph].
	[http://u2d.com/turtle_js/index.html CanvasTurtle] does the same on browsers which support the ''canvas'' element.		[http://u2d.com/turtle_js/index.html CanvasTurtle] does the same on browsers which support the ''canvas'' element.

Line 6:		Line 6:
	===Snowflake and Branches Example===		===Snowflake and Branches Example===
	<html>		<html>
	~~<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />~~
	~~<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script>~~
	~~<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>~~
	<form><textarea id="input1" rows=7 cols=35 wrap="off" style="width:300px; float:left;">		<form><textarea id="input1" rows=7 cols=35 wrap="off" style="width:300px; float:left;">
	function side(size, level) {		function side(size, level) {
Line 87:		Line 84:
	<input type="button" value="run example 2" onClick="run(2)">		<input type="button" value="run example 2" onClick="run(2)">
	</form>		</form>
	<~~div id~~="~~box~~" ~~class~~="~~jxgbox~~" ~~style~~="~~width:600px; height:600px;"></div>~~		</html>
	~~<script language="JavaScript~~">		<jsxgraph width="600" height="600" box="box">
	var brd = JXG.JSXGraph.initBoard('box', {originX: 300, originY: 300, unitX: 1, unitY: 1});		var brd = JXG.JSXGraph.initBoard('box', {originX: 300, originY: 300, unitX: 1, unitY: 1});
	var t = brd.~~createElement~~('turtle');		var t = brd.create('turtle');
	function run(nr) {		function run(nr) {
	brd.suspendUpdate();		brd.suspendUpdate();
	eval($('input'+nr).value);		eval(document.getElementById('input'+nr).value);
	brd.unsuspendUpdate();		brd.unsuspendUpdate();
	}		}
	</~~script>~~		</jsxgraph>
	~~</html~~>

	===References===		===References===
Line 104:		Line 100:
	===The turtle graphics code===		===The turtle graphics code===
	<source lang="html4strict">		<source lang="html4strict">
	~~<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />~~
	~~<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script>~~
	~~<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>~~
	~~<div id="box" class="jxgbox" style="width:600px; height:600px;"></div>~~
	<form><textarea id="input1" rows=7 cols=35 wrap="off" style="width:300px; float:left;">		<form><textarea id="input1" rows=7 cols=35 wrap="off" style="width:300px; float:left;">
	turtle code...		turtle code...
	</textarea>		</textarea>
	<input type="button" value="run example 1" onClick="run(1)">		<input type="button" value="run example 1" onClick="run(1)">
			<jsxgraph width="600" height="600" box="box0">
	</source>		</source>

	<source lang="javascript">		<source lang="javascript">
	var brd = JXG.JSXGraph.initBoard('box', {originX: 300, originY: 300, unitX: 1, unitY: 1});		var brd = JXG.JSXGraph.initBoard('box', {originX: 300, originY: 300, unitX: 1, unitY: 1});
	var t = brd.~~createElement~~('turtle');		var t = brd.create('turtle');

	function run(nr) {		function run(nr) {

A WASSERMANN at 15:08, 21 January 2009

2009-01-21T15:08:47Z

← Older revision		Revision as of 15:08, 21 January 2009
Line 9:		Line 9:
	<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script>		<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script>
	<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>		<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
	~~<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxturtle.js"></script>~~
	<form><textarea id="input1" rows=7 cols=35 wrap="off" style="width:300px; float:left;">		<form><textarea id="input1" rows=7 cols=35 wrap="off" style="width:300px; float:left;">
	function side(size, level) {		function side(size, level) {
Line 91:		Line 90:
	<script language="JavaScript">		<script language="JavaScript">
	var brd = JXG.JSXGraph.initBoard('box', {originX: 300, originY: 300, unitX: 1, unitY: 1});		var brd = JXG.JSXGraph.initBoard('box', {originX: 300, originY: 300, unitX: 1, unitY: 1});
	var t = ~~new JSXTurtleObj~~(~~brd~~);		var t = brd.createElement('turtle');
	function run(nr) {		function run(nr) {
	brd.suspendUpdate();		brd.suspendUpdate();
Line 108:		Line 107:
	<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script>		<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script>
	<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>		<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
	~~<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxturtle.js"></script>~~
	<div id="box" class="jxgbox" style="width:600px; height:600px;"></div>		<div id="box" class="jxgbox" style="width:600px; height:600px;"></div>
	<form><textarea id="input1" rows=7 cols=35 wrap="off" style="width:300px; float:left;">		<form><textarea id="input1" rows=7 cols=35 wrap="off" style="width:300px; float:left;">
Line 118:		Line 116:
	<source lang="javascript">		<source lang="javascript">
	var brd = JXG.JSXGraph.initBoard('box', {originX: 300, originY: 300, unitX: 1, unitY: 1});		var brd = JXG.JSXGraph.initBoard('box', {originX: 300, originY: 300, unitX: 1, unitY: 1});
	var t = ~~new JSXTurtleObj~~(~~brd~~);		var t = brd.createElement('turtle');

	function run(nr) {		function run(nr) {

A WASSERMANN at 10:48, 12 January 2009

2009-01-12T10:48:11Z

← Older revision		Revision as of 10:48, 12 January 2009
Line 26:		Line 26:

	function snowflake(size, level) {		function snowflake(size, level) {
	(3~~).times(function(~~) {		for (var i=0;i<3;i++) {
	side(size, level);		side(size, level);
	t.rt(120);		t.rt(120);
	});		};
	}		}

A WASSERMANN at 14:00, 30 December 2008

2008-12-30T14:00:12Z

@@ Line 1: / Line 1: @@
 This is a very basic implementation of turtle graphics in JavaScript with [http://jsxgraph.org JSXGraph]. Here, we use SVG (on Firefox, Safari, Opera and Chrome) and VML (on Internet Explorer).
 [http://u2d.com/turtle_js/index.html CanvasTurtle] does the same on browsers which support the ''canvas'' element.
-===List of available commands===
-There is a predefined turtle object ''t''. Therefore, all commands
+* [[List of available commands]]
 ===Snowflake and Branches Example===

A WASSERMANN at 13:58, 30 December 2008

2008-12-30T13:58:48Z

← Older revision		Revision as of 13:58, 30 December 2008
Line 19:		Line 19:
	* t.setPenSize(size); (size: number)		* t.setPenSize(size); (size: number)
	* t.setPenColor(col); (col: colorString, e.g. 'red' or '#ff0000')		* t.setPenColor(col); (col: colorString, e.g. 'red' or '#ff0000')
			* t.setProperty({key1:value1,key2:value2,...});
			* t.pushTurtle()
			* t.popTurtle()
	</source>		</source>

A WASSERMANN at 11:42, 21 December 2008

2008-12-21T11:42:23Z

← Older revision		Revision as of 11:42, 21 December 2008
Line 145:		Line 145:

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

A WASSERMANN at 11:42, 21 December 2008

2008-12-21T11:42:08Z

← Older revision		Revision as of 11:42, 21 December 2008
Line 146:		Line 146:
	[[Category:Examples]]		[[Category:Examples]]
	[[:Category:Turtle Graphics]]		[[:Category:Turtle Graphics]]
			[[Category:Fractals]]

A WASSERMANN at 11:39, 21 December 2008

2008-12-21T11:39:24Z

← Older revision		Revision as of 11:39, 21 December 2008
Line 145:		Line 145:

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