Friday, November 18, 2011

Simple L-system Processing.js Code

Here as promised is the code from my previous post:

<script src="http://processingjs.org/content/download/processing-js-1.3.6/processing-1.3.6.min.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.0.6/modernizr.min.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript"></script>
<div id="blogpostcontent"><!-- Blog Text -->
</div>
<div id="nocanvas" style="display: none; color: Red;"><!-- Fail Text -->
</div>
<div id="procanvas"><canvas id="processingCanvas"></canvas></div>
<div><!-- More Blog Text -->
</div>
<script type="text/javascript">
var words = $("#blogpostcontent").text().replace(/[\.,-\/#!$%\^&\*;:{}=\-_`~()]/g, "").replace(/\s{2,}/g, "").split(' ');
if (!Modernizr.canvas) { $('#nocanvas').show(); $('#procanvas').remove(); }
</script>
<script type="text/processing" data-processing-target="processingCanvas">

Tree tree;
int wordCount = 0;

class Stack {
ArrayList aList;

Stack() {
aList = new ArrayList(1024);
}

Stack(int initialSize) {
aList = new ArrayList(initialSize);
}

boolean isEmpty() {
if (aList.size() > 0) return false;
return true;
}

void push(Object obj) {
aList.add(obj);
}

Object pop() {
int n = aList.size();
if (n > 0) return aList.remove(n - 1);
return null;
}
}

class Branch {

float x = 0;
float y = 0;
float theta = 0;
float thickness = 0;

Branch() {
};

Branch (Branch branch) {
x = branch.x;
y = branch.y;
theta = branch.theta;
thickness = branch.thickness;
}
}

class Tree {

String axiom, currentString;
String productionRule;
Branch branch;
Stack branchStack;
int pos = 0;
color col;
float angle = PI/10;
float angleChaos = 1;
float initialThickness = 18;
float thickness = initialThickness;

Tree () {
axiom = "F";
currentString = axiom;
branch = new Branch();
productionRule = "F[+FF-F-F][-FF+F-F]";
branchStack = new Stack();
}

void grow() {
grow(1);
}

void grow(int generations) {
for (int i = 0; i < generations; i++) {
String nextString = "";
for (int j = 0; j < currentString.length(); j++) {
char c = currentString.charAt(j);
if (c == "F") {
nextString += productionRule;
}
else {
nextString += c;
}
}
currentString = nextString;
}
}

void draw() {
for (int i = 0; i < currentString.length(); i++) {
this.drawBranch();
}
}

void drawBranch () {
if (pos >= currentString.length()) return;
char c = currentString.charAt(pos);
switch (c) {
case "F":
fill(100 + random(-40, 40), 42 + random(-40, 40), 42);
String word = (wordCount < words.length - 1) ? words[wordCount++] : "noword";
branch.thickness = thickness;
textFont(createFont("Helvetica", branch.thickness));
pushMatrix();
translate(branch.x, branch.y);
rotate(branch.theta);
text(word, 0, 0);
popMatrix();
float extension = textWidth(word);
branch.x += extension * cos(branch.theta);
branch.y += extension * sin(branch.theta);
break;
case "-":
branch.theta -= (angle + random(-1.0 * angle * angleChaos, angle * angleChaos));
break;
case "+":
branch.theta += (angle + random(-1.0 * angle * angleChaos, angle * angleChaos));
break;
case "[":
branchStack.push(new Branch(branch));
if (thickness > 3) {
thickness -= 3;
}
else {
thickness = 1;
}
break;
case "]":
branch = (Branch)branchStack.pop();
thickness = branch.thickness;
break;
}
pos++;
}
}

void setup () {
size(500, 500);
background(#141414);
frameRate(60);
smooth();
tree = new Tree();
tree.grow(3);
}

void draw () {
translate(width/2, height);
rotate(1.5 * PI);
tree.drawBranch();
}

</script>

The L-system code is based on this Processing code written by Daniel Jones.

No comments:

Post a Comment