2b:null 2c:["$","title",null,{"children":"Text portraits | Grant Custer | Observable"}] 31:T4d4,{ let canvasi = _.uniq(lettersi.split('')).map(l => { let canvas = document.createElement('canvas') let fs = font_size * 8 let height = fs * line_height let width = ratio * height canvas.width = width canvas.height = height let ctx = canvas.getContext('2d') ctx.font = `${fs}px ${font}` ctx.fillText(l,0, height - (height - fs)) 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 = ons.length / vals.length return {canvas: canvas, percent: percent} }) let sorted = _.sortBy(canvasi, function(v) { return 1 - v.percent }) return html`

${sorted.map(c => { let parent = document.createElement('div') parent.style.float = 'left' parent.style.width = '140px' parent.style.marginRight = '10px' parent.appendChild(c.canvas) let text = document.createElement('div') text.innerText = Math.round(c.percent * 100 * 10000)/10000 + '%' parent.appendChild(text) return parent })}

` }32:[] 2f:{"id":"f34cc8a37af9d1eb","slug":"text-portraits","title":"Text portraits","thumbnail":"f0b9ef3d7c926702af07ffcebc22603dfe12955c5e1f00e887edab8f1c8c5a3d","access_level":"public","create_time":"$D2019-07-12T00:30:58.310Z","update_time":"$D2019-07-25T16:53:10.837Z","view_time":null,"first_public_time":"$D2019-07-13T21:30:31.579Z","fork":{"id":"c3b506f8289d7ecd","slug":"sort-font-characters-by-percent-of-black-pixels","title":"Sort font characters by percent of black pixels","owner":{"id":"bf2c1edd2a33aa1b","login":"grantcuster","name":"Grant Custer"}},"stars":4,"starred":false,"owner":{"type":"team","id":"bf2c1edd2a33aa1b","login":"grantcuster","name":"Grant Custer","avatar_url":"https://avatars-next.observableusercontent.com/10eebb9a620b6b833738fb495f94fb682bcdc3270b247a9a8aef575ed0702c48","tier":"starter_2024"},"version":1013,"publish_version":1013,"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":"Text portraits","cells":[{"id":838,"value":"md`# Text portraits\n\nASCII art generated from an image using only the characters from the text box.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":844,"value":"md`## Image and text portrait`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":719,"value":"{ \n let sliced = []\n for (let i=0; i 800 ? '1fr 1fr' : '1fr'\n \n let image_show = document.createElement('div')\n image_show.style.maxWidth = 400 + 'px'\n image_show.appendChild(image)\n \n holder.append(image_show)\n \n let div = document.createElement('div')\n div.className = 'custom-font'\n div.style.fontSize = font_size + 'px'\n div.style.lineHeight = line_height\n div.style.whiteSpace = 'pre'\n div.innerHTML = sliced.map(s => s.map(l => l.letter).join('')).join('\\n')\n \n holder.append(div)\n \n return holder\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":747,"value":"viewof lettersi = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":853,"value":"md`${lettersi.length} letters / ${combined.length} pixels`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":822,"value":"md`## Choose image`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":467,"value":"viewof image = imageInput({\n crossOrigin: \"anonymous\",\n initialUrl: \"https://avatars0.githubusercontent.com/u/679386\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":834,"value":"md`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":867,"value":"md`## Process`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":459,"value":"aspect = image.width/image.height","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":872,"value":"md`### Rescaled image`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":478,"value":"canvas_image = {\n const canvas = document.createElement(\"canvas\");\n\n canvas.width = target_width;\n canvas.height = target_height;\n\n const ctx = canvas.getContext(\"2d\");\n\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(image, 0, 0, target_width, target_height);\n\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":476,"value":"image_data = {\n let ctx = canvas_image.getContext(\"2d\");\n let image_data = ctx.getImageData(0, 0, canvas_image.width, canvas_image.height);\n return image_data;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":884,"value":"md`### Grayscale scaled image with letters`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":740,"value":"{ \n let sliced = []\n for (let i=0; i `

${s.map(c => `

${c.letter}

`).join('')}

`)}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":949,"value":"md`### Text sorted by coverage`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":953,"value":"html`

${_.orderBy(combined.filter(o => o.letter_index !== null), 'val', 'asc').map(c => c.letter).join('')}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":888,"value":"md`### Sort pixels by luminance`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1009,"value":"contrast_set = 50","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":677,"value":"pixeled = {\n let size = 256;\n\n let clone = new ImageData(\n new Uint8ClampedArray(image_data.data),\n target_width,\n target_height\n );\n \n // https://www.dfstudios.co.uk/articles/programming/image-programming-algorithms/image-processing-algorithms-part-5-contrast-adjustment/\n let contrast = (259 * (contrast_set + 255)) / (255 * (259 - contrast_set))\n \n let data = clone.data;\n let chars = []\n for (var i = 0; i < data.length; i += 4) {\n let r = data[i];\n let g = data[i + 1];\n let b = data[i + 2];\n // let a = data[i + 3];\n // https://stackoverflow.com/a/596241/8691291\n let luma = 0.299 * r + 0.587 * g + 0.114 * b;\n let cluma = contrast * (luma - 128) + 128\n chars.push({ index: i/4, val: cluma })\n }\n \n return _.orderBy(chars, 'val', 'asc')\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":892,"value":"md`### Sort letters by area covered (more below)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":706,"value":"lettered = {\n let valed = lettersi.split('').map((l,i) => { return { letter: l, val: lookup[l], letter_index: i }})\n return _.orderBy(valed, 'val', 'desc')\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":899,"value":"md`### Pair up sorted pixels and sorted letters`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":715,"value":"combined = {\n let com = pixeled.map((o,i) => {\n let letter = lettered[i] !== undefined ? lettered[i].letter : ' '\n let percent = lettered[i] !== undefined ? lettered[i].val : 0\n let letter_index = lettered[i] !== undefined ? lettered[i].letter_index : null\n return Object.assign({}, o, { letter, percent, letter_index })\n })\n return _.orderBy(com, 'index', 'asc')\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":896,"value":"md`### Sizing the image`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":753,"value":"target_pixel_width = Math.min(width, 400)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":480,"value":"target_width = Math.floor(target_pixel_width/(ratio * font_size * line_height))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":482,"value":"target_height = Math.round(target_width * ratio / aspect) * 1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":469,"value":"md`## Sorting used characters by area covered`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":324,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":904,"value":"md`### Make a lookup object`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":452,"value":"lookup = {\n let unique = _.uniq(lettersi.split(''))\n let canvasi = unique.map(l => {\n let canvas = document.createElement('canvas')\n let fs = font_size * 8\n let height = fs * line_height\n let width = ratio * height\n canvas.width = width\n canvas.height = height\n let ctx = canvas.getContext('2d')\n ctx.font = `${fs}px ${font}`\n ctx.fillText(l,0, height - (height - fs))\n let data = ctx.getImageData(0,0,width,height).data\n \n let vals = []\n for (let i = 0; i < data.length; i += 4) {\n // check alpha\n let a = data[i + 3]\n let val = a > 255 / 2 ? 1 : 0\n vals.push(val)\n }\n let ons = vals.filter(v => v === 1)\n let percent = ons.length / vals.length\n return {canvas: canvas, percent: percent, letter: l}\n })\n \n let sorted = _.sortBy(canvasi, (v) => 1 - v.percent)\n \n let lookup = {}\n for (let i=0; ifont test`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":224,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"mutable font_loaded = false","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":730,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":770,"value":"md`## Libraries`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":996,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"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":394,"value":"_ = require('lodash@4.17.14/lodash.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":611,"value":"import {radio, range} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":647,"value":"import {fileInput, imageInput} from \"@mbostock/file-input\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"