Difference between revisions of "L-systems"

From JSXGraph Wiki
Jump to navigationJump to search
 
(22 intermediate revisions by 2 users not shown)
Line 7: Line 7:
 
For each system a maximum ''level'' is defined. If this value is increased, the complexity of the drawing rises and running time increases, too.
 
For each system a maximum ''level'' is defined. If this value is increased, the complexity of the drawing rises and running time increases, too.
  
 +
===Examples===
 
Most of the examples are from the book by Przemyslaw Prusinkiewicz and James Hanan: ''Lindenmayer Systems, Fractals, and Plants'', see the References.
 
Most of the examples are from the book by Przemyslaw Prusinkiewicz and James Hanan: ''Lindenmayer Systems, Fractals, and Plants'', see the References.
 
+
====First Example: Sierpinski curve====
===Sierpinski curve===
 
 
<html>
 
<html>
 
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />
 
<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>
 
<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="inputtext0" rows=15 cols=35 wrap="off" style="width:600px;">
<form><textarea id="inputtext0" rows=3 cols=35 wrap="off" style="width:600px;">
 
 
var level = 6;
 
var level = 6;
 
var axiom = 'A';
 
var axiom = 'A';
Line 39: Line 37:
 
<input type="button" value="clear" onClick="clearturtle(0)">
 
<input type="button" value="clear" onClick="clearturtle(0)">
 
</form>
 
</form>
<div id="box0" class="jxgbox" style="width:600px; height:600px;"></div>
+
</html>
<script language="JavaScript">
+
<jsxgraph width="600" height="600" box="box0">
 
var t;
 
var t;
 
var turtle = [];
 
var turtle = [];
 
var brd = [];
 
var brd = [];
brd[0] = JXG.JSXGraph.initBoard('box0', {originX: 300, originY: 300, unitX: 1, unitY: 1});
+
brd[0] = JXG.JSXGraph.initBoard('box0', {boundingbox: [-300, 300, 300, -300]});
turtle[0] = new JSXTurtleObj(brd[0]);
+
turtle[0] = brd[0].create('turtle');
  
 
function expander(level,axiom,rules) {
 
function expander(level,axiom,rules) {
Line 108: Line 106:
 
function run(nr) {
 
function run(nr) {
 
   brd[nr].suspendUpdate();
 
   brd[nr].suspendUpdate();
   var code = $('inputtext'+nr).value;
+
   var code = document.getElementById('inputtext'+nr).value;
 
   if (code=='') { return; }
 
   if (code=='') { return; }
 
   t = turtle[nr];
 
   t = turtle[nr];
Line 122: Line 120:
 
   turtle[nr].cs();
 
   turtle[nr].cs();
 
}
 
}
</script>
+
</jsxgraph>
</html>
 
  
 +
====More examples====
 +
* [[Quadratic snowflake variation]]
 +
* [[Dragon curve]]
 +
* [[Islands and lakes]]
 +
* [[Peano curve]]
 +
* [[Hexagonal Gosper curve]]
 +
* [[Plant generation I]]
 +
* [[Plant generation II]]
 +
* [[Hexagonal kolam]]
 +
* [[Mango kolam]]
 +
* [[Penrose tiling]]
  
===Quadratic snowflake variation===
+
===The underlying JavaScript code===
 
+
The underlying [[JavaScript code for producing Lindenmayer systems]]
<html>
 
<form><textarea id="inputtext1" rows=3 cols=35 wrap="off" style="width:600px;">
 
var level = 5;
 
var axiom = '+F';
 
var rules = {
 
    'F':'F-F+F+F-F',
 
    '+' : '+',
 
    '-' : '-'
 
};
 
var symbols = { 'F':'F',
 
                '+':'+',
 
                '-':'-',
 
                '[':'[',
 
                ']':']'
 
              } ;
 
var angle = 90;
 
var len = 500/Math.pow(3,level);
 
t.setPos(250,0);
 
</textarea><br />
 
<input type="button" value="run" onClick="run(1)">
 
<input type="button" value="clear" onClick="clearturtle(1)">
 
</form>
 
<div id="box1" class="jxgbox" style="width:600px; height:600px;"></div>
 
<script language="JavaScript">
 
brd[1] = JXG.JSXGraph.initBoard('box1', {originX: 300, originY: 300, unitX: 1, unitY: 1});
 
turtle[1] = new JSXTurtleObj(brd[1]);
 
</script>
 
</html>
 
  
===Dragon curve===
 
 
<html>
 
<form><textarea id="inputtext2" rows=3 cols=35 wrap="off" style="width:600px;">
 
var level = 8;
 
var axiom = 'Fl';
 
var rules = {
 
    'F' : 'F',
 
    'l' : 'l+rF+',
 
    'r' : '-Fl-r',
 
    '+' : '+',
 
    '-' : '-'
 
};
 
var symbols = { 'F':'F',
 
                'l':' ',
 
                'r':' ',
 
                '+':'+',
 
                '-':'-',
 
                '[':'[',
 
                ']':']'
 
              } ;
 
             
 
var angle = 90;
 
var len = 500/(level*level);
 
</textarea><br />
 
<input type="button" value="run" onClick="run(2)">
 
<input type="button" value="clear" onClick="clearturtle(2)">
 
</form>
 
<div id="box2" class="jxgbox" style="width:600px; height:600px;"></div>
 
<script language="JavaScript">
 
brd[2] = JXG.JSXGraph.initBoard('box2', {originX: 300, originY: 300, unitX: 1, unitY: 1});
 
turtle[2] = new JSXTurtleObj(brd[2]);
 
</script>
 
</html>
 
 
===Islands and lakes===
 
 
<html>
 
<form><textarea id="inputtext3" rows=3 cols=35 wrap="off" style="width:600px;">
 
var level = 2;
 
var axiom = 'F-F-F-F';
 
var rules = {
 
    'F' : 'F-f+FF-F-FF-Ff-FF+f-FF+F+FF+Ff+FFF',
 
    'f' : 'ffffff',
 
    '+' : '+',
 
    '-' : '-'
 
};
 
var symbols = { 'F':'F',
 
                'f':'f',
 
                '+':'+',
 
                '-':'-',
 
                '[':'[',
 
                ']':']'
 
              } ;
 
             
 
var angle = 90;
 
var len = 20/Math.pow(2,level);
 
</textarea><br />
 
<input type="button" value="run" onClick="run(3)">
 
<input type="button" value="clear" onClick="clearturtle(3)">
 
</form>
 
<div id="box3" class="jxgbox" style="width:600px; height:600px;"></div>
 
<script language="JavaScript">
 
brd[3] = JXG.JSXGraph.initBoard('box3', {originX: 300, originY: 300, unitX: 1, unitY: 1});
 
turtle[3] = new JSXTurtleObj(brd[3]);
 
</script>
 
</html>
 
 
 
===Peano curve===
 
 
<html>
 
<form><textarea id="inputtext4" rows=3 cols=35 wrap="off" style="width:600px;">
 
var level = 4;
 
var axiom = 'X';
 
var rules = {
 
    'F' : 'F',
 
    'X' : 'XFYFX+F+YFXFY-F-XFYFX',
 
    'Y' : 'YFXFY-F-XFYFX+F+YFXFY',
 
    '+' : '+',
 
    '-' : '-'
 
};
 
var symbols = { 'F':'F',
 
                'X':' ',
 
                'Y':' ',
 
                '+':'+',
 
                '-':'-',
 
                '[':'[',
 
                ']':']'
 
              } ;
 
             
 
var angle = 90;
 
var len = 500/Math.pow(3,level);
 
t.setPos(250,-250);
 
</textarea><br />
 
<input type="button" value="run" onClick="run(4)">
 
<input type="button" value="clear" onClick="clearturtle(4)">
 
</form>
 
<div id="box4" class="jxgbox" style="width:600px; height:600px;"></div>
 
<script language="JavaScript">
 
brd[4] = JXG.JSXGraph.initBoard('box4', {originX: 300, originY: 300, unitX: 1, unitY: 1});
 
turtle[4] = new JSXTurtleObj(brd[4]);
 
</script>
 
</html>
 
 
===Hexagonal Gosper curve===
 
 
<html>
 
<form><textarea id="inputtext5" rows=3 cols=35 wrap="off" style="width:600px;">
 
var level = 3;
 
var axiom = 'XF';
 
var rules = {
 
    'F' : 'F',
 
    'X' : 'X+YF++YF-FX--FXFX-YF+',
 
    'Y' : '-FX+YFYF++YF+FX--FX-Y',
 
    '+' : '+',
 
    '-' : '-'
 
};
 
var symbols = { 'F':'F',
 
                'X':' ',
 
                'Y':' ',
 
                '+':'+',
 
                '-':'-',
 
                '[':'[',
 
                ']':']'
 
              } ;
 
             
 
var angle = 60;
 
var len = 500/Math.pow(3,level);
 
t.setPos(250,0);
 
</textarea><br />
 
<input type="button" value="run" onClick="run(5)">
 
<input type="button" value="clear" onClick="clearturtle(5)">
 
</form>
 
<div id="box5" class="jxgbox" style="width:600px; height:600px;"></div>
 
<script language="JavaScript">
 
brd[5] = JXG.JSXGraph.initBoard('box5', {originX: 300, originY: 300, unitX: 1, unitY: 1});
 
turtle[5] = new JSXTurtleObj(brd[5]);
 
</script>
 
</html>
 
 
===Plant 1===
 
 
<html>
 
<form><textarea id="inputtext6" rows=3 cols=35 wrap="off" style="width:600px;">
 
var level = 3;
 
var axiom = 'F';
 
var rules = {
 
    'F' : 'F[+F]F[-F]F',
 
    '[' : '[',
 
    ']' : ']',
 
    '+' : '+',
 
    '-' : '-'
 
};
 
var symbols = { 'F':'F',
 
                '+':'+',
 
                '-':'-',
 
                '[':'[',
 
                ']':']'
 
              } ;
 
             
 
var angle = 25.7;
 
var len = 500/Math.pow(3,level);
 
t.setPos(0,-250);
 
var shrink = 1.0;
 
t.setProperty({strokeColor:'green',strokeWidth:2});
 
</textarea><br />
 
<input type="button" value="run" onClick="run(6)">
 
<input type="button" value="clear" onClick="clearturtle(6)">
 
</form>
 
<div id="box6" class="jxgbox" style="width:600px; height:600px;"></div>
 
<script language="JavaScript">
 
brd[6] = JXG.JSXGraph.initBoard('box6', {originX: 300, originY: 300, unitX: 1, unitY: 1});
 
turtle[6] = new JSXTurtleObj(brd[6]);
 
</script>
 
</html>
 
 
===Plant 2===
 
 
<html>
 
<form><textarea id="inputtext7" rows=3 cols=35 wrap="off" style="width:600px;">
 
var level = 4;
 
var axiom = 'X';
 
var rules = {
 
    'F' : 'FF',
 
    'X' : 'F-[[X]+X]+F[+FX]-X',
 
    '[' : '[',
 
    ']' : ']',
 
    '+' : '+',
 
    '-' : '-'
 
};
 
var symbols = { 'F':'F',
 
                'X':' ',
 
                '+':'+',
 
                '-':'-',
 
                '[':'[',
 
                ']':']'
 
              } ;
 
             
 
var angle = 22.5;
 
var len = 800/Math.pow(3,level);
 
t.setPos(0,-250);
 
t.setProperty({strokeColor:'green',strokeWidth:2});
 
</textarea><br />
 
<input type="button" value="run" onClick="run(7)">
 
<input type="button" value="clear" onClick="clearturtle(7)">
 
</form>
 
<div id="box7" class="jxgbox" style="width:600px; height:600px;"></div>
 
<script language="JavaScript">
 
brd[7] = JXG.JSXGraph.initBoard('box7', {originX: 300, originY: 300, unitX: 1, unitY: 1});
 
turtle[7] = new JSXTurtleObj(brd[7]);
 
</script>
 
</html>
 
 
===Hexagonal kolam===
 
 
<html>
 
<form><textarea id="inputtext8" rows=3 cols=35 wrap="off" style="width:600px;">
 
var level = 4;
 
var axiom = 'X';
 
var rules = {
 
    'F' : 'F',
 
    'X' : '[-F+F[Y]+F][+F-F[X]-F]',
 
    'Y' : '[-F+F[Y]+F][+F-F-F]',
 
    '[' : '[',
 
    ']' : ']',
 
    '+' : '+',
 
    '-' : '-'
 
};
 
var symbols = { 'F':'F',
 
                'X':' ',
 
                'Y':' ',
 
                '+':'+',
 
                '-':'-',
 
                '[':'[',
 
                ']':']'
 
              } ;
 
             
 
var angle = 60;
 
var len = 300/(level);
 
t.setPos(0,-250);
 
</textarea><br />
 
<input type="button" value="run" onClick="run(8)">
 
<input type="button" value="clear" onClick="clearturtle(8)">
 
</form>
 
<div id="box8" class="jxgbox" style="width:600px; height:600px;"></div>
 
<script language="JavaScript">
 
brd[8] = JXG.JSXGraph.initBoard('box8', {originX: 300, originY: 300, unitX: 1, unitY: 1});
 
turtle[8] = new JSXTurtleObj(brd[8]);
 
</script>
 
</html>
 
 
===Mango kolam===
 
 
<html>
 
<form><textarea id="inputtext9" rows=3 cols=35 wrap="off" style="width:600px;">
 
var level = 5;
 
var axiom = 'A---A';
 
var rules = {
 
    'F' : 'F',
 
    'f' : 'f',
 
    'A' : 'f-F+Z+F-fA',
 
    'Z' : 'F-FF-F--[--Z]F-FF-F--F-FF-F--',
 
    '[' : '[',
 
    ']' : ']',
 
    '+' : '+',
 
    '-' : '-'
 
};
 
var symbols = { 'F':'F',
 
                'f':'f',
 
                'A':' ',
 
                'Z':' ',
 
                '+':'+',
 
                '-':'-',
 
                '[':'[',
 
                ']':']'
 
              } ;
 
             
 
var angle = 60;
 
var len = 100/(level);
 
</textarea><br />
 
<input type="button" value="run" onClick="run(9)">
 
<input type="button" value="clear" onClick="clearturtle(9)">
 
</form>
 
<div id="box9" class="jxgbox" style="width:600px; height:600px;"></div>
 
<script language="JavaScript">
 
brd[9] = JXG.JSXGraph.initBoard('box9', {originX: 300, originY: 300, unitX: 1, unitY: 1});
 
turtle[9] = new JSXTurtleObj(brd[9]);
 
</script>
 
</html>
 
 
 
===Penrose tiling===
 
 
<html>
 
<form><textarea id="inputtext10" rows=3 cols=35 wrap="off" style="width:600px;">
 
var level = 2;
 
var axiom = '[7]++[7]++[7]++[7]++[7]';
 
var rules = {
 
    '6' : '81++91----71[-81----61]++',
 
    '7' : '+81--91[---61--71]+',
 
    '8' : '-61++71[+++81++91]-',
 
    '9' : '--81++++61[+91++++71]--71',
 
    '1' : '',
 
    '+' : '+',
 
    '-' : '-',
 
    '[' : '[',
 
    ']' : ']'
 
  };
 
var symbols = {
 
                '1':'F',
 
                '6':' ',
 
                '7':' ',
 
                '8':' ',
 
                '9':' ',
 
                '+':'+',
 
                '-':'-',
 
                '[':'[',
 
                ']':']'
 
              };
 
var angle = 36.0;
 
var len = 100/(level);
 
t.setProperty({fillcolor:'#abff00'});
 
</textarea><br />
 
<input type="button" value="run" onClick="run(10)">
 
<input type="button" value="clear" onClick="clearturtle(10)">
 
</form>
 
<div id="box10" class="jxgbox" style="width:600px; height:600px;"></div>
 
<script language="JavaScript">
 
brd[10] = JXG.JSXGraph.initBoard('box10', {originX: 300, originY: 300, unitX: 1, unitY: 1});
 
turtle[10] = new JSXTurtleObj(brd[10]);
 
</script>
 
</html>
 
 
===The underlying JavaScript code===
 
The underlying [[JavaScript code for producing Lindenmayer systems]]===
 
 
===References===
 
===References===
 
* Przemyslaw Prusinkiewicz, James Hanan: Lindenmayer Systems, Fractals, and Plants (Lecture Notes in Biomathematics). Springer-Verlag 1989, ISBN 0-387-97092-4
 
* Przemyslaw Prusinkiewicz, James Hanan: Lindenmayer Systems, Fractals, and Plants (Lecture Notes in Biomathematics). Springer-Verlag 1989, ISBN 0-387-97092-4
 
* [http://en.wikipedia.org/wiki/L-system http://en.wikipedia.org/wiki/L-system]
 
* [http://en.wikipedia.org/wiki/L-system http://en.wikipedia.org/wiki/L-system]
 
* [http://en.wikipedia.org/wiki/Space-filling_curve http://en.wikipedia.org/wiki/Space-filling_curve]
 
* [http://en.wikipedia.org/wiki/Space-filling_curve http://en.wikipedia.org/wiki/Space-filling_curve]
* [http://en.wikipedia.org/wiki/Penrose_tiling http://en.wikipedia.org/wiki/Penrose_tiling]
+
* [http://www.biologie.uni-hamburg.de/b-online/e28_3/lsys.html An Introduction to Lindenmayer Systems]
* [http://en.wikipedia.org/wiki/Kolam http://en.wikipedia.org/wiki/Kolam]
 
  
  
Line 504: Line 147:
 
[[Category:Fractals]]
 
[[Category:Fractals]]
 
[[Category:Turtle Graphics]]
 
[[Category:Turtle Graphics]]
 +
[[Category:Lindenmayer systems]]

Latest revision as of 09:59, 8 June 2011

Online experiments with Lindenmayer Systems

A Lindenmayer System consists of

  • an initial string called axiom
  • a set of rewriting rules

This is an experimental page, where the Lindenmayer Systems can be changed online. The visualization is done by the JavaScript library JSXGraph. For each system a maximum level is defined. If this value is increased, the complexity of the drawing rises and running time increases, too.

Examples

Most of the examples are from the book by Przemyslaw Prusinkiewicz and James Hanan: Lindenmayer Systems, Fractals, and Plants, see the References.

First Example: Sierpinski curve


More examples

The underlying JavaScript code

The underlying JavaScript code for producing Lindenmayer systems

References