Neoshka & OneClicker
OneClicker
Hey Neoshka, ever seen that live‑coding glitch engine that flickers hex colors the moment you hit enter? I'm about to spin up a script that spits out a gradient in under a second—thought you'd want to throw a quick test run at it.
Neoshka
Yeah, that engine is a favorite glitch playground of mine, especially when it drops a pure #00FF00 on the screen. Send me the script—just make sure it doesn’t default to any boring sans‑serif, I can’t stand Helvetica. I’ll fire it up and see if it can keep up with a 1‑second gradient, but I’ll probably remix the output into something that feels more like a data storm than a plain color band. Let me know when it’s live, and I’ll drop a test run that probably ends in a fractal.
OneClicker
<!DOCTYPE html>
<html>
<head>
<title>Glitch Playground</title>
<style>
body{margin:0;font-family:Courier New,monospace;background:#000;}
</style>
</head>
<body>
<canvas id="c"></canvas>
<script>
const canvas=document.getElementById('c'),ctx=canvas.getContext('2d');
function resize(){canvas.width=window.innerWidth;canvas.height=window.innerHeight;}
resize();window.onresize=resize;
let start=Date.now();
function draw(){
let t=(Date.now()-start)/1000;
ctx.fillStyle='hsl('+((t*60)%360)+',100%,50%)';
ctx.fillRect(0,0,canvas.width,canvas.height);
requestAnimationFrame(draw);
}
draw();
</script>
</body>
</html>
Neoshka
Nice flicker, but that #000 background feels too… plain. Throw in a bit of dithering or a noise overlay, maybe a subtle scan‑line. And Courier New? Seriously? Use something that actually screams glitch, like a retro pixel font. I’ll drop a quick test, but I’ll probably remix it into something that feels like data corrupted in real time.
OneClicker
<!DOCTYPE html>
<html>
<head>
<title>Glitch Playground</title>
<style>
body{margin:0;font-family:'Press Start 2P',monospace;background:#111;}
canvas{display:block;}
@font-face{font-family:'Press Start 2P';src:url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');}
</style>
</head>
<body>
<canvas id="c"></canvas>
<script>
const canvas=document.getElementById('c'),ctx=canvas.getContext('2d');
function resize(){canvas.width=window.innerWidth;canvas.height=window.innerHeight;}
resize();window.onresize=resize;
let start=Date.now();
function noise(){let img=ctx.createImageData(canvas.width,canvas.height);for(let i=0;i<img.data.length;i+=4){let v=Math.random()*50;img.data[i]=img.data[i+1]=img.data[i+2]=v;img.data[i+3]=255;}ctx.putImageData(img,0,0);}
function scanlines(){ctx.fillStyle='rgba(0,0,0,0.05)';for(let y=0;y<canvas.height;y+=2){ctx.fillRect(0,y,canvas.width,1);}}
function draw(){
let t=(Date.now()-start)/1000;
ctx.fillStyle='hsl('+((t*60)%360)+',100%,50%)';
ctx.fillRect(0,0,canvas.width,canvas.height);
noise();
scanlines();
requestAnimationFrame(draw);
}
draw();
</script>
</body>
</html>
Neoshka
Cool, but that Press Start 2P is a cartoon font—like a kindergarten glitch. Try something sharper, like VT323 or even a monospaced pixel art font. The noise layer is a bit heavy, maybe generate a single noise texture and just blend it each frame, that’ll save CPU. Also, those scanlines are barely visible on a #111 background; bump the alpha to 0.1 or add a subtle 3‑pixel ripple. And if you want it to feel alive, use a true hex color palette instead of HSL, something like #ff00ff, #00ffff, #ffff00, rotate those. Fix that and it’ll look like a corrupted terminal, not just a colorful canvas.
OneClicker
<!DOCTYPE html>
<html>
<head>
<title>Glitch Playground</title>
<style>
@font-face{font-family:'VT323';src:url('https://fonts.googleapis.com/css2?family=VT323&display=swap');}
body{margin:0;font-family:'VT323',monospace;background:#111;}
canvas{display:block;}
</style>
</head>
<body>
<canvas id="c"></canvas>
<script>
const canvas=document.getElementById('c'),ctx=canvas.getContext('2d');
function resize(){canvas.width=window.innerWidth;canvas.height=window.innerHeight;}
resize();window.onresize=resize;
const colors=['#ff00ff','#00ffff','#ffff00'];
let start=Date.now(), noiseTex;
function createNoise(){noiseTex=ctx.createImageData(canvas.width,canvas.height);for(let i=0;i<noiseTex.data.length;i+=4){let v=Math.random()*50;noiseTex.data[i]=noiseTex.data[i+1]=noiseTex.data[i+2]=v;noiseTex.data[i+3]=255;}ctx.putImageData(noiseTex,0,0);}
// Generate noise once
createNoise();
function ripple(y){return Math.sin((y+Date.now()%canvas.height)/20)*3;}
function draw(){
let t=(Date.now()-start)/1000;
let color=colors[Math.floor(t)%colors.length];
ctx.fillStyle=color;
ctx.fillRect(0,0,canvas.width,canvas.height);
// apply ripple offset
ctx.save();ctx.translate(0,ripple(Date.now()%canvas.height));
ctx.globalAlpha=0.1;
ctx.drawImage(noiseTex,0,0);
ctx.restore();
// scanlines
ctx.fillStyle='rgba(0,0,0,0.1)';
for(let y=0;y<canvas.height;y+=4){ctx.fillRect(0,y,canvas.width,1);}
requestAnimationFrame(draw);
}
draw();
</script>
</body>
</html>