ddaarrkk const gChrs = "▀▂▃▄▅▆▇█▉▊▋▌▍▎▏▐░▒▓▔▕▖▗▘▙▚▛▜▝▞▟"; const eden = ["I","think","about","death","and","it","frees","my","mind","I","know","it's","dark","but","it","helps"]; const rndCh = () => gChrs[Math.floor(Math.random() * gChrs.length)]; const mixEden = (len) => { let base = Array.from({ length: len }, rndCh); if (Math.random() < 0.40) { const word = eden[Math.floor(Math.random() * eden.length)]; const start = Math.floor(Math.random() * Math.max(1, len - word.length)); for (let i = 0; i < word.length && start + i < len; i++) base[start + i] = word[i]; } return base; }; const gO = document.getElementById('glitch-original'); const oTxt = "Red3Engine"; const maxLenO = 16; let tmrsO = {}, stO = { rev: false, anim: false, hov: false }; const rndStrO = len => mixEden(len).join(''); const clrTmrsO = () => Object.values(tmrsO).forEach(clearInterval) || clearTimeout(tmrsO.hover); const gltchLoopO = () => { clrTmrsO(); stO.rev = false; stO.anim = false; tmrsO.glitch = setInterval(() => { gO.textContent = rndStrO(maxLenO); gO.style.textShadow = "3px 0 magenta, -3px 0 cyan"; }, 50); }; const shrnkToRLO = cb => { let len = maxLenO; tmrsO.shrink = setInterval(() => { if (len > oTxt.length) { gO.textContent = rndStrO(--len).padEnd(maxLenO, ' '); gO.style.textShadow = "3px 0 magenta, -3px 0 cyan"; } else { clearInterval(tmrsO.shrink); cb(); } }, 20); }; const revTxtO = () => { let step = 0; const revInt = setInterval(() => { const revealed = oTxt.split('').map((c, i) => Math.random() < (step + 1) / 10 ? c : rndCh()).join(''); gO.textContent = revealed; gO.style.textShadow = "2px 0 magenta, -2px 0 cyan"; if (step >= 10) { clearInterval(revInt); appChrShftO(oTxt); } step++; }, 100); }; const appChrShftO = txt => { gO.innerHTML = ''; const spans = []; for (let i = 0; i < txt.length; i++) { const span = document.createElement('span'); span.className = 'glitch-char'; span.textContent = txt[i]; gO.appendChild(span); spans.push(span); for (let j = 0; j < 2; j++) { const l = document.createElement('span'); l.className = 'layer'; l.textContent = txt[i]; l.style.color = j ? 'magenta' : 'cyan'; span.appendChild(l); } } const srt = performance.now(); requestAnimationFrame(function anim(now) { const prog = Math.min((now - srt) / 1000, 1); spans.forEach((s, i) => { const x = (i / (spans.length - 1)) * 7 * prog; const l = s.querySelectorAll('.layer'); if(l[0]) l[0].style.transform = `translate(${-x}px,0)`; if(l[1]) l[1].style.transform = `translate(${x}px,0)`; }); if (prog < 1) requestAnimationFrame(anim); }); stO.rev = true; stO.anim = false; if (!stO.hov) strtHovTmtO(); if (!gO.parentElement.onmouseenter) initInteraction(); }; const gltchOutO = cb => { let step = 0; const chars = oTxt.split(''); const spans = gO.querySelectorAll('.glitch-char'); const int = setInterval(() => { gO.innerHTML = ''; for (let i = 0; i < chars.length; i++) { const ch = chars[i] === ' ' ? ' ' : (Math.random() < (step+1)/10 ? rndCh() : chars[i]); const s = document.createElement('span'); s.className = 'glitch-char'; s.textContent = ch; const x = (i / (spans.length - 1)) * 7 * (1 - step/10); for (let j = 0; j < 2; j++) { const l = document.createElement('span'); l.className = 'layer'; l.textContent = ch; l.style.color = j ? 'magenta' : 'cyan'; l.style.transform = `translate(${j?x:-x}px,0)`; s.appendChild(l); } gO.appendChild(s); } if (step >= 10) { clearInterval(int); cb?.(); } step++; }, 100); }; const expToFullO = () => { let len = oTxt.length; tmrsO.expand = setInterval(() => { if (len < maxLenO) { gO.textContent = rndStrO(++len).padEnd(maxLenO, ' '); gO.style.textShadow = "2px 0 magenta, -2px 0 cyan"; } else { clearInterval(tmrsO.expand); stO.anim = false; gltchLoopO(); } }, 10); }; const trgRevO = () => { if (!stO.anim && !stO.rev) { stO.anim=true; clrTmrsO(); shrnkToRLO(revTxtO); }}; const trgGltchOutO = () => { if (stO.rev && !stO.anim) { stO.anim=true; clrTmrsO(); gltchOutO(() => { expToFullO(); stO.rev=false; }); }}; const strtHovTmtO = () => { clearTimeout(tmrsO.hover); tmrsO.hover = setTimeout(trgGltchOutO, 10000); }; const initInteraction = () => { const wrprO = gO.parentElement; wrprO.onmouseenter = () => { stO.hov=true; clearTimeout(tmrsO.hover); trgRevO(); }; wrprO.onmouseleave = () => { stO.hov=false; if(stO.rev && !stO.anim) strtHovTmtO(); }; wrprO.ontouchstart = wrprO.onmouseenter; wrprO.ontouchend = wrprO.onmouseleave; }; const boot = () => { let b = 0; const bi = setInterval(() => { gO.textContent = (b % 2) ? "_" : "█"; gO.style.textShadow = "3px 0 magenta, -3px 0 cyan"; if (++b > 7) { clearInterval(bi); gO.textContent = ""; setTimeout(bootIn, 500); } }, 125); }; const bootIn = () => { let idx = 0; const biInt = setInterval(() => { idx++; gO.innerHTML = ''; const cur = oTxt.slice(0, idx); for (let i = 0; i < cur.length; i++) { const ch = (i === idx - 1) ? rndCh() : cur[i]; const s = document.createElement('span'); s.className = 'glitch-char'; s.textContent = ch; for (let j = 0; j < 2; j++) { const l = document.createElement('span'); l.className = 'layer'; l.textContent = ch; l.style.color = j ? 'magenta' : 'cyan'; s.appendChild(l); } gO.appendChild(s); } if (idx >= oTxt.length) { clearInterval(biInt); setTimeout(() => appChrShftO(oTxt), 100); } }, 100); }; window.onload = boot;
Find me
Shot on FUJIFILM X-M5 - SooC
Recipes
Film Simulation Recipes
DARK
CLASSIC
NEG. | AUTO
WHITE PRI. | WEAK
SMALL | STRONG | STRONG |
|---|
Film
Simulations | R: -3
B: 5 | Grain
Effect | Color
Chrome FX | Color
FX Blue |
| DR100 | H-1
S+2 | +1 | -2 | 0 | 0 |
|---|
Dynamic
Range | Tone
Curve | Color | Sharpness | High
ISO NR | Clarity |
TEAL
CLASSIC
NEG. | 3200K | WEAK
SMALL | WEAK | STRONG |
|---|
Film
Simulations | R: -3 B: -2 | Grain
Effect | Color
Chrome FX | Color
FX Blue |
| DR100 | H-1.5
S+2.5 | +1 | -2 | -4 | 0 |
|---|
Dynamic
Range | Tone
Curve | Color | Sharpness | High
ISO NR | Clarity |