HTTP/2 200 date: Sat, 11 Oct 2025 10:30:56 GMT content-type: text/html server: cloudflare last-modified: Thu, 28 Oct 2010 14:02:44 GMT cf-cache-status: DYNAMIC vary: Accept-Encoding nel: {"report_to":"cf-nel","success_fraction":0.0,"max_age":604800} report-to: {"group":"cf-nel","max_age":604800,"endpoints":[{"url":"https://a.nel.cloudflare.com/report/v4?s=w84AGU7Y0oT4%2B2GEY%2F8mJkpaLom%2F9HlTYXcg6pDIEC3dd4No0I%2F25AR3tnXUgHHFNJD1GXb76Xi3DWdldNTrcHgfNTMN6qA%2FG6%2FtFII%3D"}]} content-encoding: gzip cf-ray: 98cdaf5c7a1c3e16-BOM alt-svc: h3=":443"; ma=86400

Processing.js

Tree

by Daniel Shiffman. Renders a simple tree-like structure via recursion Branching angle calculated as a function of horizontal mouse location

Original Processing.org Example: Tree

// All Examples Written by Casey Reas and Ben Fry
// unless otherwise stated.
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();
  }
}