index.htm

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8"/>
	<head>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.12.2/paper-full.min.js" > </script>
		<style>
			* {
				width:100%;
				height:100%;
			}
		</style>
	</head>
<body>
  <a href=#>export SVG(in console)</a>

	<canvas id='tree' resize></canvas>

<script type="text/paperscript" canvas="tree">
  function generateSVG() {
    console.log('exporting to svg');
    var svg = paper.project.exportSVG();
    console.log(svg);
  }
  document.querySelector("a").addEventListener("click", generateSVG)

	var seedTypes = [
		{
			bark: {
				thickness: {
					max: 35,
					min: 9,
				},
				roughness: 0.2
			},
		},
		{
			bark: {
				thickness: {
					max: 35,
					min: 9,
				},
				roughness: 0.5
			},
		},
		{
			bark: {
				thickness: {
					max: 17,
					min: 9,
				},
				roughness: 0.3
			},
		},
		{
			bark: {
				thickness: {
					max: 25,
					min: 13,
				},
				roughness: 0.4
			},
		},
		{
			bark: {
				thickness: {
					max: 25,
					min: 13,
				},
				roughness: 0.1
			},
		},
	];

  project.currentStyle = {
    strokeColor: '#000000',
    strokeWidth: 0.1,
  };
	var origin = new Point(400, 400);

	var randomString = '';
  var randomStringLen = Math.floor(Math.random() * 200) + 5;
	while(randomString.length < randomStringLen)
		randomString += String.fromCharCode((Math.random() * 90) + 45);

	console.log('using ' + randomString);
	var seedGenerator = new SeedGenerator(randomString);
	var seed = seedGenerator.generate(25);
	console.log(seed);

	var ringGenerator = new RingGenerator(origin, seedGenerator);
	var illustrator = new Illustrator(origin, seedGenerator);

	//drawEnvironment(seed.environment);

	var parent, paths = [], outerIllustratedPath;
	for(var year=0 ; year <= seed.years ; year++) {
		ringGenerator.configure(year);

		if(year === 0)
			parent = ringGenerator.generateKnot();
		else
			parent = ringGenerator.generate(parent.simplePath);

		var child = paths[paths.length-1];
		if(year > 0 && year <= seed.years) {
			var options = {};

			outerIllustratedPath = illustrator.illustrateRing(year, child.complexPath, parent.complexPath, options);
		}

		paths.push(parent);
	}

	var child = paths[paths.length-1];
	var parent = paths[paths.length-2];

	var barkPaths = ringGenerator.generateBark(parent.complexPath);
	illustrator.illustrateBark(barkPaths.inner, barkPaths.outer);

	illustrator.illustrateCracks(paths);

	for(var i=paths.length-1 ; i >= 0 ; i--) {
		paths[i].complexPath.remove();
		paths[i].simplePath.remove();
	}

	function RingGenerator(origin, seedGenerator) {
		this.seedGenerator = seedGenerator;
		this.seed = seedGenerator.seed;
		this.environment = seed.environment;
		this.origin = origin;

		this.configure = function configure(year) {
			this.year = year;
			this.environmentState = seedGenerator.getEnvironmentState(year);
			this.thickness = this.calculateThickness();
		};

		this.generateKnot = function generateKnot() {
			var knotPath = this.seed.knotPath;
			knotPath.translate(origin);

      /*
      var knotFill = new Path();
      for(var i=0, len=knotPath.segments.length ; i < len ; i++) {
				var point = knotPath.segments[i].point;
        var dir = !knotFill.segments.length % 2;
        knotFill.add(dir ? point : this.origin);
      }*/

			return {simplePath: knotPath, complexPath: knotPath};
		}

		this.generateBark = function generateBark(parentPath) {
			var barkPath = new Path();
			var innerPath = new Path();

			var seedDigitIndex = 0;
			var radiusDelta = 0;
			for(var offset=0, len=parentPath.length ; offset < len ; offset += this.seedGenerator.nextInRange(0.1, 25)) {
				var point = parentPath.getPointAt(offset);

				var radius = this.origin.getDistance(point) + this.seed.bark.thickness.max;

				var thicknessRange = this.seed.bark.thickness.max - this.seed.bark.thickness.min;
				var radiusDelta = this.seed.bark.roughness * this.seedGenerator.nextInRange(-thicknessRange);

				radius += radiusDelta;

				var angle = getAngleInCircle(point, this.origin);
				var angleRange = this.seed.bark.roughness * 0.01;
				angle += this.seedGenerator.nextInRange(-angleRange, angleRange);

				point = getPointInCircle(radius, angle, this.origin);

				barkPath.add(point);
			}

			for(var offset=0, len=parentPath.length, index=0 ; offset < len ; offset+=3, index += 1) {
				var point = parentPath.getPointAt(offset);
				var radius = this.origin.getDistance(point) + this.seed.bark.thickness.min;
				var angle = getAngleInCircle(point, this.origin);
				var angleRange = this.seed.bark.roughness * 0.01;
				angle += this.seedGenerator.nextInRange(-angleRange, angleRange);

				point = getPointInCircle(radius, angle, this.origin);

				innerPath.add(point);
      }

			barkPath.closed = true;
			innerPath.closed = true;

			barkPath.smooth();

			return { inner: innerPath, outer: barkPath };
		}

		this.generate = function generate(parentPath) {
			var path = parentPath.clone();
			var averageRadius = 0;
			var _self = this;
			path.segments.map(function(segment) {return averageRadius += _self.origin.getDistance(segment.point);});
			averageRadius /= path.segments.length;

			for(var i=0, len=path.segments.length ; i < len ; i++) {
				var point = path.segments[i].point;

				// get radius of parent point
				var radius = this.origin.getDistance(point);
				var radiusDelta = 0;

				// soften defects by pulling towards normal circle with average radius
				radiusDelta += (averageRadius - radius) * 0.2;

				// get angle of parent point
				var angle = getAngleInCircle(point, this.origin);
				// apply ring thickness
				radiusDelta += this.thickness;

				// apply environment sun type values to points
				for(var g in this.environmentState.growthFactors) {
					var growthFactor = this.environmentState.growthFactors[g];

					// calculate the resultant force on our current angle/radius
					var power = growthFactor.power * (this.thickness * 1.2);
					radiusDelta += power * Math.cos(growthFactor.angle - angle);
				}

				//each ring must be at least a single point bigger then last
				if(radiusDelta < 0)
					radiusDelta = 0;

				if(radiusDelta > this.seed.thickness.max)
					radiusDelta = this.seed.thickness.max;

				radius += radiusDelta;

				var newPoint = getPointInCircle(radius, angle, this.origin).round();

				point.x = newPoint.x;
				point.y = newPoint.y;
			}

			path.smooth();

			var complexPath = this.addDefectsToPath(path);

			return {simplePath: path, complexPath: complexPath};
		}

		this.addDefectsToPath = function addDefectsToPath(path) {
      var pathWithDefects = path;
      // add defects
      for(var g in this.environmentState.defects) {
        var defect = this.environmentState.defects[g];

        // add jitter to defect angle so that the defects arn't perfectly straight
        var angleJitter = this.seedGenerator.nextInRange(-0.01, 0.01);

        // get intersection between ring and defect line
        var defectPoint = getPointInCircle(900, defect.angle + angleJitter, this.origin);

        defectPoint = findIntersectionPointInCircle(path, defectPoint, this.origin);
        var defectSize = 6 * Math.abs(defect.power);

        console.log(defectSize);
        if(defect.shape === 'circle')
          defectShape = new Path.Circle(defectPoint, defectSize);
        else
          defectShape = new Path.RegularPolygon(defectPoint, 3, defectSize);

        var angle = getAngleInCircle(defectPoint, this.origin);
        defectShape.rotate((angle/Math.PI) * 180);

        var tmp = pathWithDefects;
        pathWithDefects = pathWithDefects[defect.power > 0 ? 'unite' : 'subtract'](defectShape);

        var complexPath = pathWithDefects;
        pathWithDefects = new Path(pathWithDefects.pathData);

        complexPath.remove();
        path.remove();
        defectShape.remove();
        tmp.remove();
      }
      return pathWithDefects;
		}

		this.calculateThickness = function calculateThickness() {
			var maxChange = this.seed.thickness.max - this.seed.thickness.min;
			var thickness = easeWithCenter(this.year, this.seed.years, maxChange, 0.1);
			// the min thickness is used as our base
			thickness += this.seed.thickness.min;

			return thickness;
		}
	}


	function Illustrator(origin, seedGenerator) {
		this.origin = origin;
		this.seedGenerator = seedGenerator;
		this.seed = seedGenerator.seed;

		this.illustrateRing = function illustrateRing(year, path, childPath, options) {
			// draw secondary path based on defect path to create fill
			var outerPath = new Path();
			var innerPath = new Path();
      var ringFill = new Path();
			var darkRingThickness = 0;

			var gap = this.seedGenerator.getGap(year);
			var inGap = false;

      var OFFSET = 3;
      var MIN = 1.3;
      var N = 5;
      var gapCount = 0;
      if(year < N) OFFSET = MIN + (((OFFSET - MIN) / N) * year);
			for(var offset=0, len=path.length, index=0 ; offset < len ; offset+=OFFSET, index += 1) {

				var outerPoint = path.getPointAt(offset);
				var childPoint = findIntersectionPointInCircle(childPath, outerPoint, this.origin);

				// get radius of parent point
				var radius = this.origin.getDistance(outerPoint);
				var childRadius = this.origin.getDistance(childPoint);

				// calculate the thickness of the dark portion of ring
				var lightRingThickness = childRadius - radius;
				var darkRingThickness = lightRingThickness * this.seed.thickness.darkPercent;

				// add jitter to rings
				var jitter = darkRingThickness * seedGenerator.nextInRange(-0.11, 0.11);

				if(darkRingThickness < 2 && Math.abs(jitter) > 0.02)
					jitter = 0.02;
				if(darkRingThickness < 1)
					jitter = 0;

				darkRingThickness += jitter;

				var innerPoint = getPointInCircle(radius - jitter, getAngleInCircle(outerPoint, this.origin), this.origin);
				var outerPoint = getPointInCircle(radius + darkRingThickness, getAngleInCircle(outerPoint, this.origin), this.origin);

				// apply gaps
				var positionPercent = offset / len;
				if(gap) {
          gapCount += 1;
					if(!inGap && positionPercent > gap.startPercent && positionPercent < gap.endPercent)
						inGap = true;

          if(inGap && positionPercent > gap.endPercent)
						inGap = false;

          ringFill.add(innerPoint);
				}

				if(!inGap) {
          var i = index - gapCount;

					outerPath.add(outerPoint);
					innerPath.add(innerPoint);
          var midPoint = path.getPointAt(offset + (OFFSET / 2));
          var innerMidPoint = midPoint ? getPointInCircle(radius - jitter, getAngleInCircle(midPoint, this.origin), this.origin) : innerPoint;
          var outerMidPoint = midPoint ? getPointInCircle(radius + darkRingThickness, getAngleInCircle(midPoint, this.origin), this.origin) : outerPoint;

          var fill = this.seed.fill;
          if(fill == "zigzag") {
            ringFill.add(innerPoint);
            ringFill.add(outerMidPoint);
          } else if(fill === "spikes-inset") {
            ringFill.add(outerPoint);
            ringFill.add(outerMidPoint);
            ringFill.add(innerMidPoint);
            ringFill.add(outerMidPoint);
          } else if(fill === "spikes-outset") {
            ringFill.add(innerPoint);
            ringFill.add(innerMidPoint);
            ringFill.add(outerMidPoint);
            ringFill.add(innerMidPoint);
          } else if(fill === "square-alt") { // square alternating w/angle
            ringFill.add(innerPoint);
            ringFill.add(outerPoint);
            ringFill.add(outerMidPoint);
          } else if(fill === "square") { // square wave
            ringFill.add(innerPoint);
            ringFill.add(outerPoint);
            ringFill.add(outerMidPoint);
            ringFill.add(innerMidPoint);
          }
				}
			}

			outerPath.visible = true;
			innerPath.visible = true;
      innerPath.strokeColor = "red";
      outerPath.strokeColor = "green";

      // TODO: do I want these?
      innerPath.remove();
      outerPath.remove();

			return outerPath;
		}

		this.illustrateBark = function illustrateBark(outerPath, innerPath) {
      var fillPath = new Path();
      fillPath.strokeColor = "blue";

      var fill = this.seed.barkFill;
      var OFFSET = this.seed.barkFillSpacing;
			for(var offset=0, len=innerPath.length, index=0 ; offset < len ; offset+=OFFSET, index += 1) {
        var innerPoint = innerPath.getPointAt(offset);
				var outerPoint = findIntersectionPointInCircle(outerPath, innerPoint, this.origin);

        if(fill === "zigzag") {
          fillPath.add(innerPoint);
          fillPath.add(outerPoint);
        } else {
          var innerMidPoint = innerPath.getPointAt(offset + (OFFSET / 2));
          var outerMidPoint = findIntersectionPointInCircle(outerPath, innerMidPoint, this.origin);

          fillPath.add(innerPoint);
          fillPath.add(outerPoint);
          fillPath.add(outerMidPoint);
          fillPath.add(innerMidPoint);
        }
      }
		}

		this.illustrateCracks = function illustrateCracks(paths, years) {
			var cracks = [], crackCount = this.seedGenerator.nextIndex(this.seed.years);
			for (var i=crackCount-1; i >= 0; i--) {
				var start = this.seedGenerator.nextIndex(this.seed.years-3) + 1;
				var end = start + this.seedGenerator.nextIndex(4) + 2;

				if(end >= this.seed.years-1)
					end = this.seed.years-2;

				cracks.push({
					angle:this.seedGenerator.nextInRange(Math.PI * 2),
					width: this.seedGenerator.nextInRange(0.75, 1.3),
					start: start,
					end: end
				});
			}

			var crackPaths = [];
			for(var c=cracks.length-1 ; c >= 0 ; c--) {
				try {
					var crack = cracks[c];

					var crackPoints = [];

					for(var i=crack.start, len=paths.length ; i < len && i < crack.end ; i++) {

						var childPath = paths[i+1].simplePath;
						var parentPath = paths[i].simplePath;

						//change width of cracks slightly
						var width = this.seedGenerator.nextInRange(0.5, crack.width);

						// add jitter to crack angle so that the cracks jump around between rings
						var jitter = this.seedGenerator.nextInRange(-2, 2);

						var crackSegmentStart = getPointInCircle(9000, crack.angle, this.origin);

						var parentIntersection = findIntersectionPointInCircle(parentPath, crackSegmentStart, this.origin);
						var childIntersection = findIntersectionPointInCircle(childPath, crackSegmentStart, this.origin);

						// add start node if we are on the first ring or add both points if we aren't at the end point
						if(i === crack.start) {
							crackPoints.push(parentIntersection);
						} else if(i !== crack.end-1) {
							var parentIntersectionOffset = parentPath.getLocationOf(parentIntersection);

							parentIntersectionOffset = parentIntersectionOffset.offset + jitter;

							crackPoints.push(parentPath.getLocationAt(parentIntersectionOffset + width).point);
							crackPoints.unshift(parentPath.getLocationAt(parentIntersectionOffset - width).point);
						}

						// add a single end point or two nodes for all intermediate rings
						if(i === crack.end-1) {
							crackPoints.push(childIntersection);
						} else {
							var childIntersectionOffset = childPath.getLocationOf(childIntersection);

							childIntersectionOffset = childIntersectionOffset.offset + jitter;

							crackPoints.push(childPath.getLocationAt(childIntersectionOffset + width).point);
							crackPoints.unshift(childPath.getLocationAt(childIntersectionOffset - width).point);
						}
					}

					var path = new Path(crackPoints);
					path.closed = true;

					crackPaths.push(path);
				} catch(e) {
					console.log('error drawing crack');
					if(path)
						path.remove();
					continue;
				}
			}

			return crackPaths;
		}
	}

	function SeedGenerator(input) {
		this.seedDigits = null;
		this.input = input;
		this.seed = null;
		this.index = 0;

		this.generate = function generate(years) {
			// input to generate seed digits to base all the other inputs on
			var hashString = hashInput(this.input);
			for(var i=0 ; i < 10 && hashString.length < 500 ; i++)
				hashString += hashInput(hashString);
			this.seedDigits = hashString.split('');

			var knotCenter = new Point(0, 0);
			var knotPaths = [
				new Path.RegularPolygon(knotCenter, 50, 3),
				new Path.RegularPolygon(knotCenter, 7, 5),
				new Path.RegularPolygon(knotCenter, 11, 5),
				new Path.RegularPolygon(knotCenter, 21, 5),
				new Path.Star(knotCenter, 13, 5, 6),
				new Path.Star(knotCenter, 21, 5, 6),
			];

			var index = this.nextIndex(knotPaths.length);
			index = 0;
			var knotPath = knotPaths[index];

			knotPath.shear(this.nextInRange(0.1));
			knotPath.rotate(this.nextInRange(360));

			// max thickness is between 10-35, min is 6-10
			var maxThickness = 11 + this.nextInRange(10);
			var minThickness = 5 + this.nextInRange(5);

			// ring gaps occur in a low number of rings
			var gapableYears = years > 50 ? 12 : years;

			var gaps=[], gapCount = Math.round(gapableYears * this.nextInRange(0.75));

			for (var i=gapCount-1; i >= 0; i--) {
				var gap = {};
				gap.year = this.nextIndex(gapableYears) + 1;
				gap.startPercent = this.nextInRange(0.75);
				gap.endPercent = gap.startPercent;
				gap.endPercent += gap.year < 6 ? this.nextInRange(0.01, 0.07) : this.nextInRange(0.01, 0.04);
				gaps.push(gap);
			}

			var seedType = seedTypes[this.nextIndex(seedTypes.length)];
      //seedType = seedTypes[2];

      var FILLS = ["spikes-inset", "spikes-outset", "zigzag", "square", "square-alt"];
			this.seed = {
				name: this.input,
				thickness: {
					max: maxThickness,
					min: minThickness,
					darkPercent: 0.3 + this.nextInRange(0.15)
				},
				knotPath: knotPath,
				gaps: gaps,
				years: years,
				type: seedType,
        fill: FILLS[this.nextIndex(FILLS.length)],
				bark: seedType.bark,
        barkFill: this.nextBoolean() ? "zigzag" : "straight-lines",
        barkFillSpacing: this.nextInRange(3, 9),
				environment: this.generateEnvironment(years)
			};

			return this.seed;
		}

		this.generateEnvironment = function generateEnvironment(years) {
			var environment = [];

			// We always add a main defect that spans the entire lifespan
			environment.push({start:1, end: years-1, power: this.nextInRange(0.2, 0.5), angle : this.nextInRange(Math.PI * 2), type:'sun'});
			var sunEnvCount = 0;
			for(var i=0, len=this.nextInRange(10, 25); i < len ; i++) {
				var end = years-1;
				var start = Math.round(this.nextInRange(1, end-1));
				end = Math.round(this.nextInRange(start+1, end));
				var power = this.nextInRange(0.4, 0.6) * (this.nextBoolean() ? -1 : 1);

				 if(end - start < 5 && end + 6 < years)
				 	end = start + 5;

				var e = {
					start : start,
					end   : end,
					power : power,
					angle : this.nextInRange(0, Math.PI * 2)};

				// Limit sun factors to 3 to prevent crazyness
				if(this.nextMultiplier() > 0.1 || sunEnvCount > 3) {
					e.type = 'defect';
					e.shape = this.nextBoolean() ? 'circle' : 'triangle';
				} else {
					sunEnvCount += 1;
					e.type = 'sun';
				}
				environment.push(e);
			}

			return environment;
		}

		this.getGap = function getGap(year) {
			for(var i=this.seed.gaps.length-1 ; i >= 0 ; i--) {
				if(this.seed.gaps[i].year === year)
					return this.seed.gaps[i];
			}
			return null;
		}

		this.getEnvironmentState = function getEnvironmentState(year) {
			var growthFactors = [], defects = [];

			for(var i=0, len=this.seed.environment.length ; i < len ; i++) {
				var e = this.seed.environment[i];

				if(e.start <= year && e.end > year) {
					var item = JSON.parse(JSON.stringify(e));
					item.power = ease(year - item.start, item.end - item.start, item.power);

          if(item.power === 0) continue;

					(item.type === 'sun' ? growthFactors : defects).push(item);
				}
			}

			return {growthFactors: growthFactors, defects: defects};
		}

		this.getSeed = function getSeed() {
			return this.seed;
		}

		this.nextMultiplier = function nextMultiplier() {
			return this.nextInRange(1);
		}

		this.nextBoolean = function nextBoolean() {
			return this.nextMultiplier() >= 0.5;
		}

		this.nextIndex = function nextIndex(maxIndex) {
			maxIndex -= 1;
			return Math.round(this.nextInRange(maxIndex));
		}

		this.nextInRange = function nextInRange(start, end) {
			if(end === undefined) {
				end = start;
				start = 0;
			}
			var range = end - start;
			var percent = 0;
			for(var multiplier = 1 ; multiplier < 1001 ; multiplier *= 10)
				percent += this.nextDigit() * multiplier;
			percent /= 10000;

			return start + (range * percent);
		}

		this.nextDigit = function nextDigit() {
			if(this.index >= this.seedDigits.length - 1)
				this.index = 0;
			else
				this.index += 1;

			return this.seedDigits[this.index];
		}
	}

	function easeWithCenter(now, duration, maxValue, center) {
		var rc;
		if(now > (duration * center)) {
			now -= duration * center;
			duration *= 1-center;
			rc = maxValue * (1-(now/duration));
			//rc = maxValue * Math.sin(now/duration * (Math.PI/2));

		} else {
			duration *= center;
			//rc = maxValue * (now/duration);
			rc = -maxValue * Math.cos(now/duration * (Math.PI/2)) + maxValue;
		}

		return rc;
	}

	function ease(now, duration, maxValue) {
		// EXPONENTIAL EASING (Looks worse I think)
		// var x = now / duration * 2;
		// return (1 - Math.pow(x-1, 2)) * maxValue;

		duration /= 2;

		var rc;
		if(now > duration) {
			now -= duration;
			rc = maxValue * (1-(now/duration));
		} else
			rc = maxValue * (now/duration);

		return rc;
	}


	function drawEnvironment(environment) {
		var originPath = new Path.Circle(origin, 1);
		originPath.selected = true;

		for(var g in environment) {
			var growthFactor = environment[g];

			var path = new Path();
			path.add(origin);
			path.add(getPointInCircle(400, growthFactor.angle, origin));
		}
	}

	//angle is in radians
	function getPointInCircle(radius, angle, origin) {
    var x = origin.x + radius * Math.cos(angle);
		var y = origin.y + radius * Math.sin(angle);

    return new Point(x, y);
	}

	//angle is in radians
	function adjustPointRadiusInCircle(radius, point, origin) {
		var angle = getAngleInCircle(point, origin);

		var adjustedPoint = new Point();
        adjustedPoint.x = origin.x + radius * Math.cos(angle);
		adjustedPoint.y = origin.y + radius * Math.sin(angle);

		return adjustedPoint;
	}

	function getAngleInCircle(point, origin) {
        return Math.atan2(point.y - origin.y, point.x - origin.x);
	}

	function findIntersectionPointInCircle(circlePath, point, origin) {
		var angle = getAngleInCircle(point, origin);

		var radiusPath = new Path([origin, getPointInCircle(1000, angle, origin)]);

		// Get intersection between ring and defect line
    var intersections = circlePath.getIntersections(radiusPath);
		var intersectionLocation = intersections[0];

		if(!intersectionLocation) {
			radiusPath = new Path([origin,getPointInCircle(10000, angle, origin)])
			radiusPath.visible = true;
			radiusPath.selected = true;
			console.log('intersection not found');

 			throw 'error intersection';
			return;
		}
		radiusPath.remove();
		return intersectionLocation.point;
	}

	function hashInput(str) {
	    var hash = 0;
	    var output = [];
	    for (i = 0; i < str.length; i++) {
	        char = str.charCodeAt(i);

	        hash += char + (hash << 6) + (hash << 16) - hash
	        output.push(Math.abs(hash));
	        output.push(char);
	    }
	    return output.join('');
	}
</script>
</body>
</html>