#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.