const maxbranches = 4;

const minbranches = -1;

const noiseAmp = 10, noiseSpeed = 0.0002;

const maxMouseTurn = 90;

​

const amountOfTrees = 8;

​

const lineDist = 45;

const lineLength = 25;

​

let trees = [];

let maxdepth = 8;

let branchcount = 0;

let startingpoints = [];

let rotshift = 0, springBack = true;

​

let counter = 0;

let timeNoise = 0;

let timeSow = 0;

​

let s1, s2, s3;

​

​

function setup() {

  createCanvas(canvasHeight * 2.5, canvasHeight);

  angleMode(DEGREES);

  colorMode(HSB, 100)

​

  s1 = createSlider(1, 15, 7);

  s1.position(10, height + 10);

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

  s2 = createSlider(1, 15, 3);

  s2.position(10, height + 30);

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

  s3 = createSlider(0, 6, 2);

  s3.position(10, height + 80);

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

  for(let i = 0; i<amountOfTrees; i++){

    trees.push(generateTree(0, i));

    startingpoints.push([random(width*0.1,width*0.9), random(height*1.05,height*1.2)]);

  }

  print(branchcount);

}

​

function draw() {

  timeSlow = millis()*noiseSpeed

  timeNoise = noise(timeSlow)

  background(50-timeNoise*50, 10, 75);

  drawLines();

  strokeWeight(1);

  for(let i=0; i<trees.length; i++){

    drawBranch(trees[i], 

               startingpoints[i][0], 

               startingpoints[i][1], 

               trees[i].rot + (rotshift / width) * maxMouseTurn/2 + noiseAmp*timeNoise - noiseAmp/2, 

               height/4);

  }

  if(rotshift > 0 && springBack){

    rotshift-= max((rotshift/50)**2);

  }

  counter++;

  if(counter>100){

    print("fps: " + frameRate() + ", ms: " + 1000/frameRate());

    counter = 0;

  }

​

}

​

function generateTree(depth, index) {

  branchcount++;

  let branch = {

    depth: depth,

    rot: random(-15, 15),

    children: [],

    hue: random(90,120)%100,

    index: index

  };

​

  if (depth < maxdepth && branchcount < 2000) {

    // i trie making the randomness "weighted" so they always grow a little bit but i actually like the unweighted one as well so just comment either one.

    // normal distributed function, you have a lot of control over the results by changing the output parameters of the map

    let n = map(depth,0,maxdepth,s1.value(),s2.value());

    let m = map(depth,0,maxdepth,4,s3.value());

    let ran = 0;

    for(let j=0;j<n;j++){

      ran += random(-2,m)

    }

    ran = ran/floor(n);

​

    for (let i = 0; i < ran; i++) {

      branch.children.push(generateTree(depth + 1, index));

    }

    // // original function

    // for (let i = 0; i < random(-1,4); i++) {

    //   branch.children.push(generateTree(depth + 1, index));

    // }

  }

​

  return branch;

}

​

function drawBranch(tree, x, y, rot, size) {

  fill(noise(tree.index)*100, 20, 50 + tree.depth/maxdepth * 15);

  noStroke();

  translate(x, y);

  rotate(rot);

  beginShape();

  vertex(-size / 7, 0);

  vertex(-size / 8, -size);

  vertex(size / 8, -size);

  vertex(size / 7, 0);

  endShape(CLOSE);

  translate(-x, -y);

​

  for (let branch of tree.children) {

    drawBranch(branch, x, y - size / 1.1, 

               branch.rot + (rotshift / width) * maxMouseTurn + noiseAmp*timeNoise - noiseAmp/2, 

               size / 1.2);

  }

​

  if (tree.children.length == 0) {

    let activation = noise(tree.rot, timeSlow)

    fill(tree.hue, 25+activation*100, 50+ activation*50);

    stroke(noise(tree.index)*100, 20, 65);

    ellipse(x, y - size / 1.1, size / 3, size / 1.5);

  }

​

  translate(x, y);

  rotate(-rot);

  translate(-x, -y);

}

​

function drawLine(x,y,rot,length){

  let l= length/2

  line(x + l*cos(rot), y + l*sin(rot), x + l*cos(rot + 180), y + l*sin(rot + 180));

}

​

function drawLines(){

  stroke(0)

  strokeWeight(2);

  for(let x=-100;x<width+100;x+=lineDist){

    for(let y=0;y<height;y+=lineDist){

      stroke(0,

             15 + x/width*10 + y/height*10,

             60+noise(timeSlow - x/width, 10)*20);

      drawLine(x + noise(timeSlow - y/height)*200 - 100, y + noise(timeSlow - x/width, 10)*50 - 25, noise(x/width, y/height, timeSlow-x/width)*180+90, lineLength);

    }

  }

}

​

function mouseClicked(){

  trees = [];

  startingpoints = [];

  branchcount = 0;

  for(let i = 0; i<amountOfTrees; i++){

    trees.push(generateTree(0, i));

    startingpoints.push([random(width*0.1,width*0.9), random(height*1.05,height*1.2)]);

  }

  print(branchcount);

  print(s1.value(),s2.value(),s3.value())

}

​

function mouseMoved(){

  let mouseMovement = mouseX-pmouseX

  if(mouseMovement > 0){

    rotshift += mouseX-pmouseX;

    springBack = false;

  }

  if(mouseMovement < 0){

    springBack = true;

  }

}