2b:null 2c:["$","title",null,{"children":"Converting an Image to ASCII | ikesau | Observable"}] 31:[{"id":"8508ddff986b931a3306a2ce9dd28a434503678558aad13c5dfc71bd432b7c77f16df5c90fd80c9c63f7030cc9ec3cf581a91e594aca399eef03857814662909","href":"https://static.observableusercontent.com/files/8508ddff986b931a3306a2ce9dd28a434503678558aad13c5dfc71bd432b7c77f16df5c90fd80c9c63f7030cc9ec3cf581a91e594aca399eef03857814662909","name":"beetle.png","type":"image/png","lastModified":1684079879185.359,"size":262093},{"id":"ef22638c64d03e4fff807972f0df6f04c56d54f21d9910b116cc65ec56871d6d893b2f737947de6be1858592361f7f29bdc45b39bde21d04a28082d490c685b9","href":"https://static.observableusercontent.com/files/ef22638c64d03e4fff807972f0df6f04c56d54f21d9910b116cc65ec56871d6d893b2f737947de6be1858592361f7f29bdc45b39bde21d04a28082d490c685b9","name":"A.png","type":"image/png","lastModified":1684155805650.017,"size":3995}] 2f:{"id":"a14571a5f3c6ca56","slug":"image-to-ascii","title":"Converting an Image to ASCII","thumbnail":"72bab7da246f659f010bd75aa6d4879b5dce7057cbf267ae284730b5f474f7be","access_level":"public","create_time":"$D2023-05-10T16:14:22.297Z","update_time":"$D2023-05-15T17:15:13.859Z","view_time":null,"first_public_time":"$D2023-05-10T16:14:22.297Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"2299edab1244ee80","login":"ikesau","name":"ikesau","avatar_url":"https://avatars-next.observableusercontent.com/2c9b79e1f724e178262a9c61abb970dde273f055a54014ae9aef6c5c298882aa","tier":"starter_2024"},"version":1432,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"b7d57f3cb9c3785b","login":"ikesau","name":"ikesau","avatar_url":"https://avatars-next.observableusercontent.com/2c9b79e1f724e178262a9c61abb970dde273f055a54014ae9aef6c5c298882aa","tier":null}],"members":[{"type":"individual","id":"b7d57f3cb9c3785b","login":"ikesau","name":"ikesau","avatar_url":"https://avatars-next.observableusercontent.com/2c9b79e1f724e178262a9c61abb970dde273f055a54014ae9aef6c5c298882aa","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":0,"collection":{"id":"4ce30f2489e1d8c4","slug":"nice-ones","title":"nice ones","owner":{"id":"2299edab1244ee80","login":"ikesau","name":"ikesau"}},"type":"notebook","body":{"title":"Converting an Image to ASCII","cells":[{"id":0,"value":"# Converting an Image to ASCII\n\nFor computers, a black-and-white image is just a long list of numbers ranging from [0 to 255](https://en.wikipedia.org/wiki/8-bit_computing). \n\n0 is black.\n\n255 is white.\n\nEverything in-between is a shade of grey.\n\nThe printable portion of the [ASCII](https://en.wikipedia.org/wiki/ASCII) character set is a list of 95 unique glyphs.\n\nA glyph is something like the lower-case letter `\"a\"`, the upper-case letter `\"A\"`, or a punctuation mark like `\"?\"`.\n\nWhen we draw a glyph, some amount of the space it occupies is filled in. The other amount is blank.\n\nWe can use this fraction of blank pixels to calculate the average lightness of the glyph.\n\nTake this very low resolution [bitmap](https://en.wikipedia.org/wiki/Computer_font#BITMAP) `\"A\"` glyph:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1229,"value":"slash = FileAttachment(\"A.png\").image({ width: 256 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1239,"value":"There are 38 white pixels and 26 black pixels.\n\n`38 / 64 = 0.60`\n\nOr, represented as a value between 0 and 255 \n\n`0.60 * 255 = 153`\n\nWhich, as a shade of grey, looks like:\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1252,"value":"{\n const context = DOM.context2d(256, 256);\n context.fillStyle = \"hsl(0, 0%, 60%)\";\n context.fillRect(0, 0, 256, 256);\n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1258,"value":"And this is the gist of what we'll be doing for the rest of the article. 😎","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1250,"value":"# Choices, choices\n\nWithout getting too bogged-down in typography, we'll be using a monospace typeface so that the height and width of the rectangle we're drawing in remains the same for each glyph. Typefaces that aren't monospaced (like this text that you're reading right now) use different widths for each glyph to make them easier to read.\n\nThis isn't ideal for calculating an average based on area that we can compare to other characters though, so monospace it is.\n\nComputer operating systems come with default monospace typefaces, though nowadays we're no longer using bitmaps like that `\"A\"` we used earlier.\n\nThe salient difference between bitmaps and vector fonts is that it's no longer feasible to manually count the number of pixels that are black vs. white, so we'll start using code to do that for us.\n\nFirst, here's a list of those 95 printable ASCII characters:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":99,"value":"asciiArray = {\n let ascii = [];\n // first 32 are non-printable control characters e.g. null, newline\n for (let i = 32; i < 127; ++i) {\n ascii.push(String.fromCharCode(i));\n }\n return ascii;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":918,"value":"You can use the slider below to change which one is currently selected and drawn to the canvas. Note how these glyphs are much smoother and more curved than the bitmap.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":312,"value":"viewof characterIndex = Inputs.range([0, asciiArray.length - 1], {\n value: 1,\n step: 1,\n label: \"Character index\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":943,"value":"### Character","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":144,"value":"renderCharacter(asciiArray.at(characterIndex))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1264,"value":"Behind the scenes (I'm not going to attempt to explain most of the code in this article), a function is doing exactly what we did above: iterating through every pixel, counting the number of white ones, and dividing that by the total number of pixels.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":940,"value":"### Average lightness","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":417,"value":"renderEquivalentValue(asciiArray.at(characterIndex))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":946,"value":"# Contrast","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":830,"value":"Here's a histogram plot of the frequency of each lightness. \n\nAs you can see, lightness can go all the way up to `255` with an empty space, but at lowest, it only goes down to `159` with the capital letter `\"N\"`.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":555,"value":"histogramAsciiSortedByLightness(asciiSortedByLightness)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":840,"value":"This is a very limited range of contrast. Imagine if you suddenly lost 60% of your light sensitivity!\n\nWe want to remap this data so that we can use the `\"N\"` glyph to represent pitch black.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":954,"value":"function linearTransform(value, min, max) {\n return Math.round((value - min) * (max / (max - min)));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":967,"value":"A linear transformation like this is saying \"I have a range between 150 and 255, but I want this range represented from 0 to 255 instead.\"\n\nApplying this transformation to our lightness data, we now get the exact same distribution, but over a wider domain. \n\nWe haven't actually changed anything about how dark an `\"N\"`_actually_ is. It's like a rubber band - we haven't added more rubber, we've only stretched it.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":853,"value":"histogramAsciiSortedByLightness(rescaledAsciiSortedByLightness)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":855,"value":"# Doing something\n\nNow that we have a list of each ASCII character and its equivalent lightness, we can take black-and-white images and swap out each pixel with ASCII.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1034,"value":"Let's try a quick proof of concept first. Given a single value of grey, can we create a grid of ASCII characters that most-closely resembles the shade?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1036,"value":"viewof greyValue = Inputs.range([0, 255], { value: 127, step: 1 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1038,"value":"{\n const context = DOM.context2d(200, 200);\n const lightnessAsPercentage = Math.floor(greyValue / 2.55);\n context.fillStyle = `HSL(0, 0%, ${lightnessAsPercentage}%, 1)`;\n context.fillRect(0, 0, 200, 200);\n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1063,"value":"closestCharacter = mapLightnessToNearestAsciiCharacter([greyValue])[0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1079,"value":"renderGridOfCharacters(closestCharacter)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1092,"value":"It's not perfect, but we can still see that a grid of `\"N\"`'s is the darkest the square gets, and that the grid gradually gets lighter as we brighten the target value.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1094,"value":"Now let's try doing the same thing, but instead of sampling a single shade of grey, let's sample an entire image.\n\ne.g. this beetle.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":655,"value":"// Source: George Chernilevsky, https://commons.wikimedia.org/wiki/File:Oryctes_nasicornis_male_2012_G1.jpg\nbeetle = FileAttachment(\"beetle.png\").image()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1273,"value":"beetle.height * beetle.width","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1098,"value":"First let's resample the image down to a lower resolution so we don't have to convert 666,000 pixels to ASCII.\n\nWe can do this because the ASCII rendering is so low fidelity anyway. It doesn't really matter if we're losing information.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":672,"value":"viewof imageScaleFactor = Inputs.range([2, 10], {\n value: 5,\n step: 1,\n label: \"Resample factor (larger factor = smaller image)\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":745,"value":"setImageInContext(beetle).canvas","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1106,"value":"Now we can iterate through each pixel in this image and calculate its average lightness. This is slightly different for a colour image because we're not just counting if the pixel is black or white. \n\nThere's lots of [different ways of doing this](https://en.wikipedia.org/wiki/Grayscale), but one simple strategy is to average the shade of the pixel itself by adding up its red, blue, and green channels, then dividing them by 3.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1164,"value":"viewof red = Inputs.range([0, 255], { label: \"red\", value: 220, step: 1 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1167,"value":"viewof green = Inputs.range([0, 255], { label: \"green\", value: 100, step: 1 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1169,"value":"viewof blue = Inputs.range([0, 255], { label: \"blue\", value: 150, step: 1 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1109,"value":"examplePixel = [red, green, blue]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1195,"value":"averageLightness = Math.floor(examplePixel.reduce((a, b) => a + b) / 3 / 2.55)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1113,"value":"{\n const context = DOM.context2d(100, 100);\n var hexColor = eightBitToHex(examplePixel);\n context.fillStyle = `${hexColor}`;\n context.fillRect(0, 0, 100, 100);\n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1132,"value":"{\n const context = DOM.context2d(100, 100);\n const lightness = Math.floor(examplePixel.reduce((a, b) => a + b) / 3 / 2.55);\n context.fillStyle = `HSL(0, 0%, ${lightness}%, 1)`;\n context.fillRect(0, 0, 100, 100);\n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1282,"value":"{\n const character = mapLightnessToNearestAsciiCharacter([\n averageLightness * 2.55\n ])[0];\n const context = DOM.context2d(100, 100, 1);\n\n context.font = `100px monospace`;\n context.textBaseline = \"top\";\n context.textAllign = \"center\";\n context.fillText(character, 15, 0);\n\n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1180,"value":"Now we're basically there! I'm breezing through this part because it's a beautiful day outside, but basically:\n\nWe iterate through every pixel on that resampled beetle photo, calculate its lightness, find the corresponding ASCII glyph, and re-render it! 🥳","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":826,"value":"renderImageAsAscii(beetle)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1308,"value":"And if you'd like to convert a photo of your own...","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1310,"value":"viewof userImage = Inputs.file({ label: \"Your own image\", accept: \".png,.jpg\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1368,"value":"viewof userImageScaleFactor = Inputs.range([2, 10], {\n label: \"Resample factor (larger factor = smaller image)\",\n value: 5,\n step: 1\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1314,"value":"{\n if (userImage) {\n return userImage.image().then((image) => {\n return renderImageAsAscii(image, userImageScaleFactor);\n });\n } else {\n return md``;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1213,"value":"Okay Bye! ☀️","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":882,"value":"___\n## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":262,"value":"fontSize = 100","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":845,"value":"rescaledAsciiSortedByLightness = rescaleArray(\n asciiSortedByLightness.map((x) => x.lightness)\n).map((newValue, i) => ({ ...asciiSortedByLightness[i], lightness: newValue }))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":718,"value":"// Convert to an array of numbers for a more straight-forward binary search implementation\nasciiLightnessArray = rescaledAsciiSortedByLightness.map(\n ({ lightness }) => lightness\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":714,"value":"lightnessToCharacterMap = new Map(\n rescaledAsciiSortedByLightness.map(({ value, lightness }) => [\n lightness,\n value\n ])\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":685,"value":"function mapLightnessToNearestAsciiCharacter(data) {\n return data\n .map((value) => binarySearch(asciiLightnessArray, value))\n .map((lightness) => lightnessToCharacterMap.get(lightness));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":667,"value":"function getLightnessPerPixel(imageData) {\n const lightnessData = new Array(imageData.length / 4);\n\n for (let i = 0, j = 0; i < imageData.length; i += 4, j++) {\n const r = imageData[i];\n const g = imageData[i + 1];\n const b = imageData[i + 2];\n\n const max = Math.max(r, g, b);\n const min = Math.min(r, g, b);\n\n const lightness = (max + min) / 2;\n\n lightnessData[j] = lightness;\n }\n\n return lightnessData;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":747,"value":"function setImageInContext(image, scaleFactor = imageScaleFactor) {\n const width = image.width / scaleFactor;\n const height = image.height / scaleFactor;\n const context = DOM.context2d(width, height, 1);\n context.drawImage(image, 0, 0, width, height);\n return context;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":656,"value":"function getImageDataFromImageFile(image, scaleFactor = imageScaleFactor) {\n const context = setImageInContext(image, scaleFactor);\n return context.getImageData(0, 0, context.canvas.width, context.canvas.height)\n .data;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":738,"value":"function renderImageAsAscii(image, scaleFactor = imageScaleFactor) {\n const screenWidth = width;\n const imageContext = setImageInContext(image, scaleFactor);\n const imageWidth = imageContext.canvas.width;\n const imageHeight = imageContext.canvas.height;\n const screenHeight = (imageHeight / imageWidth) * screenWidth;\n const scale = screenWidth / imageWidth;\n\n const asciiCharactersForImage = mapLightnessToNearestAsciiCharacter(\n getLightnessPerPixel(getImageDataFromImageFile(image, scaleFactor))\n );\n\n const context = DOM.context2d(screenWidth, screenHeight);\n context.font = `${scale}px monospace`;\n for (let y = 0; y < imageHeight; ++y) {\n for (let x = 0; x < imageWidth; ++x) {\n const character = asciiCharactersForImage[x + y * imageWidth];\n context.fillText(character, x * scale, y * scale);\n }\n }\n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":412,"value":"// render a rect with the same average lightness as the ASCII character\nfunction renderEquivalentValue(character) {\n const width = getCharacterWidth(character);\n const context = DOM.context2d(width, fontSize);\n const lightness = measureCharacterLightness(character);\n const lightnessAsPercentage = Math.floor(lightness / 2.55);\n\n context.fillStyle = `HSL(0, 0%, ${lightnessAsPercentage}%, 1)`;\n context.fillRect(0, 0, width, fontSize);\n\n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":850,"value":"function histogramAsciiSortedByLightness(data) {\n return Plot.plot({\n y: { grid: true },\n marks: [\n Plot.rectY(\n data,\n Plot.binX(\n { y: \"count\" },\n {\n x: \"lightness\",\n thresholds: 16,\n fill: (d) => `hsl(0, 0%, ${Math.floor(d.lightness / 2.55)}%)`\n // uncomment this to see what i mean\n // , stroke: \"#333\"\n }\n )\n ),\n // marking again to get a stroke without bordering each bin\n Plot.rectY(\n data,\n Plot.binX(\n { y: \"count\" },\n {\n x: \"lightness\",\n thresholds: 16,\n stroke: \"#333\"\n }\n )\n ),\n Plot.ruleY([0])\n ]\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":683,"value":"function binarySearch(array, value) {\n let left = 0;\n let right = array.length - 1;\n\n while (left < right) {\n const mid = left + Math.floor((right - left) / 2);\n\n if (array[mid] === value) {\n return array[mid];\n } else if (array[mid] < value) {\n left = mid + 1;\n } else {\n right = mid;\n }\n }\n\n // At this point, left should be the closest index to value,\n // but we need to check if left-1 or left+1 are closer.\n if (\n left > 0 &&\n Math.abs(array[left - 1] - value) < Math.abs(array[left] - value)\n ) {\n return array[left - 1];\n } else if (\n left < array.length - 1 &&\n Math.abs(array[left + 1] - value) < Math.abs(array[left] - value)\n ) {\n return array[left + 1];\n } else {\n return array[left];\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":125,"value":"function measureCharacterLightness(character) {\n const width = getCharacterWidth(character);\n const context = setCharacterInContext(character);\n\n const imageData = context.getImageData(0, 0, width, fontSize).data;\n const pixelCount = imageData.length / 4;\n\n let alphaSum = 0;\n for (let i = 0; i < imageData.length; i += 4) {\n const alpha = imageData[i + 3];\n alphaSum += alpha;\n }\n const averageAlpha = alphaSum / pixelCount;\n return 255 - averageAlpha;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":842,"value":"function rescaleArray(array) {\n const minValue = Math.min(...array)\n return array.map((value) => {\n // Linear transform\n let newValue = (value - minValue) * (255 / (255 - minValue));\n return Math.min(255, Math.max(0, newValue));\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":467,"value":"asciiSortedByLightness = asciiArray\n .map((char) => ({ value: char, lightness: measureCharacterLightness(char) }))\n .sort(({ lightness: a }, { lightness: b }) => a - b)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":255,"value":"function getCharacterWidth(character) {\n const canvas = document.createElement(\"canvas\");\n const context = canvas.getContext(\"2d\");\n context.font = `${fontSize}px monospace`;\n const textWidth = context.measureText(character).width;\n return textWidth;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":140,"value":"function setCharacterInContext(character) {\n const width = getCharacterWidth(character);\n const context = DOM.context2d(width, fontSize, 1);\n\n context.font = `${fontSize}px monospace`;\n context.textBaseline = \"top\";\n context.fillText(character, 0, 0);\n\n return context;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":309,"value":"function renderCharacter(character) {\n return setCharacterInContext(character).canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1073,"value":"function renderGridOfCharacters(character) {\n const length = 200;\n const context = DOM.context2d(length, length);\n const fontSize = 8;\n context.font = `${fontSize}px monospace`;\n for (let y = 0; y < length / fontSize; ++y) {\n for (let x = 0; x < length / fontSize; ++x) {\n context.fillText(character, x * fontSize, y * fontSize);\n }\n }\n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1119,"value":"function eightBitToHex(decimalPixel) {\n return (\n \"#\" +\n decimalPixel\n .map((decimalValue) => decimalValue.toString(16).padStart(2, \"0\"))\n .join(\"\")\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"