29:null 2a:["$","title",null,{"children":"Use text/typography to make a picture. | Observable Ambassadors | Observable"}] 2f:T4f8,# Use text/typography to make a picture. #### http://genuary.art - JAN.19 #genuary ## how I did this. For the image I need a small grid size like an 8x8 grid. This could be on a slider to adjust sizing. I want to use a combination of font weight and font colour to define the pixels. So will make one of each technique and one of combined. The idea is to use a grayscale image. The text defines the intensity of the gray scale, so great the weight the brighter the pixel. ## image processing OpenCV can be used to filter blur the image to make pixel colour easier. https://docs.opencv.org/3.4/d5/d0f/tutorial_js_pyramids.html image scaled using a Gaussian Pyramid, could also use https://docs.opencv.org/3.4/dd/d6a/tutorial_js_filtering.html before the resizing Laplacian Pyramids | | | | ----------- | ----------- | |

| | from: [COMPUTER_GRAPHICS_AND_ART_May1976.pdf](http://dada.compart-bremen.de/docUploads/COMPUTER_GRAPHICS_AND_ART_May1976.pdf) | from: [Fritz_Darko_2008_New_Tendencies_Nove_tendencije.pdf](https://monoskop.org/images/a/a6/Fritz_Darko_2008_New_Tendencies_Nove_tendencije.pdf) | 30:T542,# Poetic words I might use “After one look at this planet any visitor from outer space would say 'I want to see the manager.' ” ― William S. Burroughs “Language is a virus from outer space.” ― William S. Burroughs **"What does the money machine eat? It eats youth, spontaneity, life, beauty, and, above all, it eats creativity."** ― William S. Burroughs. **“Visual art and writing don't exist on an aesthetic hierarchy that positions one above the other, because each is capable of things the other can't do at all. Sometimes one picture is equal to 30 pages of discourse, just as there are things images are completely incapable of communicating.”** ― William S. Burroughs --- **“This is the real secret of life -- to be completely engaged with what you are doing in the here and now. And instead of calling it work, realize it is play.”** ― Alan Watts “Life is like music for its own sake. We are living in an eternal now, and when we listen to music we are not listening to the past, we are not listening to the future, we are listening to an expanded present.” ― Alan Watts **“You're under no obligation to be the same person you were 5 minutes ago.”** ― Alan Watts “The only way to make sense of change is to plunge into it, move with it, and join the dance.” ― Alan Watts31:T650,process_image = /* prettier-ignore */ { let inputImage = cv.imread( await FileAttachment("StockSnap_O4PWIY1JPX.jpg").image() ); let inputCanvas = Object.assign( DOM.canvas(inputImage.cols, inputImage.rows), { id: "inputCanvas" } ); let grayCanvas = Object.assign(DOM.canvas(inputImage.cols, inputImage.rows), { id: "grayCanvas" }); cv.imshow(inputCanvas, inputImage); let gray_dst = cv.Mat.zeros(inputImage.cols, inputImage.rows, cv.CV_8UC3); let aspect = inputImage.cols/inputImage.rows let rows = Math.floor(cols/aspect) TeImage.rows = rows let dsize = new cv.Size(cols, rows); // You can try more different parameters cv.resize(inputImage, gray_dst, dsize, 0, 0, cv.INTER_AREA); cv.cvtColor(gray_dst, gray_dst, cv.COLOR_RGBA2GRAY, cv.CV_8UC1); // Convert the input image to grayscale. cv.imshow(grayCanvas, gray_dst); console.log("gray", gray_dst.rows, gray_dst.cols); TeImage.colours.length = 0; // reset output array for (let x = 0; x < gray_dst.rows; x++) { for (let y = 0; y < gray_dst.cols; y++) { let pixel = gray_dst.ucharPtr(x, y); TeImage.colours.push(pixel[0]); } } let pixel = gray_dst.ucharPtr(1, 0); console.log('p0',pixel[0]); inputImage.delete(); gray_dst.delete() const css = "max-width:100%"; inputCanvas.style.cssText += css; grayCanvas.style.cssText += css; return html`

${inputCanvas}

${grayCanvas}

`; }32:[{"id":"fe1bcfe55f1e133f949e50edc355e04fa3d40340f2c28c92ab2a715aa2921ab1b7cbf3f50eb35584518cde099de7eb8b69e661cd3c5959a3cfb365545fdc1a7f","href":"https://static.observableusercontent.com/files/fe1bcfe55f1e133f949e50edc355e04fa3d40340f2c28c92ab2a715aa2921ab1b7cbf3f50eb35584518cde099de7eb8b69e661cd3c5959a3cfb365545fdc1a7f","name":"image.png","type":"image/png","lastModified":1640130722639.316,"size":951310},{"id":"970a0ad35c3763216ac17b3ebc61b1edcb3a17a2938788d276771113e8ff8c9cbd79bbb92839d642e70f308fa6433f58bf1cddb420a5c310711a8aecae361f40","href":"https://static.observableusercontent.com/files/970a0ad35c3763216ac17b3ebc61b1edcb3a17a2938788d276771113e8ff8c9cbd79bbb92839d642e70f308fa6433f58bf1cddb420a5c310711a8aecae361f40","name":"image@1.png","type":"image/png","lastModified":1640130737680.732,"size":2695824},{"id":"6fef71746814aaa2fa47a5eb5c6214f5498001ca20c00b8c1f55514e6e49ea61c45d0871650ec47fa42541287c8bf9157507a0a4d6c899b45030024db3d5c7f1","href":"https://static.observableusercontent.com/files/6fef71746814aaa2fa47a5eb5c6214f5498001ca20c00b8c1f55514e6e49ea61c45d0871650ec47fa42541287c8bf9157507a0a4d6c899b45030024db3d5c7f1","name":"image@2.png","type":"image/png","lastModified":1640680778799.873,"size":114103},{"id":"e9a4a0ce2983f485b270be311b5e103f0d96bbeaa41d62069047981051d7c325457bddd8fe5d0852e5ce1b57116a104e20f65e1999133cefc325a5ddccf3ace9","href":"https://static.observableusercontent.com/files/e9a4a0ce2983f485b270be311b5e103f0d96bbeaa41d62069047981051d7c325457bddd8fe5d0852e5ce1b57116a104e20f65e1999133cefc325a5ddccf3ace9","name":"StockSnap_O4PWIY1JPX.jpg","type":"image/jpeg","lastModified":1640681919868.103,"size":18335002}] 2d:{"id":"f473a29e39a1fbbc","slug":"use-text-typography-to-make-a-picture","title":"Use text/typography to make a picture.","thumbnail":"525915be785c9d9deaa73be28b5869e3ee37f56ed403ba7b67d8609cab9d2d91","access_level":"public","create_time":"$D2021-12-21T23:50:06.353Z","update_time":"$D2022-02-07T13:34:10.677Z","view_time":null,"first_public_time":"$D2022-01-19T09:31:23.741Z","has_unpublished_edits":null,"fork":false,"stars":5,"starred":false,"owner":{"type":"team","id":"11bfeb572ddbe905","login":"ambassadors","name":"Observable Ambassadors","avatar_url":"https://avatars-next.observableusercontent.com/93bf798c058a2bf8d3bb90c0754f774b6278b8b16748784f520b07a8800ef772","tier":"pro_2024"},"version":1242,"publish_version":1242,"role":null,"authored":false,"authors":[{"type":"individual","id":"71df97e2192b6fce","login":"hellonearthis","name":"Brett Cooper","avatar_url":"https://avatars-next.observableusercontent.com/ee05023c4c2a9d53e29a4f85f35e35430ae16d2c4aa6a6ca791175caf667abc2","tier":null}],"members":[{"type":"individual","id":"b71e24965feea6d8","login":"allisonhorst","name":"Allison Horst","avatar_url":"https://avatars-next.observableusercontent.com/323c217177f0f20e4e8ed3aa302fec1408cf22b57cbd726e37e76182d5f82a65","tier":null,"role":"editor"},{"type":"individual","id":"c1daf2951ad616fb","login":"cobus","name":"Cobus Theunissen","avatar_url":"https://avatars-next.observableusercontent.com/4a17a065d7a0f5f9a64a852f7b26a4f875c2ff69eb17264c3bd9f81e69285c05","tier":null,"role":"editor"},{"type":"individual","id":"4530d0072aa49b47","login":"erinn","name":"Erinn Wong","avatar_url":"https://avatars-next.observableusercontent.com/9119ac38e4f1c92d50b28822c47306212f06e085b7d1416e851a1c397194e2d4","tier":null,"role":"editor"},{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null,"role":"editor"},{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null,"role":"editor"},{"type":"individual","id":"07362516b5994994","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":null,"role":"editor"},{"type":"individual","id":"0bb2842b01e0c652","login":"tophtucker","name":"Toph Tucker","avatar_url":"https://avatars-next.observableusercontent.com/3706c31a8f9c59bb716c022c04b9c073144cd1368b78ac85f49139be6c93c34e","tier":null,"role":"editor"},{"type":"individual","id":"dbf69c13a14d2f62","login":"visnup","name":"Visnu Pitiyanuvath","avatar_url":"https://avatars-next.observableusercontent.com/b847c4c49993b1df7599d355f47dc0ad9c2dcf43439ce9e8f3410e6368b3aac9","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":5,"collection":null,"type":"notebook","body":{"title":"Use text/typography to make a picture.","cells":[{"id":0,"value":"$2f","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"$30","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":16,"value":"# MONO variable fonts\n\nI'm using these [Mono fonts](https://fonts.google.com/?category=Monospace&vfonly=true) due to typesetting problems with proportional fonts.\n- [Roboto Mono](https://fonts.google.com/specimen/Roboto+Mono). weight: 100 - 700 \n- [Inconsolata](https://fonts.google.com/specimen/Inconsolata). weight: 200 - 900 \n- [Source Code Pro](https://fonts.google.com/specimen/Source+Code+Pro). weight: 200 - 900 \n- [JetBrains Mono](https://fonts.google.com/specimen/JetBrains+Mono). weight: 100 - 800\n- [Azeret Mono](https://fonts.google.com/specimen/Azeret+Mono). weight: 100 - 900 \n- [Noto Sans Mono](https://fonts.google.com/noto/specimen/Noto+Sans+Mono). weight: 100 - 900","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":161,"value":"# Put the letters in the screen using grid\n\nWith a font height of ${fontHeight}px a font width of ${fontWidth}px is computed `(fontHeight * 0.6)`, 60% of font height. \nThat width used to define the grid width computers like this: ${width}px / ${fontWidth}px = ${cols} characters. \nTo find the number of rows to match the picture aspect I `(input_image height / input_image width) x cols = ` ${TeImage.rows} rows. \n\nThis looks stretched due to the font height not being equal to font width. So I reduce the number of rows by 60%\n- due to that I only need to get data from every other row of the image.\n\n*BUT if I use a font size of 10 it fits with the scale in a kludgy way... even if double height*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":258,"value":"fontHeight = 12 // 10 // 8 looks good byt 16 is good for testing.","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":288,"value":"fontWidth = fontHeight * 0.6 // width ish, works best at 60%","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":321,"value":"cols = ~~(width / fontWidth)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"parseFont = selectedFont.split(\" \").join(\"+\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":441,"value":"text = \"What does the money machine eat? It eats youth, spontaneity, life, beauty, and, above all, it eats creativity.\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1120,"value":"fontWeights = ({\n'Roboto Mono': [100, 700],\n'Inconsolata': [200, 900],\n'Source Code Pro': [200, 900],\n'JetBrains Mono': [100, 800],\n'Azeret Mono': [100, 900],\n'Noto Sans Mono': [100, 900]})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":500,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"viewof selectedFont = Inputs.select(\n [\n \"Roboto Mono\",\n \"Inconsolata\",\n \"Source Code Pro\",\n \"JetBrains Mono\",\n \"Azeret Mono\",\n \"Noto Sans Mono\"\n ],\n {\n label: \"Desired font\",\n value: \"Noto Sans Mono\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":412,"value":"

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"textOutput","database":"$undefined"},{"id":419,"value":"div_image = /* prettier-ignore */ {\n d3.selectAll(\".grid-item\").remove();\n\n let wordlen = text.length;\n let wordIndex = 0;\n\n let tout = d3.select(\"#tout\");\n tout.selectAll('.grid-item').remove();\n\n for (let idx = 0; idx <= cols * TeImage.rows - 1; idx++) {\n\n // look up pixel_colour at colours[idx]\n\n tout\n .append(\"div\")\n .attr(\"class\", \"grid-item\")\n .style(\"color\",`rgb(${TeImage.colours[idx]},${TeImage.colours[idx]},${TeImage.colours[idx] }` )\n .style(\"font-weight\", weightScale(TeImage.colours[idx]))\n .text(text[wordIndex]);\n\n wordIndex = (wordIndex + 1) % wordlen;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1091,"value":"weightScale = d3.scaleLinear().domain([0, 255]).range(fontWeights[selectedFont])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":903,"value":"TeImage = ({ colours: [], rows: 0 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":331,"value":"\n\n \n","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"cssGridStyle","database":"$undefined"},{"id":346,"value":"## Alternative ideas\nUsing font weight with [canvas font](https://www.w3schools.com/tags/canvas_font.asp) \nhttps://www.w3schools.com/tags/playcanvas.asp?filename=playcanvas_fontweight \nhttps://stackoverflow.com/questions/64583689/setting-font-weight-on-canvas-text\n\nThe font size could be calculated using an offscreen canvas.\n\nhttps://developer.mozilla.org/en-US/docs/Web/API/TextMetrics \nhttps://observablehq.com/@mbostock/fit-text-to-circle \nhttps://observablehq.com/@grantcuster/exploring-distance-metrics-to-match-pixels-to-letters ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":169,"value":"# appendix\n\n[Using Google Fonts](https://observablehq.com/@josesho/using-google-fonts) by Joses W. Ho\n\n\n# image used\n\nhttps://stocksnap.io/photo/money-background-O4PWIY1JPX","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":510,"value":"[Get a pixel colour](https://docs.opencv.org/4.x/de/d06/tutorial_js_basic_ops.html#:~:text=3.-,ptr,-Mat%20Type).\n\n```js\nlet row = 3, col = 4;\nlet src = cv.imread(\"canvasInput\");\nlet pixel = src.ucharPtr(row, col);\nlet R = pixel[0];\nlet G = pixel[1];\nlet B = pixel[2];\nlet A = pixel[3];\n```\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":498,"value":"import { cv, handleError, registerFile } from \"@mootari/opencv-js\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 2e:"$2d:body"