Interactive Space Colonization

// This sketch is a fork of Daniel Shiffman's work.

// code: https://editor.p5js.org/codingtrain/sketches/r9pxis9g-

// video: https://www.youtube.com/watch?v=kKT0v3qhIQY

​

var tree;

var max_dist = 300;

var min_dist = 10;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  tree = new Tree();

}

​

function draw() {

  background(0);

  tree.show();

  tree.grow();

}

​

function Tree() {

  this.leaves = [];

  this.branches = [];

​

  this.clearItems = function () {

    tree.branches.length = 0;

    tree.leaves.length = 0;

  };

​

  this.addLeaves = function () {

    const mousePos = createVector(mouseX, mouseY);

​

    if (this.leaves.length == 0) {

      var pos = mousePos.copy();

      var dir = createVector(0, 0);

      var root = new Branch(null, pos, dir);

      this.branches.push(root);

    }

​

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

      const distance = random(10, 50);

      const randomPos = p5.Vector.random2D().mult(distance);

      const pos = p5.Vector.add(mousePos, randomPos);

      this.leaves.push(new Leaf(pos));

    }

  };

​

  this.grow = function () {

    for (var i = 0; i < this.leaves.length; i++) {

      var leaf = this.leaves[i];

      var closestBranch = null;

      var record = max_dist;

      for (var j = 0; j < this.branches.length; j++) {

        var branch = this.branches[j];

        var d = p5.Vector.dist(leaf.pos, branch.pos);

        if (d < min_dist) {

          leaf.reached = true;

          closestBranch = null;

          break;

        } else if (d < record) {

          closestBranch = branch;

          record = d;

        }

      }

​

      if (closestBranch != null) {

        var newDir = p5.Vector.sub(leaf.pos, closestBranch.pos);

        newDir.normalize();

        closestBranch.dir.add(newDir);

        closestBranch.count++;

      }

    }

​

    this.leaves = this.leaves.filter((leaf) => leaf.reached == false);

​

    for (var i = this.branches.length - 1; i >= 0; i--) {

      var branch = this.branches[i];

      if (branch.count > 0) {

        branch.dir.div(branch.count + 1);

        this.branches.push(branch.next());

        branch.reset();

      }

    }

  };

​

  this.show = function () {

    noStroke();

    fill(255);

    this.leaves.forEach((leaf) => leaf.show());

    stroke(255);

    this.branches.forEach((branch) => branch.show());

  };

}

​

function Branch(parent, pos, dir) {

  this.pos = pos;

  this.parent = parent;

  this.dir = dir;

  this.origDir = this.dir.copy();

  this.count = 0;

  this.len = 10;

​

  this.reset = function () {

    this.dir = this.origDir.copy();

    this.count = 0;

  };

​

  this.next = function () {

    var nextDir = p5.Vector.mult(this.dir, this.len);

    var nextPos = p5.Vector.add(this.pos, nextDir);

    var nextBranch = new Branch(this, nextPos, this.dir.copy());

    return nextBranch;

  };

​

  this.show = function () {

    if (parent != null) {

      line(this.pos.x, this.pos.y, this.parent.pos.x, this.parent.pos.y);

    }

  };

}

​

function Leaf(pos) {

  this.pos = pos;

  this.reached = false;

​

  this.show = function () {

    rect(this.pos.x - 1, this.pos.y - 1, 3, 3);

  };

}

​

function mouseClicked() {

  tree.addLeaves();

}

​

function mouseDragged() {

  tree.addLeaves();

}

​

function keyPressed() {

  if (keyCode === "c" || "C") {

    tree.clearItems();

  }

}

​