2b:null 2c:["$","title",null,{"children":"Color Stipple (SVG DL) | DANIAUD Dimitri | Observable"}] 31:T503,data = { // La ligne suivante a été commentée, probablement parce qu'elle est en commentaire. //const ewidth = Math.min(width, img.width) // Calcul de la hauteur en fonction de la largeur spécifiée (ewidth), en maintenant le rapport d'aspect de l'image originale. const height = Math.round(ewidth * img.height / img.width); // Création d'un contexte 2D avec la largeur (ewidth) calculée et la hauteur déterminée. const context = DOM.context2d(ewidth, height, 1); // Dessin de l'image sur le contexte avec redimensionnement. context.drawImage(img, 0, 0, img.width, img.height, 0, 0, ewidth, height); // Récupération des données RGBA du contexte. const {data: rgba} = context.getImageData(0, 0, ewidth, height); // Création d'un tableau de nombres flottants 64 bits pour stocker les données traitées. const data = new Float64Array(ewidth * height); // Boucle de traitement des données RGBA et conversion en valeurs entre 0 et 1. for (let i = 0, n = rgba.length / 4; i < n; ++i) data[i] = Math.max(0, 1 - rgba[i * 4] / 254); // Attribution des propriétés width et height au tableau de données. data.width = ewidth; data.height = height; // Retourne le tableau de données traitées. return data; } 32:T733,script = { const blob = new Blob([` importScripts("${await require.resolve("d3-delaunay@^5.1.1")}"); onmessage = event => { const {data: {data, width, height, n}} = 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 < 30; ++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 < 80; ++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(); } close(); }; `], {type: "text/javascript"}); const script = URL.createObjectURL(blob); invalidation.then(() => URL.revokeObjectURL(script)); return script; }33:[{"id":"f18596d51307c1097b440919979ab909ddb1d747d8472d8541309f4ce02848ee555404979a52f933f451bb3396f2a2eadcc6cc46e9ca8ca58024404d3a616552","href":"https://static.observableusercontent.com/files/f18596d51307c1097b440919979ab909ddb1d747d8472d8541309f4ce02848ee555404979a52f933f451bb3396f2a2eadcc6cc46e9ca8ca58024404d3a616552","name":"SKETCH A 50x70 -300dpi (sans fond)__.png","type":"image/png","lastModified":1702677763860.662,"size":4316240}] 2f:{"id":"db1c0c04c2babca5","slug":null,"title":"Color Stipple (SVG DL)","thumbnail":"3c800c52cf1e5b877d63ee4ec489d945a3763d48e4616a6dfb10d0dd196f99d6","access_level":"public","create_time":"$D2023-12-13T13:44:17.142Z","update_time":"$D2023-12-19T11:06:19.129Z","view_time":null,"first_public_time":"$D2023-12-13T13:44:17.142Z","has_unpublished_edits":null,"fork":{"id":"e2ddd0d10c8847ef","slug":"color-stipple","title":"Color Stipple","owner":{"id":"6c3b7072b5e94b97","login":"jonhelfman","name":"Jonathan Helfman"}},"stars":1,"starred":false,"owner":{"type":"team","id":"0ddb7fa83db1aeec","login":"dimtyl","name":"DANIAUD Dimitri","avatar_url":"https://avatars-next.observableusercontent.com/11ddf742cdf8d3e62545d32485ff0014a5673770cd1cfadc6c8fc11b934ab356","tier":"starter_2024"},"version":237,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"dab385917f7efa24","login":"dimtyl","name":"DANIAUD Dimitri","avatar_url":"https://avatars-next.observableusercontent.com/11ddf742cdf8d3e62545d32485ff0014a5673770cd1cfadc6c8fc11b934ab356","tier":null}],"members":[{"type":"individual","id":"dab385917f7efa24","login":"dimtyl","name":"DANIAUD Dimitri","avatar_url":"https://avatars-next.observableusercontent.com/11ddf742cdf8d3e62545d32485ff0014a5673770cd1cfadc6c8fc11b934ab356","tier":null,"role":"editor"}],"comments":[{"id":"38916236b4c3cc19","reply_to_id":null,"content":"Hi, is there any way to equalize dot density all over the canvas?\nI'd like to reproduce a stippled version of the image without the blending effect of sparse dots with background in light colors.\nRight now the density of highlights is much lower than in darker colors.","create_time":"$D2024-03-06T15:10:52.122Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"8fbae61e137fe2d2","login":"alexp4","name":"AlexP","avatar_url":"https://avatars-next.observableusercontent.com/241d304866a4dd41ff0ada2e7c5921ec8ed7f452790511f77d0a4a30b7bffb70","tier":null}}],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Color Stipple (SVG DL)","cells":[{"id":0,"value":"md`# Color Stipple (SVG DL)\n\nAdapted from https://observablehq.com/@jonhelfman/color-stipple itself adapted from https://observablehq.com/@mbostock/voronoi-stippling`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"viewof scaling = slider({\n min: 0.2, \n max: 2.0, \n step: 0.05, \n value: 0.9, \n title: \"Output Scaling\", \n description: \"Reduce the image dimensions, crowding the colors together\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":223,"value":"viewof wdth = slider({\n min: 0.5, \n max: 7.0, \n step: 0.5, \n value: 1, \n title: \"input scaling \", \n description: \"scale factor <> number of points/ reduce or increase input width\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"getColorStipple(scaling)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"mutable svgDownloadButton = {\n const button = html``;\n button.addEventListener(\"click\", () => downloadSVG(scaling));\n return button;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"function downloadSVG(scaling) {\n const k = scaling;\n const svg = document.createElementNS(\"http://www.w3.org/2000/svg\", \"svg\");\n svg.setAttribute(\"width\", ewidth * k);\n svg.setAttribute(\"height\", height * k);\n\n points.forEach((p, i) => {\n const x = p[0] * k;\n const y = p[1] * k;\n\n const circle = document.createElementNS(\"http://www.w3.org/2000/svg\", \"circle\");\n circle.setAttribute(\"cx\", (x + 1.5) * k);\n circle.setAttribute(\"cy\", y * k);\n circle.setAttribute(\"r\", 1.5 * k);\n circle.setAttribute(\"fill\", cpoints[i]);\n\n svg.appendChild(circle);\n });\n\n const svgString = new XMLSerializer().serializeToString(svg);\n\n const blob = new Blob([svgString], { type: \"image/svg+xml\" });\n const url = URL.createObjectURL(blob);\n\n const a = document.createElement(\"a\");\n a.href = url;\n a.download = \"image.svg\";\n document.body.appendChild(a);\n a.click();\n document.body.removeChild(a);\n URL.revokeObjectURL(url);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"viewof img = imageInput({\n crossOrigin: \"anonymous\",\n initialUrl: 'https://upload.wikimedia.org/wikipedia/en/thumb/8/8d/Pablo_Picasso%2C_1905%2C_Au_Lapin_Agile_%28At_the_Lapin_Agile%29%2C_oil_on_canvas%2C_99.1_x_100.3_cm%2C_Metropolitan_Museum_of_Art.jpg/480px-Pablo_Picasso%2C_1905%2C_Au_Lapin_Agile_%28At_the_Lapin_Agile%29%2C_oil_on_canvas%2C_99.1_x_100.3_cm%2C_Metropolitan_Museum_of_Art.jpg'\n})\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"stipple = {\n const context = DOM.context2d(data.width, data.height);\n const worker = new Worker(script);\n let arr\n let count = 0\n \n function messaged({data: points}) {\n context.fillStyle = \"#fff\";\n context.fillRect(0, 0, data.width, data.height);\n context.beginPath();\n arr = []\n for (let i = 0, n = points.length; i < n; i += 2) {\n const x = points[i], y = points[i + 1];\n context.moveTo(x + 1.5, y);\n context.arc(x, y, 1.5, 0, 2 * Math.PI);\n arr.push([x,y])\n }\n if(count === stippleRuns - 1){\n mutable points = arr\n }\n count++\n context.fillStyle = '#000';\n context.fill();\n }\n \n invalidation.then(() => worker.terminate());\n worker.addEventListener(\"message\", messaged);\n const width = data.width\n const height = data.height\n const n = Math.round(width * height / 40)\n worker.postMessage({data, width, height, n});\n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"function getColorStipple (scaling) {\n const k = scaling\n const context = DOM.context2d(img.width * k, height *k);\n points.forEach((p,i) => {\n const x = p[0]* k\n const y = p[1]* k\n context.beginPath();\n context.moveTo((x + 1.5) * k, y * k);\n context.arc(x * k, y * k, 1.5, 0, 2 * Math.PI);\n context.fillStyle = cpoints[i];\n context.fill();\n })\n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"source = { \n const canvas = document.createElement('canvas')\n canvas.width = data.width\n canvas.height = data.height\n const ctx = canvas.getContext('2d')\n\n if(smoothing === false){\n // turn off image aliasing\n ctx.msImageSmoothingEnabled = false;\n ctx.mozImageSmoothingEnabled = false;\n ctx.webkitImageSmoothingEnabled = false;\n ctx.imageSmoothingEnabled = false;\n }\n ctx.drawImage(img, 0, 0, data.width, data.height)\n\n return canvas\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"md`### Voronoi stipple support\n\nA weighted variant of [Lloyd’s algorithm](/@mbostock/lloyds-algorithm) is used to implement stippling. Points are initially positioned randomly using rejection sampling, then at each iteration, the Voronoi cell centroids are weighted by the lightness of the contained pixels.\n\nThis technique is based on [*Weighted Voronoi Stippling*](https://www.cs.ubc.ca/labs/imager/tr/2002/secord2002b/secord.2002b.pdf) by [Adrian Secord](https://cs.nyu.edu/~ajsecord/stipples.html); see also posts by [Muhammad Firmansyah Kasim](https://mfkasim91.github.io/2016/12/06/stippling-pictures-with-lloyds-algorithm/), [Egor Larionov](https://elrnv.com/blog/weighted-lloyds-method-for-voronoi-tesselation/) and [Noah Veltman](https://bl.ocks.org/veltman/017a2093623e1bf3ae041dd3380578cb).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"mutable points = []","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"ewidth = Math.min(img.width*wdth)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"height = data.height","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"md`### Color stipple support`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"ctx = source.getContext('2d')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"function getColorForCoord(x, y, ctx) {\n const c = ctx.getImageData(x, y, 1, 1).data;\n return d3.rgb(c[0],c[1], c[2],c[3]);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"cpoints = points.map(p => getColorForCoord(Math.round(p[0]), Math.round(p[1]), ctx))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"md`### Constants`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"smoothing = true","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"stippleRuns = 80","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"md`### Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"import { imageInput } from \"@mbostock/file-input\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"d3 = require(\"d3\") ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"