2c:null 2d:["$","title",null,{"children":"Unicode Range Palimpsests | Job van der Zwan | Observable"}] 32:T1006,{ const w = 400; // Don't do duplicates. const charCtx = DOM.context2d(w, w) charCtx.font = `${Math.floor(w/2)}pt ${font}`; charCtx.clearRect(0, 0, w, w); charCtx.fillStyle = "rgba(0, 0, 0, 1)"; charCtx.fillText(String.fromCodePoint(0xFFFF), w * .1, w * 2/3); const unknown_character_data = charCtx.getImageData(0, 0, w, w).data; // return charCtx.canvas const canvases = []; // used to draw the results of the accumulator later on const aggregate = new Float64Array(w * w * 4); const imgData = charCtx.createImageData(w, w); let drawn = 0; const filteredBlocks = blocks.filter(block => block.block != "Syriac"); for (let block of filteredBlocks) { const points = block_points(block.range); let ctx = DOM.context2d(w, w); canvases.push(html`

${block.block}

${ctx.canvas}`); yield html`${canvases}
`; ctx.font = `${Math.floor(w*.4)}pt ${font}`; let successes_in_current_plot = 0; let attempts_in_current_plot = 0; aggregate.fill(0); let maxAggregate = 0; for (let i = 0; i < points.length; i++) { attempts_in_current_plot++; if (attempts_in_current_plot > 150 && !successes_in_current_plot) { break; } const point = points[i]; charCtx.clearRect(0, 0, w, w); charCtx.fillText(String.fromCodePoint(point), w * .1, w * 2/3); const point_data = charCtx.getImageData(0, 0, w, w).data; // if the code point is 99% similar to U+FFFF, // it's probably a missing code point box // (workaround for Firefox, which renders the // code point value inside the box) // see https://stackoverflow.com/questions/1911000/detecting-individual-unicode-character-support-with-javascript let mismatchesUnknown = 0; let isUnknownBox = true; // we only care about non-transparent pixels, // so we compare the alpha channel for perf for (let j = 3; isUnknownBox && j < point_data.length; j+= 4) { if (point_data[j] !== unknown_character_data[j]) { ++mismatchesUnknown; // to avoid false positives we want 99% certainty that // we have an unknown box. This means we can bail early // if we have more than 1% of a *mistmatch* with the // unknown box, which is the common and faster case if (mismatchesUnknown * 4 / unknown_character_data.length > 0.01) isUnknownBox = false; } } if (isUnknownBox) { if (i%32 === 0) { yield html`${canvases}
`; } continue; } // If we reach this point, it's probably a "real" glyph successes_in_current_plot++; for (let j = 0; j < point_data.length; j += 4) { // trying to please the branch predictor: // skip the empty sections in its own while loop while(j < point_data.length && point_data[j+3] === 0) { j += 4; } let alpha = 0; while(j < point_data.length && (alpha = point_data[j+3]) > 0) { aggregate[j] += point_data[j]; aggregate[j+1] += point_data[j+1]; aggregate[j+2] += point_data[j+2]; const sum = (aggregate[j+3] += alpha); if (sum > maxAggregate) { maxAggregate = sum; } j += 4; } } if ((++drawn % 8) === 0) { // only draw when a new frame is about to be painted window.requestAnimationFrame(() => { const norm = 255 / maxAggregate; for (let j = 0; j < imgData.data.length; j++) { imgData.data[j] = aggregate[j] * norm & 0xFF; } ctx.putImageData(imgData, 0, 0); }); yield html`${canvases}
`; } } // render final result const norm = 255 / maxAggregate; for (let j = 0; j < imgData.data.length; j++) { imgData.data[j] = aggregate[j] * norm & 0xFF; } ctx.putImageData(imgData, 0, 0); yield html`${canvases}
`; } }33:[] 30:{"id":"3672da74ac4f2aa2","slug":null,"title":"Unicode Range Palimpsests","thumbnail":"dd9bb6d697cc9b717a6ef18e39f2fad15e4d05706bc5f59c18a0983fb40971ae","access_level":"unlisted","create_time":"$D2020-09-04T19:30:37.744Z","update_time":"$D2020-09-05T17:48:18.325Z","view_time":null,"first_public_time":null,"has_unpublished_edits":null,"fork":{"id":"2bbf51723016a3d4","slug":"unicode-range-palimpsets","title":"Unicode Range Palimpsests","owner":{"id":"18bbeceb36c8f564","login":"bmschmidt","name":"Benjamin Schmidt"}},"stars":0,"starred":false,"owner":{"type":"team","id":"3f83172cfde1e56a","login":"jobleonard","name":"Job van der Zwan","avatar_url":"https://avatars-next.observableusercontent.com/808373580aa09723ceabb9cb31d01ea6db287280b59eaa63618e259f5d28dd71","tier":"starter_2024"},"version":495,"publish_version":495,"role":null,"authored":false,"authors":[{"type":"individual","id":"d36034ddfb454bdd","login":"jobleonard","name":"Job van der Zwan","avatar_url":"https://avatars-next.observableusercontent.com/808373580aa09723ceabb9cb31d01ea6db287280b59eaa63618e259f5d28dd71","tier":null}],"members":[{"type":"individual","id":"d36034ddfb454bdd","login":"jobleonard","name":"Job van der Zwan","avatar_url":"https://avatars-next.observableusercontent.com/808373580aa09723ceabb9cb31d01ea6db287280b59eaa63618e259f5d28dd71","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Unicode Range Palimpsests","cells":[{"id":0,"value":"md`# Unicode Range Palimpsests\n\nAverage the pixel values for every range in the Unicode character definition, one at a time.\n\nChange the font below.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"font = \"serif\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"import {block_points, blocks, d3, _arrayBufferToBase64} from '@bmschmidt/umap-clustering-of-unicode-characters-from-pixel-values'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 31:"$30:body"