var length = 0;

let angle = 20;

​

let angleD = 1;

let angleIncrement = 0.5;

​

let lengthSlider;

let angleSlider;

let depthSlider;

let angleCheckbox; 

let mirrorCheckbox;

let mirrorGate = true;

let autoAngle = false;

let angleSelect;

​

let offxSetSlider;

let offySetSlider;

​

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  angleMode(DEGREES);

 // Create a slider for direction and angle

  lengthSlider = createSlider(1, 500, 20); // Range from 0 to 360

  angleSlider = createSlider(0, 180, angle); // Range from -90 to 90

  depthSlider = createSlider(2,15,8);

  offxSetSlider = createSlider(-width,width,0);

  offySetSlider = createSlider(-height,height,0);

  lengthSlider.position(45, 400);

  depthSlider.position(45, 400 + 20);

  angleSlider.position(45, 400 + 40);

  offxSetSlider.position(0,height+10);

  offySetSlider.position(0,height+30);

  angleCheckbox = createCheckbox('Auto Angle', false); 

  angleCheckbox.position(15, 400 + 70); 

  angleCheckbox.changed(function(){autoAngle = !autoAngle;}); 

  mirrorCheckbox = createCheckbox('Mirror Off', false); 

  mirrorCheckbox.position(255, 400 + 70); 

  mirrorCheckbox.changed(function(){mirrorGate = !mirrorGate;}); 

  angleSelect = createSelect();

  angleSelect.option("Select a preset");

  angleSelect.option("45 degrees");

  angleSelect.option("60 degrees");

  angleSelect.option("90 degrees");

  angleSelect.option("120 degrees");

  angleSelect.option("144 degrees");

  angleSelect.option("150 degrees");

  angleSelect.option("176 degrees");

  angleSelect.changed(preSetAngle);

  angleSelect.position(120, 470);

}  

​

function draw(){

  background(255)

  if(autoAngle){

    updateAngle();

    angleSlider.value(angle)

  }else{

    angle = angleSlider.value();

  }

  push();

  translate(width/2+offxSetSlider.value(),height/2-50+offySetSlider.value());

  drawTree(0,0,-90,lengthSlider.value(),depthSlider.value(),angle);

  if(mirrorGate){

    drawTree(0,0,90,lengthSlider.value(),depthSlider.value(),angle); 

    drawTree(0,0,0,lengthSlider.value(),depthSlider.value(),angle); 

    drawTree(0,0,180,lengthSlider.value(),depthSlider.value(),angle); 

  }

  pop();

  noStroke();

  fill(255)

  rect(0,400,400,500)

  push();

  translate(300,475);

  drawTree(0,0,-90,30,3,angle);

  pop();

  stroke(255);

  fill(0);

  text("angle: "+round(angle),200,455);

  text("Legnth: "+round(lengthSlider.value()),200,415);

  text("Depth: "+round(depthSlider.value()),200,435);

  text("FPS: "+round(frameRate()),width-50,415);

  text("Zoom:",10,415);

  text("Depth:",10,435);

  text("Angle:",10,455);

}

​

function preSetAngle() {

  // Get the selected option's value from the dropdown menu

  let selectedOption = angleSelect.value();

  // Update the angle variable based on the selected option

  if (selectedOption === "60 degrees") {

    angle = 60;

    angleSlider.value(angle)

  } else if (selectedOption === '45 degrees') {

 angle = 45;

 angleSlider.value(angle);

 length = 34;

 lengthSlider.value(length);

 depth = 10;

 depthSlider.value(depth)

} 

  else if (selectedOption === "90 degrees") {

    angle = 90;

    angleSlider.value(angle)

  } else if (selectedOption === "120 degrees") {

    angle = 120;

    angleSlider.value(angle);

    length = 50;

    lengthSlider.value(length);

  } else if (selectedOption === '150 degrees') {

 angle = 150;

 angleSlider.value(angle);

 length = 212;

 lengthSlider.value(length);

 depth = 10;

 depthSlider.value(depth)

} else if (selectedOption === '144 degrees') {

   angle = 144;

   angleSlider.value(angle);

   length = 159;

   lengthSlider.value(length);

   depth = 10;

   depthSlider.value(depth)

  } 

else if (selectedOption === '176 degrees') {

 angle = 176;

 angleSlider.value(angle);

 length = 438;

 lengthSlider.value(length);

 depth = 10;

 depthSlider.value(depth)

} 

  else {

    // If "Select an angle" is chosen, set angle to 0 or any default value

    return

  }

  return

}

​

function saveSetting(){

  console.log(

    `else if (selectedOption === '${angleSlider.value()} degrees') {\n angle = ${angleSlider.value()};\n angleSlider.value(angle);\n length = ${lengthSlider.value()};\n lengthSlider.value(length);\n depth = ${depthSlider.value()};\n depthSlider.value(depth)\n}`

  )

}

​

function updateAngle(){

  angle += angleIncrement * angleD;

  // Define a smoothing factor (higher values make it slower to transition)

  const smoothing = 0.5;

  const smoothRange = 10;

  let targetAngleIncrement = 0.001;

  // Calculate the new targetAngleIncrement based on proximity to angles

  if (abs(angle - 60) < smoothRange || abs(angle - 90) < smoothRange || abs(angle - 120) < smoothRange) {

    targetAngleIncrement = lerp(targetAngleIncrement, 0.1, smoothing);

  } else {

    targetAngleIncrement = lerp(targetAngleIncrement, 0.5, smoothing);

  }

  if (angle >= 180) {

    angleD = -1;

    angle = 180;

  } else if (angle <= 0) {

    angleD = 1;

    angle = 0;

  }

  angleIncrement = lerp(angleIncrement, targetAngleIncrement, smoothing);

}

​

function drawTree(x1,y1,direction,length,depth,angle) {

  if (depth !== 0){

    var x2 = x1 + length * cos(direction);

    var y2 = y1 + length  * sin(direction);

    //let interpColor = lerpColor(color(34, 139, 34),color(139, 69, 19), map(depth,1,depthSlider.value(),0,1));

    //stroke(interpColor);

    stroke(0,0,0)

    strokeWeight(0.5*depth);

    line(x1,y1,x2,y2);  

    drawTree(x2,y2,direction-angle,length,depth-1,angle);

    drawTree(x2,y2,direction+angle,length,depth-1,angle);

  }

}