2e:null 2f:["$","title",null,{"children":"Scribble paint | Noah Veltman | Observable"}] 34:T51c,canvas = { repaint; const ctx = DOM.context2d(960, 600); const brushstrokes = []; features.forEach(function(d) { const polygons = d.geometry.type === "MultiPolygon" ? d.geometry.coordinates : [d.geometry.coordinates]; const scribbleAngle = Math.PI * (1 / 16 + (Math.random() * 3) / 8) * (Math.random() < 0.5 ? -1 : 1); console.log(scribbleAngle); const lineFrequency = 2 + Math.random() * 2, lineVariation = (lineFrequency * 3) / 8; polygons.forEach(function(polygon) { const fuzzFactor = fuzzer(Math.abs(d3.polygonArea(polygon[0]))); const scribbled = scribble( polygon, scribbleAngle, lineFrequency, lineVariation ).map(line => fuzzPoints(line, fuzzFactor)); scribbled.forEach(function(polyline) { for (let i = 0; i < polyline.length - 1; i++) { brushstrokes.push([ polyline[i][0], polyline[i][1], polyline[i + 1][0], polyline[i + 1][1], thickness, d.properties.color ]); } }); }); }); for (let i = 0; i < brushstrokes.length; i++) { stroke(ctx, ...brushstrokes[i]); if (i % 20 === 0) { yield ctx.canvas; } } yield ctx.canvas; }35:T6f7,function getScribbles(rows, ring) { let top = 0, bottom = 1, i = 0, j = 0, p1 = rows[top][i], p2 = rows[bottom][j], scribbles = []; checkSegment(); return scribbles; function checkSegment() { if (isInFront() && isContained()) { addSegment(); } else { nextBottom(); } } function addSegment() { const 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); } }36:[] 32:{"id":"93cc1b9d8feecac0","slug":"scribble-paint","title":"Scribble paint","thumbnail":"0344d1fe7528a0571e55d1a06cbbffdb6fcd54fe87b14cd6b2a8ec4978576340","access_level":"public","create_time":"$D2018-12-09T17:57:36.366Z","update_time":"$D2020-12-02T21:39:41.680Z","view_time":null,"first_public_time":"$D2018-12-09T19:24:09.849Z","fork":false,"stars":66,"starred":false,"owner":{"type":"team","id":"c0d6ef9833202f4b","login":"veltman","name":"Noah Veltman","avatar_url":"https://avatars-next.observableusercontent.com/37dd1ef0c930483a23099f5f6fb2bea569cb8d9957ad34f4674962b939645501","tier":"starter_2024"},"version":186,"publish_version":186,"role":null,"authored":false,"authors":[{"type":"individual","id":"c8cf6b10f9d313b5","login":"veltman","name":"Noah Veltman","avatar_url":"https://avatars-next.observableusercontent.com/37dd1ef0c930483a23099f5f6fb2bea569cb8d9957ad34f4674962b939645501","tier":null}],"members":[{"type":"individual","id":"c8cf6b10f9d313b5","login":"veltman","name":"Noah Veltman","avatar_url":"https://avatars-next.observableusercontent.com/37dd1ef0c930483a23099f5f6fb2bea569cb8d9957ad34f4674962b939645501","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":21,"collection":null,"type":"notebook","body":{"title":"Scribble paint","cells":[{"id":0,"value":"md`# Scribble paint\n\n[Scribble fill](https://bl.ocks.org/veltman/985bdca56d122f9525e0abab2ca29c34) + [Alan Kang's oil paint](https://beta.observablehq.com/@akngs/oil-painting-brushstrokes) = scribble paint!\n\n(Results for Hawaii, Maryland, Florida Keys, etc. may vary)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"viewof thickness = slider({\n min: 1,\n max: 20,\n step: 0.5,\n value: 8,\n title: \"Brush thickness\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"viewof repaint = button({ value: \"Repaint\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"md`### Scribble logic`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"function scribble(polygon, scribbleAngle, lineFrequency, lineVariation) {\n // TODO check intersections against holes\n const outer = polygon[0],\n midpoint = getMidpoint(outer),\n rotator = rotateAround(midpoint, scribbleAngle),\n rotated = outer.map(rotator),\n gridlines = getGridlines(rotated, lineFrequency, lineVariation),\n intersections = getIntersections(gridlines, rotated);\n\n if (intersections.length < 2) {\n return [];\n }\n\n return getScribbles(intersections, rotated).map(function(scribble) {\n return scribble.map(rotateAround(midpoint, -scribbleAngle));\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"function fuzzPoints(polyline, magnitude) {\n return polyline.map(function(point, i) {\n if (i === 0 || i === polyline.length - 1) {\n return point;\n }\n return moveAlongBisector(\n polyline[i - 1],\n point,\n polyline[i + 1],\n Math.random() * magnitude\n );\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"function getGridlines(points, lineFrequency, lineVariation) {\n let bounds = getBounds(points),\n i = bounds[0][1],\n gridY = [],\n space = lineFrequency - lineVariation / 2 + Math.random() * lineVariation;\n\n while (i + space < bounds[1][1]) {\n i += space;\n gridY.push(i);\n space = lineFrequency - lineVariation + Math.random() * lineVariation * 2;\n }\n\n return gridY.map(y => [[bounds[0][0] - 5, y], [bounds[1][0] + 5, y]]);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"function getIntersections(gridlines, ring) {\n return gridlines.map(function(gridline, i) {\n const y = gridline[0][1],\n row = [],\n direction = i % 2 ? -1 : 1;\n\n ring.forEach(function(p1, j) {\n const p2 = ring[j + 1] || ring[0],\n m = (p2[1] - p1[1]) / (p2[0] - p1[0]),\n b = p2[1] - m * p2[0],\n x = (y - b) / m;\n\n if ((p1[1] <= y && p2[1] > y) || (p1[1] >= y && p2[1] < y)) {\n row.push([x, y, j]);\n }\n });\n\n row.sort((a, b) => direction * (a[0] - b[0]));\n\n return row;\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"fuzzer = d3\n .scaleLinear()\n .domain([0, 30000])\n .range([5, 25])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"md`### Geometry functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"function moveAlongBisector(start, vertex, end, amount) {\n let at = getAngle(start, vertex),\n bt = getAngle(vertex, end),\n adjusted = bt - at,\n angle;\n\n if (adjusted <= -Math.PI) {\n adjusted = 2 * Math.PI + adjusted;\n } else if (adjusted > Math.PI) {\n adjusted = adjusted - 2 * Math.PI;\n }\n\n angle = (adjusted - Math.PI) / 2 + at + (Math.random() < 0.5 ? Math.PI : 0);\n\n return [\n vertex[0] + (amount * Math.cos(angle)) / 2,\n vertex[1] + (amount * Math.sin(angle)) / 2\n ];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"function distanceBetween(a, b) {\n const dx = a[0] - b[0],\n dy = a[1] - b[1];\n\n return Math.sqrt(dx * dx + dy * dy);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"function orientation(p, q, r) {\n const val = (q[1] - p[1]) * (r[0] - q[0]) - (q[0] - p[0]) * (r[1] - q[1]);\n return val > 0 ? 1 : val < 0 ? -1 : 0;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"function getBounds(ring) {\n let x0 = Infinity,\n y0 = Infinity,\n x1 = -Infinity,\n y1 = -Infinity;\n\n ring.forEach(function(point) {\n if (point[0] < x0) x0 = point[0];\n if (point[0] > x1) x1 = point[0];\n if (point[1] < y0) y0 = point[1];\n if (point[1] > y1) y1 = point[1];\n });\n\n return [[x0, y0], [x1, y1]];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"function getMidpoint(ring) {\n const bounds = getBounds(ring);\n\n return [(bounds[1][0] + bounds[0][0]) / 2, (bounds[1][1] + bounds[0][1]) / 2];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"function rotateAround(center, angle) {\n const cos = Math.cos(angle),\n sin = Math.sin(angle);\n\n return function(p) {\n return [\n center[0] + (p[0] - center[0]) * cos - (p[1] - center[1]) * sin,\n center[1] + (p[0] - center[0]) * sin + (p[1] - center[1]) * cos\n ];\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"function segmentsIntersect(a, b) {\n if (orientation(a[0], a[1], b[0]) === orientation(a[0], a[1], b[1])) {\n return false;\n }\n\n return orientation(b[0], b[1], a[0]) !== orientation(b[0], b[1], a[1]);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"function pointBetween(a, b, pct) {\n const point = [a[0] + (b[0] - a[0]) * pct, a[1] + (b[1] - a[1]) * pct];\n\n return point;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"function getAngle(a, b) {\n return Math.atan2(b[1] - a[1], b[0] - a[0]);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"md`### Libraries`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"import { stroke } from \"@akngs/oil-painting-brushstrokes\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"import {button, slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"md`### Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"us = await d3.json(\"https://d3js.org/us-10m.v1.json\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"features = {\n const neighbors = topojson.neighbors(us.objects.states.geometries),\n features = topojson.feature(us, us.objects.states).features;\n // Greedy color selection\n features.forEach(function(d, i) {\n d.properties.color = colors.find(c =>\n neighbors[i].every(n => features[n].properties.color !== c)\n );\n\n // Mix up a bit\n colors.push(colors.shift());\n });\n return features;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"md`### Settings`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"colors = [\n \"rgb(77, 191, 173)\",\n \"rgb(255, 98, 101)\",\n \"rgb(254, 201, 103)\",\n \"rgb(103, 133, 185)\",\n \"rgb(138, 212, 231)\"\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 33:"$32:body"