29:null 2a:["$","title",null,{"children":"icon skeartch | GnimOay | Observable"}] 2f:T52d,viewof button = Inputs.button( [ [ "white bg mode", () => { mutable modeWhite = true; // const ctx = sketchPad.getContext("2d"); // ctx.strokeStyle = "black"; // ctx.fillStyle = "#ccc"; // ctx.clearRect(0, 0, sketchPad.width, sketchPad.height); // for (let i = 0; i < sketchPad.width; i += sketchPad.width / 24) { // ctx.fillRect(i, 0, 1, sketchPad.height); // for (let j = 0; j < sketchPad.height; j += sketchPad.height / 24) { // ctx.fillRect(0, j, sketchPad.width, 1); // } // } // ctx.fillStyle = "#000"; } ], [ "black bg mode", () => { mutable modeWhite = false; // const ctx = sketchPad.getContext("2d"); // ctx.strokeStyle = "black"; // ctx.fillStyle = "#000"; // ctx.fillRect(0, 0, sketchPad.width, sketchPad.height); // ctx.fillStyle = "#ccc"; // for (let i = 0; i < sketchPad.width; i += sketchPad.width / 24) { // ctx.fillRect(i, 0, 1, sketchPad.height); // for (let j = 0; j < sketchPad.height; j += sketchPad.height / 24) { // ctx.fillRect(0, j, sketchPad.width, 1); // } // } // ctx.fillStyle = "#fff"; } ] ], { label: "controls" } )30:T6cf,{ sketchPad.style.border = "solid 1px black"; const ctx = sketchPad.getContext("2d"); ctx.fillStyle = modeWhite ? "white" : "black"; ctx.fillRect(0, 0, sketchPad.width, sketchPad.height); ctx.strokeStyle = "black"; ctx.fillStyle = "#ccc"; let drawing = false; const gridAmount = 24, gridSize = sketchPad.width / gridAmount; const grid = Array(gridAmount) .fill(modeWhite ? 1 : 0) .map(() => Array(gridAmount).fill(modeWhite ? 1 : 0)); for (let i = 0; i < sketchPad.width; i += sketchPad.width / gridAmount) { ctx.fillRect(i, 0, 1, sketchPad.height); for (let j = 0; j < sketchPad.height; j += sketchPad.height / gridAmount) { ctx.fillRect(0, j, sketchPad.width, 1); } } ctx.fillStyle = modeWhite ? "black" : "white"; sketchPad.addEventListener("pointerdown", (e) => { let sketchVec = []; drawing = true; const gridX = Math.floor(e.layerX / gridSize); const gridY = Math.floor(e.layerY / gridSize); grid[gridY][gridX] = modeWhite ? 0 : 1; ctx.fillRect(gridX * gridSize, gridY * gridSize, gridSize, gridSize); }); window.addEventListener("pointerup", (e) => { drawing = false; mutable sketchVec = grid.flat(); // console.log(grid); }); // sketchPad.addEventListener("pointerout", (e) => { // drawing = false; // mutable sketchVec = grid.flat(); // }); sketchPad.addEventListener("pointermove", (e) => { if (!drawing) return; const gridX = Math.floor(e.layerX / gridSize); const gridY = Math.floor(e.layerY / gridSize); grid[gridY][gridX] = modeWhite ? 0 : 1; ctx.fillRect(gridX * gridSize, gridY * gridSize, gridSize, gridSize); mutable sketchVec = grid.flat(); }); return "drawing implementation"; }31:[{"id":"715db1223e067f00500780077febc6cebbdd90c151d3d78317c802732252052ab0e367039872ab9c77d6ef99e5f55a0724b35ddc898a1c99cb14c31a379af80a","href":"https://static.observableusercontent.com/files/715db1223e067f00500780077febc6cebbdd90c151d3d78317c802732252052ab0e367039872ab9c77d6ef99e5f55a0724b35ddc898a1c99cb14c31a379af80a","name":"penguins.csv","type":"text/csv","lastModified":1694851002300.708,"size":13506},{"id":"2946c92488af75b4f3eb545ab73ea776eaca666063429c41d7f94492f60c4be841c5886fb8f7a0a2936e42bb87ff962834435d99295fd0a62d1af49ceae88a47","href":"https://static.observableusercontent.com/files/2946c92488af75b4f3eb545ab73ea776eaca666063429c41d7f94492f60c4be841c5886fb8f7a0a2936e42bb87ff962834435d99295fd0a62d1af49ceae88a47","name":"akar-icons.json","type":"application/json","lastModified":1694852001251.996,"size":191399}] 2d:{"id":"52391a2738bb19b4","slug":null,"title":"icon skeartch","thumbnail":"a09c5f5cb1e2627a574a9d4f6f4e8c2bdebceecb80877fb9ff67b43961ec8911","access_level":"public","create_time":"$D2023-09-16T07:56:42.300Z","update_time":"$D2024-01-01T05:19:31.081Z","view_time":null,"first_public_time":"$D2023-09-16T07:56:42.300Z","fork":{"id":"9551de4ced039cab","slug":"plot-histogram","title":"Plot: Histogram","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":0,"starred":false,"owner":{"type":"team","id":"26d48fae205ffe62","login":"gnimoay","name":"GnimOay","avatar_url":"https://avatars-next.observableusercontent.com/79b9cc7dde40573c60d0ca1646cec2d280ec0c69bcd5262fb2336627858a40e3","tier":"starter_2024"},"version":673,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"3ffbfa94b6a22199","login":"gnimoay","name":"GnimOay","avatar_url":"https://avatars-next.observableusercontent.com/79b9cc7dde40573c60d0ca1646cec2d280ec0c69bcd5262fb2336627858a40e3","tier":null}],"members":[{"type":"individual","id":"3ffbfa94b6a22199","login":"gnimoay","name":"GnimOay","avatar_url":"https://avatars-next.observableusercontent.com/79b9cc7dde40573c60d0ca1646cec2d280ec0c69bcd5262fb2336627858a40e3","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"icon skeartch","cells":[{"id":4,"value":"# icon skeartch","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":6,"value":"data = FileAttachment(\"penguins.csv\").csv({ typed: true })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"Plot.plot({\n y: {grid: true},\n color: {legend: true},\n marks: [\n Plot.rectY(data, Plot.binX({y: \"count\"}, {x: \"flipper_length_mm\", fill: \"sex\"})),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":82,"value":"## Visualize all icons","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":70,"value":"html`${icons.map((i) => svg`${i.svg}`)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":637,"value":"mutable modeWhite = true","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":655,"value":"## TODO\n- [ ] sub section vector\n- [ ] normalization\n- [ ] brush size","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":566,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":564,"value":"sketchPad = DOM.canvas(480, 480)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":664,"value":"

kkk

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":610,"value":"mutable sketchVec=[]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":540,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":503,"value":"drawVecIcons(\n vecList.toSorted((a, b) => {\n return simple_similarity(sketchVec, a) - simple_similarity(sketchVec, b);\n })\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":468,"value":"w = 32 * 36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":470,"value":"h = 240","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":324,"value":"drawVecIcons(vecList)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":495,"value":"vecList = Promise.all(\n icons.map(async (icon) => await binVecFromSvg(icon.svg, 12, 12))\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":28,"value":"# Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":528,"value":"import { Drawer } from \"@d3/draw-me\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":501,"value":"function drawVecIcons(vecs) {\n const canva = DOM.canvas(w, h);\n const iconSize = 24;\n const iconPerRow = w / iconSize;\n canva.getContext(\"2d\").clearRect(0, 0, w, h);\n const ctx = canva.getContext(\"2d\");\n vecs.forEach(async (vec, idx) => {\n const y = Math.floor(idx / iconPerRow);\n const x = idx - y * iconPerRow;\n drawBinaryImage2Ctx(ctx, vec, x * iconSize, y * iconSize);\n });\n return canva;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":489,"value":"function simple_similarity(vec1, vec2) {\n let acc = 0;\n vec1.forEach((v, i) => {\n acc += Math.abs(vec1[i] - vec2[i]);\n });\n return acc;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":123,"value":"function drawSvgToCtx(ctx, svgString, gridX, gridY) {\n const imgContainer = new Image(akarIcons.width, akarIcons.height);\n const blob = new Blob([svgString], { type: \"image/svg+xml\" });\n const dataUrl = URL.createObjectURL(blob);\n imgContainer.src = dataUrl;\n\n imgContainer.src = dataUrl;\n imgContainer.onload = () => {\n ctx.drawImage(\n imgContainer,\n gridX * akarIcons.width,\n gridY * akarIcons.height\n );\n };\n\n return ctx.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":436,"value":"function binVecFromSvg(svg, width, height) {\n return new Promise((resolve) => {\n const context = DOM.context2d(width, height);\n const img = new Image();\n img.onload = function () {\n context.drawImage(img, 0, 0, width, height);\n const vec = toBinaryImage(context.canvas);\n resolve(vec);\n URL.revokeObjectURL(img.src);\n };\n img.src = URL.createObjectURL(new Blob([svg], { type: \"image/svg+xml\" }));\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":374,"value":"function drawSvg2Bin(ctx, svg, gridX = 0, gridY = 0) {\n const canvas = drawSvgToCtx(ctx, svg, gridX, gridY);\n const vec = toBinaryImage(canvas);\n return drawBinaryImage(vec);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":303,"value":"function drawSvgToCanvas(svg, width, height) {\n const context = DOM.context2d(width, height);\n\n const img = new Image();\n img.onload = function () {\n context.drawImage(img, 0, 0, width, height);\n URL.revokeObjectURL(img.src);\n };\n img.src = URL.createObjectURL(new Blob([svg], { type: \"image/svg+xml\" }));\n\n return context.canvas;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":294,"value":"function drawBinaryImage(vec) {\n const width = Math.floor(Math.sqrt(vec.length));\n const height = width;\n const context = DOM.context2d(width, height);\n\n for (let i = 0; i < vec.length; i++) {\n const x = i % width;\n const y = Math.floor(i / width);\n vec[i] === 0 && context.fillRect(x, y, 1, 1);\n }\n\n return context.canvas;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":443,"value":"function drawBinaryImage2Ctx(ctx, vec, anchorX, anchorY) {\n const width = Math.floor(Math.sqrt(vec.length));\n const height = width;\n\n for (let i = 0; i < vec.length; i++) {\n const x = i % width;\n const y = Math.floor(i / width);\n vec[i] === 0 && ctx.fillRect(anchorX + x, anchorY + y, 1, 1);\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":270,"value":"function toBinaryImage(canvas) {\n const rgba = canvas\n .getContext(\"2d\")\n .getImageData(0, 0, canvas.width, canvas.height).data;\n const vec = [];\n for (let i = 0; i < rgba.length; i += 4) {\n const r = rgba[i]; //r\n const g = rgba[i + 1]; //g\n const b = rgba[i + 2]; //b\n const a = rgba[i + 3]; //a\n\n const thresh = 128;\n const black = r > thresh || g > thresh || b > thresh || a > thresh;\n\n vec.push(black ? 0 : 1);\n }\n return vec;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":48,"value":"akarIcons = FileAttachment(\"akar-icons.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":50,"value":"icons = Object.entries(akarIcons.icons).map(([name, obj]) => ({\n name,\n svg: ``,\n body: obj.body\n}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2e:"$2d:body"