L-System test

From e263daa376ed8b6be58d3c7d311e4b896666d8fc Mon Sep 17 00:00:00 2001 From: Yuval Adam Date: Thu, 27 Oct 2011 11:59:22 +0200 Subject: added lsys --- lsys/README.md | 3 + lsys/app.js | 60 ++++++++++++++++++++ lsys/index.html | 50 ++++++++++++++++ lsys/lsystem.js | 172 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 285 insertions(+) create mode 100644 lsys/README.md create mode 100644 lsys/app.js create mode 100644 lsys/index.html create mode 100644 lsys/lsystem.js diff --git a/lsys/README.md b/lsys/README.md new file mode 100644 index 0000000..b8b2535 --- /dev/null +++ b/lsys/README.md @@ -0,0 +1,3 @@ +## L-system generator + +Plug in values and see what you get. You can click "Save Image" to generate a PNG for downloading (at least in Chrome -- I haven't tested it in other browsers). diff --git a/lsys/app.js b/lsys/app.js new file mode 100644 index 0000000..3c5e696 --- /dev/null +++ b/lsys/app.js @@ -0,0 +1,60 @@ +/* Based on http://www.robotacid.com/PBeta/LSystem/index.html */ + +var lsystem = new LSystem(); + +var width = 1200; +var height = 600; + +var HALF_PI = 3.141592 / 2; + +function setup(axiom, ruleset, iterations) { + lsystem = new LSystem(axiom, ruleset); + lsystem.iterate(iterations); +} + +function saveImage() { + console.log("save"); + window.open(c.toDataURL()); +} + +function draw(x, y, axiom, ruleset, iterations, angle, zoom, drawtype) { + a.fillStyle = "#fff"; + a.fillRect(0, 0, width, height); + + var angle_radians = parseFloat(angle) * (Math.PI / 360); + + lsystem.draw(x, y, zoom, angle_radians, drawtype); + + a.fillStyle = "#666"; + a.fillRect(0, 0, width, 20); + a.fillStyle = "#fff"; + a.font = "bold 10px 'Lucida Grande', Helvetica"; + + var str = "axiom: " + axiom + " "; + str += "ruleset: " + ruleset + " "; + str += "angle: " + angle + "º "; + str += "iterations: " + iterations + " "; + str += "zoom: " + zoom + " "; + str += "x: " + x + " "; + str += "y: " + y + " "; + str += "drawtype: " + drawtype; + a.fillText(str, 5, 13); +} + +function generate() { + var axiom = document.getElementById("axiom").value; + var ruleset = document.getElementById("ruleset").value; + var angle = document.getElementById("angle").value; + var iterations = document.getElementById("iterations").value; + var zoom = document.getElementById("zoom").value; + + var x = document.getElementById("x").value; + var y = document.getElementById("y").value; + + var drawtype = document.getElementById("drawtype").value; + + setup(axiom, ruleset, iterations); + draw(x, y, axiom, ruleset, iterations, angle, zoom, drawtype); +} + +generate(); diff --git a/lsys/index.html b/lsys/index.html new file mode 100644 index 0000000..7197b7f --- /dev/null +++ b/lsys/index.html @@ -0,0 +1,50 @@ + + + + L-System test + + + + +

+ +

+ + + + + + diff --git a/lsys/lsystem.js b/lsys/lsystem.js new file mode 100644 index 0000000..c3896e5 --- /dev/null +++ b/lsys/lsystem.js @@ -0,0 +1,172 @@ +/* LSystem */ + +function LSystem(axiom, ruleset) { + this.alphabet = ['F', '+', '-', '[', ']']; + this.axiom = axiom; + this.rule = ["", "+", "-", "[", "]"]; + this.tree = ""; + + this.rule[0] = ruleset; + + this.draw = function(x, y, zoom, angle, drawtype) { + a.fillStyle = "#000"; + a.strokeStyle = "#000"; + + a.save(); + a.translate(x, y); + + var i; + + for (i=0; i