2c:null 2d:["$","title",null,{"children":"Ghost Letters | Fabian Iwand | Observable"}] 32:T7c0,{ // Any range: ± max random value const { text = 'lorem ipsum dolor', width = 500, height = 300, fontSize = 150, fontFamily = 'serif', offsetRange = 10, textAlpha = .3, fadeAlpha = .01, moveRange = 4, moveBias = .95, brightnessSpeed = .1, brightnessMin = .6, brightnessMax = 1.8, brightnessRange = .3, brightnessBias = .9, contrast = 10, } = options; const t0 = Date.now() / 1e4; const zigzag = t => Math.abs(t - Math.floor(t - .5) - 1) * 2; const lerp = (a, b, t) => a + (b - a) * t; const rnd = (s = 1) => (Math.random() * 2 - 1) * s; const clamp = (a, b, v) => v < a ? a : v > b ? b : v; const fill = (c, col) => { c.fillStyle = col; c.fillRect(0, 0, c.canvas.width, c.canvas.height); }; const context = () => DOM.element('canvas', {width, height}).getContext('2d'); const cSource = context(); fill(cSource, '#fff'); cSource.fillStyle = '#000'; cSource.globalAlpha = textAlpha; [fontFamily].map(family => { cSource.font = `${fontSize}px ${family}`; text.trim().split(/\s+/).map(str => { const x = width / 2 - cSource.measureText(str).width / 2; cSource.fillText(str, x + rnd(offsetRange), height / 2 + fontSize / 2 + rnd(offsetRange)); }); }); const cFade = context(); cFade.globalAlpha = fadeAlpha; const cOut = context(); cOut.canvas.style.maxWidth = '100%'; let x = 0, y = 0, b = 1; while(true) { const t = Date.now() / 1e4 - t0; b = lerp( lerp(brightnessMin, brightnessMax, zigzag(t*brightnessSpeed)), clamp(brightnessMin, brightnessMax, b + rnd(brightnessRange)), brightnessBias ); cFade.filter = `brightness(${b}) contrast(${contrast})`; x = lerp(0, x + rnd(moveRange), moveBias); y = lerp(0, y + rnd(moveRange), moveBias); cFade.drawImage(cSource.canvas, x, y); fill(cOut, '#fff'); cOut.drawImage(cFade.canvas, 0, 0); yield cOut.canvas; } }33:Tc49,viewof options = { const labelTabel = r => html`${r.map(([label, n, o]) => { n.id = n.id || DOM.uid().id; label = html`${DOM.text(label)}`; let out = ''; if(typeof o === 'function') { out = html``; (n.oninput = () => out.value = o(n))(); } return html`

${label}

${n} ${out}`; })}`; const form = html`

${labelTabel([ ['Canvas size', html` × ` ], ['Text', labelTabel([ [ 'Words', html``], ['Font size', html``, n => n.value], ['Font family', html``, n => n.value], ['Offset range', html``, n => n.value], ])], ['Fade opacity', html``, n => n.value], ['Movement', labelTabel([ ['Range', html``, n => n.value], ['Randomness', html``, n => n.value], ])], ['Brightness', labelTabel([ ['Speed', html``, n => n.value], ['Min', html``, n => n.value], ['Max', html``, n => n.value], ['Range', html``, n => n.value], ['Randomness', html``, n => n.value], ])], ['Contrast', html``, n => n.value], ])} `; const number = new Set(['range', 'number']); const update = () => { form.value = Array.from(form.querySelectorAll('input,select')).reduce((map, n) => ((map[n.name] = number.has(n.type) ? n.valueAsNumber : n.value), map), {}); form.dispatchEvent(new CustomEvent('input')); }; update(); form.oninput = e => { if(e.target === form) return; e.stopImmediatePropagation(); update(); }; return form; }34:[] 30:{"id":"8c60eb4514df03e5","slug":"ghost-letters","title":"Ghost Letters","thumbnail":"cfe857a18a82ba9b0be550a62bf3ce997696477df1ef0a26deb0f0d0c0b04e79","access_level":"public","create_time":"$D2019-07-19T21:45:28.407Z","update_time":"$D2020-08-19T19:34:28.667Z","view_time":null,"first_public_time":"$D2019-07-20T14:25:22.023Z","fork":false,"stars":8,"starred":false,"owner":{"type":"team","id":"898d35f8860c7f03","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":"starter_2024"},"version":502,"publish_version":502,"role":null,"authored":false,"authors":[{"type":"individual","id":"07362516b5994994","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":null}],"members":[{"type":"individual","id":"07362516b5994994","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":2,"collection":{"id":"414312a67ea30ac3","slug":"generative","title":"Generative","owner":{"id":"898d35f8860c7f03","login":"mootari","name":"Fabian Iwand"}},"type":"notebook","body":{"title":"Ghost Letters","cells":[{"id":0,"value":"md`# Ghost Letters\n\nA canvas experiment involving text, alpha and lerping. And a few inputs.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":354,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":453,"value":"options","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 31:"$30:body"