ChronoStack

• 

  Mememory Leak Simulator

• 

  None

• 

  Parrallel Chaos

• 

  Recurssion Abyss

Inspiration

Most digital art uses code merely as an invisible tool to draw pre-calculated shapes, render 2D canvases, or play video loops. We wanted to flip this paradigm completely for Hack the Arts.

What if the artwork isn't what the code draws, but the physical execution of the code itself?

We were inspired by the hidden, chaotic rhythm inside our computers the relentless pushing and popping of call stacks, the rapid allocation and clearing of RAM, and the subtle micro-second lags in the JavaScript event loop. ChronoStack treats software execution as a live artistic medium, giving a physical, visual 3D organism and generative soundscape to abstract computer science concepts.

What It Does

ChronoStack is an interactive, browser-based digital art instrument with a split-screen interface:

1. Left Side (Code Playground): An interactive code editor pre-loaded with execution profiles (The Recursion Abyss, Memory Leak Simulator, Parallel Sorting Chaos) or custom user-written asynchronous JavaScript code.
2. Right Side (Living 3D Sculpture & Spatial Audio): A real-time WebGL organism (Three.js) and sound synthesizer (Tone.js) that physically reacts to the program running in real time.

How Logic Maps to Art

As your code executes line-by-line, our telemetry engine extracts execution metrics and feeds them into mathematical mapping functions:

• Call Stack Depth ($d$): Controls the vertical extension and Y-axis scaling of the 3D geometry: $$H(d) = H_{\text{base}} + \alpha \cdot \log(1 + d)$$
• Memory Heap Allocation ($\Delta M$): Drives vertex displacement noise and mesh inflation: $$V_{\text{disp}}(x,y,z) = V_0 + \beta \cdot \Delta M \cdot \sin(\omega t)$$
• Event-Loop Lag ($\tau$): Shifts the GLSL shader color spectrum and noise frequency.
• Garbage Collection (GC): Triggers a sudden visual implosion pulse and percussive audio feedback note.

How We Built It

We built ChronoStack completely in-browser to give judges and users instant, zero-setup access:

• Engine & Frontend: Built with React, Next.js, and @uiw/react-codemirror for live code editing.
• 3D Visuals: Powered by Three.js using dynamic parametric geometries, instanced mesh fields, custom GLSL vertex shaders, and orbit controls.
• Generative Audio: Tone.js FM synths mapped to runtime telemetry high recursion steps increase pitch octaves, while memory spikes modulate synth filters.
• Telemetry Wrapper: An asynchronous JS runtime executor that hooks into function call depth, heap deltas, and event loop delays without crashing the main browser thread.

Challenges We Faced

• Performance & Loop Freezing: Executing heavy recursive loops (like Fibonacci) in JavaScript can easily lock the main thread, freezing both the Three.js rendering loop and the browser UI. We solved this by building an asynchronous step-yielding mechanism (sculptor.wait()) to keep telemetry fluid at 60 FPS.
• Making Telemetry Feel "Alive": Raw performance numbers look erratic. Smoothly translating sudden spikes in stack depth or memory into organic 3D mesh spring physics required careful interpolation using exponential smoothing functions.

What We Learned

We learned how deeply expressive low-level computing concepts can be when given a sensory interface. Algorithmic efficiency isn't just about speed it has its own aesthetic fingerprint. A recursive function looks like an soaring spire, a memory leak looks like an inflating bubble, and garbage collection feels like a sudden pulse of relief.

Alignment with "Hack the Arts"

Without the underlying CPU event loop, call stack, and memory heap actively executing logic, this artwork literally ceases to exist. It is not a static 3D model or pre-baked video it is a living visual entity birthed directly by technology in real time.

Built With

• codemirror
• css3
• glsl
• javascript
• next.js
• react
• three.js
• tone.js
• webgl