2c:null 2d:["$","title",null,{"children":"Exploring distance metrics to match pixels to letters | Grant Custer | Observable"}] 32:T458,{ let ch = font_size * 4 * line_height let cw = ch * ratio let canvas = document.createElement('canvas') canvas.width = ch * 2 canvas.height = ch * 2 canvas.style.background = "#efefef" let ctx = canvas.getContext('2d') let pad = 10 let avail = ch * 2 - pad * 2 let step = avail / (shader.length - 1) ctx.lineWidth = 2 ctx.strokeStyle = "black" ctx.beginPath() for (let i = 0; i < shader.length; i++) { let x = pad + i * step let y = pad + (1 - shader[i]) * avail if (i === 0) { ctx.moveTo(x,y) } else { ctx.lineTo(x,y) } } ctx.stroke() return html`

${[...Array(4)].map((n,i) => `

`)}

${canvas}

[${shader.map(s => s.toFixed(3)).join(',')}]

` }33:T87e,html`

${euclidean_results.map(r => { let ch = font_size * 4 * line_height let cw = ch * ratio let percents = r.percents let canvas = document.createElement('canvas') canvas.width = ch * 2 canvas.height = ch * 2 canvas.style.background = "#efefef" let ctx = canvas.getContext('2d') let pad = 10 let avail = ch * 2 - pad * 2 let step = avail / (r.percents.length - 1) ctx.lineWidth = 2 ctx.strokeStyle = "#bbb" ctx.beginPath() for (let i = 0; i < shader.length; i++) { let x = pad + i * step let y = pad + (1 - shader[i]) * avail if (i === 0) { ctx.moveTo(x,y) } else { ctx.lineTo(x,y) } } ctx.stroke() ctx.lineWidth = 2 ctx.strokeStyle = "black" ctx.beginPath() for (let i = 0; i < r.percents.length; i++) { let x = pad + i * step let y = pad + (1 - r.percents[i]) * avail if (i === 0) { ctx.moveTo(x,y) } else { ctx.lineTo(x,y) } } ctx.stroke() return html`

${r.letter}

${canvas}

${r.sim.toFixed(5)}

[${r.percents.map(p => p.toFixed(3)).join(',')}]

`})}

`34:T87b,html`

${cosine_results.map(r => { let ch = font_size * 4 * line_height let cw = ch * ratio let percents = r.percents let canvas = document.createElement('canvas') canvas.width = ch * 2 canvas.height = ch * 2 canvas.style.background = "#efefef" let ctx = canvas.getContext('2d') let pad = 10 let avail = ch * 2 - pad * 2 let step = avail / (r.percents.length - 1) ctx.lineWidth = 2 ctx.strokeStyle = "#bbb" ctx.beginPath() for (let i = 0; i < shader.length; i++) { let x = pad + i * step let y = pad + (1 - shader[i]) * avail if (i === 0) { ctx.moveTo(x,y) } else { ctx.lineTo(x,y) } } ctx.stroke() ctx.lineWidth = 2 ctx.strokeStyle = "black" ctx.beginPath() for (let i = 0; i < r.percents.length; i++) { let x = pad + i * step let y = pad + (1 - r.percents[i]) * avail if (i === 0) { ctx.moveTo(x,y) } else { ctx.lineTo(x,y) } } ctx.stroke() return html`

${r.letter}

${canvas}

${r.sim.toFixed(5)}

[${r.percents.map(p => p.toFixed(3)).join(',')}]

`})}

`35:T45e,{ return html`

${regletters.map(cs => { let parent = document.createElement('div') parent.style.float = 'left' parent.style.width = cs[0].canvas.width * 8 + 'px' parent.style.padding = '1px' parent.style.marginRight = '10px' let grid = document.createElement('div') grid.style.display = 'grid' grid.style.width = cs[0].canvas.width * 2 + 'px' grid.style.gridTemplateColumns = '1fr 1fr' grid.style.marginBottom = '0.5rem' for (let i = 0; i < cs.length; i++) { let c = cs[i] let region = document.createElement('div') region.style.outline = 'solid 1px black' region.appendChild(c.canvas) grid.appendChild(region) } parent.appendChild(grid) let percents = cs.map(o => o.percent.toFixed(3)).join(',') let text = document.createElement('div') text.className = 'custom-font' text.style.width = '100%' text.style.overflow = 'auto' text.innerText = `[${percents}]` parent.appendChild(text) parent.style.marginBottom = '1em' return parent })}

` }36:T56e,regletters = { let temp = unique_characters.map(l => { let fs = font_size * 8 let height = fs * line_height let width = Math.ceil(ratio * height) // divide up the letter areas let columns = 2 let rows = 2 let regions = [...Array(columns * rows)].map((n, i) => { let canvas = document.createElement('canvas') let r = Math.floor(i/columns) let c = i % columns canvas.width = width / columns canvas.height = height / rows let x = c * (width / columns) let y = r * (height / columns) let ctx = canvas.getContext('2d') ctx.font = `${fs}px ${font}` ctx.fillText(l, -x, -y + height * (3/4)) let data = ctx.getImageData(0,0,width,height).data let vals = [] for (let i = 0; i < data.length; i += 4) { // check alpha let a = data[i + 3] let val = a > 255 / 2 ? 1 : 0 vals.push(val) } let ons = vals.filter(v => v === 1) let percent = Math.max(percent_min, ons.length / vals.length) return { canvas, percent } }) return regions }) // rescale let max = _.max(_.flatten(temp.map(r => r.map(o => o.percent)))) let rescaled = temp.map(r => { return r.map(o => { return Object.assign({}, o, { percent: o.percent/max }) }) }) if (scale_to_max) { return rescaled } else { return temp } }37:[] 30:{"id":"2bcdd757d52d2b26","slug":"exploring-distance-metrics-to-match-pixels-to-letters","title":"Exploring distance metrics to match pixels to letters","thumbnail":"2b6461b4d973327563138de23f633ff3987473da9571ddf8db84206496c2642b","access_level":"public","create_time":"$D2019-07-18T00:30:19.558Z","update_time":"$D2019-07-24T20:36:46.642Z","view_time":null,"first_public_time":"$D2019-07-18T15:40:12.415Z","fork":false,"stars":8,"starred":false,"owner":{"type":"team","id":"bf2c1edd2a33aa1b","login":"grantcuster","name":"Grant Custer","avatar_url":"https://avatars-next.observableusercontent.com/10eebb9a620b6b833738fb495f94fb682bcdc3270b247a9a8aef575ed0702c48","tier":"starter_2024"},"version":291,"publish_version":291,"role":null,"authored":false,"authors":[{"type":"individual","id":"a1f8c368ee3d80be","login":"grantcuster","name":"Grant Custer","avatar_url":"https://avatars-next.observableusercontent.com/10eebb9a620b6b833738fb495f94fb682bcdc3270b247a9a8aef575ed0702c48","tier":null}],"members":[{"type":"individual","id":"a1f8c368ee3d80be","login":"grantcuster","name":"Grant Custer","avatar_url":"https://avatars-next.observableusercontent.com/10eebb9a620b6b833738fb495f94fb682bcdc3270b247a9a8aef575ed0702c48","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"title":"Exploring distance metrics to match pixels to letters","cells":[{"id":0,"value":"md`# Exploring distance metrics to match pixels to letters\n\nThis was an experiment to see if I could improve on the letter placement in my [Text portraits ASCII art character placement](https://observablehq.com/@grantcuster/text-portraits). Instead of matching the darkest pixel to the _heaviest_ letter, I thought I'd try matching four pixels to a similarly shaped letter. This turns out to work but then you have to decide how to balance your matching criteria between the _shape_ of the pixels and overall heaviness.\n\nI made this notebook to try and get a better idea of how different distance metrics (cosine similarity and euclidean distance) affect the matching. Below you can choose the values for the four pixels. Beside the pixels there is a graph of the four values, this helps show the _shape_ of the pixel pattern values. In results you can see the top matches for each distance metric and how the value shapes compare.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":283,"value":"md`## Pixels`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"viewof shader = { \n let form = html``;\n form.oninput = () => form.value = [\n form.tl.valueAsNumber, \n form.tr.valueAsNumber, \n form.bl.valueAsNumber,\n form.br.valueAsNumber\n ];\n form.oninput();\n \n return form\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"md`## Results`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":272,"value":"viewof scale_to_max = checkbox({\n description: \"I think this does some of the normalizing work that cosine similarity otherwise does.\",\n options: [{ value: \"toggle\", label: \"Scale character percents by max\" }],\n value: \"toggle\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":230,"value":"md`### Euclidean distance`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":225,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":190,"value":"md`### Cosine similarity`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":178,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"cosine_results = { \n let combined = regletters.map((o, i) => {\n let percents = o.map(l => l.percent)\n \n // cosine\n let sim = similarity(shader, percents)\n \n return { percents, sim, letter: reglabels[i] }\n })\n let sorted = _.orderBy(combined, 'sim', 'desc')\n return sorted\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":222,"value":"euclidean_results = { \n let combined = regletters.map((o, i) => {\n let percents = o.map(l => l.percent)\n \n let sim = distance(shader, percents)\n \n return { percents, sim, letter: reglabels[i] }\n })\n let sorted = _.orderBy(combined, 'sim', 'asc')\n return sorted\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"md`## Characters`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"viewof characters = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":239,"value":"unique_characters = _.uniq(characters.split(''))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":248,"value":"percent_min = 0.0001","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"reglabels = unique_characters","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"md`## Font`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"html`

${font}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"ratio = {\n font_loaded\n let canvas = document.createElement('canvas'),\n ctx = canvas.getContext('2d');\n let size = 42\n ctx.font = `${size}px IBM Plex Mono`\n let h = size * line_height\n let width = ctx.measureText('W').width\n let ratio = width/h\n return ratio\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"mutable font_loaded = false","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"font = \"IBM Plex Mono\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"font_size = 16","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"line_height = 1.5","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"{\n var font = new FontFaceObserver(`IBM Plex Mono`, {\n weight: 400\n });\n font.load().then(function () {\n mutable font_loaded = true\n }, function () {\n console.log('Font is not available');\n });\n return 'font face observer set-up'\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"md`## Libraries`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":269,"value":"import {checkbox} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"similarity = require('https://bundle.run/compute-cosine-similarity@1.0.0')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":219,"value":"function distance(a, b) {\n // from https://developer.hyvor.com/js-euclidean-distance\n return a\n .map((x, i) => Math.abs( x - b[i] ) ** 2) // square the difference\n .reduce((sum, now) => sum + now) // sum\n ** (1/2)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"FontFaceObserver = require('https://bundle.run/fontfaceobserver@2.1.0')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"_ = require('lodash@4.17.14/lodash.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 31:"$30:body"