2d:null 2e:["$","title",null,{"children":"Delaunay Stippling Hatchure | wolfiex | Observable"}] 33:T625,triangle = function(i, rc, svg, delaunay) { //const buffer = context == null ? (context = new Path()) : undefined; const points = delaunay.points; const triangles = delaunay.triangles; const t0 = triangles[(i *= 3)] * 2; const t1 = triangles[i + 1] * 2; const t2 = triangles[i + 2] * 2; const pt = [t0, t1, t2].map(d => [points[d], points[d + 1]]); var angles = [ getAngle(pt[0], pt[1]), getAngle(pt[1], pt[2]), getAngle(pt[2], pt[0]) ]; angles = angles.sort(); //console.log(angles); // get darkness var x = pt.map(d => d[0]); var y = pt.map(d => d[1]); var dist = [d3.min(x), d3.max(x), d3.min(y), d3.max(y)]; try { // sometimes no width or hight of square var slice = data.context.getImageData( dist[0], dist[2], dist[1] - dist[0], dist[3] - dist[2] ).data; mutable percent = i / n; var g = []; for (let i = 0, n = slice.length / 4; i < n; ++i) g.push(0.3 * slice[i] + 0.59 * slice[i + 1] + 0.11 * slice[i + 2]); var gap = d3.mean(g) / 255; gap = inverse ? gap : 1 - gap; svg.appendChild( rc.polygon(pt, { fill: '#222', //`rgba(0,0,0,${Math.random()})`, fillStyle: 'zigzag', stroke: 'none', roughness: 1, hachureAngle: 180 * gap, //angles[2], // angle of hachure, hachureGap: 4 * gap ** pow + 2 }) ); } catch (e) { console.log( e, dist, dist[0], dist[2], dist[1] - dist[0], dist[3] - dist[2] ); } //return buffer && buffer.value(); }34:T789,script = { const blob = new Blob( [ ` importScripts("${await require.resolve("d3-delaunay@^5.1.1")}"); onmessage = event => { const {data: {data, width, height, n,nit,init}} = event; const points = new Float64Array(n * 2); const c = new Float64Array(n * 2); const s = new Float64Array(n); // Initialize the points using rejection sampling. for (let i = 0; i < n; ++i) { for (let j = 0; j < init; ++j) { const x = points[i * 2] = Math.floor(Math.random() * width); const y = points[i * 2 + 1] = Math.floor(Math.random() * height); if (Math.random() < data[y * width + x]) break; } } const delaunay = new d3.Delaunay(points); const voronoi = delaunay.voronoi([0, 0, width, height]); for (let k = 0; k < nit; ++k) { // Compute the weighted centroid for each Voronoi cell. c.fill(0); s.fill(0); for (let y = 0, i = 0; y < height; ++y) { for (let x = 0; x < width; ++x) { const w = data[y * width + x]; i = delaunay.find(x + 0.5, y + 0.5, i); s[i] += w; c[i * 2] += w * (x + 0.5); c[i * 2 + 1] += w * (y + 0.5); } } // Relax the diagram by moving points to the weighted centroid. // Wiggle the points a little bit so they don’t get stuck. const w = Math.pow(k + 1, -0.8) * 10; for (let i = 0; i < n; ++i) { const x0 = points[i * 2], y0 = points[i * 2 + 1]; const x1 = s[i] ? c[i * 2] / s[i] : x0, y1 = s[i] ? c[i * 2 + 1] / s[i] : y0; points[i * 2] = x0 + (x1 - x0) * 1.8 + (Math.random() - 0.5) * w; points[i * 2 + 1] = y0 + (y1 - y0) * 1.8 + (Math.random() - 0.5) * w; } // postMessage(points); voronoi.update(); } // only post at end postMessage(points); close(); }; ` ], { type: "text/javascript" } ); const script = URL.createObjectURL(blob); invalidation.then(() => URL.revokeObjectURL(script)); return script; }35:T4a1,data = d3 //FileAttachment("obama.png").image() .image( "https://scontent-lht6-1.xx.fbcdn.net/v/t1.0-9/73475034_10158212241832214_4234839939994353664_n.jpg?_nc_cat=106&_nc_sid=a4a2d7&_nc_ohc=N4JBj9mHsqwAX83hlZb&_nc_ht=scontent-lht6-1.xx&oh=9eaf76d897c48a81c972b6156fff286b&oe=5F6E5C19", //"https://pbs.twimg.com/profile_images/883703183297490945/UP4f6j-b_400x400.jpg", { crossOrigin: "anonymous" } ) .then(image => { var height = Math.round((width * image.height) / image.width); const context = DOM.context2d(width, height, 1); context.drawImage( image, 0, 0, image.width, image.height, 0, 0, width, height ); const { data: rgba } = context.getImageData(0, 0, width, height); var data = new Float64Array(width * height); for (let i = 0, n = rgba.length / 4; i < n; ++i) data[i] = Math.max(0, rgba[i * 4] / 254); //254; if (!inverse) data = data.map(d => 1 - d); var min = d3.min(data); var max = d3.max(data); data.scale = d3.scaleLinear().range([min, max]); data.width = width; data.height = height; data.context = context; return data; })36:[] 31:{"id":"68dafccc904c4356","slug":"delaunay-stippling-hatchure","title":"Delaunay Stippling Hatchure","thumbnail":"f03c029b031b8db0b5f29ecbd7e5115d6d38678228faf308496b02148b56d3c0","access_level":"public","create_time":"$D2020-08-27T10:57:24.352Z","update_time":"$D2020-08-27T14:19:19.106Z","view_time":null,"first_public_time":"$D2020-08-27T14:19:19.920Z","has_unpublished_edits":null,"fork":true,"stars":3,"starred":false,"owner":{"type":"team","id":"5ac3a182adb31463","login":"wolfiex","name":"","avatar_url":"https://avatars-next.observableusercontent.com/920ad9da2e8dc46272a1a9d71eb3bddb5e1daea20ee8a2ee301b59af578ad9af","tier":"starter_2024"},"version":818,"publish_version":818,"role":null,"authored":false,"authors":[{"type":"individual","id":"3e68e1c0f733af7c","login":"wolfiex","name":"","avatar_url":"https://avatars-next.observableusercontent.com/920ad9da2e8dc46272a1a9d71eb3bddb5e1daea20ee8a2ee301b59af578ad9af","tier":null}],"members":[{"type":"individual","id":"3e68e1c0f733af7c","login":"wolfiex","name":"","avatar_url":"https://avatars-next.observableusercontent.com/920ad9da2e8dc46272a1a9d71eb3bddb5e1daea20ee8a2ee301b59af578ad9af","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Delaunay Stippling Hatchure","cells":[{"id":0,"value":"md`# Delaunay Stippling Hatchure\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":489,"value":"n = 13600 //Math.round((width * height) / 530)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":716,"value":"inverse = true","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":741,"value":"pow = 3","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":745,"value":"nit = 10","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":760,"value":"init = 30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":679,"value":"mutable percent = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"{\n const svg = d3\n .create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height);\n\n const rc = rough.svg(svg.node());\n const worker = new Worker(script);\n\n function messaged({ data: points }) {\n var delaunay = new d3.Delaunay(points.filter((d, i) => i % 1 === 0));\n var { points, triangles } = delaunay;\n\n for (let i = 0, n = delaunay.triangles.length / 3; i < n; ++i) {\n triangle(i, rc, svg.node(), delaunay);\n }\n\n console.log('m');\n }\n\n invalidation.then(() => worker.terminate());\n worker.addEventListener(\"message\", messaged);\n worker.postMessage({ data, width, height, n, nit, init });\n return svg.node(); //context.canvas\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":508,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":608,"value":"function getAngle(x, y) {\n var dx = x[1] - x[0],\n dy = y[1] - y[0];\n return Math.abs((Math.atan2(dx, dy) * (180 / Math.PI)) % 180);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":339,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":650,"value":"data.context.canvas","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"height = data.height","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":400,"value":"d3 = require('d3', \"d3-array@2\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":562,"value":"rough = require('roughjs').catch(() => window.rough)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 32:"$31:body"