How to Build a Fictional 1960s Cold War Submarine Sonar Simulator in the Browser Using Claude 3.5 Sonnet

The Allure of the Phosphor Glow

There is something deeply satisfying about old analogue military tech. The glowing green phosphor of a cathode-ray tube, the rhythmic sweep of a radial line, and the haunting, metallic ping echoing in a claustrophobic steel hull. It is pure cinematic tension, and it is incredibly fun to build.

While most developers use AI to build yet another SaaS dashboard or a generic todo app, we prefer using these models to resurrect dead tech. Today, we are building a fictional 1960s Cold War submarine sonar simulator. No external libraries, no massive frameworks—just vanilla HTML5 Canvas, the Web Audio API, and Claude 3.5 Sonnet doing the heavy lifting.

If you have ever wanted to sit in a dark room and pretend you are tracking an unidentified contact off the coast of Murmansk, this guide is for you.

The Stack: Why Claude 3.5 Sonnet Rules the Waves

Building canvas-based animations with mathematically accurate sweeps requires a model that understands trigonometry, audio synthesis, and real-time state management. While you can check out our comparison on Claude 3.5 Sonnet workflows to see how it handles general development, the short version is simple: Sonnet is unparalleled at raw, multi-system UI generation. It understands how to coordinate visual rendering with audio contexts without throwing a tantrum.

To make this work, we are going to write a master prompt that forces Claude to think like a 1960s systems engineer. We will construct a single, self-contained HTML file that you can run locally by double-clicking it.

The Blueprint: What We Are Building

To make this simulator feel authentic, we need four core components:

1. The Sweep: A rotating radial line that decays in brightness, leaving a glowing trail.
2. The Blips: Randomly generated or scriptable "contacts" that illuminate briefly when the sweep passes over them, slowly fading back into the dark.
3. The Sound: Synthesised audio using the browser's Web Audio API. No static MP3 files allowed. We want a dynamic, metallic resonant ping that matches the exact moment the sweep hits a contact.
4. The Interface: A vintage dashboard complete with toggles, dials, and a paper-feed log printing out cryptic sonar readings.

Prompting the Sonar Mechanics

Before you head over to your favorite editor, you need to structure your prompt carefully. If you ask Claude for a "submarine simulator," you will get a generic game. We need to be highly specific about the mathematical constraints.

Here is a prompt layout designed to get the best result. Copy this, adjust the parameters to your liking, or paste it directly into our /prompts to refine it:

`text Create a single, self-contained HTML page containing a 1960s Cold War submarine sonar simulator. Use HTML5 Canvas for the sonar display and the Web Audio API for all sound synthesis. Do not use any external dependencies, frameworks, or libraries. All CSS and JS must be inlined.

The layout should feature: 1. A central circular sonar screen with a rotating radial sweep (clockwise). 2. Old-school green phosphor aesthetic with bloom, scanlines, and a CRT-style curvature. 3. A controls panel on the right with retro toggle switches (audio on/off, sweep speed, active ping trigger) and a physical log output printing mock technical data (e.g., "HEARING RANGE: 12,000 YDS", "CONTACT DESIGNATION: ECHO-1").

Technical Requirements: - Sound Synthesis: Generate a realistic sonar ping using Web Audio API oscillators and gain envelopes. The ping should have a high-frequency strike (~800Hz) followed by a metallic, decaying resonance. - Sync: When the sweep line passes over a contact, trigger a synced audio ping. The volume of the ping should scale based on how close the contact is to the center. - Physics: Add 3 persistent contacts. As the sweep passes over them, they fade up in intensity on the canvas and fade out slowly as the sweep moves away, leaving a persistent phosphor trail. `

If you hit any unexpected rendering bugs while runing the output, you can jump over to our Claude troubleshooting hub to see how to patch canvas loop errors quickly.

Synthesising the Perfect "Ping"

One of the coolest things about what makes Claude tick is its deep understanding of DSP (Digital Signal Processing). Instead of loading a cheesy audio file, Claude can write code to configure an oscillator node to mimic real physical acoustics.

When you run the generated code, take a look at the Web Audio API implementation. The model should create an AudioContext and chain an OscillatorNode (set to a sine wave) to a BiquadFilterNode (for that wet, underwater resonance), ending with a GainNode to handle the rapid volume spike and gradual decay.

When the sweep hits a blip, the sound should trigger instantly, creating an immersive, slightly eerie atmosphere. If the ping sounds too clean, you can prompt Claude to add a tiny bit of low-frequency white noise to simulate old vacuum-tube hum.

Injecting the 1960s Aesthetic (CSS Scanlines and Bloom)

An authentic CRT screen is not just flat green pixels. It has physical texture. Claude achieves this by layering CSS effects over the HTML5 Canvas:

• The Scanline Overlay: A repeated linear gradient applied over the canvas element to create the classic horizontal lines of old monitors.
• The CRT Curve: A subtle radial gradient on top to simulate the spherical glass curvature of a physical cathode-ray tube.
• The Bloom Effect: A CSS filter: drop-shadow() or browser-native canvas shadow blur that makes the glowing green lines bleed into the surrounding blackness, simulating the phosphor glow.

Taking the Helm

Once Claude spits out the code, save it as sonar.html and open it in Chrome, Firefox, or Safari. Click the "Power On" switch (the browser requires user interaction before it can start playing Web Audio), turn up your volume, and watch the green sweep begin its silent, circling hunt.

This project is a fantastic reminder that browser tech has progressed to a point where we can build incredibly rich, atmospheric environments without downloading half the internet via npm. Grab the prompt, spin up Claude 3.5 Sonnet, and start hunting for silent runs in the deep.