//---- normal P5 code -------------------------------------------------------


function setup() {
    createCanvas(windowWidth, windowHeight, WEBGL);
    angleMode(DEGREES);
    //noLoop();
}

function draw() {
    background(200);
    
    randomSeed(1)

    // translate(width / 2, height / 2+200);  2D tree
    translate(0, 200, 0); // 3D tree
    rotateY(frameCount)
    branch3d(100);
}

// Draw the branch
function branch2d(len) {
    push();
      if (len > 10) {
            strokeWeight(map(len, 10, 100, 1, 15))
            stroke(70, 40, 20)
            line(0, 0, 0, -len);
            translate(0, -len);
            rotate(random(-20, -30));
            branch(len * random(0.7, 0.9));
            rotate(random(50, 60));
            branch(len * random(0.7, 0.9));
      } else {
          beginShape()
          var r = 80 + random(-20, 20);
          var g = 120 + random(-20, 20);
          var b = 40 + random(-20, 20);
          fill(r, g, b, 150);
          noStroke();
          for (var i = 45; i < 135; i++) {
            var rad = 15;
            var x = rad * cos(i);
            var y = rad * sin(i);
            vertex(x, y)
          }
          for (var i = 135; i > 40; i--) {
            var rad = 15;
            var x = rad * cos(i);
            var y = rad * sin(-i) + 20;
            vertex(x, y)
          }
          endShape(CLOSE)
      }
      pop();
}

function branch3d(len) {
    strokeWeight(map(len, 10, 100, 0.5, 5))
    stroke(70, 40, 20)
    
    line(0, 0, 0, 0, -len - 2, 0);
    
    translate(0, -len, 0)
    
    if (len > 10) {
        for (var i = 0; i < 3; i++) {
            rotateY(random(100, 140))
            
            push()
            
            rotateZ(random(20, 50))
            branch3d (len*0.7)
            
            pop()
        }
    } else {
            
        var r = 80 + random(-20, 20)
        var g = 20 + random(-20, 20)
        var b = 20 + random(-20, 20)
        
        fill(r, g, b, 200)
        noStroke()
        
        translate(5, 0, 0)
        rotateZ(90)
        
        beginShape()
        for(var i = 45; i < 135; i++) {
            var rad = 7
            var x = rad * cos(i)
            var y = rad * sin(i)
            vertex(x, y)
        }
        for(var i = 135; i > 40; i--) {
            var rad = 7
            var x = rad * cos(i)
            var y = rad * sin(-i) + 10
            vertex(x, y)
        }
        
        endShape(CLOSE)
        
    }
}