<!-- Click to regenerate -->

body {
  overflow: hidden;
  background: #eee;
}

// There are about 500 ways this code could be cleaner, but I'm just content knowing that I learned a thing (Processing) and made something with it. Hooray for learning a thing!

// helper functions
function randBetween(min, max) {
  return Math.floor(Math.random() * (Math.floor(max) - Math.ceil(min) + 1)) + Math.ceil(min);
}

function doesDecay(chance) {
  return Math.random() <= chance;
}

// thank you stackoverflow
function hexToRgb(hex) {
    var bigint = parseInt(hex.split('#')[1], 16);
    var r = (bigint >> 16) & 255;
    var g = (bigint >> 8) & 255;
    var b = bigint & 255;
    return [r, g, b];
}

// Default settings + placeholders
var turnOpts = [-30, 0, 20];
var branchLength = 20;
var points = [];
var newX = new Number();
var newY = new Number();
var rDelta = new Number();
var gDelta = new Number();
var bDelta = new Number();
var ct = 1;
var maxCt = 10;
var strokeThickness = 2;
var startColor = [100, 100, 100]
var endColor = [200, 200, 200];

// p5 setup
function setup() {  
  // What I'll be doing is keeping track of the most recently-created generation of lines by their endpoints, in an array of [x, y] coordinate arrays
  // To start, there's just one point: the center of the bottom of the window.
  points.push([windowWidth/2, windowHeight]);
  createCanvas(windowWidth, windowHeight);

  // Using that points array's only item, I'm gonna determine the coordinates for going straight up by the branchLength amount (by default, 20)
  newX = points[0][0] + turnOpts[1];
  newY = points[0][1] - branchLength;
  
  // After the stroke weight is set here, it will take effect for every future line/shape, unless overridden or disabled (which it will not be)
  strokeWeight(strokeThickness);

  // Setting some variables at global scope to use for tweening the start/end colors as we build the tree.
  rDelta = (endColor[0] - startColor[0]) / maxCt;
  gDelta = (endColor[1] - startColor[1]) / maxCt;
  bDelta = (endColor[2] - startColor[2]) / maxCt;

  // Stroke color (aka 'stroke') works the same as stroke weight in Processing. This will be reset soon, though.
  stroke(color(
    startColor[0] + (rDelta * (ct - 1)), 
    startColor[1] + (gDelta * (ct - 1)),
    startColor[2] + (bDelta * (ct - 1))
  ));

  // Finally, draw the first line,
  line(points[0][0], points[0][1], newX, newY);
  // And reset the 'points' array to only consist of the x, y coordinates of said line.
  points = [[newX, newY]];
}

// p5's draw function loops forever unless it is told otherwise
// Because this tree is built in an exponential way, I've included count (ct) and max-count (maxCt) variables to limit the total number of possible generations of growth. I've also included a 'decay' mechanic, so that the tree slowly peters off, with the chance of a new branch not generating slowly increasing over the duration of the tree's life, ending in a 100% chance on the last iteration.
function draw() {
  // Going to reset an array for use inside the loop. This will be used to store new branch points as they are generated for use in the next loop.
  var newPoints = [];
  
  // Colorize this generation's branches appropriately. This is RGB format.
  stroke(color(
    startColor[0] + (rDelta * (ct - 1)), 
    startColor[1] + (gDelta * (ct - 1)),
    startColor[2] + (bDelta * (ct - 1))
  ));  

  // Given that we're dealing with an array of arrays, forEach is pretty useful.
  points.forEach(function(pts) {
    // There are three possible branches for each branchend / point in the `points` array, so: 3 iterations.
    for (i = 0; i <= 2; i ++) {
      // This will store the directions of growth that are allowed to be chosen.
      var availableOpts = [];

      // Scale the decay linearly for each generation. First pass has a 0% chance of decay, because the 'ct' variable starts at 1.
      var decays = doesDecay((1 / maxCt) * (ct - 1));

      if (decays === false) {
        // using the x, y coordinates that we're currently looking at in the points array, figure out what the three possible options are. 
        var optLeft = [pts[0] + turnOpts[0], pts[1] - branchLength];
        var optUp = [pts[0] + turnOpts[1], pts[1] - branchLength];
        var optRight = [pts[0] + turnOpts[2], pts[1] - branchLength];

        var possibleOpts = [optLeft, optUp, optRight];

        // if each possible point wasn't taken already, make it available.
        possibleOpts.forEach((opt) => {
          if (newPoints.indexOf(opt) < 0) {
            availableOpts.push(opt);
          }
        });

        // Figure out which of the available options we'll be using.
        var choice = availableOpts[randBetween(0, 2)];

        // Draw that line and push that line to the newPoints array.
        line(pts[0], pts[1], choice[0], choice[1]);
        newPoints.push(choice);
      }
    }
  });

  // Stop the otherwise-infinite draw() loop at the right time.
  if (ct >= maxCt) {
    noLoop();
  }
  ct = ct + 1;

  // Make the points array equal to the newPoints array, so that when the draw() loop starts again, branches will be generating based on the new branchends, not the old ones.
  points = newPoints;
}

// If the user clicks (either in the options panel or anywhere else), regenerate and reset everything.
function mouseReleased() {
  setTimeout(() => {
    clear();
    ct = 1;
    points = [];
    setup();
    loop();
  }, 100);
}

// From here, it's just setting up the control panel
var Options = function() {
  this.branchLength = 20;
  this.generations = 10;
  this.strokeThickness = 2;
  this.horizontalTravelOne = -30;
  this.horizontalTravelTwo = 0;
  this.horizontalTravelThree = 20;
  this.startColor = [100,100,100];
  this.endColor = [200,200,200];
};

window.onload = function() {
  var gui = new dat.GUI();
  var opts = new Options();

  var lengthController = gui.add(opts, 'branchLength', 1, 50);
  var maxController = gui.add(opts, 'generations', 2, 11);
  var strokeController = gui.add(opts, 'strokeThickness', 1, 10);
  var horizontalOne = gui.add(opts, 'horizontalTravelOne', -40, 40);
  var horizontalTwo = gui.add(opts, 'horizontalTravelTwo', -40, 40);
  var horizontalThree = gui.add(opts, 'horizontalTravelThree', -40, 40);
  var start = gui.addColor(opts, 'startColor');
  var end = gui.addColor(opts, 'endColor');
  start.onFinishChange(function(value) {
    startColor = hexToRgb(value);
  });
  end.onFinishChange(function(value) {
    endColor = hexToRgb(value);
  });
  lengthController.onFinishChange(function(value) {
    branchLength = value;
  });
  maxController.onFinishChange(function(value) {
    maxCt = value;
  });
  strokeController.onFinishChange(function(value) {
    strokeThickness = value;
  });
  horizontalOne.onFinishChange(function(value) {
    turnOpts[0] = value;
  });
  horizontalTwo.onFinishChange(function(value) {
    // Fires when a controller loses focus.
    turnOpts[1] = value;
  });
  horizontalThree.onFinishChange(function(value) {
    turnOpts[2] = value;
  });
};