2c:null 2d:["$","title",null,{"children":"Sort font characters by percent of black pixels | Grant Custer | Observable"}] 32:T4d8,{ let canvasi = 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, 'percent').reverse() 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 })}

` // return html`${canvasi}` }33:[] 30:{"id":"c3b506f8289d7ecd","slug":"sort-font-characters-by-percent-of-black-pixels","title":"Sort font characters by percent of black pixels","thumbnail":"7d18f9c03a2df84b1189b41bafe8a89f983c27a691af1b7a35deb3ada21ba3aa","access_level":"public","create_time":"$D2019-07-11T23:16:23.506Z","update_time":"$D2019-07-16T21:05:05.896Z","view_time":null,"first_public_time":"$D2019-07-12T00:21:54.506Z","fork":{"id":"6bc30d30834eaded","slug":"ascii-art-me","title":"Responsive ASCII art me","owner":{"id":"bf2c1edd2a33aa1b","login":"grantcuster","name":"Grant Custer"}},"stars":2,"starred":false,"owner":{"type":"team","id":"bf2c1edd2a33aa1b","login":"grantcuster","name":"Grant Custer","avatar_url":"https://avatars-next.observableusercontent.com/10eebb9a620b6b833738fb495f94fb682bcdc3270b247a9a8aef575ed0702c48","tier":"starter_2024"},"version":464,"publish_version":464,"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":false,"trashed":false,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"title":"Sort font characters by percent of black pixels","cells":[{"id":430,"value":"md`# Sort font characters by percent of black pixels\n\nGoing to try using this for some ASCII art. It uses HTML canvas to count the percent of pixels that are black. It would need some adjustments for a non-monospace font.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":407,"value":"viewof lettersi = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":324,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":152,"value":"md`## Font`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"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":292,"value":"font = 'IBM Plex Mono'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":295,"value":"font_size = 16","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":298,"value":"line_height = 1.5","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":455,"value":"html`

font

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":224,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"mutable font_loaded = false","pinned":true,"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":16,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":461,"value":"font.replace(/ /g,'+')","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":true,"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"}],"files":"$W33","stdlib":"1","titling":"auto"}} 31:"$30:body"