topical media & game development
#javascript-processing-example-topic-fractals-tree.htm / htm
<!DOCTYPE html>
<html><head>
<script src="javascript-processing-example-processing.js"></script>
<script src="javascript-processing-example-init.js"></script>
<link rel="stylesheet" href="javascript-processing-example-style.css">
</head><body><h1><a href="http://ejohn.org/blog/processingjs/">Processing.js</a></h1>
<h2>Tree</h2>
<p>by Daniel Shiffman.
Renders a simple tree-like structure via recursion
Branching angle calculated as a function of horizontal mouse location</p>
<p><a href="http://processing.org/learning/topics/tree.html"><b>Original Processing.org Example:</b> Tree</a><br>
<script type="application/processing">
float theta;
void setup() {
size(200,200);
smooth();
}
void draw() {
background(0);
frameRate(30);
stroke(255);
// Let's pick an angle 0 to 90 degrees based on the mouse position
float a = (mouseX / (float) width) * 90f;
// Convert it to radians
theta = radians(a);
// Start the tree from the bottom of the screen
translate(width/2,height);
// Draw a line 60 pixels
line(0,0,0,-60);
// Move to the end of that line
translate(0,-60);
// Start the recursive branching!
branch(60);
}
void branch(float h) {
// Each branch will be 2/3rds the size of the previous one
h *= 0.66f;
// All recursive functions must have an exit condition!!!!
// Here, ours is when the length of the branch is 2 pixels or less
if (h > 2) {
pushMatrix(); // Save the current state of transformation (i.e. where are we now)
rotate(theta); // Rotate by theta
line(0,0,0,-h); // Draw the branch
translate(0,-h); // Move to the end of the branch
branch(h); // Ok, now call myself to draw two new branches!!
popMatrix(); // Whenever we get back here, we "pop" in order to restore the previous matrix state
// Repeat the same thing, only branch off to the "left" this time!
pushMatrix();
rotate(-theta);
line(0,0,0,-h);
translate(0,-h);
branch(h);
popMatrix();
}
}
</script><canvas width="200" height="200"></canvas></p>
<div style="overflow: hidden; height: 0px; width: 0px;"></div>
<pre><b>// All Examples Written by <a href="http://reas.com/">Casey Reas</a> and <a href="http://benfry.com/">Ben Fry</a>
// unless otherwise stated.</b>
float theta;
void setup() {
size(200,200);
smooth();
}
void draw() {
background(0);
frameRate(30);
stroke(255);
// Let's pick an angle 0 to 90 degrees based on the mouse position
float a = (mouseX / (float) width) * 90f;
// Convert it to radians
theta = radians(a);
// Start the tree from the bottom of the screen
translate(width/2,height);
// Draw a line 60 pixels
line(0,0,0,-60);
// Move to the end of that line
translate(0,-60);
// Start the recursive branching!
branch(60);
}
void branch(float h) {
// Each branch will be 2/3rds the size of the previous one
h *= 0.66f;
// All recursive functions must have an exit condition!!!!
// Here, ours is when the length of the branch is 2 pixels or less
if (h > 2) {
pushMatrix(); // Save the current state of transformation (i.e. where are we now)
rotate(theta); // Rotate by theta
line(0,0,0,-h); // Draw the branch
translate(0,-h); // Move to the end of the branch
branch(h); // Ok, now call myself to draw two new branches!!
popMatrix(); // Whenever we get back here, we "pop" in order to restore the previous matrix state
// Repeat the same thing, only branch off to the "left" this time!
pushMatrix();
rotate(-theta);
line(0,0,0,-h);
translate(0,-h);
branch(h);
popMatrix();
}
}</pre>
</body></html>
(C) Æliens
20/2/2008
You may not copy or print any of this material without explicit permission of the author or the publisher.
In case of other copyright issues, contact the author.
