31:[{"id":"edfcd83519b042922c517bc17529e6a6be78401062d64ce07d99ae4dadfc178e3b2b811aa118d020544908db6a9c759a5ac96b472e99ce78c0b253571707b9ba","href":"https://static.observableusercontent.com/files/edfcd83519b042922c517bc17529e6a6be78401062d64ce07d99ae4dadfc178e3b2b811aa118d020544908db6a9c759a5ac96b472e99ce78c0b253571707b9ba","name":"image.png","type":"image/png","lastModified":1695450099306.229,"size":31156},{"id":"ec4d66336371e6fe1fb2b85ae61b63b43a2a88773dd53d861930daa234ee7d8fee49a3a8040ccecc83448d850d9c6d6bdd5f5dae76a0e6bc0c2aee2db635399f","href":"https://static.observableusercontent.com/files/ec4d66336371e6fe1fb2b85ae61b63b43a2a88773dd53d861930daa234ee7d8fee49a3a8040ccecc83448d850d9c6d6bdd5f5dae76a0e6bc0c2aee2db635399f","name":"codebar-logo-square.png","type":"image/png","lastModified":1695615444707.247,"size":2361}] 2f:{"title":"Functional JavaScript: QR Codes and Callbacks","cells":[{"id":0,"value":"# Functional JavaScript: QR Codes and Callbacks","pinned":false,"hidden":false,"mode":"md"},{"id":1921,"value":"viewof url = Inputs.text({ label: 'url', value: 'https://codebar.io/' })","pinned":false,"hidden":false,"mode":"ojs"},{"id":348,"value":"qrCode = qr(url)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2190,"value":"## Higher-order functions","pinned":false,"hidden":false,"mode":"md"},{"id":2209,"value":"A higher-order function can accept another function (a “callback” function) as an argument...","pinned":false,"hidden":false,"mode":"md"},{"id":1765,"value":"// className gives a CSS \"class\" to the parent HTML element, which can be used to visually style it\nfunction renderWithCallback(qrCode, renderCellCallback, className) {\n let renderRow = renderRowWith(renderCellCallback)\n let allRows = qrCode.map(renderRow)\n\n return html`

${allRows}

`\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2211,"value":"...or it can return a new function, customized with the scope of its parent (e.g. arguments passed to the parent are also available within the returned function).\n\nHere, `renderRowWith` takes a callback function `renderCellCallback` as an argument, then returns a new function `renderRow`, which in turn passes `renderCellCallback` as an argument to `row.map(...)`.","pinned":false,"hidden":false,"mode":"md"},{"id":1926,"value":"function renderRowWith(renderCellCallback) {\n return function renderRow(row, rowIndex) {\n function renderCellCallbackWithCoordinates(bool, columnIndex) {\n return renderCellCallback(bool, columnIndex, rowIndex)\n }\n \n return html`

${row.map(renderCellCallbackWithCoordinates)}

`\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2193,"value":"## Cell-rendering callback functions","pinned":false,"hidden":false,"mode":"md"},{"id":2251,"value":"function toDot(bool) {\n return bool ? '.' : ' '\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":318,"value":"function toHanZi(bool) {\n return bool ? '繁' : '　'\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":332,"value":"function toEmoji(bool) {\n return bool ? '🟩' : '🟨'\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2081,"value":"function toHtmlCell(bool) {\n let color = bool ? 'black' : 'white'\n \n return html``\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2357,"value":"## Function returned from a higher-order function as a callback","pinned":false,"hidden":false,"mode":"md"},{"id":2345,"value":"function toHtmlCellWithHsl(getHslCallback) {\n return function toHtmlCell(bool, columnIndex, rowIndex) {\n // hue, saturation, luminosity\n // https://en.wikipedia.org/wiki/HSL_and_HSV\n let [hue, saturation, luminosity] = getHslCallback(bool, columnIndex, rowIndex)\n \n let color = `hsl(${hue}deg ${saturation}% ${luminosity}%)`\n \n return html``\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2144,"value":"function randomColor(bool) {\n return [Math.random() * 360, 100, bool ? 25 : 85]\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2336,"value":"function rainbow(bool, columnIndex, rowIndex) {\n return [12 * (columnIndex + rowIndex), 100, bool ? 25 : 85]\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2573,"value":"html`${form} ${c.canvas}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2404,"value":"function colorFromImage(ctx) {\n return function colorFromCell(bool, columnIndex, rowIndex) {\n let hue = 0\n let saturation = 0\n let lightness = bool ? 0 : 100\n \n if (ctx) {\n let [r, g, b] = ctx.getImageData(columnIndex, rowIndex, 1, 1).data\n \n let [_hue, _saturation, _lightness] = rgbToHue(r, g, b)\n \n if (Number.isNaN(_hue)) {\n hue = 0\n } else {\n hue = _hue\n saturation = Math.min(_saturation * 500, 100)\n lightness = bool ? 25 : 85\n }\n }\n \n return [hue, saturation, lightness]\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2227,"value":"## Results","pinned":false,"hidden":false,"mode":"md"},{"id":2255,"value":"renderWithCallback(qrCode, toDot, 'dots')","pinned":true,"hidden":false,"mode":"ojs"},{"id":1784,"value":"renderWithCallback(qrCode, toHanZi, 'hanzis')","pinned":true,"hidden":false,"mode":"ojs"},{"id":1769,"value":"renderWithCallback(qrCode, toEmoji, 'emojis')","pinned":true,"hidden":false,"mode":"ojs"},{"id":2094,"value":"renderWithCallback(qrCode, toHtmlCell)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2704,"value":"renderWithCallback(qrCode, toHtmlCellWithHsl(rainbow))","pinned":true,"hidden":false,"mode":"ojs"},{"id":2342,"value":"renderWithCallback(qrCode, toHtmlCellWithHsl(randomColor))","pinned":true,"hidden":false,"mode":"ojs"},{"id":2366,"value":"renderWithCallback(qrCode, toHtmlCellWithHsl(colorFromImage(ctx)))","pinned":true,"hidden":false,"mode":"ojs"},{"id":2232,"value":"## Utility functions and imports","pinned":false,"hidden":false,"mode":"md"},{"id":2542,"value":"function rgbToHue(r, g, b) {\n // If all of r, g, b are equal, this function will return NaN (Not a Number)!\n // That's because (g - b) will be 0, and (max - min) will also be 0, so you get\n // 0 divided by 0.\n r /= 255\n g /= 255\n b /= 255\n \n let max = Math.max(r, g, b)\n let min = Math.min(r, g, b)\n\n let luminosity = max - min\n\n let saturation = luminosity < 0.5\n ? luminosity / (max + min)\n : luminosity / (2 - luminosity)\n \n let _hue = max === r\n ? (g - b) / luminosity\n : max === g\n ? 2 + (b - r) / luminosity\n : 4 + (r - g) / luminosity\n\n // NaN can be useful, because any further calculations you do with it still result\n // in NaN (e.g. NaN * 60 is still NaN). You don't need to catch errors separately,\n // as long as you remember to handle the case where the function returns NaN!\n return [_hue * 60, saturation, luminosity]\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2070,"value":"qr = (await import(\"https://esm.sh/headless-qr@1.0.3\")).qr","pinned":false,"hidden":false,"mode":"ojs"},{"id":2309,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":2559,"value":"c = {\n try {\n let img = new Image()\n let url = URL.createObjectURL(await image.blob())\n img.src = url\n await img.decode()\n \n let naturalWidth = img.naturalWidth\n let naturalHeight = img.naturalHeight\n \n let bitmap = await createImageBitmap(img, 0, 0, naturalWidth, naturalHeight, {\n resizeWidth: qrCode.length,\n resizeHeight: qrCode.length,\n })\n \n let canvas = document.createElement('canvas')\n canvas.width = canvas.height = qrCode.length\n let ctx = canvas.getContext(\"2d\")\n \n ctx.drawImage(bitmap, 0, 0)\n \n return { canvas, ctx }\n } catch {\n return {}\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2561,"value":"ctx = c.ctx","pinned":true,"hidden":false,"mode":"ojs"},{"id":2360,"value":"form = {\n let fa = FileAttachment(\"codebar-logo-square.png\")\n\n let dt = new DataTransfer()\n dt.items.add(new File([await fa.blob()], fa.name, { type: fa.mimeType }))\n\n let form = Inputs.file({\n label: 'image (upload file)',\n })\n\n let input = form.querySelector('input[type=file]')\n console.log(fa)\n input.files = dt.files\n\n form.value = fa\n \n return form\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2578,"value":"viewof image = form","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}