// var length = 0;

// var x3, y3, x4, y4;

// var count = 0;

// var graphics;

​

// function setup() {

//   angleMode(DEGREES);

//   var canvas = createCanvas(windowWidth, windowHeight);

//   background(255);

//   stroke(0);

//   graphics = createGraphics(windowWidth, windowHeight);

//   drawTree(width/2,height,270,9);

// }

​

// function windowResized(){

//   resizeCanvas(windowWidth, windowHeight)

//   leaves = []; 

//   graphics = createGraphics(windowWidth, windowHeight);

//   drawTree(width/2,height,270,9);

// }

​

// function drawTree(x1,y1,direction,length) {

//   if (length !== 0){

//     var x2 = x1 + (length * random(5,10) * cos(direction));

//     var y2 = y1 + (length * random(5,10) * sin(direction));

//     stroke(0);

//     graphics.strokeWeight(length/10);

//     graphics.line(x1,y1,x2,y2);  

//     x3 = x1;

//     y3 = y1;

//     x4 = x2;

//     y4 = y2;

//     drawTree(x2,y2,direction-random(10,40),length-1);

//     drawTree(x2,y2,direction+random(10,40),length-1);

//   }

// }

​

// function draw(){

//   background(255);

//   image(graphics, 0, 0);

// }

​

​

​

​

​

​

​

let branches = [];

​

function setup() {

  createCanvas(400, 400);

  let root = createBranch(width / 2, height, PI / 2, 100);

  branches.push(root);

}

​

function draw() {

  background(220);

  for (let branch of branches) {

    branch.show();

  }

}

​

function createBranch(x, y, angle, len) {

  let branch = {

    x1: x,

    y1: y,

    angle: angle,

    len: len,

    clicked: false

  };

  branch.x2 = branch.x1 + len * cos(branch.angle);

  branch.y2 = branch.y1 - len * sin(branch.angle);

​

  branch.show = function() {

    stroke(0);

    line(this.x1, this.y1, this.x2, this.y2);

  }

​

  return branch;

}

​

function mouseClicked() {

  for (let branch of branches) {

    if (!branch.clicked) {

      let d = dist(mouseX, mouseY, branch.x2, branch.y2);

      console.log(d)

      if (d < 5) {

        branch.clicked = true;

​

        // Calculate the new center of the view to zoom in on the clicked branch

        let newCenterX = (branch.x1 + branch.x2) / 2;

        let newCenterY = (branch.y1 + branch.y2) / 2;

​

        // Calculate the zoom factor (you can adjust this as needed)

        let zoomFactor = 2.0; // Increase this for closer zoom

​

        // Translate to the new center and scale to zoom in

        translate(width / 2, height / 2);

        scale(zoomFactor);

        translate(-newCenterX, -newCenterY);

​

        // Redraw the tree with the updated view

        background(220);

        for (let b of branches) {

          b.show();

        }

      }

    }

  }

}

​

​

​