changes made on the code

In order to make the Recursive Tree an information visualization, we need to define which variables should be used to present the data (in this case, numerical data). In this example, the height of the tree and the number of branches are mapped to two data fields in a dataset. Here is an example of a table, and its mapping:

Number of Trees Saved	Average Age of Contributers
12	45
34	56
45	34
34	40
45	59

Number of Trees Saved -> Height of a Tree in the code
Average Age of Contributers -> Number of Branches in the code.

This whole mapping issue will be handled within the website, when a user submits a dataset.

so let's see how to setup our code for such mapping:

 

Recursive Tree Code: (original)

/**
* Recursive Tree
* by Daniel Shiffman.  
* 
* Renders a simple tree-like structure via recursion
* Branching angle calculated as a function of horizontal mouse location
*/
 
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();
  }
}

OpenVisuals Implementation:

/**
* Recursive Tree
* by Daniel Shiffman.  
* 
* Renders a simple tree-like structure via recursion
* Branching angle calculated as a function of horizontal mouse location
*
* OpenVisuals implementation by Sinan Ascioglu.
*/


import OpenVisuals.*;
float theta;   
OpenVisuals ov;


public void setup() {
  size(800,500);
  smooth();


  ov = new OpenVisuals(this);  //required: create open visuals
  String[] fields = {
    "Height", "Branches"  };
  ov.createFields(fields);  //required: introduce fields required by the visualization.
  ov.setMaxRows(10);  //optional: introduce the max numbers of rows int the table visualization can handle.
  /*

   example above prepares the OpenVisuals framework for a table like
   
   | Friends | Messages |
   | 13      | 49       |
   | 45      | 500      |
   | 42      | 999      |
   
   		 */

  //optional: creates a random filled table with the given options.
  // This table can be used to test the visualization with a random dataset
  ov.createRandomTable(); 

}

public void draw() {
  background(0);

  //Interface variables are the variables that the users are allowed to change
  //in the application via openVisuals interface Overlay (not ready yet: blue square on top corner).
  int strokeColor = ov.getInterfaceVar(255, "Stroke Color");  //optional: set the stroke color as interface variable
  stroke(strokeColor);

  while(ov.nextRow()){
    // repeat for all the rows in the table: everytime nextRow is called, data read from the next available row.
    // returns false at the end of the table; after the last row.
    pushMatrix();

    //Data variables are the values displayed in the visualization, and they have their unique fields names as introduced in Setup().
    //When there is data imported, getDataVar function replaces the variable value with the data from the current row.
    //If no data is imported, it passes the given (default) value to the variable.
    int var1  = mouseY;
    var1 = ov.getDataVar(var1, "Branches"); //get variable value from OpenVisuals

    float a = (var1 / (float) width) * 90f;
    theta = radians(a);
    translate((width/(ov.getTotalRowNumber()+1))*(ov.getCurrentRowNumber()+1),height);

    int pixelNumber = 60;
    pixelNumber = ov.getDataVar(pixelNumber, "Height"); //get variable value from OpenVisuals

    line(0,0,0,-pixelNumber);
    translate(0,-pixelNumber);
    branch(pixelNumber);
    popMatrix();
  }

  ov.displayInterface(10,10, 200, height);//displays the overlay interface for user customization modules

}

void branch(float h) {
  h *= 0.66f;

  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
    pushMatrix();
    rotate(-theta);
    line(0,0,0,-h);
    translate(0,-h);
    branch(h);
    popMatrix();
  }
}