2a:null 2b:["$","title",null,{"children":"Pen and ink stipple effect | Torben Jansen | Observable"}] 30:T427,{ await visibility(); const size = Math.min(640, width), map = DOM.context2d(size, size), proj = spilhausSquare().fitSize([size, size], { type: "Sphere"}), path = d3.geoPath(proj, map), vertices = getVertices(land, proj), delaunay = d3.Delaunay.from(getVertices(land, proj)); map.strokeStyle = "lightgray"; for (let i = 0, n = delaunay.triangles.length / 3; i < n; ++i) { map.beginPath(); delaunay.renderTriangle(i, map); map.stroke(); } map.strokeStyle = "black"; map.beginPath(); path(land) map.stroke(); const context = DOM.context2d(size, size); context.fillStyle = "red"; function render([x, y]) { context.clearRect(0, 0, size, size); context.drawImage(map.canvas, 0, 0, size, size); context.beginPath(); context.arc(x, y, 4, 0, Math.PI * 2); context.fill(); } render([size / 2, size / 2]); context.canvas.addEventListener('mousemove', e => { render(vertices[delaunay.find(e.layerX, e.layerY)]); }); return context.canvas; }31:T4a6,{ await visibility(); const { cos, sin, sqrt, hypot, PI: pi } = Math; const context = DOM.context2d(width, height); const N = 20000, r = sqrt(width * height / N / 2.5); const v = Array.from( { length: 6 }, (_, i) => { let a = (30 + i * 60) * pi / 180; return [cos(a) * r, sin(a) * r]; } ); for (let [x, y] of hexgrid2d(width, height, N)) { let [x0, y0] = vertices[delaunay.find(x, y)], d = hypot(x0 - x, y0 - y), p = probability(d, 0.02, 0.04); if (contains(x, y)) { context.fillStyle = "white"; context.strokeStyle = "white"; } else if (p < Math.random()) { context.fillStyle = d3.interpolateBlues(0); context.strokeStyle = d3.interpolateBlues(0); } else { context.fillStyle = d3.interpolateBlues(p); context.strokeStyle = d3.interpolateBlues(0); } context.beginPath(); for (let i = 0; i < v.length; ++i) { i === 0 ? context.moveTo(x + v[i][0], y + v[i][1]) : context.lineTo(x + v[i][0], y + v[i][1]); } context.closePath(); context.fill(), context.stroke(); } return context.canvas } 32:T7ed,function* poissonDiscSampler(width, height, radius) { const k = 4; // maximum number of samples before rejection const radius2 = radius * radius; const cellSize = radius * Math.SQRT1_2; const gridWidth = Math.ceil(width / cellSize); const gridHeight = Math.ceil(height / cellSize); const grid = new Array(gridWidth * gridHeight); const queue = []; // Pick the first sample. yield sample(width / 2 , height / 2, null); // Pick a random existing sample from the queue. pick: while (queue.length) { const i = Math.random() * queue.length | 0; const parent = queue[i]; const seed = Math.random(); const epsilon = 0.0000001; // Make a new candidate. for (let j = 0; j < k; ++j) { const a = 2 * Math.PI * (seed + 1.0*j/k); const r = radius + epsilon; const x = parent[0] + r * Math.cos(a); const y = parent[1] + r * Math.sin(a); // Accept candidates that are inside the allowed extent // and farther than 2 * radius to all existing samples. if (0 <= x && x < width && 0 <= y && y < height && far(x, y)) { yield sample(x, y), parent; continue pick; } } // If none of k candidates were accepted, remove it from the queue. const r = queue.pop(); if (i < queue.length) queue[i] = r; } function far(x, y) { const i = x / cellSize | 0; const j = y / cellSize | 0; const i0 = Math.max(i - 2, 0); const j0 = Math.max(j - 2, 0); const i1 = Math.min(i + 3, gridWidth); const j1 = Math.min(j + 3, gridHeight); for (let j = j0; j < j1; ++j) { const o = j * gridWidth; for (let i = i0; i < i1; ++i) { const s = grid[o + i]; if (s) { const dx = s[0] - x; const dy = s[1] - y; if (dx * dx + dy * dy < radius2) return false; } } } return true; } function sample(x, y, parent) { const s = grid[gridWidth * (y / cellSize | 0) + (x / cellSize | 0)] = [x, y]; queue.push(s); return s; } }33:[] 2e:{"id":"d27c6bbcb123e8a4","slug":"pen-and-ink-stipple-effect","title":"Pen and ink stipple effect","thumbnail":"de5dd31ab9d4db28bfde81ff1b548709b0e92035dda9f3e45d11f6d2c4c56e76","access_level":"public","create_time":"$D2020-05-18T15:49:06.932Z","update_time":"$D2023-09-14T08:25:22.864Z","view_time":null,"first_public_time":"$D2020-05-26T20:00:20.972Z","has_unpublished_edits":null,"fork":false,"stars":105,"starred":false,"owner":{"type":"team","id":"03836a98946da550","login":"toja","name":"Torben Jansen","avatar_url":"https://avatars-next.observableusercontent.com/f79c27ca86680a3a399f6eb78b22436d6dd665b49ad284ba1ccfb405bfc89fe0","tier":"starter_2024"},"version":1405,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"9334261743951ef0","login":"toja","name":"Torben Jansen","avatar_url":"https://avatars-next.observableusercontent.com/f79c27ca86680a3a399f6eb78b22436d6dd665b49ad284ba1ccfb405bfc89fe0","tier":null}],"members":[{"type":"individual","id":"9334261743951ef0","login":"toja","name":"Torben Jansen","avatar_url":"https://avatars-next.observableusercontent.com/f79c27ca86680a3a399f6eb78b22436d6dd665b49ad284ba1ccfb405bfc89fe0","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":28,"collection":{"id":"00215e943e29b733","slug":"projections","title":"Maps & Projections","owner":{"id":"03836a98946da550","login":"toja","name":"Torben Jansen"}},"type":"notebook","body":{"titling":"auto","title":"Pen and ink stipple effect","cells":[{"id":0,"value":"md`# Pen and ink stipple effect\n\n

\"Everybody just loves a pen and ink stipple effect. It’s charming, it’s warm, it’s handsome, it’s tactile.\"

\n\nA few days ago John Nelson published an [article](https://www.esri.com/arcgis-blog/products/arcgis-pro/mapping/please-steal-this-pen-and-ink-style/) about pen and ink stipple effects for maps. I fell immediately in love with the wonderful examples presented there, especially the map with the *Spilhaus projection*. So I tried to recreate it with *d3* and here's the result.\n\n---\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"{\n const context = DOM.context2d(width, height);\n const path1 = d3.geoPath(projection, context);\n const path2 = d3.geoPath(projection);\n\n context.beginPath();\n path1(land);\n context.fillStyle = \"#f6f2ec\";\n context.fill();\n context.lineWidth = 1.5;\n context.strokeStyle = \"#004060\";\n context.stroke();\n \n context.fillStyle = \"#004060\";\n for (let p of points) {\n if (!visible(p)) continue;\n context.beginPath(),\n context.arc(p.x, p.y, 1.2, 0, Math.PI * 2),\n context.fill(); \n };\n \n return html`\n

\n \n

\n ${context.canvas}\n

\n`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":466,"value":"viewof spread = slider({\n min: 0, \n max: 1, \n step: 0.01,\n value: 0.6,\n description: \"Spread\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":536,"value":"viewof density = slider({\n min: 0, \n max: 1, \n step: 0.01,\n value: 0.15,\n description: \"Border density\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":600,"value":"viewof invert = checkbox({\n options: [{ value: true, label: \"Invert\" }]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":368,"value":"md`---\n\nWhen I read John's article not only the stipple effect catched my eye, but also the map projection he chose, the *Spilhaus World Ocean Map in a Square* projection.\n\nI had seen spilhaus maps [before](https://observablehq.com/search?query=spilhaus), so I thought to myself it shouldn't be a big deal to set up a projection in this configuration. But as it turned out I was wrong. Although *d3* comes with a great variety of projections out of the box, this particular one is not yet available.\n\nBut after a little bit of research I was able to [implement](https://observablehq.com/@toja/spilhaus-world-ocean-map-in-a-square) the projection and could start to work on the stipple effect.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":999,"value":"md`\n## Sampling\n\nThe first step was to create the actual stipple effect. I started by randomly drawing dots on the canvas, but the result wasn't very pleasing. In a random uniform distribution many points are densely-packed or even overlapping, leading to large empty areas.\n\nBut luckily there are better options. *Poisson-disc sampling* produces points that are tightly-packed, but no closer to each other than a specified minimum distance, resulting in a more natural pattern.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":980,"value":"{\n await visibility();\n \n const w = Math.min(640, width),\n h = 100;\n \n const context = DOM.context2d(w, h);\n for (let i = 0; i < 1000; ++i) {\n context.beginPath();\n context.arc(Math.random() * w, Math.random() * h, 2, 0, Math.PI * 2);\n context.fill();\n yield context.canvas;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":983,"value":"{\n await visibility();\n \n const w = Math.min(640, width),\n h = 100;\n \n const context = DOM.context2d(w, h);\n for (let [x, y] of poissonDiscSampler(w, h, 7)) {\n context.beginPath();\n context.arc(x, y, 2, 0, Math.PI * 2);\n context.fill();\n yield context.canvas;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1291,"value":"md`\nHere I've used a slightly modified version Martin Roberts' [improved](http://extremelearning.com.au/an-improved-version-of-bridsons-algorithm-n-for-poisson-disc-sampling/) [implementation](https://observablehq.com/@techsparx/an-improvement-on-bridsons-algorithm-for-poisson-disc-samp/2) of Bridson's Algorithm for *Poisson Disc sampling*. And by the looks of it, this is exactly what we need.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1223,"value":"md`\n## Filtering\n\nThe next step was to filter the samples. To do this I calculated the distance of every dot to the shoreline and passed that value to a simple function that returns the probability of being visible or not: close to the shoreline there should be a lot of dots, far away only a few.\n\nI took some inspiration from Philippe Rivière's [Distance to shore](https://observablehq.com/@fil/distance-to-shore) notebook for this task. The first step was to extract all the vertices from the land contour and project them to canvas coordinates. The vertices are then used to create a [Delaunay triangulation](https://en.wikipedia.org/wiki/Delaunay_triangulation) that allows to quickly find the closest vertex from anywhere on the map.\n\nMove the mouse over the map (or tap on your screen) to show the closest vertex on the coastline.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":482,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1285,"value":"md`\nFurthermore I had to find a way to distinguish samples that were located on land or in the water bodies of the world. Although *d3* comes with methods that do that (*d3.polygonContains()* or *d3.geoContains()*), calling these functions for thousands of points was a little bit to slow.\n\nInstead I went with a pre-rendered version of the map that serves as a [lookup table](https://en.wikipedia.org/wiki/Lookup_table). Although this is not as exact as the *d3* functions, it's good enough here.\n\nMove the mouse over the map (or tap on your screen) to show if the postion is over a water body or not.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1095,"value":"{\n await visibility();\n \n let canvas = document.createElement(\"canvas\");\n let size = Math.min(640, width);\n \n canvas.width = size;\n canvas.height = size;\n \n let context = canvas.getContext(\"2d\");\n let proj = spilhausSquare().fitSize([size, size], { type: \"Sphere\" });\n let path = d3.geoPath(proj, context);\n \n context.fillStyle = \"white\";\n context.fillRect(0, 0, size, size);\n context.fillStyle = \"black\";\n context.beginPath(), path(land), context.fill();\n \n const img = context.getImageData(0, 0, size, size);\n function render(x, y) {\n context.clearRect(0, 0, size, size);\n context.putImageData(img, 0, 0);\n context.beginPath();\n context.arc(x, y, 4, 0, Math.PI * 2);\n context.fillStyle = img.data[4 * (Math.floor(x) + Math.floor(y) * size)] < 128 ? \"red\" : \"green\";\n context.fill();\n }\n \n render([size / 2, size / 2]);\n \n context.canvas.addEventListener('mousemove', e => {\n render(e.layerX, e.layerY);\n });\n \n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":844,"value":"md`\nAnd that are all ingredients needed to create a pen and ink stipple effect:\n\n1. Create a set of samples with *Poisson-disc sampling*\n2. Filter the samples based on their *distance to the shoreline* and whether they are *on land or not* \n\n---\n\nIf you think that stipple effects are nice, but not really your cup of tea, you might want to try out other [2D point distributions](https://observablehq.com/@fil/2d-point-distributions) with the techniques shown here:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":720,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1271,"value":"md`---\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"getVertices = (feature, proj) => {\n const nil = function(){};\n const vertices = [];\n d3.geoStream(feature, {\n point: (l, p) => vertices.push(proj([l, p])),\n lineStart: nil,\n lineEnd: nil,\n polygonStart: nil,\n polygonEnd: nil\n });\n return vertices;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":960,"value":"vertices = getVertices(land, projection);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":356,"value":"delaunay = d3.Delaunay.from(vertices);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":596,"value":"samples = [...poissonDiscSampler(width, height, 2.2)];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":542,"value":"points = {\n const points = [];\n for (let [x, y] of samples) {\n if (invert ? contains(x, y) : !contains(x, y)) continue;\n let [x0, y0] = vertices[delaunay.find(x, y)];\n points.push({ x, y, d: Math.hypot(x0 - x, y0 - y) })\n }\n return points;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":461,"value":"probability = (distance, df, bd) => Math.exp(-distance * df + bd);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":526,"value":"visible = (point) => {\n let rnd = Math.random(),\n df = (1 - spread) / 5; \n return probability(point.d, df, density) > rnd\n || probability(point.x, df, density) > rnd\n || probability(point.y, df, density) > rnd\n || probability(width - point.x, df, density) > rnd\n || probability(height - point.y, df, density) > rnd;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"contains = {\n \n let canvas = document.createElement(\"canvas\");\n canvas.width = width;\n canvas.height = height;\n \n let context = canvas.getContext(\"2d\");\n let path = d3.geoPath(projection, context);\n \n context.fillStyle = \"white\";\n context.fillRect(0, 0, width, height);\n context.fillStyle = \"black\";\n context.beginPath(), path(land), context.fill();\n \n const data = context.getImageData(0, 0, width, height).data;\n context = path = canvas = null;\n \n return function(x, y) {\n return data[4 * (Math.floor(x) + Math.floor(y) * width)] < 128;\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":438,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"height = width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"projection = spilhausSquare()\n .fitSize([width, height], { type: \"Sphere\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"graticule = d3.geoGraticule10()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"land = topojson.feature(topo, topo.objects.land)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1400,"value":"topo = fetch(\"https://unpkg.com/world-atlas@1/world/110m.json\").then(\n (response) => response.json()\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"import { spilhausSquare } from \"@toja/spilhaus-world-ocean-map-in-a-square\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":702,"value":"import { hexgrid2d } from \"@fil/2d-point-distributions\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":896,"value":"import { checkbox, slider } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"d3 = require(\"d3-geo\", \"d3-fetch\", \"d3-delaunay@5\", \"d3-scale-chromatic\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 2f:"$2e:body"