Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<meta name="description" content="tree1">
<html>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.3/p5.min.js"></script>
   <script src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.2/addons/p5.dom.js"></script>
  
</html>
 
// Based on Recursive Tree by Daniel Shiffman.  
 
function setup() {
  createCanvas(640, 480);
  textSize(18);
  stroke(225);
  noFill();
  smooth();
}
function draw(){
  background(24);
  var theta = map(mouseX, 0, width, 0, 3.14*0.75);
  var factor = map(mouseY, 0, height, 0.4, 0.7);
  text("theta: " + Math.round(theta*10)/10, 15, 20);
  text("factor: " + Math.round(factor*10)/10, 15, 50);
  
  // grow the tree from the bottom of the screen
  translate(width/2,height);
  tree(theta, factor, 100);
}
function tree(theta, factor, h) {
  if (h > 2) {
    strokeWeight(h/5);
    stroke(255 - 35*Math.log(h));
    // Draw a line h pixels long
    line(0,0,0,-h);
    // Move to the end of that line
    translate(0,-h);
    
    //draw the right brach
    push();    
    rotate(-theta);   
    tree(theta, factor, h*factor); 
    pop();     
   
    //draw the right branch
    push();
    rotate(theta);
    tree(theta, factor, h*factor);
    pop();
  }
}
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
keithoharapro
0viewers