let maxit = 8;

let angle = 50;

let points = [];

let wid = window.innerWidth;

const hei = 400;

let origin_x=wid/2;

 let origin_y=300;

class Point {

  constructor(x,y) {

    this.x=x;

    this.y=y;

  }

}

let origin_pos;

let abs_x=0;

let abs_y=0;

function tree(x,y,i) {

  push()

  translate(x,y);

  rotate(-angle);

  stroke(170,75,0);

  const l_height = -tall/i;

  let pos = new Point(x,y);

  // console.log(pos,origin_pos)

  if 

  (

    i<maxit&&

    !points.includes(pos)&&

    pos!=origin_pos

  ) {

    points.push(new Point(x,y));

    line(0,0,0,l_height);

    tree(0,l_height,i+1);

    rotate(2*angle);

    line(0,0,0,l_height);

    tree(0,l_height,i+1);

  } else {

    push();

    fill('rgba(0,130,0,0.75)')

    noStroke();

    ellipse(0,0,10);

    pop();

    rotate(2*angle);

    push();

    fill('rgba(0,130,0,0.75)')

    noStroke();

    ellipse(0,0,10);

    pop();

  }

  pop()

}

let sm;

let sa;

function setup() {

  createCanvas(wid, hei);

  angleMode(DEGREES);

  tall = height/4

  sm = document.getElementById("maxit");

  sm.onchange = change;

  sa = document.getElementById("angle");

  sa.onchange = change;

  origin_pos=new Point(origin_x,origin_y);

  change();

}

function change() {//draw tree / handle slider change

  maxit = sm.value

  angle = sa.value

  background(220);

  strokeWeight(3);

  let h = origin_y-tall;

  line(origin_x,origin_y,width/2,h);//trunk

  tree(origin_x,h,2);

  // console.log(points);

}