30:T42c,renderSvgBlock = (selection) => { const boxes = selection.selectAll('.row') .data(d => d) .enter() .append('g') .attr('transform', (d, y) => `translate(0, ${y * boxSize})`) .selectAll('.box') .data(d => d) .enter() .append('g') .attr('transform', (d, x) => `translate(${x * boxSize}, 0)`); boxes .append('rect') .attr('x', margin) .attr('y', margin) .attr('rx', rounding) .attr('ry', rounding) .attr('width', boxSize - margin * 2) .attr('height', boxSize - margin * 2) .style('fill', boxColor); boxes .append('text') .attr('dy', '0.29em') .attr('x', boxSize / 2) .attr('y', boxSize / 2) .attr('height', boxSize) .attr('style', 'font-family: Courier New,Courier,Lucida Sans Typewriter,Lucida Typewriter,monospace;') .style('font-size', fontSize) .style('font-weight', 'bold') .style('text-anchor', 'middle') .style('fill', charColor) .text(d => d); // return html`${svg.node()}`; } 31:T485,renderSvgPuzzle = (image, name) => { const rows = image.map(row => row.map(encodeViaBraille)); const sectionSize = sectionMargin + boxSize * 2; const width = rows[0].length * sectionSize + sectionMargin; const height = rows.length * sectionSize + sectionMargin; const svg = d3.select(DOM.svg(width, height)) .style('height', height) .style('overflow', 'hidden') svg.append('g') .attr('transform', `translate(${sectionMargin}, ${sectionMargin})`) .selectAll('.section-row') .data(rows) .enter() .append('g') .attr('transform', (d, y) => `translate(${(width - sectionMargin) / 2 - d.length * sectionSize / 2}, ${sectionSize * y})` ) .selectAll('.section') .data(d => d) .enter() .append('g') .attr('transform', (d, x) => `translate(${sectionSize * x}, 0)`) .call(renderSvgBlock); const svgNode = svg.node(); return html`

${svgNode}

${DOM.download(serialize(svgNode), name, "Download as SVG")}

`; }32:[] 2e:{"title":"Hackers 34","cells":[{"id":1358,"value":"md`# Hackers 34\nT-Shirt Design Generator`","pinned":false,"hidden":false,"mode":"ojs"},{"id":0,"value":"md`### Grid Layout`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1182,"value":"renderSvgPuzzle([[h, a, c], [k, e, r], [s, c3, c4]], 'Grid-Layout')","pinned":false,"hidden":false,"mode":"ojs"},{"id":1254,"value":"md`### Text Layout`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1120,"value":"renderSvgPuzzle([[h, a, c, k, e, r, s], [c3, c4]])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1305,"value":"md`# Rendering Parameters`","pinned":false,"hidden":false,"mode":"ojs"},{"id":664,"value":"fontSize = 80","pinned":false,"hidden":false,"mode":"ojs"},{"id":1108,"value":"sectionMargin = fontSize * 0.3","pinned":false,"hidden":false,"mode":"ojs"},{"id":1068,"value":"boxSize = fontSize * 1.2\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":802,"value":"margin = fontSize * 0.06","pinned":false,"hidden":false,"mode":"ojs"},{"id":860,"value":"rounding = fontSize * 0.12","pinned":false,"hidden":false,"mode":"ojs"},{"id":1055,"value":"boxColor = '#D43828'","pinned":false,"hidden":false,"mode":"ojs"},{"id":1307,"value":"charColor = 'white'","pinned":false,"hidden":false,"mode":"ojs"},{"id":1340,"value":"backgroundColor='#333'","pinned":false,"hidden":false,"mode":"ojs"},{"id":421,"value":"md`# Decodes To`","pinned":false,"hidden":false,"mode":"ojs"},{"id":190,"value":"html`

\n ${renderImage(hackers, 150)}\n ${renderImage(thirtyFour, 150)}\n

`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":486,"value":"md`# Full Circle Test\nThis converts an image to text via braille, then back again to the image, to ensure the encoder is 100% correct.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":474,"value":"html`

\n ${renderImage(decodeViaBraille(encodeViaBraille(hackers)), 150)}\n ${renderImage(decodeViaBraille(encodeViaBraille(thirtyFour)), 150)}\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":658,"value":"md`# Raw Image Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":251,"value":"hackers = _.zip(...[h, a, c, k, e, r, s]).map(_.flatten)","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"thirtyFour = _.zip(...[c3, c4]).map(_.flatten)","pinned":false,"hidden":false,"mode":"ojs"},{"id":354,"value":"md`# Character Shape Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":188,"value":"h = [\n [1, 0, 1, 0],\n [1, 0, 1, 0],\n [1, 1, 1, 0],\n [1, 0, 1, 0],\n [1, 0, 1, 0],\n [0, 0, 0, 0],\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":195,"value":"a = [\n [0, 1, 0, 0],\n [1, 0, 1, 0],\n [1, 1, 1, 0],\n [1, 0, 1, 0],\n [1, 0, 1, 0],\n [0, 0, 0, 0],\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":201,"value":"c = [\n [1, 1, 1, 0],\n [1, 0, 0, 0],\n [1, 0, 0, 0],\n [1, 0, 0, 0],\n [1, 1, 1, 0],\n [0, 0, 0, 0],\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":222,"value":"k = [\n [1, 0, 1, 0],\n [1, 0, 1, 0],\n [1, 1, 0, 0],\n [1, 0, 1, 0],\n [1, 0, 1, 0],\n [0, 0, 0, 0],\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":226,"value":"e = [\n [1, 1, 1, 0],\n [1, 0, 0, 0],\n [1, 1, 0, 0],\n [1, 0, 0, 0],\n [1, 1, 1, 0],\n [0, 0, 0, 0],\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":229,"value":"r = [\n [1, 1, 0, 0],\n [1, 0, 1, 0],\n [1, 1, 0, 0],\n [1, 0, 1, 0],\n [1, 0, 1, 0],\n [0, 0, 0, 0],\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":231,"value":"s = [\n [0, 1, 1, 0],\n [1, 0, 0, 0],\n [0, 1, 0, 0],\n [0, 0, 1, 0],\n [1, 1, 0, 0],\n [0, 0, 0, 0],\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":314,"value":"c3 = [\n [1, 1, 1, 0],\n [0, 0, 1, 0],\n [0, 1, 1, 0],\n [0, 0, 1, 0],\n [1, 1, 1, 0],\n [0, 0, 0, 0],\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":316,"value":"c4 = [\n [1, 0, 1, 0],\n [1, 0, 1, 0],\n [1, 1, 1, 0],\n [0, 0, 1, 0],\n [0, 0, 1, 0],\n [0, 0, 0, 0],\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":358,"value":"md`# Encoder and Renderers`","pinned":false,"hidden":false,"mode":"ojs"},{"id":60,"value":"encodeViaBraille = image => {\n const height = image.length;\n const width = image[0].length;\n \n if (height % 3 !== 0) {\n return 'image height must be multiple of 3';\n }\n \n if (width % 2 !== 0) {\n return 'image width must be multiple of 2';\n }\n \n return d3.range(0, height, 3)\n .map(y => d3.range(0, width, 2).map(x => {\n const targetBraille = d3.range(3).map(dy => d3.range(2).map(dx => image[y + dy][x + dx]));\n const char = braille.find(d => _.isEqual(d.matrix, targetBraille));\n return char ? char.glyph : null;\n }))\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":470,"value":"decodeViaBraille = rows => {\n const convertRow = row => _.zip(...row.map(char => braille.find(d => d.glyph === char).matrix)).map(_.flatten);\n return _.flatten(rows.map(row => convertRow(row)));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"renderImage = (image, height) => {\n \n const cellSize = height / image.length;\n const svg = d3.select(DOM.svg(image[0].length * cellSize, height))\n .style(\"height\", height)\n .style(\"overflow\", \"hidden\");\n \n image.forEach((row, y) => {\n row.forEach((pixel, x) => {\n svg.append('circle')\n .attr('fill', pixel ? '#222' : '#f0f0f0')\n .attr('cx', x * cellSize + cellSize / 2)\n .attr('cy', y * cellSize + cellSize / 2)\n .attr('r', cellSize / 2 - 1);\n });\n });\n \n return html`

${svg.node()}

`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":120,"value":"renderPuzzle = encodedImage => {\n const boxSize = fontSize * 1.2;\n const style = `font-size: ${fontSize}px; font-family: Courier New,Courier,Lucida Sans Typewriter,Lucida Typewriter,monospace;`;\n const charStyle = `width: ${boxSize}px; height: ${boxSize}px; margin: ${margin}px; text-align: center; border-radius: ${rounding}em; font-weight: bold; background: #444; color: white; line-height: ${boxSize * 1.05}px`;\n const rowStyle = 'display: flex; flex-direction: row';\n const renderChar = char => `

${char}

`;\n const renderRow = row => `

${row.map(renderChar).join('')}

`;\n \n return html`\n

${encodedImage.map(renderRow)}

\n `;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":930,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":944,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":356,"value":"md`# Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"braille = d3.csv('https://raw.githubusercontent.com/markomanninen/pybrl/master/braille_mappings.csv')\n .then(rows => rows.map((row, i) => ({\n glyph: i === 0 ? ' ': row['ASCII Glyph'], \n matrix: JSON.parse(row.Matrix),\n })))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1096,"value":"import {serialize} from \"@mbostock/saving-svg\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"_ = require('lodash')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}