showcase.html

<html>
<head>
 <title>ContextFree.js</title>
 <style>
  textarea {
    display: none;
  } 
  #choose{ 
    float:right; 
  } 
  code{ 
    font-weight: bold;
  }
  .background{ 
    width: 100%; 
    background-color: #cacaca;
    position: absolute;
    left: 0px;
    padding-top: 5px;
    border-top: 1px solid #666;
  }
  .padding{ 
    padding: 20px; 
  }
</style>
<script src="contextfree.js"></script>
<script src="jquery.min.js"></script>		

<script>
  function display( id ){
      // We need to unescape the id because it is coming in via the hash, and
      // URL can have weird encodings (i.e., "%20" instead of " ").
      var theId = unescape(id);
      document.getElementById("theCode").innerHTML = document.getElementById(theId).value;

      var t = new Tokenizer();
      var tokens = t.tokenize( theId );
      console.log(tokens);

      var c = new Compiler();
      var compiled = c.compile( tokens );
      console.log(compiled);

      if( compiled.background ){
      	var back = compiled.background;
       var backcolor = hsl2rgb( back.h|.001, back.sat|.01, back.b|1, back.a|1 );
       document.body.style.backgroundColor = backcolor;
     }

     var canvas = document.createElement( "canvas" );
     var container = $("#canvasContainer");
     canvas.width = container.width();
     canvas.height = container.height();
     canvas.id = "theCanvas";

     $(container).find("#theCanvas").remove();
     $(container).append( canvas );

     var r = Renderer;
     r.render( compiled, "theCanvas" );
   }

   function drawChoice(){
    var toDisplay = $("#menu option:selected" ).text();
    location.assign( "#"+toDisplay );
    location.reload();
  }

  function populateMenu( selected ){
    $("textarea").each( function() {
      var option = document.createElement("option");
      $(option)
      .attr( "value", this.id )
      .text( this.id )
      if( this.id == selected ){
          // Using jQuery to do:
          //   $(option).attr("selected","true");
          // causes Safari to die.
          option.selected = true;
        }
        $("#menu").append( option );
      });
  }
</script>

</head>

<body>
  <div id="canvasContainer" style="width:1200px;height:1000px;"></div>

  <div class="background">
    <div class="padding">
      <div id="choose"><code>Choose a program:</code><br/><select id="menu" multiple="multiple"> </select></div>

      <input type="button" value="Redraw" onclick="drawChoice();"/> <code>(You can also use Command-R)</code>
      <pre>
        // The above image is created from the following code (reload the page to see it refresh).
        // Everything is done in Javascript, right in the browser! Works in Firefox 3, Safari Beta, and Opera 9.5.
        // ContextFree.js by Aza Raskin.
      </pre>
      <pre id="theCode"></pre>
    </div>
  </div>

  <textarea id="circle">
    startshape c

    rule c{
      CIRCLE{ s 3 }
      c{ s .5 b .5 r 10 x 1}
    }

  rule c{
    c { s .5}
    c { s .5 flip 100 }
  } 
  </textarea>

<textarea id="squares and circles" style="width:400px;height:400px">
  startshape scale
  background{ b -1 }

  rule scale{
    c{ s .8 b 1 }
  }

  rule c {
    SQUARE{ r 3 }
    CIRCLE{ y 1 s .5 }
    CIRCLE{ x 1 s .5 }
    CIRCLE{ x -1 }	
    SQUARE{ y -3 s 1.2 r 45}
    c { x -2 s .5 r 5 }		
  }

  rule c .3 {
    CIRCLE{ }
  }

  rule c .2 {
    c{ rotate -10 s .1}
  }


</textarea>

<textarea id="Golden Ratio">
  startshape GOLDEN


  rule GOLDEN{
    SQUARE{ s 2 1 }
    SQUARE{ s .01 1.803 b 1 r 56.31 x -.25}
    GOLDEN{ s .5 r 90 b .08  x .75}
  }

</textarea>  

<textarea id="square fractal" style="width:400px;height:400px">
  startshape WHOLE
  background{ b -1 }

  rule WHOLE {
  QUAD { x -0.5 y -0.5 }
  QUAD { x  0.5 y -0.5 }
  QUAD { x  0.5 y  0.5 }
  QUAD { x -0.5 y  0.5 }
}

rule QUAD {
SQUARE { s 0.8 b 1}
}
rule QUAD 5 {
WHOLE { s 0.45 r 2 }
}
rule QUAD 0.5 {
}
</textarea>	

<textarea id="Aza's Fractal" style="width:400px;height:400px">
  startshape starter
  background{ b -1 }

  rule starter{
  center{ b 1 }
}

rule center {
CIRCLE{ }
wings {}	
}

rule center {
SQUARE{ }
wings { r 3}	
}

rule center {
TRIANGLE{ }
wings { r -4}	
}

rule wings {
center{ x .75 s .5  }	
center{ x -.75 s .5 }
center{ y .75 s .5  }	
center{ y -.75 s .5  }
}

</textarea>

<textarea id="circle fractal" style="width:400px;height:400px">
  startshape starter
  background{ b -1 }

  rule starter{
  center{ b 1 }
}

rule center {
CIRCLE{ }
wings {}	
}

rule wings {
center{ x .75 s .5 b -.2 r 3}	
center{ x -.75 s .5 b -.2 r -5}
}

rule wings {
center{ y .75 s .5 b -.2 r 2}	
center{ y -.75 s .5 b -.2 r -2}
}
</textarea>


<textarea id="triangle fractal" style="width:400px;height:400px">
  startshape scale

  rule scale{
  fract{ s 2.7 }
}

rule fract {	
TRIANGLE { }
fract { y .288 s .5 b 1}
fract { s .5 r 180 b -1 }
fract { x -.25 y -.144 s .5 b 1}
fract { x .25 y -.144 s .5 b 1}
}
rule fract .5 {}
</textarea>

<textarea id="Directions">
  startshape scale
  
  rule scale{ INIT{ s .05} }

  rule INIT {
  CIRCLE {s 2}
  CIRCLE {s 1.8 b 1}
  LINE {}
  LINE { r 120}
  LINE { r -120}
}

rule LINE {
SQUARE{}
LINE_2 {y 2}
}

rule LINE_2 {
SQUARE{}
LINE_R {y 2 r 2}
}

rule LINE_R {
SQUARE{}
LINE_R {y 2 s 0.999 r 2}
}

rule LINE_R 0.2 { TRIANGLE{} }

rule LINE_R 0.06 { ALT {} }

rule ALT {
INIT {s 0.8 b 0.2}
}

rule ALT {
TARGET{}
ALT2{x 2}
}

rule ALT2 {
TARGET{}
ALT2{x 2}
}

rule ALT2 0.5 {
TARGET{ x 1 s 2 }
}

rule TARGET {
CIRCLE{}
CIRCLE{s 0.8 b 1}
CIRCLE{s 0.6}
CIRCLE{s 0.4 b 1}
CIRCLE{s 0.2}
}

</textarea>

<textarea id="Lost Heart (Mouse)">
  startshape lost

  rule lost {
  half { flip 90 x 0.4 b 0.6 }
  half {x -0.4 b 0.6 }
}

rule MOUSECLICK{ vine { s 0.2 0.2 } }
rule MOUSECLICK{ vine { s 0.2 0.2 r 30 } }
rule MOUSECLICK{ vine { s 0.2 0.2 r 60 } }
rule MOUSECLICK{ vine { s 0.2 0.2 r 90 } }
rule MOUSECLICK{ vine { s 0.2 0.2 r 120 } }
rule MOUSECLICK{ vine { s 0.2 0.2 r 150 } }
rule MOUSECLICK{ vine { s 0.2 0.2 r 180 } }
rule MOUSECLICK{ vine { s 0.2 0.2 r -30 } }
rule MOUSECLICK{ vine { s 0.2 0.2 r -60 } }
rule MOUSECLICK{ vine { s 0.2 0.2 r -90 } }
rule MOUSECLICK{ vine { s 0.2 0.2 r -120 } }
rule MOUSECLICK{ vine { s 0.2 0.2 r -150 } }
rule MOUSECLICK{ vine { s 0.2 0.2 r -180 } }

rule half {
CIRCLE { hue 0 sat 1 }
half { s 0.959 0.97 x 0.0164 y -0.03 b -0.008 }
}

rule vine 15 {
CIRCLE { s 1 0.4 }
vine { s 0.96 x 0.4 r 10 z 0.05 b 0.01 }
}

rule vine 2 {
TRIANGLE { s 0.3 1.2 r 40 y -0.3 flip 0 }
vine { }
}

rule vine {
vine { flip 0 }
}

</textarea>

<textarea id="snakes">
  startshape starter

  rule starter{
  snakeparty{ s .5 x -1 y -.5}
}

rule snakeparty {
snake { }
snakeparty {y 1.0 s 0.95 r -15}
}

rule snakeeye {
CIRCLE {b 1}
CIRCLE {b -1 s 0.4 x -0.35}
}

rule snake {
snaketail { }
snakeeye {s 0.4 x -0.2 y 0.2}
snakemouth {x -0.5 y -0.2 s 0.3}
}

rule snaketail {
CIRCLE{}
SQUARE {x 0.32 y 0.1 s 0.5 r -30}
SQUARE {x 0.32 y -0.1 s 0.5 r 30}
snaketail {x 0.8 s 0.7}
}

rule snakemouth {
SQUARE {b 1 r 65}
}

</textarea>


<textarea id="gray dotted tree" style="width:400px;height:400px">
  startshape scale

  rule scale{
  SEED1 { s .03 y -1}
}

rule SEED1 {
SQUARE{}
SEED1 {y 1.2 s 0.99 rotate 1.5 brightness 0.03}
}

rule SEED1 0.05 {SEED1 {flip 90}}

rule SEED1 0.05 {
SQUARE{}
SEED1 {y 1.2 s 0.99 r 1.5 b -0.5 flip 90}
SEED1 {y 1.2 x 1.2 s 0.6 r -60 b -0.5}
SEED1 {y 1.2 x -1.2 s 0.5 r 60 b -0.5 flip 90}
}
</textarea>


<textarea id="forest">
  startshape SCALE

  rule SCALE{
  FOREST{ s .04 y -1 x .5 }
}

rule FOREST {
SEED {}
SEED {x -20}
SEED {x -40}
}

rule SEED {BRANCH {}}
rule SEED {BRANCH {rotate 1}}
rule SEED {BRANCH {rotate -1}}
rule SEED {BRANCH {rotate 2}}
rule SEED {BRANCH {rotate -2}}
rule SEED {FORK {}}

rule BRANCH {LEFTBRANCH {flip 90}}
rule BRANCH {LEFTBRANCH {}}

rule LEFTBRANCH 4 {BLOCK {} LEFTBRANCH {y 0.885 rotate 0.1 s 0.99}}
rule LEFTBRANCH 4 {BLOCK {} LEFTBRANCH {y 0.885 rotate 0.2 s 0.99}}
rule LEFTBRANCH {BLOCK {} LEFTBRANCH {y 0.885 rotate 4 s 0.99}}
rule LEFTBRANCH {BLOCK {} FORK {}}


rule BLOCK {
SQUARE {rotate 1}
SQUARE {rotate -1}
SQUARE {}
}

rule FORK {
BRANCH { }
BRANCH {s 0.5 rotate 40}
}
rule FORK {
BRANCH { }
BRANCH {s 0.5 rotate -40}
}
rule FORK {
BRANCH {s 0.5 rotate -20}
BRANCH { }
}
rule FORK {
BRANCH {s 0.7 y 0.1 rotate 20}
BRANCH {s 0.7 y 0.1 rotate -20}
}	
</textarea>

<textarea id="mtree">
  startshape scale

  rule scale{
  PLANT { s .08 y -1.2 }
}

rule PLANT {
EITHER {x -2}
EITHER {x 2}
}

rule BOTH {
BL {rotate 30}
BL {rotate -30 flip 90}
}

rule EITHER {BL{}}
rule EITHER {BL{flip 90}}

rule BL {
CIRCLE {}
WL {s 0.95 y 1.6}
}

rule WL {BL {rotate 3}}
rule WL {BL {rotate 4}}
rule WL {BL {rotate 5}}
rule WL {BL {rotate 6}}
rule WL {BL {rotate 7}}
rule WL {BL {rotate 3}}
rule WL {BL {rotate 4}}
rule WL {BL {rotate 5}}
rule WL {BL {rotate 6}}
rule WL {BL {rotate 7}}
rule WL {BOTH {}}
rule WL {BL {rotate -10 flip 90}}	
</textarea>	

<textarea id="tangle">
  startshape scale

  rule scale{ 
  SPIKES{ s .03 }
}

rule SPIKES {
SPIKE {}
SPIKE { r 90 }
SPIKE { r 180 }
SPIKE { r 270 }
}

rule SPIKE {
LSPIKE {}
}
rule SPIKE {
LSPIKE { flip 90 }
}

rule LSPIKE {
SQUARE {}
LSPIKE { y 0.98 s 0.99 r 1}
}
rule LSPIKE 0.005 {
SPIKE { r 90 }
SPIKE { r -90 }
LSPIKE { y 0.98 s 0.99  r 1}
}

</textarea>	

<textarea id="zig zag">
  startshape scale

  rule scale{
  Trident{ s .08 y -1}
} 

rule Trident {
Zig { }
ZagL { x 0 b 0.02 flip 90}	
ZigL { x 0 b 0.02 }
}

rule Zig {
Seg { x -0.5 r -45 }
Zag { y 1 s 0.97 }
}
rule Zag {
Seg { x 0.5 r 45 }
Zig { y 1 s 0.97 }
}

rule ZigL {
Seg { x -0.5 r -45 }
ZagL { y 1 s 0.97 r 2 }
}
rule ZagL {
Seg { x 0.5 r 45 }
ZigL { y 1 s 0.97 r 2 }
}

rule ZigL 0.03 { Trident { } }

rule Seg {
SQUARE { y 0.6925 s 0.5 1.885 }
}
</textarea>

<textarea id="star">
  startshape D

  rule D
  {
  C {r 15}
  C {r 45}
}

rule C
{
  B {}
  B {f -90}
}

rule B
{
  A {}
  A {r 60}
  A { r 120 }
  A { r 180 }
  A { r 240 }
  A { r 300 }
}

rule A
{
  CIRCLE {s 1 .0006}
  A {x .9 r 120.21 s .99 b .0005 }
}
</textarea>

<textarea id="colored star">
  startshape D

  rule D
  {
  C {r 15}
  C {r 45}
}

rule C
{
  B {}
  B {f -90}
}

rule C
{
  B {f -100}
}

rule B
{
  A {}
  A {r 60 hue 150}
  A { r 120 }
  A { r 180 hue 150}
  A { r 240 }
  A { r 300 hue 150}
}

rule B
{
  A {}
  A {r 60}
  A { r 120 }
  A { r 180 }
  A { r 240 }
  A { r 300 }
}

rule A
{
  CIRCLE {s 1 .0006 b .5 sat .5 a .9}
  A {x .9 r 120.21 s .99 b .0005 h -1}
}

rule A
{
  CIRCLE {s 1 .0006 b .5 sat .5 a .9}
  A {x .9 r 120.21 s .99 b .0005 h 2 }
}
</textarea>

<textarea id="underground">
  startshape scale

  rule scale{
  MAP{ s .02 }
}

rule MAP {
LOGO { }
ROUTE { x 10 y 10 rotate 90 }
}

rule ROUTE {
LINES { brightness 0.2 }
}
rule ROUTE {
LINES { brightness -0.2 }
}
rule LINES {
LINE { }
LINE { rotate 180 }
}

rule LINE 300 {
CIRCLE { }
LINE { y .45  }
}


rule LINE 1 { LINE { rotate 45 } }
rule LINE 1 { LINE { rotate -45 } }
rule LINE 1 { LINE { rotate 90 } }
rule LINE 1 { LINE { rotate -90 } }

rule LINE 4 {
SQUARE {
size 3
rotate 45
}
LINE { }
}

rule LINE 0.5 {
LINE { }
ROUTE { rotate 90 }
}

rule LINE 1 {
CIRCLE { size 3 }
CIRCLE { size 1
brightness 1 }
}

rule LOGO {
CIRCLE {
size 5
brightness 0.5
}
CIRCLE {
size 3.5
brightness 1.0
}
SQUARE { x -2.5 }
SQUARE { x -1.5 }
SQUARE { x -0.5 }
SQUARE { x  0.5 }
SQUARE { x  1.5 }
SQUARE { x  2.5 }
SQUARE { x -2.0 }
SQUARE { x -1.0 }
SQUARE { x  0 }
SQUARE { x  1.0 }
SQUARE { x  2.0 }
}
</textarea>

<textarea id="feather boa">
  startshape scale
  background {b -1}

  rule scale{ 
  feather { s .005 }
}

rule feather 50{
atom {}
feather { y -.45 r .4 b .0001 hue .3 alpha .1}}

rule feather 50{
atom {}
feather { y -.45 r .3 b .0001 hue .3 alpha .1}}

rule feather {
atom {}
feather { y -.45 r .3 flip 90 b .0001 hue .3 alpha .1}}

rule feather 0.05 {
atom {}
featherB { y -.45 r .3 flip 90 b .0001 hue .3 alpha .1}}

rule featherB 100{
atom {}
featherB { s 0.999 y -.45 r .3 b .0001 hue .3 alpha .1}}

rule featherB {
atom {}
featherB { s 0.999 y -.45 r .3 flip 90 b .0001 hue .3 alpha .1}}

rule atom {proton{}}
rule atom {electron {}}

rule proton
{
	SEED{}
	proton {y .25 r .25 s .999 b .001 alpha -.001}}

  rule proton .015 {electron{}}

  rule electron
  {
  SEED{}
  electron {y .25 r -.25 s .999 b .001 alpha -.001}}
  rule electron .015 {proton{}}

  rule SEED {CIRCLE
  {alpha -.75 h 120 sat .45 b .5}}
</textarea>

<textarea id="modern art">
  startshape scale

  rule scale{
  SCENE{ s .1 }
}

rule SCENE {
BIG { x 8 y 8 }
BIG { x -8 y 8 }
BIG { x 8 y -8 }
BIG { x -8 y -8 }
}

rule BIG {
START { x 4 y 4  }
START { x -4 y 4  }
START { x 4 y -4  }
START { x -4 y -4  }
}

rule START {
EIGHT { x 2 y 2}
EIGHT { x -2 y 2 }
EIGHT { y -2 x 2}
EIGHT { y -2 x -2 }
}

rule EIGHT {
FOUR { x -1 y 1}
FOUR { x 1 y 1}
FOUR { x -1 y -1}
FOUR { x 1 y -1}
}

rule FOUR  {SHAPE { s 2 }}
rule FOUR {
SHAPE { x -0.5 y 0.5}
SHAPE { x 0.5  y 0.5}
SHAPE { x -0.5 y -0.5 }
SHAPE { x 0.5 y -0.5 }
}

rule SHAPE {CIRCLE { s 0.8 b -1}}
rule SHAPE {
SQUARE { b -1 }
CIRCLE { s 0.8 b 1 }
}  
</textarea>

<textarea id="BULB">
  startshape scale

  rule scale{ BULB{ .5 } }

  rule BULB {
  WHEEL { }
  BULB { x .2 r 20 s .99 }
}

rule WHEEL {
CIRCLE { }
CIRCLE { s .95 b 1 }
}
</textarea>

<textarea id="i ching">
  startshape scale
  background {h 150 sat .5 b -.5}  
  
  rule scale{ I_CHING{ s .5 x -1} }

  rule I_CHING {
  MONEDA { x 0 }
  MONEDA { x 2 }
  MONEDA { x 4 }
}

rule MONEDA {
CIRCLE{ s 2 }
CIRCLE {s 1.8 b 1 }
LINEA { y  0}
LINEA { y 0.3 }
LINEA { y -0.3 }
}

rule LINEA {
SQUARE { s 1.3 0.2 }
}

rule LINEA {
SQUARE { s 0.6 0.2 x -0.35}
SQUARE { s 0.6 0.2 x 0.35}
}  
</textarea>  

<textarea id="charcoal flower">
  startshape scale
  
  rule scale{ START{ s .1 }}

  rule START { 
  FLOWER { }
  FLOWER { s 0.97 b 1}
  START { s 0.9 r 45 }
}

rule FLOWER {
D_LEAF { }
D_LEAF { flip 45 }
}

rule D_LEAF { 
FULL_LEAF {}
FULL_LEAF {  flip 90}
}

rule FULL_LEAF {
LEAF { }
LEAF { flip 180 }
}

rule LEAF {
SHAPE { s .7 }
LEAF { s 0.95 y 1 r 3 }
}

rule LEAF {
SHAPE { s .7 }
LEAF { s 0.9 y 1 r 8 }
}


rule SHAPE {SQUARE { alpha -0.5 s 5}}
rule SHAPE 0.5 {SQUARE { alpha -0.6 s 6}}
rule SHAPE 0.5 {SQUARE { s 5 2 y -4 r 45 alpha -0.7 }}

</textarea>

<textarea id="cigarettes">
  startshape start

  rule start{
  lcurve{ s .02 }
}

rule lcurve 40 {
SQUARE { r -1 }
lcurve { y 0.9 r 2 }
}

rule lcurve 3 {
tap { r -90 }
lcurve { }
}

rule lcurve 1 {
CIRCLE { y 2 }
}

rule tap 30 {
SQUARE { }
tap { y 0.9 }
}

rule tap 2 {
lcurve { r -90 }
}

rule tap 2 {
cig { s 2 }
}

rule tap 3 {}

rule cig {
SQUARE { sat 0 b 0 y 5.1 x 0 s 1.2 10.2 }
SQUARE { hue 40 sat 0.76 b 0.8 y 1.35 s 1 2.5 }
SQUARE { sat 0 b 0.9
y 6.3 s 1 7.4 }
SQUARE { sat 0 b 0.5
y 9.7 s 1 0.8 }
}

</textarea>

<textarea id="Vertical Music">
  startshape start
  
  rule start { EDERA { s .006 y 1.2 x -.5 } }

  rule EDERA{
  CIGLIO {x 0}		CIRCLE { x 0 s 5 hue 200 sat 0.5}
  CIGLIO {x 5}		CIRCLE { x 5 s 5 hue 200 sat 0.5}
  CIGLIO {x 10}		CIRCLE { x 10 s 5 hue 200 sat 0.5}
  CIGLIO {x 15}		CIRCLE { x 15 s 5 hue 200 sat 0.5}
  CIGLIO {x 20}		CIRCLE { x 20 s 5 hue 200 sat 0.5}
  CIGLIO {x 25}		CIRCLE { x 25 s 5 hue 200 sat 0.5}
  CIGLIO {x 30}		CIRCLE { x 30 s 5 hue 200 sat 0.5}
  CIGLIO {x 35}		CIRCLE { x 35 s 5 hue 200 sat 0.5}
  CIGLIO {x 40}		CIRCLE { x 40 s 5 hue 200 sat 0.5}
  CIGLIO {x 45}		CIRCLE { x 45 s 5 hue 200 sat 0.5}
}

rule CIGLIO 100 {
SQUARE	{hue 200 sat 0.5}
CIGLIO		{y -1 s 0.998 b 0.005}
}

rule CIGLIO {
SQUARE	{hue 200 sat 0.5}
CIRCLE	{hue 200 sat 0.5 alpha -0.4 s 10 y -10 }
CIGLIO		{y -1 r 1 s 0.998 b 0.005}
}

rule CIGLIO 0.0005 {
SQUARE	{hue 200 sat 0.5}
CIRCLE	{hue 200 sat 0.5 alpha -0.8 s -20 x 20 y -10 }
CIGLIO		{y -1  s 0.998 b 0.005 }
}

rule CIGLIO {
SQUARE	{hue 200 sat 0.5}
CIRCLE	{hue 200 sat 0.5 alpha -0.4 s 5 y -10 }
FIORE 		{}
FIORE		{ x -1 flip 90}
CIGLIO		{y -1  s 0.998 b 0.005 }
}

rule FIORE {
CIRCLE {hue 200 sat 0.5}
FIORE {y -1 r 4 s 0.998 b 0.005}
}

rule FIORE 0.005 {
CIRCLE {s 5 hue 200 sat 0.5}
FIORE {y -1 r 4 s 0.998 b 0.005 flip 90}
}
</textarea>

<textarea id="Koch Curve">  
  startshape scale
  background {b -1}

  rule scale{ B{s .5} }

  rule B
  {
  ALine1{x -1 y .577 b .3 a -.5 saturation 1 hue 0 r 0}
  ALine1{x -1 y .577 b .3 a -.5 saturation 1 hue 120 r 120}
  ALine1{x -1 y .577 b .3 a -.5 saturation 1 hue 240 r 240}
}

rule ALine1
{
  Line1{}

  ALine1 {s .3333 b .3 a .2 sat -.2 hue 20}
  ALine1 {s .3333 b .3 a .2 x .666 r 60 sat -.2}
  ALine1 {s .3333 b .3 a .2 x 1 y .577 r -60 sat -.2}
  ALine1 {s .3333 b .3 a .2 x 1.333 sat -.2 hue -20}
}

rule Line1
{
  CIRCLE { x 1 s 1 1}
}
</textarea>

<textarea id="Orbits">
  startshape scale

  rule scale{
  Planetary_Systems{ s .5 }
}

rule Planetary_Systems {

burbuja{ }

}

rule burbuja 1{

CIRCLE {}
CIRCLE {s 0.9 b 1  }
burbuja{ s 0.3333  x 0 y 0}
burbuja{ s 0.9 r 30 x 1 y 0}
}

rule burbuja 1{
burbuja{ s 0.9 r -30  x -1 y 0}
burbuja{ s 0.6666  x -0.5 y 1 }

}

rule burbuja_fin {
CIRCLE {}
CIRCLE {s 0.9 b 1 hue 49.8 sat 0.7593 b 0.9353 }
}

rule burbuja 0.1 {
CIRCLE{} 
burbuja {s 0.001}
}
rule burbuja 0.8 { burbuja_fin {} }
</textarea>

<textarea id="Japanese Flower">
  startshape scale
  background {h 50 sat .5 b -.5}

  rule scale{ START{ s .02 y -1 }}

  rule MOUSECLICK{ START{s .02} }

  rule START {
  BRANCH { hue 20 sat 0.8 b 0.8 }
  BRANCH { flip 90 hue 20 sat 0.8 b 0.8 }
}

rule BRANCH {
SQUARE { }
BRANCH { y 1 s 0.99 r 0.6 }
}

rule BRANCH 0.03 {
BRANCH { flip 90 }
}

rule BRANCH 0.01 {
BRANCH { r 15 s 0.99 }
BRANCH { r -15 s 0.99 }
}

rule BRANCH 0.01 {
FULL_FLOWER { s 0.5 }
}

rule FULL_FLOWER {
FLOWER { hue 10 sat 0.8 b 0.8}
FULL_FLOWER { s 0.7 r 27.8 hue 5 alpha -0.1}
}

rule CURVE_I {
SHAPE { }
CURVE_I { y 1 r 1.5 s 0.99 alpha -0.01}
}

rule CURVE_D {
SHAPE { }
CURVE_D { y 1 r -1.5 s 0.99 alpha -0.01}
}

rule FLOWER {
CURVE_I { }
CURVE_I { r 72 }
CURVE_I { r 144}
CURVE_I { r -72 }
CURVE_I { r -144 }

CURVE_D { }
CURVE_D { r 72 }
CURVE_D { r 144 }
CURVE_D { r -72}
CURVE_D { r -144}
}

rule SHAPE { SQUARE { } }
rule SHAPE 0.01 {
SQUARE { }
CIRCLE { s 2 6 alpha -0.2 }
}

rule SHAPE 0.01 {
SQUARE { }
CURVE_I { s 0.5 }
}
</textarea>

<textarea id="Urban Connection">
  startshape scale
  background { hue 400 sat 0.2 b -1 }

  rule MOUSECLICK{ START{ s .001 } }
  rule MOUSECLICK{ START{ s .005 } }  
  rule MOUSECLICK{ START{ s .01 } }
  rule MOUSECLICK{ START{ s .003 r 5} }

  rule scale{
  START{ s .01 }
}

rule START {
SCENE { h 900 sat 1 b .5 }
FUXIA {h 400 sat 1 b .5}
START {y 100 r 90  s 0.29}
}

rule FUXIA{
CIRCLE { s 10 x -10  }
CIRCLE { x 50 s 5  }
CIRCLE { x 15 y 15  size 5 }
FUXIA {y 50 r 88  s 0.59 alpha -0.15}
}
rule FUXIA 0.45 {
FUXIA{flip -50}
FUXIA {flip -10}
}
rule SCENE {
CIRCLE {  size 20 }
CIRCLE {  size 30 alpha -0.7 }
CIRCLE {  size 40 alpha -0.7 }
FLOW { }
FLOW { }
FLOW { flip -50 }
FLOW { flip -50 }
FLOW { flip -10 }
FLOW { flip -10 }
}
rule FLOW 0.008 {
SQUARE { }
CIRCLE { s 5 alpha -0.7 }
FLOW { x 1 s 0.995 r 2}
}
rule FLOW 0.0001 {
FLOW { flip 2 }
}
</textarea>  

<textarea id="Brownian Motion">
  startshape STARTER

  rule STARTER{
  DOT{ s .5 }  
}

rule DOT{
CIRCLE{ s 1 b 0 a -.99 }  
CIRCLE{ s .3 b .5 sat 1 }
MOTION{ h .1 }
}

rule MOTION{
DOT{ x .05 }
}

rule MOTION{
DOT{ x -.05 }
}

rule MOTION{
DOT{ y .05 }
}

rule MOTION{
DOT{ y -.05 }
}
</textarea>

<textarea id="Brownian Motion Gray">
  startshape STARTER

  rule STARTER{
  DOT{}
}

rule DOT{
CIRCLE{ s 1 b 1 a -.99 }
CIRCLE{ s .33 b 1 a -.5 }  
CIRCLE{ s .3 b .5 sat 0 }
MOTION{ h .2 }
}

rule MOTION{
DOT{ x .05 }
}

rule MOTION{
DOT{ x -.05 }
}

rule MOTION{
DOT{ y .05 }
}

rule MOTION{
DOT{ y -.05 }
}
</textarea>

<textarea id="Fall">
  startshape scale

  rule scale{
  FRACT{ s 2 }
}

rule FRACT{
STAR{}
SUBSTAR{}
SUBSTAR{ r 60 }
SUBSTAR{ r 120 }

}

rule SUBSTAR{
FRACT{ s .34 b .4 y .385 h 10 sat .7}
FRACT{ s .34 b .4 y -.385 h 12 sat 1}
}

rule SUBSTAR .3 {}

rule STAR{
TRIANGLE { }
TRIANGLE { flip 180 }
}

rule fract .5 {}
</textarea>


<textarea id="Star System BTP-73">
  startshape scale
  background { b -1 } 

  rule scale{
  START{ s .006 }
}

rule DRAW {
SHAPE { }
SHAPE { flip 90 }
DRAW { y 1 s 0.999 r 1}
}

rule DRAW_B {
SHAPE { }
SHAPE { flip 90 }
DRAW_B { y 1 s 0.997 r -1}
}

rule DRAW 0.03 {
DRAW_BALL { }
}

rule DRAW 0.03 {
DRAW_B { }
DRAW_BALL { }
}

rule DRAW_B 0.06 {DRAW { }}
rule DRAW 0.06 {DRAW_B { }}

rule SHAPE {
LINE { }
SHAPE { x 1 alpha -0.2}
}

rule SHAPE 0.1 {}


rule START {
DRAW { flip 180 x 10 r 7 hue 70 sat 0.8 b 0.8 }
DRAW { flip 180 x 13 hue 70 sat 0.8 b 0.8 }
DRAW { flip 180 x 15 r 15 hue 70 sat 0.8 b 0.8 }
DRAW { flip 180 x 9 r 15 hue 70 sat 0.8 b 0.8 }
DRAW_BALL { x 50 hue 70 sat 0.8 b 0.6}
}


rule DRAW_BALL {
SHAPE { }
SHAPE { flip 90 }
DRAW_BALL { y 10 s 0.999 r 15 alpha -0.001 b -0.005}
}

rule DRAW_BALL {
DRAW_BALL { alpha -0.5 }
}

rule DRAW_BALL {
DRAW_BALL { alpha 0.5 }
}

rule SHAPE {
LINE { }
SHAPE { x 1.5 alpha -0.2 r 5}
}

rule SHAPE {
LINE { }
SHAPE { x 1.5 alpha -0.2 r -5}
}

rule SHAPE 0.1 {}


rule LINE {CIRCLE { s 0.5 20 }}
rule LINE {CIRCLE { s 0.1 20 }}
rule LINE {TRIANGLE { s 9 20 hue 20 }}
rule LINE {CIRCLE { s 0.6 20 }}
rule LINE {CIRCLE { s 3 20 b 0.6 }}
</textarea>

<textarea id="Mouse">
  startshape C

  rule C{
  CIRCLE{ s .5 b .5 }
}

rule MOUSECLICK{
CIRCLE{ s .2 b 0 }
}
</textarea>

<textarea id="Mouse Tangle">
  startshape scale

  rule MOUSECLICK{
  scale{}
}

rule scale{ 
SPIKES{ s .03 }
}

rule SPIKES {
SPIKE { r 90 }
SPIKE { r 270 }
}

rule SPIKES {
SPIKE { r }
SPIKE { r 180 }
}

rule SPIKE {
LSPIKE {}
}
rule SPIKE {
LSPIKE { flip 90 }
}

rule LSPIKE {
SQUARE {}
LSPIKE { y 0.98 s 0.99 r 1}
}
rule LSPIKE 0.002 {
SPIKE { r 90 }
SPIKE { r -90 }
}
</textarea>

<textarea id="Mouse Trial">
  startshape nothing

  rule nothing {}

  rule MOUSEMOVE{
  SPIKE{ s .01 r 180}
}

rule MOUSEMOVE{
SPIKE{ s .01 r 90}
}

rule MOUSEMOVE{
CIRCLE{ s .1 r 90}
}


rule SPIKE {
LSPIKE {}
}

rule SPIKE {
LSPIKE { flip 90 }
}

rule LSPIKE {
SQUARE {}
LSPIKE { y 0.98 s 0.97 r 15}
}

</textarea>

<textarea id="Motion Mouse">
  startshape nothing

  rule nothing{
}

rule DOT{
CIRCLE{ s 4 b 1 a -.9 }
CIRCLE{ s .33 b 1 a -.5 }  
CIRCLE{ s .3 b .5 sat 0 }
}

rule MOUSEMOVE{
DOT{ }
}
</textarea>

<textarea id="Fireworks Mouse">
  startshape nothing

  rule nothing{
}

rule MOUSECLICK{
FRACT{}
}

rule FRACT{
STAR{}
SUBSTAR{}
SUBSTAR{ r 60 }
SUBSTAR{ r 120 }

}

rule SUBSTAR{
FRACT{ s .34 b .4 y .385 h 10 sat .7}
FRACT{ s .34 b .4 y -.385 h 12 sat 1}
}

rule SUBSTAR .3 {}

rule STAR{
TRIANGLE { }
TRIANGLE { flip 180 }
}

rule fract .8 {}
</textarea>

<textarea id="Art Net">
  startshape net

  rule net {
  expand { }
  dot { }
  net { x 1 r 90 s 0.71 b 0.5}
  net { x -1 r 90 s 0.71 b -0.5}
}
rule net {
expand { }
dot { }
net { x 1 r 90 s 0.71 b -0.5}
net { x -1 r 90 s 0.71 b 0.5}
}

rule expand {
arm { s 0.1 }
arm { s 0.1 r 180 }
}


rule dot {
CIRCLE { s 0.4 }
}
rule dot 0.7 {
CIRCLE { s 0.565685424949 }
}
rule dot 0.2 {
CIRCLE { s 0.8 }
}

rule arm {
SQUARE { }
SQUARE { x 1 }
SQUARE { x 2 }
SQUARE { x 3 }
SQUARE { x 4 }
SQUARE { x 5 }
SQUARE { x 6 }
SQUARE { x 7 }
SQUARE { x 8 }
SQUARE { x 9 }
SQUARE { x 10 }
}
</textarea>

<textarea id="Chiaroscuro">
  background {b -.5}

  startshape CHIAROSCURO

  rule CHIAROSCURO {
  BLACK {b .5}
}

rule BLACK 60 {
CIRCLE {s .6}
BLACK {x .1 r 5 s .99 b -.01 a -.01}
}
rule BLACK {
WHITE {}
BLACK {}
}

rule WHITE 60 {
CIRCLE {s .6}
WHITE {x .1 r -5 s .99 b .01 a -.01}
}
rule WHITE {
BLACK {}
WHITE {}
}
</textarea>

<textarea id="Ancient Map">
  startshape scaler

  background { b -.1 sat 0.25 hue 44 }

  rule scaler{
  ANCIENTMAP{ s .06 }
}

rule ANCIENTMAP {
WALL1 {b 0.1 hue 34}
WALL1 {b 0.1 r 180 hue 34}
}

rule WALL1 {
WALL1{y 0.95 r 1 s 0.975}
}

rule WALL1 {
SQUARE {}
WALL1{y 0.95 r -1 s 0.975 sat 0.1 b .01 hue .1}
}

rule WALL1 0.09 {
SQUARE {}
WALL1{y 0.95 r 90 s 0.975}
WALL1{y 0.95 r -90 s 0.975}
}

rule WALL1 0.005 {
WALL1{y 0.97 r 90 s 1.5}
WALL1{y 0.97 r -90 s 1.5}
}
</textarea>
<script>
  if( location.hash ){ var theId = location.hash.substring(1) }
    else{ var theId = "mtree"; }
  populateMenu( theId );
  display( theId );
  $("#menu").change( drawChoice );
</script>

</body>
</html>