let range;

let shrinkFactor;

let depth;

let rangeAddOn;

let zoom;

​

let marked = [1, 2, 3, 4];

let initialLength = 200;

let angle = 45;

let targetAngle;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

​

  //angle 

  slider1 = createSlider(0, 9000, 4500);

  slider1.position(width / 2 - 180, 10);

  slider1.style('width', '200px');

  slider1.addClass('slider1');

​

  //initialLength

  slider2 = createSlider(0, 1000, 200);

  slider2.position(width / 2 - 180, 35);

  slider2.style('width', '200px');

  slider2.addClass('slider1');

​

  //depth

  slider3 = createSlider(1, 6, 3);

  slider3.position(width / 2 - 180, 60);

  slider3.style('width', '200px');

  slider3.addClass('slider1');

​

  //rangeAddOn

  slider4 = createSlider(0, 3, 0);

  slider4.position(width / 2 - 180, 85);

  slider4.style('width', '200px');

  slider4.addClass('slider1');

}

​

function draw() {

  background(48, 50, 52);

  frameRate(30);

  stroke(48, 50, 52);

  fill(38, 139, 210);

  slider1.position(width / 2 - 180, 20);

  targetAngle = slider1.value()/100;

  text("Winkel = " + round(targetAngle), width / 2 + 30, 28);

​

  slider2.position(width / 2 - 180, 45);

  zoom = slider2.value();

  text("Zoom = " + zoom, width / 2 + 30, 53);

​

  slider3.position(width / 2 - 180, 70);

  depth = slider3.value();

  text("Baumtiefe = " + depth, width / 2 + 30, 78);

​

  slider4.position(width / 2 - 180, 95);

  rangeAddOn = slider4.value();

  text("zusätzliche Baumbreite = " + rangeAddOn, width / 2 + 30, 103);

​

  range = rangeAddOn + depth;

  initialLength += 0.2 * (zoom - initialLength);

  shrinkFactor = Math.pow(20 / initialLength, 1 / (depth + 1));

  angle += 0.2 * (targetAngle - angle);

  // Convert it to radians

  theta = radians(angle);

​

  translate(width / 2, height / 2 + (initialLength / 2) - 0);

  branchRotate(initialLength, [], true);

}

​

function branchRotate(h, done, unlocked) {

  h *= shrinkFactor;

  let m = range - done.length;

  let currentDepth = done.length;

  rotate(-theta * (m - 1) / 2 - theta); //   

​

  for (let i = 1; i < range + 1; i++) {

    if (!done.includes(i) && currentDepth < depth) {

      rotate(theta); // Rotate by theta

      push(); // Save the current state of transformation 

      let currentIsMarked = marked.includes(i);

      if (currentIsMarked && unlocked) {

        stroke(38, 139, 210);

        fill(38, 139, 210);

      } else {

        stroke(38, 139, 210);

        fill(38, 139, 210);

      }

      line(0, 0, 0, -h); // Draw the branch

      translate(0, -h); // Move to the end of the branch

      fill(48, 50, 52);

      stroke(48, 50, 52);

      square(-7, 0, 14)

      if (currentIsMarked && unlocked) {

        stroke(255, 153, 51);

        fill(255, 153, 51);

      } else {

        stroke(255, 153, 51);

        fill(255, 153, 51);

      }

      text(i, -3, 11);

      done.push(i);

      branchRotate(h, done, currentIsMarked && unlocked);

      done.pop();

      pop(); // we "pop" in order to restore the previous matrix state

    }

  }

}

​

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

}