2d:null 2e:["$","title",null,{"children":"AUTOMATION IS DEADLY | Tom MacWright | Observable"}] 33:T47c,extraFunCanvas = { const data = blurredCanvas.ctx.getImageData(0, 0, blurredCanvas.width, blurredCanvas.height); let w = 1000; const ctx = DOM.context2d(1000, h); ctx.fillStyle = 'white'; ctx.fillRect(0, 0, ctx.canvas.height, ctx.canvas.width); ctx.fillStyle = 'red'; ctx.globalAlpha = 1; for (let xi = 0; xi < w * 2; xi += 4 * 4) { let x = (xi % (w * 2)) / 2; for (let yi = 0; yi < w * h * 2; yi += w * 2 * 4) { let i = yi + xi; let angle = data.data[i]; let y = Math.floor(i / (w * 2)) * 2; ctx.beginPath(); ctx.arc(x, y, 3, 0, Math.PI * 2); ctx.fill(); } } ctx.globalAlpha = 1; ctx.globalCompositeOperation = 'multiply'; ctx.fillStyle = 'blue'; for (let xi = 0; xi < w * 2; xi += 4 * 4) { let x = (xi % (w * 2)) / 2; for (let yi = 0; yi < w * h * 2; yi += w * 2 * 4) { let i = yi + xi; let angle = data.data[i]; let y = Math.floor(i / (w * 2)) * 2; ctx.beginPath(); ctx.arc(x + angle / 100, y + angle / 100, 3, 0, Math.PI * 2); ctx.fill(); } } ctx.canvas.style = 'max-width:100%;height:auto;'; return ctx.canvas; }34:[] 31:{"id":"59360cc3b38a6cc0","slug":"automation-is-deadly","title":"AUTOMATION IS DEADLY","thumbnail":"0853e7c2117c2c973d9d619e9fed589c19fca5af12618e9f4a59ee7583fd4290","access_level":"public","create_time":"$D2018-02-16T19:58:04.705Z","update_time":"$D2018-02-16T20:39:26.716Z","view_time":null,"first_public_time":"$D2018-02-16T20:35:54.135Z","has_unpublished_edits":null,"fork":{"id":"e0a7ce35d1418805","slug":"exploratorium-text-style","title":"Exploratorium text style","owner":{"id":"b47c3705cfcd7c1b","login":"tmcw","name":"Tom MacWright"}},"stars":5,"starred":false,"owner":{"type":"team","id":"b47c3705cfcd7c1b","login":"tmcw","name":"Tom MacWright","avatar_url":"https://avatars-next.observableusercontent.com/669bdd774da8a1b9c1b7706ecbc1ea5136b9932c3d5e86b753aa5a098005f674","tier":"starter_2024"},"version":654,"publish_version":654,"role":null,"authored":false,"authors":[{"type":"individual","id":"0bf14b8d9c6eb88a","login":"tmcw","name":"Tom MacWright","avatar_url":"https://avatars-next.observableusercontent.com/669bdd774da8a1b9c1b7706ecbc1ea5136b9932c3d5e86b753aa5a098005f674","tier":null}],"members":[{"type":"individual","id":"0bf14b8d9c6eb88a","login":"tmcw","name":"Tom MacWright","avatar_url":"https://avatars-next.observableusercontent.com/669bdd774da8a1b9c1b7706ecbc1ea5136b9932c3d5e86b753aa5a098005f674","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":5,"collection":null,"type":"notebook","body":{"title":"AUTOMATION IS DEADLY","cells":[{"id":0,"value":"md`# AUTOMATION IS DEADLY\n\nPlaying with my [exploratorium text style](https://beta.observablehq.com/@tmcw/exploratorium-text-style) notebook for some new effects, drawing from a bunch of influences.\n\nCredits:\n\n- Inspiration from Exploratorium\n- [Text from Jenny Holzer](https://en.wikipedia.org/wiki/Jenny_Holzer)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":585,"value":"viewof addNoise = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":557,"value":"superFunCanvas = {\n const data = blurredCanvas.ctx.getImageData(0, 0, blurredCanvas.width, blurredCanvas.height);\n let w = 1000;\n const ctx = DOM.context2d(1000, h);\n ctx.fillStyle = 'white';\n ctx.fillRect(0, 0, ctx.canvas.height, ctx.canvas.width);\n ctx.fillStyle = 'red';\n ctx.globalAlpha = 1;\n for (let xi = 0; xi < w * 2; xi += 4 * 4) {\n let x = (xi % (w * 2)) / 2;\n for (let yi = 0; yi < w * h * 2; yi += w * 2 * 4) {\n let i = yi + xi;\n let angle = data.data[i];\n let y = Math.floor(i / (w * 2)) * 2;\n ctx.beginPath();\n let noise = (addNoise) ? ~~((Math.random() - 0.5) * 4) : 0;\n ctx.arc(x + noise, y + noise, (angle + 100) / 100, 0, Math.PI * 2);\n ctx.fill();\n }\n }\n ctx.canvas.style = 'max-width:100%;height:auto;';\n return ctx.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":466,"value":"viewof split = slider({\n min: 0, \n max: 2,\n value: 0.6, \n title: \"Emphasis\", \n description: \"Bump it\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":492,"value":"viewof creepy = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":568,"value":"md`**Method:**\n\nDraw a line from the top to bottom, every 8 pixels. The lighter the underlying pixel, the farther left the line goes. Then draw the line back up, except moving right when the underlying pixel is light. Then fill the shape, and move on.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":454,"value":"bonusCanvas = {\n const data = blurredCanvas.ctx.getImageData(0, 0, blurredCanvas.width, blurredCanvas.height);\n let w = 1000;\n const ctx = DOM.context2d(1000, h);\n ctx.fillRect(0, 0, ctx.canvas.height, ctx.canvas.width);\n ctx.fillStyle = '#fff';\n let line = 7;\n ctx.beginPath();\n for (let xi = 0; xi < w * 2; xi += 4 * 4) {\n let x = (xi % (w * 2)) / 2;\n ctx.moveTo(x, 0);\n for (let yi = 0; yi < w * h * 2; yi += w * 4 * 2) {\n let i = yi + xi;\n let angle = data.data[i];\n let y = Math.floor(i / (w * 2)) * 2;\n ctx.lineTo(x + angle * split / 100, y);\n }\n ctx.lineTo(x, h);\n if (!creepy) {\n for (let yi = w * h * 2; yi > 0; yi -= w * 4 * 2) {\n let i = yi + xi;\n let angle = data.data[i];\n let y = Math.floor(i / (w * 2)) * 2;\n ctx.lineTo(x - 1 - angle * split / 100, y);\n }\n }\n }\n ctx.canvas.style = 'max-width:100%;height:auto;';\n ctx.fill();\n return ctx.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":440,"value":"md`## HAVE YOU HEARD OF THIS BAND CALLED JOY DIVISION`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":579,"value":"md`**Method:**\n\nEvery 4 pixels, draw a circle in red, scaled by the lightness of the underlying pixel, but set a lower bound for the underlying pixel.\n\nOptionally, add some noise.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":251,"value":"viewof emphasis = slider({\n min: 0, \n max: 0.1, \n value: 0.05, \n title: \"Emphasis\", \n description: \"Bump it\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":571,"value":"md`**Method:**\n\nDraw a line from the top to bottom, every 8 pixels. The lighter the underlying pixel, the farther left the line goes.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"effectCanvas = {\n const data = blurredCanvas.ctx.getImageData(0, 0, blurredCanvas.width, blurredCanvas.height);\n let w = 1000;\n const ctx = DOM.context2d(1000, h);\n ctx.fillRect(0, 0, ctx.canvas.height, ctx.canvas.width);\n ctx.strokeStyle = '#fff';\n ctx.lineWidth = 1.5;\n let line = 7;\n ctx.beginPath();\n for (let xi = 0; xi < w * 2; xi += 4 * 2) {\n let x = (xi % (w * 2)) / 2;\n ctx.moveTo(x, 0);\n for (let yi = 0; yi < w * h * 2; yi += w * 4 * 2) {\n let i = yi + xi;\n let angle = data.data[i];\n let y = Math.floor(i / (w * 2)) * 2;\n ctx.lineTo(x + angle * emphasis, y);\n }\n ctx.lineTo(x, h);\n }\n ctx.canvas.style = 'max-width:100%;height:auto;';\n ctx.stroke();\n return ctx.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":446,"value":"md`## IDK`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":515,"value":"viewof magnitude = slider({\n min: 0, \n max: 500, \n value: 100, \n title: \"Magnitude\", \n description: \"Bop it\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":575,"value":"md`**Method:**\n\nEvery 4 pixels, draw a circle. The lighter the underlying pixel, the bigger the circle.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":496,"value":"funCanvas = {\n const data = blurredCanvas.ctx.getImageData(0, 0, blurredCanvas.width, blurredCanvas.height);\n let w = 1000;\n const ctx = DOM.context2d(1000, h);\n ctx.fillRect(0, 0, ctx.canvas.height, ctx.canvas.width);\n ctx.fillStyle = '#fff';\n let line = 7;\n for (let xi = 0; xi < w * 2; xi += 4 * 2) {\n let x = (xi % (w * 2)) / 2;\n for (let yi = 0; yi < w * h * 2; yi += w * 2 * 2) {\n let i = yi + xi;\n let angle = data.data[i];\n let y = Math.floor(i / (w * 2)) * 2;\n ctx.beginPath();\n ctx.arc(x, y, angle / magnitude, 0, Math.PI * 2);\n ctx.fill();\n }\n }\n ctx.canvas.style = 'max-width:100%;height:auto;';\n return ctx.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":577,"value":"md`**Method:**\n\nEvery 4 pixels, draw a circle in red. Then do the same, in blue, but move the circle to the right and bottom depending on the lightness of the underlying pixel.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":518,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":292,"value":"md`I start with this text, in blocky letters. Nothing fancy here.\n\n### Original source canvas`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"sourceCanvas = {\n const ctx = DOM.context2d(500, 340, 1);\n ctx.fillRect(0, 0, 500, 340);\n ctx.fillStyle = '#fff';\n ctx.font = 'bold 60px -apple-system,BlinkMacSystemFont,avenir next,avenir,helvetica,helvetica neue,ubuntu,roboto,noto,segoe ui,arial,sans-serif';\n ctx.textAlign = 'center';\n ctx.fillText('AUTOMATION IS', 250, 140);\n ctx.fillText('DEADLY', 250, 220);\n ctx.canvas.style = 'max-width:100%;height:auto;';\n return ctx.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":297,"value":"md`Then I use the [StackBlur](https://github.com/flozz/StackBlur) library to quickly blur it, with a nice Gaussian-ish blur. A blurred black and white image is a nice cheatcode to that elusive ‘distance to edge’ metric: the lightness of each pixel is a good-enough approximation of that pixel’s distance to the type.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"StackBlur = require('https://wzrd.in/standalone/stackblur-canvas')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":373,"value":"md`### Blurred canvas`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"blurredCanvas = {\n const ctx = DOM.context2d(500, 340, 1);\n ctx.drawImage(sourceCanvas, 0, 0, 500, 340);\n StackBlur.canvasRGB(ctx.canvas, 0, 0, ctx.canvas.width, ctx.canvas.height, 5);\n ctx.canvas.ctx = ctx;\n ctx.canvas.style = 'max-width:100%;height:auto;';\n return ctx.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":601,"value":"h = 680","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":252,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"