veltman/.block

## .block
height: 600

## README.md

      
    Raw
  

              README.md
            
          
    A randomized scribbled map building on this example. It adds the additional step of fuzzing the points a bit at the end so that you get a looser scribble that doesn't follow the original boundary precisely. Works pretty well for the more convex shapes but it tends to leave gaps at spots with sharp angles, like the Oklahoma panhandle or the Olympic Peninsula.

  
## index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <style>
    path {
      fill: none;
      stroke-width: 1px;
    }
  </style>
</head>
<body>
<svg width="960" height="600"></svg>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.3/d3.min.js"></script>
<script src="https://d3js.org/topojson.v2.min.js"></script>
<script>

const svg = d3.select("svg"),
      spline = d3.line().curve(d3.curveCardinal.tension(0));
      colors = ["#00d565", "#d5008e", "#d5d500", "#0ab0cc", "#bf5a15"];

// Fuzz bigger features more
const fuzzer = d3.scaleLinear()
  .domain([0, 30000])
  .range([5, 25]);

d3.json("https://d3js.org/us-10m.v1.json", function(err, us){

  const neighbors = topojson.neighbors(us.objects.states.geometries),
        features = topojson.feature(us, us.objects.states).features;

  // Greedy color selection
  features.forEach(function(d,i){

    d.properties.color = colors.filter(function(c){
      return neighbors[i].every(n => features[n].properties.color !== c);
    })[0];

    // Mix up a bit
    colors.push(colors.shift());

  });

  svg.selectAll("path")
    .data(features)
    .enter()
    .append("path")
    .attr("stroke", d => d.properties.color)
    .attr("d", function(d){

      let polygons = d.geometry.type === "MultiPolygon" ? d.geometry.coordinates : [d.geometry.coordinates];

      let scribbleAngle = Math.PI * (1 / 16 + Math.random() * 3 / 8) * (Math.random() < 0.5 ? -1 : 1),
          fuzzFactor = 10;

      return polygons.map(function(polygon){

        let lineFrequency = 2 + Math.random() * 2,
            lineVariation = lineFrequency * 3 / 8,
            fuzzFactor = fuzzer(Math.abs(d3.polygonArea(polygon[0])));

        return scribble(polygon, scribbleAngle, lineFrequency, lineVariation)
          .map(line => fuzzPoints(line, fuzzFactor))
          .map(spline)
          .join(" ");

      }).join(" ");

    });

});

function scribble(polygon, scribbleAngle, lineFrequency, lineVariation) {

  // TODO check intersections against holes
  let outer = polygon[0],
      midpoint = getMidpoint(outer),
      rotator = rotateAround(midpoint, scribbleAngle),
      rotated = outer.map(rotator),
      gridlines = getGridlines(rotated, lineFrequency, lineVariation),
      intersections = getIntersections(gridlines, rotated);

  if (intersections.length < 2) {
    return [];
  }

  return getScribbles(intersections, rotated).map(function(scribble){
    return scribble.map(rotateAround(midpoint, -scribbleAngle));
  });

}

function getScribbles(rows, ring) {
  let top = 0,
      bottom = 1,
      i = j = 0,
      p1 = rows[top][i],
      p2 = rows[bottom][j],
      scribbles = [];

  checkSegment();
  return scribbles;

  function checkSegment() {
    if (isInFront() && isContained()) {
      addSegment();
    } else {
      nextBottom();
    }
  }

  function addSegment() {
    let found = scribbles.find(scribble => distanceBetween(scribble[scribble.length - 1], p1) < 1);
    if (found) {
      found.push(p2);
    } else {
      scribbles.push([p1, p2]);
    }
    scribbles.sort((a, b) => scribbleLength(b) - scribbleLength(a));
    nextTop();
  }

  function isInFront() {
    return (top % 2 ? -1 : 1) * (p2[0] - p1[0]) > 0
  }

  function isContained() {
    if (p1[2] === p2[2] || !d3.polygonContains(ring, pointBetween(p1, p2, 0.5))) {
      return false;
    }

    return ring.every(function(a, segmentIndex){
      const b = ring[segmentIndex + 1] || ring[0];
      return segmentIndex === p1[2] || segmentIndex === p2[2] || !segmentsIntersect([a, b], [p1, p2]);
    });

  }

  function nextRow() {
    if (bottom + 1 < rows.length) {
      p1 = rows[++top][i = 0];
      p2 = rows[++bottom][j = 0];
      checkSegment();
    }
  }

  function nextTop() {
    if (i + 1 >= rows[top].length) {
      nextRow();
    } else {
      p1 = rows[top][++i];
      checkSegment();
    }
  }

  function nextBottom() {
    if (j + 1 >= rows[bottom].length) {
      nextTop();
    } else {
      p2 = rows[bottom][++j];
      checkSegment();
    }
  }

  function scribbleLength(points) {
    return points.reduce(function(length, point, i){
      return i ? length + distanceBetween(point, points[i - 1]) : 0;
    }, 0);
  }
}

function fuzzPoints(polyline, magnitude) {
  return polyline.map(function(point, i){
    if (i === 0 || i === polyline.length - 1) {
      return point;
    }
    return moveAlongBisector(polyline[i - 1], point, polyline[i + 1], Math.random() * magnitude);
  });
}

function getGridlines(points, lineFrequency, lineVariation) {
  let bounds = getBounds(points),
      i = bounds[0][1],
      gridY = [],
      space = lineFrequency - lineVariation / 2 + Math.random() * lineVariation;

  while (i + space < bounds[1][1]) {
    i += space;
    gridY.push(i);
    space = lineFrequency - lineVariation + Math.random() * lineVariation * 2;
  }

  return gridY.map(y => [[bounds[0][0] - 5, y], [bounds[1][0] + 5, y]]);
}

function getIntersections(gridlines, ring){
  return gridlines.map(function(gridline, i){
    const y = gridline[0][1],
          row = [],
          direction = i % 2 ? - 1 : 1;

    ring.forEach(function(p1, j){
      const p2 = ring[j + 1] || ring[0],
            m = (p2[1] - p1[1]) / (p2[0] - p1[0]),
            b = p2[1] - m * p2[0],
            x = (y - b) / m;

      if ((p1[1] <= y && p2[1] > y) || (p1[1] >= y && p2[1] < y)) {
        row.push([x, y, j]);
      }

    });

    row.sort((a, b) => direction * (a[0] - b[0]));

    return row;

  });
}

function rotateAround(center, angle) {
  const cos = Math.cos(angle),
        sin = Math.sin(angle);

  return function(p) {
    return [
      center[0] + (p[0] - center[0]) * cos - (p[1] - center[1]) * sin,
      center[1] + (p[0] - center[0]) * sin + (p[1] - center[1]) * cos
    ];
  };
}

function getBounds(ring) {
  let x0 = y0 = Infinity,
      x1 = y1 = -Infinity;

  ring.forEach(function(point){
    if (point[0] < x0) x0 = point[0];
    if (point[0] > x1) x1 = point[0];
    if (point[1] < y0) y0 = point[1];
    if (point[1] > y1) y1 = point[1];
  });

  return [
    [x0, y0],
    [x1, y1]
  ];
}

function getMidpoint(ring) {
  const bounds = getBounds(ring);

  return [
    (bounds[1][0] + bounds[0][0]) / 2,
    (bounds[1][1] + bounds[0][1]) / 2
  ];
}

function segmentsIntersect(a, b) {
  if (orientation(a[0], a[1], b[0]) === orientation(a[0], a[1], b[1])) {
    return false;
  }

  return orientation(b[0], b[1], a[0]) !== orientation(b[0], b[1], a[1]);
}

function orientation(p, q, r) {
  const val = (q[1] - p[1]) * (r[0] - q[0]) - (q[0] - p[0]) * (r[1] - q[1]);
  return val > 0 ? 1 : val < 0 ? -1 : 0;
}

function pointBetween(a, b, pct) {
  const point = [
    a[0] + (b[0] - a[0]) * pct,
    a[1] + (b[1] - a[1]) * pct
  ];

  return point;
}

function distanceBetween(a, b) {
  const dx = a[0] - b[0],
        dy = a[1] - b[1];

  return Math.sqrt(dx * dx + dy * dy);
}

function moveAlongBisector(start, vertex, end, amount) {

  let at = getAngle(start, vertex),
      bt = getAngle(vertex, end),
      adjusted = bt - at,
      angle;

  if (adjusted <= -Math.PI) {
    adjusted = 2 * Math.PI + adjusted;
  } else if (adjusted > Math.PI) {
    adjusted = adjusted - 2 * Math.PI;
  }

  angle = (adjusted - Math.PI) / 2 + at + (Math.random() < 0.5 ? Math.PI : 0);

  return [
    vertex[0] + amount * Math.cos(angle) / 2,
    vertex[1] + amount * Math.sin(angle) / 2
  ];

}

function getAngle(a, b) {
  return Math.atan2(b[1] - a[1], b[0] - a[0]);
}

</script>

## preview.png

      
    Raw
  

              preview.png
            
          
## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8" />
	<style>
	path {
	fill: none;
	stroke-width: 1px;
	}
	</style>
	</head>
	<body>
	<svg width="960" height="600"></svg>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.3/d3.min.js"></script>
	<script src="https://d3js.org/topojson.v2.min.js"></script>
	<script>

	const svg = d3.select("svg"),
	spline = d3.line().curve(d3.curveCardinal.tension(0));
	colors = ["#00d565", "#d5008e", "#d5d500", "#0ab0cc", "#bf5a15"];

	// Fuzz bigger features more
	const fuzzer = d3.scaleLinear()
	.domain([0, 30000])
	.range([5, 25]);

	d3.json("https://d3js.org/us-10m.v1.json", function(err, us){

	const neighbors = topojson.neighbors(us.objects.states.geometries),
	features = topojson.feature(us, us.objects.states).features;

	// Greedy color selection
	features.forEach(function(d,i){

	d.properties.color = colors.filter(function(c){
	return neighbors[i].every(n => features[n].properties.color !== c);
	})[0];

	// Mix up a bit
	colors.push(colors.shift());

	});

	svg.selectAll("path")
	.data(features)
	.enter()
	.append("path")
	.attr("stroke", d => d.properties.color)
	.attr("d", function(d){

	let polygons = d.geometry.type === "MultiPolygon" ? d.geometry.coordinates : [d.geometry.coordinates];

	let scribbleAngle = Math.PI * (1 / 16 + Math.random() * 3 / 8) * (Math.random() < 0.5 ? -1 : 1),
	fuzzFactor = 10;

	return polygons.map(function(polygon){

	let lineFrequency = 2 + Math.random() * 2,
	lineVariation = lineFrequency * 3 / 8,
	fuzzFactor = fuzzer(Math.abs(d3.polygonArea(polygon[0])));

	return scribble(polygon, scribbleAngle, lineFrequency, lineVariation)
	.map(line => fuzzPoints(line, fuzzFactor))
	.map(spline)
	.join(" ");

	}).join(" ");

	});

	});

	function scribble(polygon, scribbleAngle, lineFrequency, lineVariation) {

	// TODO check intersections against holes
	let outer = polygon[0],
	midpoint = getMidpoint(outer),
	rotator = rotateAround(midpoint, scribbleAngle),
	rotated = outer.map(rotator),
	gridlines = getGridlines(rotated, lineFrequency, lineVariation),
	intersections = getIntersections(gridlines, rotated);

	if (intersections.length < 2) {
	return [];
	}

	return getScribbles(intersections, rotated).map(function(scribble){
	return scribble.map(rotateAround(midpoint, -scribbleAngle));
	});

	}

	function getScribbles(rows, ring) {
	let top = 0,
	bottom = 1,
	i = j = 0,
	p1 = rows[top][i],
	p2 = rows[bottom][j],
	scribbles = [];

	checkSegment();
	return scribbles;

	function checkSegment() {
	if (isInFront() && isContained()) {
	addSegment();
	} else {
	nextBottom();
	}
	}

	function addSegment() {
	let found = scribbles.find(scribble => distanceBetween(scribble[scribble.length - 1], p1) < 1);
	if (found) {
	found.push(p2);
	} else {
	scribbles.push([p1, p2]);
	}
	scribbles.sort((a, b) => scribbleLength(b) - scribbleLength(a));
	nextTop();
	}

	function isInFront() {
	return (top % 2 ? -1 : 1) * (p2[0] - p1[0]) > 0
	}

	function isContained() {
	if (p1[2] === p2[2] \|\| !d3.polygonContains(ring, pointBetween(p1, p2, 0.5))) {
	return false;
	}

	return ring.every(function(a, segmentIndex){
	const b = ring[segmentIndex + 1] \|\| ring[0];
	return segmentIndex === p1[2] \|\| segmentIndex === p2[2] \|\| !segmentsIntersect([a, b], [p1, p2]);
	});

	}

	function nextRow() {
	if (bottom + 1 < rows.length) {
	p1 = rows[++top][i = 0];
	p2 = rows[++bottom][j = 0];
	checkSegment();
	}
	}

	function nextTop() {
	if (i + 1 >= rows[top].length) {
	nextRow();
	} else {
	p1 = rows[top][++i];
	checkSegment();
	}
	}

	function nextBottom() {
	if (j + 1 >= rows[bottom].length) {
	nextTop();
	} else {
	p2 = rows[bottom][++j];
	checkSegment();
	}
	}

	function scribbleLength(points) {
	return points.reduce(function(length, point, i){
	return i ? length + distanceBetween(point, points[i - 1]) : 0;
	}, 0);
	}
	}

	function fuzzPoints(polyline, magnitude) {
	return polyline.map(function(point, i){
	if (i === 0 \|\| i === polyline.length - 1) {
	return point;
	}
	return moveAlongBisector(polyline[i - 1], point, polyline[i + 1], Math.random() * magnitude);
	});
	}

	function getGridlines(points, lineFrequency, lineVariation) {
	let bounds = getBounds(points),
	i = bounds[0][1],
	gridY = [],
	space = lineFrequency - lineVariation / 2 + Math.random() * lineVariation;

	while (i + space < bounds[1][1]) {
	i += space;
	gridY.push(i);
	space = lineFrequency - lineVariation + Math.random() * lineVariation * 2;
	}

	return gridY.map(y => [[bounds[0][0] - 5, y], [bounds[1][0] + 5, y]]);
	}

	function getIntersections(gridlines, ring){
	return gridlines.map(function(gridline, i){
	const y = gridline[0][1],
	row = [],
	direction = i % 2 ? - 1 : 1;

	ring.forEach(function(p1, j){
	const p2 = ring[j + 1] \|\| ring[0],
	m = (p2[1] - p1[1]) / (p2[0] - p1[0]),
	b = p2[1] - m * p2[0],
	x = (y - b) / m;

	if ((p1[1] <= y && p2[1] > y) \|\| (p1[1] >= y && p2[1] < y)) {
	row.push([x, y, j]);
	}

	});

	row.sort((a, b) => direction * (a[0] - b[0]));

	return row;

	});
	}

	function rotateAround(center, angle) {
	const cos = Math.cos(angle),
	sin = Math.sin(angle);

	return function(p) {
	return [
	center[0] + (p[0] - center[0]) * cos - (p[1] - center[1]) * sin,
	center[1] + (p[0] - center[0]) * sin + (p[1] - center[1]) * cos
	];
	};
	}

	function getBounds(ring) {
	let x0 = y0 = Infinity,
	x1 = y1 = -Infinity;

	ring.forEach(function(point){
	if (point[0] < x0) x0 = point[0];
	if (point[0] > x1) x1 = point[0];
	if (point[1] < y0) y0 = point[1];
	if (point[1] > y1) y1 = point[1];
	});

	return [
	[x0, y0],
	[x1, y1]
	];
	}

	function getMidpoint(ring) {
	const bounds = getBounds(ring);

	return [
	(bounds[1][0] + bounds[0][0]) / 2,
	(bounds[1][1] + bounds[0][1]) / 2
	];
	}

	function segmentsIntersect(a, b) {
	if (orientation(a[0], a[1], b[0]) === orientation(a[0], a[1], b[1])) {
	return false;
	}

	return orientation(b[0], b[1], a[0]) !== orientation(b[0], b[1], a[1]);
	}

	function orientation(p, q, r) {
	const val = (q[1] - p[1]) * (r[0] - q[0]) - (q[0] - p[0]) * (r[1] - q[1]);
	return val > 0 ? 1 : val < 0 ? -1 : 0;
	}

	function pointBetween(a, b, pct) {
	const point = [
	a[0] + (b[0] - a[0]) * pct,
	a[1] + (b[1] - a[1]) * pct
	];

	return point;
	}

	function distanceBetween(a, b) {
	const dx = a[0] - b[0],
	dy = a[1] - b[1];

	return Math.sqrt(dx * dx + dy * dy);
	}

	function moveAlongBisector(start, vertex, end, amount) {

	let at = getAngle(start, vertex),
	bt = getAngle(vertex, end),
	adjusted = bt - at,
	angle;

	if (adjusted <= -Math.PI) {
	adjusted = 2 * Math.PI + adjusted;
	} else if (adjusted > Math.PI) {
	adjusted = adjusted - 2 * Math.PI;
	}

	angle = (adjusted - Math.PI) / 2 + at + (Math.random() < 0.5 ? Math.PI : 0);

	return [
	vertex[0] + amount * Math.cos(angle) / 2,
	vertex[1] + amount * Math.sin(angle) / 2
	];

	}

	function getAngle(a, b) {
	return Math.atan2(b[1] - a[1], b[0] - a[0]);
	}

	</script>