Skip to content
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
node_modules/
.DS_Store
.vercel
17 changes: 17 additions & 0 deletions AESTHETIC_NOTES.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
# Schizo Voxel Drift Notes

This variant avoids copying any single living artist's style. The direction uses a broader post-internet / glitch / browser-surveillance language: degraded screenshots, overloaded captions, fake diagnostic overlays, web detritus, and the uneasy feeling of wandering inside a captured virtual world.

Research cues:

- Brainrot: absurd, fast, self-referential internet debris and algorithmic overstimulation.
- Schizoposting: chaotic meme language, non-sequitur captions, faux breakdown energy. This implementation treats that as fictional UI paranoia rather than a medical claim.
- Post-internet virtual-world art: screen-mediated wandering, surveillance-camera detachment, uncanny game spaces, and emotional overload.

Sources consulted:

- Plaster Magazine, "Digital Dada or Futurist slop? An investigation into brainrot as art"
- First Monday, "The aesthetics of the self: The meaning-making of Internet aesthetics"
- Rhizome Net Art Anthology, "Nine Eyes of Google Street View"
- Wallpaper, "How ethical is Google Street View, asks Jon Rafman in Copenhagen"
- ACC Research, "Eco-Fascism, Accelerationism, and Schizoposting"
67 changes: 43 additions & 24 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Voxel Game Test</title>
<title>Fable5 MC // Schizo Voxel Drift</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=VT323&family=Press+Start+2P&display=swap" rel="stylesheet" />
Expand All @@ -16,15 +16,28 @@
}
</script>
</head>
<body>
<body class="schizo-mode">
<canvas id="game"></canvas>

<div id="signal-burn" aria-hidden="true"></div>
<div id="doom-ticker" aria-hidden="true">
<span>THE CHUNK REMEMBERS YOU</span>
<span>SEED NULL / SKY CAMERA ONLINE</span>
<span>STOP SCROLLING THE TERRAIN</span>
<span>YOU ARE INSIDE THE MAP PREVIEW</span>
</div>

<!-- ======================= HUD (in game) ======================= -->
<div id="hud" class="hidden">
<div id="crosshair"></div>
<div id="item-name"></div>
<div id="hotbar"></div>
<div id="debug" class="hidden"></div>
<div id="paranoia-hud" aria-hidden="true">
<span>REC 00:00:00</span>
<span>entity confidence: LOW</span>
<span>dream cache: leaking</span>
</div>
<div id="underwater-overlay"></div>
<div id="damage-vignette"></div>
</div>
Expand All @@ -41,56 +54,62 @@
<!-- ======================= Title screen ======================= -->
<div id="title-screen" class="overlay">
<div class="title-stack">
<div class="mc-logo">VOXEL GAME</div>
<div class="mc-sublogo">TEST</div>
<div class="splash" id="splash-text">Now in JavaScript!</div>
<div class="antenna-copy">archived from a browser tab that refused to close</div>
<div class="mc-logo" data-text="FABLE5 MC">FABLE5 MC</div>
<div class="mc-sublogo">SCHIZO VOXEL DRIFT</div>
<div class="splash" id="splash-text">The seed is watching!</div>
<div class="system-confession">
<span>CAM_09_EYES://terrain-feed</span>
<span>biome mood: overstimulated</span>
<span>localStorage contains a little prophecy</span>
</div>
<div class="menu-buttons">
<button class="mc-button" id="btn-play">Play World</button>
<button class="mc-button" id="btn-play">Enter Saved Delusion</button>
<div class="seed-row">
<input id="seed-input" type="text" placeholder="Seed (leave empty = random)" spellcheck="false" />
<button class="mc-button small" id="btn-new-world">Create New World</button>
<input id="seed-input" type="text" placeholder="Seed phrase / omen / nothing" spellcheck="false" />
<button class="mc-button small" id="btn-new-world">Generate New Spiral</button>
</div>
<button class="mc-button" id="btn-title-controls">Controls</button>
<button class="mc-button" id="btn-title-controls">Ritual Controls</button>
</div>
<div class="title-footer">
<span>Three.js Voxel Engine</span>
<span>Not affiliated with Mojang</span>
<span>Three.js Voxel Engine // no mobs, only witnesses</span>
<span>Not affiliated with Mojang // affiliated with the feed</span>
</div>
</div>
</div>

<!-- ======================= Loading screen ======================= -->
<div id="loading-screen" class="overlay hidden">
<div class="loading-stack">
<div class="loading-text">Building terrain</div>
<div class="loading-text">Scraping the inner terrain...</div>
<div class="loading-bar"><div id="loading-fill"></div></div>
<div class="loading-tip" id="loading-tip">Tip: Double-tap SPACE to fly</div>
<div class="loading-tip" id="loading-tip">Tip: Double-tap SPACE to leave the timeline</div>
</div>
</div>

<!-- ======================= Pause menu ======================= -->
<div id="pause-menu" class="overlay hidden">
<div class="menu-stack">
<div class="menu-title">Game Paused</div>
<button class="mc-button" id="btn-resume">Back to Game</button>
<button class="mc-button" id="btn-options">Options</button>
<button class="mc-button" id="btn-controls">Controls</button>
<button class="mc-button" id="btn-quit">Save &amp; Quit to Title</button>
<div class="menu-title">Feed Paused</div>
<button class="mc-button" id="btn-resume">Return to Signal</button>
<button class="mc-button" id="btn-options">Distortion Options...</button>
<button class="mc-button" id="btn-controls">Ritual Controls</button>
<button class="mc-button" id="btn-quit">Save &amp; Exit the Loop</button>
</div>
</div>

<!-- ======================= Options ======================= -->
<div id="options-menu" class="overlay hidden">
<div class="menu-stack wide">
<div class="menu-title">Options</div>
<div class="menu-title">Distortion Options</div>
<div class="opt-row"><label>Render Distance: <span id="val-render">7</span> chunks</label><input type="range" id="opt-render" min="4" max="12" step="1" /></div>
<div class="opt-row"><label>Field of View: <span id="val-fov">70</span></label><input type="range" id="opt-fov" min="40" max="110" step="1" /></div>
<div class="opt-row"><label>Mouse Sensitivity: <span id="val-sens">100</span>%</label><input type="range" id="opt-sens" min="20" max="300" step="5" /></div>
<div class="opt-row"><label>Volume: <span id="val-vol">70</span>%</label><input type="range" id="opt-vol" min="0" max="100" step="5" /></div>
<div class="opt-row checks">
<button class="mc-button small toggle" id="opt-bob">View Bobbing: ON</button>
<button class="mc-button small toggle" id="opt-clouds">Clouds: ON</button>
<button class="mc-button small toggle" id="opt-music">Music: ON</button>
<button class="mc-button small toggle" id="opt-bob">Body Drift: ON</button>
<button class="mc-button small toggle" id="opt-clouds">Sky Noise: ON</button>
<button class="mc-button small toggle" id="opt-music">Ambient Loop: ON</button>
<button class="mc-button small toggle" id="opt-smooth">Smooth Lighting: ON</button>
</div>
<button class="mc-button" id="btn-options-done">Done</button>
Expand All @@ -100,7 +119,7 @@
<!-- ======================= Controls help ======================= -->
<div id="controls-menu" class="overlay hidden">
<div class="menu-stack wide">
<div class="menu-title">Controls</div>
<div class="menu-title">Ritual Controls</div>
<div class="controls-grid">
<span>Move</span><span>W A S D</span>
<span>Jump / Swim up</span><span>SPACE</span>
Expand All @@ -116,7 +135,7 @@
<span>Debug info</span><span>F3</span>
<span>Pause</span><span>ESC</span>
</div>
<div class="controls-note">Creative-style: blocks are infinite. TNT explodes when broken!</div>
<div class="controls-note">Creative-style: blocks are infinite. TNT is a push notification from below.</div>
<button class="mc-button" id="btn-controls-done">Done</button>
</div>
</div>
Expand Down
46 changes: 23 additions & 23 deletions src/ui.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,28 +7,28 @@
import { BLOCKS, PALETTE } from './blocks.js';

const SPLASHES = [
'Now in JavaScript!',
'Three.js powered!',
'100% procedural pixels!',
'Punch the TNT!',
'Double-tap SPACE to fly!',
'Infinite-ish terrain!',
'No assets were harmed!',
'Caves included!',
'Also try the real one!',
'Made of canvas!',
'Sneak near edges!',
'Watch for falling sand!',
'The seed is watching!',
'A screenshot became a biome!',
'You are the missing chunk!',
'Double-tap SPACE to leave the feed!',
'Infinite terrain, finite attention!',
'The cave has push notifications!',
'LocalStorage knows your old coordinates!',
'Crops are low-poly omens!',
'The skybox is a witness!',
'Bedrock dreams in JPEG!',
'CTRL sprint from the algorithm!',
'A torch is just a small confession!',
];

const TIPS = [
'Tip: Double-tap SPACE to fly',
'Tip: Hold CTRL (or double-tap W) to sprint',
'Tip: Press E to choose any block',
'Tip: TNT explodes when you break it…',
'Tip: Torches light up caves',
'Tip: Middle-click copies the block you aim at',
'Tip: SHIFT-sneaking stops you falling off edges',
'Tip: Double-tap SPACE to leave the timeline',
'Tip: Hold CTRL when the feed starts chasing you',
'Tip: Press E to open the material hallucination grid',
'Tip: TNT is loud because the map is insecure',
'Tip: Torches make caves admit things',
'Tip: Middle-click copies the block that copied you',
'Tip: SHIFT-sneaking keeps the void from recommending you',
];

export class UI {
Expand Down Expand Up @@ -114,14 +114,14 @@ export class UI {
this.$('opt-fov').value = s.fov; this.$('val-fov').textContent = s.fov;
this.$('opt-sens').value = s.sens; this.$('val-sens').textContent = s.sens;
this.$('opt-vol').value = s.vol; this.$('val-vol').textContent = s.vol;
this.$('opt-bob').textContent = `View Bobbing: ${s.bob ? 'ON' : 'OFF'}`;
this.$('opt-clouds').textContent = `Clouds: ${s.clouds ? 'ON' : 'OFF'}`;
this.$('opt-music').textContent = `Music: ${s.music ? 'ON' : 'OFF'}`;
this.$('opt-bob').textContent = `Body Drift: ${s.bob ? 'ON' : 'OFF'}`;
this.$('opt-clouds').textContent = `Sky Noise: ${s.clouds ? 'ON' : 'OFF'}`;
this.$('opt-music').textContent = `Ambient Loop: ${s.music ? 'ON' : 'OFF'}`;
this.$('opt-smooth').textContent = `Smooth Lighting: ${s.smooth ? 'ON' : 'OFF'}`;
}

setSeedPlaceholder(seed) {
this.$('seed-input').placeholder = `Seed (current: ${seed})`;
this.$('seed-input').placeholder = `Current omen: ${seed}`;
}

setLoadingProgress(frac) {
Expand Down
Loading