30: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; } }31: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; }32:[] 2e:{"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"},{"id":4,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":354,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":453,"value":"options","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}