DISTORTED PIXELS

Distorted Pixels is a cyberpunk-flavored interactive WebGL experiment built with Three.js. A static image is pushed through a shader pipeline and warped in real time by pointer velocity, creating a living glitch field that feels like dragging your hand through a neon data stream.

Night City Snapshot

• Real-time pixel displacement using a THREE.DataTexture.
• Pointer-driven distortion with velocity memory and relaxation decay.
• Four curated demo presets (index.html to index4.html).
• Custom GLSL shader pair wired through js/shaders.js.
• Lightweight setup: no bundler required, just a static server.

Tech Stack

• Three.js (local module at js/lib/three.module.js)
• GLSL shaders (js/shaders.js, plus source files in js/shader/)
• lil-gui for live parameter tuning (js/lib/lil-gui.module.min.js)
• HTML/CSS/JavaScript (ES modules)

File Map

DistortedPixels/
|- index.html           # Demo 1 preset
|- index2.html          # Demo 2 preset
|- index3.html          # Demo 3 preset
|- index4.html          # Demo 4 preset (GUI visible)
|- css/
|  |- base.css          # Layout, typography, and cyber UI styling
|- img/
|  |- cyberdemo.jpg     # Source image sampled by the shader
|- js/
|  |- app.js            # Three.js scene setup + interaction logic
|  |- shaders.js        # Inlined vertex/fragment shaders used at runtime
|  |- shader/
|  |  |- vertex.glsl
|  |  |- fragment.glsl
|  |  |- vertexParticles.glsl
|  |- lib/
|  |  |- three.module.js
|  |  |- lil-gui.module.min.js

Boot Sequence

Because the project uses ES module imports, open it via a local server (not directly as file://).

# option 1: Python
python3 -m http.server 5173

# option 2: Node (if installed)
npx serve .

Then open:

• http://localhost:5173/index.html
• http://localhost:5173/index2.html
• http://localhost:5173/index3.html
• http://localhost:5173/index4.html

Control Surface

The effect is tuned through data-* attributes on #canvasContainer in each index*.html file and read in js/app.js:

• data-grid: resolution of the displacement field.
• data-mouse: radius of pointer influence.
• data-strength: intensity of velocity injection into the field.
• data-relaxation: decay factor each frame (higher = slower fade).

index4.html uses body.demo-4, which makes the lil-gui panel visible (hidden in the other presets by CSS).

How The Distortion Works

1. A square DataTexture is generated as a dynamic offset grid.
2. Pointer movement writes velocity energy into nearby grid cells.
3. Each frame, values are damped by relaxation to create trailing motion.
4. The fragment shader samples the image with UV offsets (offset.rg) to produce the glitch displacement.

Preset Notes

• demo 1 (index.html): balanced, cinematic baseline.
• demo 2 (index2.html): high-density grid, tighter but richer distortion field.
• demo 3 (index3.html): chunkier pixel feel with lower grid resolution.
• demo 4 (index4.html): similar to demo 3 with live GUI enabled.

Customization Ideas

• Swap img/cyberdemo.jpg with your own texture for a new atmosphere.
• Edit shader code in js/shaders.js for immediate runtime changes.
• Keep canonical shader source in js/shader/*.glsl if you prefer external GLSL organization.
• Adjust per-demo data-* values to design different interaction moods.

Notes

• data-mobile-src is present in HTML presets but is not currently consumed in js/app.js.
• The renderer clamps pixel ratio to 2 for performance balance on high-DPI screens.
• Pointer events are used (pointerdown, pointermove, pointerup) for desktop/mobile input compatibility.

Author

Created by Csaba Farkas (Sylenia Inc.)

• GitHub: https://github.com/Sylenia
• LinkedIn: https://www.linkedin.com/in/csaba-farkas-chess-trainer-scrum-master-coach/