fogleman/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>body {padding: 0; margin: 0; overflow: hidden;}</style>
</head>
<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.5/p5.min.js"></script>
    <script src="https://www.michaelfogleman.com/static/tree-paths.js"></script>
    <script src="sketch.js"></script>
</body>
</html>

## sketch.js
function pathLength(path) {
    var result = 0;
    for (var i = 1; i < path.length; i++) {
        var p1 = path[i-1];
        var p2 = path[i];
        result += dist(p1[0], p1[1], p2[0], p2[1]);
    }
    return result;
}

function drawPath(dc, path) {
    dc.beginShape();
    for (var i = 0; i < path.length; i++) {
        var point = path[i];
        dc.vertex(point[0], point[1]);
    }
    dc.endShape();
}

function computeBounds(paths) {
    var p = paths[0][0];
    var minx = p[0];
    var maxx = p[0];
    var miny = p[1];
    var maxy = p[1];
    for (var i = 0; i < paths.length; i++) {
        var path = paths[i];
        for (var j = 0; j < path.length; j++) {
            var point = path[j];
            minx = min(minx, point[0]);
            maxx = max(maxx, point[0]);
            miny = min(miny, point[1]);
            maxy = max(maxy, point[1]);
        }
    }
    var width = maxx - minx;
    var height = maxy - miny;
    return {
        minx: minx, miny: miny, maxx: maxx, maxy: maxy,
        width: width, height: height,
    }
}

function drawPathLength(dc, path, length) {
    if (length <= 0) {
        return;
    }
    dc.beginShape();
    dc.vertex(path[0][0], path[0][1]);
    for (var i = 1; i < path.length; i++) {
        var p1 = path[i-1];
        var p2 = path[i];
        var d = dist(p1[0], p1[1], p2[0], p2[1]);
        length -= d;
        if (length < 0) {
            var t = -length / d;
            t = 1 - t;
            var x = lerp(p1[0], p2[0], t);
            var y = lerp(p1[1], p2[1], t);
            dc.vertex(x, y);
            break;
        } else {
            dc.vertex(p2[0], p2[1]);
        }
    }
    dc.endShape();
}

function Drawing(paths) {
    this.paths = paths;
    this.bounds = computeBounds(paths);
    this.index = 0;
    this.length = 0;
    this.rate = 1 * 4;
    this.jogRate = 1 * 4;
    this.previousMillis = millis();
}

Drawing.prototype.update = function(dc) {
    var t = millis();
    var dt = t - this.previousMillis;
    if (dt < 0) {
        return;
    }
    this.previousMillis = t;

    var path = this.paths[this.index];
    var length = pathLength(path);
    var remainingLength = length - this.length;
    var traversalLength = dt * this.rate;
    if (traversalLength >= remainingLength) {
        drawPath(dc, path);
        this.index++;
        this.length = 0;
        var nextPath = this.paths[this.index];
        var d = dist(
            path[path.length-1][0], path[path.length-1][1],
            nextPath[0][0], nextPath[0][1]);
        this.previousMillis += d / this.jogRate;
    } else {
        this.length += traversalLength;
    }
}

Drawing.prototype.draw = function(dc) {
    for (var i = 0; i < this.index; i++) {
        drawPath(dc, this.paths[i]);
    }
}

Drawing.prototype.setTransform = function(dc) {
    var bounds = this.bounds;
    var sx = dc.width / bounds.width;
    var sy = dc.height / bounds.height;
    var s = min(sx, sy);
    var dx = (dc.width - bounds.width * s) / 2;
    var dy = (dc.height - bounds.height * s) / 2;
    dc.resetMatrix();
    dc.translate(dx, dy);
    dc.scale(s);
    dc.translate(-bounds.minx, -bounds.miny);
}


var drawing;
var buffer;

function setup() {
    drawing = new Drawing(PATHS);
    createCanvas(windowWidth, windowHeight);
    restart();
}

function windowResized() {
    resizeCanvas(windowWidth, windowHeight);
    restart();
}

function setStyle(dc) {
    dc.stroke(0, 192);
    dc.strokeWeight(4);
    dc.strokeJoin(ROUND);
    dc.noFill();
}

function restart() {
    background(255);
    buffer = createGraphics(width, height);
    buffer.background(255);
    setStyle(buffer);
    drawing.setTransform(buffer);
    drawing.draw(buffer);
    setStyle(window);
}

function draw() {
    resetMatrix();
    drawing.update(buffer);
    image(buffer, 0, 0);
    drawing.setTransform(window);
    drawPathLength(window, drawing.paths[drawing.index], drawing.length);
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>body {padding: 0; margin: 0; overflow: hidden;}</style>
	</head>
	<body>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.5/p5.min.js"></script>
	<script src="https://www.michaelfogleman.com/static/tree-paths.js"></script>
	<script src="sketch.js"></script>
	</body>
	</html>
	function pathLength(path) {
	var result = 0;
	for (var i = 1; i < path.length; i++) {
	var p1 = path[i-1];
	var p2 = path[i];
	result += dist(p1[0], p1[1], p2[0], p2[1]);
	}
	return result;
	}

	function drawPath(dc, path) {
	dc.beginShape();
	for (var i = 0; i < path.length; i++) {
	var point = path[i];
	dc.vertex(point[0], point[1]);
	}
	dc.endShape();
	}

	function computeBounds(paths) {
	var p = paths[0][0];
	var minx = p[0];
	var maxx = p[0];
	var miny = p[1];
	var maxy = p[1];
	for (var i = 0; i < paths.length; i++) {
	var path = paths[i];
	for (var j = 0; j < path.length; j++) {
	var point = path[j];
	minx = min(minx, point[0]);
	maxx = max(maxx, point[0]);
	miny = min(miny, point[1]);
	maxy = max(maxy, point[1]);
	}
	}
	var width = maxx - minx;
	var height = maxy - miny;
	return {
	minx: minx, miny: miny, maxx: maxx, maxy: maxy,
	width: width, height: height,
	}
	}

	function drawPathLength(dc, path, length) {
	if (length <= 0) {
	return;
	}
	dc.beginShape();
	dc.vertex(path[0][0], path[0][1]);
	for (var i = 1; i < path.length; i++) {
	var p1 = path[i-1];
	var p2 = path[i];
	var d = dist(p1[0], p1[1], p2[0], p2[1]);
	length -= d;
	if (length < 0) {
	var t = -length / d;
	t = 1 - t;
	var x = lerp(p1[0], p2[0], t);
	var y = lerp(p1[1], p2[1], t);
	dc.vertex(x, y);
	break;
	} else {
	dc.vertex(p2[0], p2[1]);
	}
	}
	dc.endShape();
	}

	function Drawing(paths) {
	this.paths = paths;
	this.bounds = computeBounds(paths);
	this.index = 0;
	this.length = 0;
	this.rate = 1 * 4;
	this.jogRate = 1 * 4;
	this.previousMillis = millis();
	}

	Drawing.prototype.update = function(dc) {
	var t = millis();
	var dt = t - this.previousMillis;
	if (dt < 0) {
	return;
	}
	this.previousMillis = t;

	var path = this.paths[this.index];
	var length = pathLength(path);
	var remainingLength = length - this.length;
	var traversalLength = dt * this.rate;
	if (traversalLength >= remainingLength) {
	drawPath(dc, path);
	this.index++;
	this.length = 0;
	var nextPath = this.paths[this.index];
	var d = dist(
	path[path.length-1][0], path[path.length-1][1],
	nextPath[0][0], nextPath[0][1]);
	this.previousMillis += d / this.jogRate;
	} else {
	this.length += traversalLength;
	}
	}

	Drawing.prototype.draw = function(dc) {
	for (var i = 0; i < this.index; i++) {
	drawPath(dc, this.paths[i]);
	}
	}

	Drawing.prototype.setTransform = function(dc) {
	var bounds = this.bounds;
	var sx = dc.width / bounds.width;
	var sy = dc.height / bounds.height;
	var s = min(sx, sy);
	var dx = (dc.width - bounds.width * s) / 2;
	var dy = (dc.height - bounds.height * s) / 2;
	dc.resetMatrix();
	dc.translate(dx, dy);
	dc.scale(s);
	dc.translate(-bounds.minx, -bounds.miny);
	}


	var drawing;
	var buffer;

	function setup() {
	drawing = new Drawing(PATHS);
	createCanvas(windowWidth, windowHeight);
	restart();
	}

	function windowResized() {
	resizeCanvas(windowWidth, windowHeight);
	restart();
	}

	function setStyle(dc) {
	dc.stroke(0, 192);
	dc.strokeWeight(4);
	dc.strokeJoin(ROUND);
	dc.noFill();
	}

	function restart() {
	background(255);
	buffer = createGraphics(width, height);
	buffer.background(255);
	setStyle(buffer);
	drawing.setTransform(buffer);
	drawing.draw(buffer);
	setStyle(window);
	}

	function draw() {
	resetMatrix();
	drawing.update(buffer);
	image(buffer, 0, 0);
	drawing.setTransform(window);
	drawPathLength(window, drawing.paths[drawing.index], drawing.length);
	}