​

const canvasHeight = 400;

const maxbranches = 4;

const minbranches = -1;

const noiseAmp = 10, noiseSpeed = 0.0002;

const maxMouseTurn = 90;

const amountOfTrees = 16;

​

const lineDist = 19;

const lineLength = 17;

​

let d, img;

const perloop = 25; // should be divisor of canvas width

// const col = [[50,80,160],[60,100,180]];

​

let trees = [];

let maxdepth = 8;

let branchcount = 0;

let startingpoints = [];

​

let counter = 0;

​

​

function setup() {

  createCanvas(canvasHeight * 2.5, canvasHeight);

  d = pixelDensity();

  img = 4 * (width * d) * (height * d);

  angleMode(DEGREES);

​

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

    trees.push(generateTree(0));

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

  }

  print(branchcount);

}

​

function draw() {

  background(220);

  pixelFucker();

  stroke(0)

  // strokeWeight(2);

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

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

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

      // point(x + noise(millis()*noiseSpeed - y/height)*200 - 100, y + noise(millis()*noiseSpeed - x/width, 10)*50 - 25)

    }

  }

  strokeWeight(1);

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

    drawBranch(trees[i], 

               startingpoints[i][0], 

               startingpoints[i][1], 

               trees[i].rot + (mouseX / width) * maxMouseTurn/2 + noiseAmp*noise(millis()*noiseSpeed) - noiseAmp/2, 

               height/4);

  }

  counter++;

  if(counter>100){

    print(frameRate());

    counter = 0;

  }

}

​

function generateTree(depth) {

  branchcount++;

  let branch = {

    depth: depth,

    rot: random(-15, 15),

    children: [],

  };

​

  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,10,3);

//     let ran = 0;

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

//       ran += random(-2,4)

//     }

//     ran = ran/floor(n);

​

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

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

//     }

    // original function

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

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

    }

  }

​

  return branch;

}

​

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

  fill((1-tree.depth/maxdepth)*60);

  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 + (mouseX / width) * maxMouseTurn + noiseAmp*noise(millis()*noiseSpeed) - noiseAmp/2, 

               size / 1.2);

  }

​

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

    fill("white");

    stroke("black");

    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 pixelFucker(){

  loadPixels();

  let thing = millis()*noiseSpeed/4

  for (let i = 0; i < img/perloop; i += 4*perloop) {

    let i2 = i + floor((i)/(4*width * d)) * perloop * 4 * width * d;

    let index = i2/4/d;

    let y = index/(width*d);

    let x = index%width

    let val = noise(0.5*x/width,0.5*y/height,thing)*500-125

    if(val<110){val=55;}

    else {val=60;}

    for(let k=0;k<=perloop;k++){

      for(let m=0;m<perloop;m++){

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

          pixels[i2 + width*4*d*k + 4*m + j] = val;

        }

        pixels[i2 + width*4*d*k + 4*m + 3] = 256;

      }

    }

  }

  updatePixels();

}