October DealsAmazon USOctober deal check: compare before you payAmazon US: current deals, useful picks and tech finds.Check DealsWindows FixRecommendedWindows errors stealing your time? Find the fix fastScan stability, cleanup and performance issues.Fix NowOctober DealsAmazon USDeal season is back - check today's better picksAmazon US: current deals, useful picks and tech finds.See Picks×
Skip to content
ThatPainter
browser experiments

Oscilloscope Art From Your Browser: Draw on a Real Scope With Stereo Audio

Neil Fraser’s browser experiment converts mouse movements into stereo audio that can draw images on a real oscilloscope in X-Y mode. Here’s how it works, how to connect it safely, and how to troubleshoot and create custom scope art.

By ThatPainter Team 7 min read
Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

ThatPainter is reader-supported. When you buy through links on our site, we may earn an affiliate commission. Learn More

You can turn a browser drawing into a luminous image on a real oscilloscope—without USB control, special scope software, or a proprietary protocol. Neil Fraser’s 2018 experiment records mouse movements, converts them into two synchronized audio channels, and plays a generated WAV file. In an oscilloscope’s X-Y mode, those channels become the horizontal and vertical coordinates of a moving trace.

Open Neil Fraser’s original experiment if you have a compatible scope. The original orientation is right audio channel to X and left audio channel to Y. The page and its linked examples are historical resources, so browser behavior and hosted demos may vary.

What’s actually slowing this PC down?

Pick the symptom - the matching free tool is one click away.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

What oscilloscope art actually is

In an ordinary oscilloscope display, the instrument plots voltage against time. The horizontal axis represents time, while the vertical axis represents the measured voltage.

#1 Best Overall
Clyxgs BNC Double Alligator Clip Test Cable Probe Lead Oscilloscope Test, Oscilloscope Probes BNC to Alligator Clip 92cm/36.2in (5pcs)
  • Specifications:Line length 92cm/36.2in, alligator clip opening range: 9mm / 0.36in , Color: red, black,Material: copper wire, metal
  • Connector type: BNC + double alligator clip,Test and laboratory interconnections,BNC interface is commonly used in a test environment
  • BNC connector is molded directly to the wire for pull strength durability and dust and moisture resistance.
  • These test leads are very useful in a lab environment for all your testing needs.
  • Such as Oscilloscopes, signal generators, video surveillance, etc . Ideal for testing work in labs, service shops, schools, home and industry

X-Y mode changes that relationship. One input controls the horizontal position and another controls the vertical position. At every instant, the scope places its trace at a coordinate determined by the two input voltages. If those voltages change in a carefully ordered way, the trace becomes a drawing.

This is related to vector graphics, but the image is not a bitmap. It is a time-ordered path, traced repeatedly. The same technique is often called oscilloscope music when the signals are designed to produce both an image and an audible sound.

How the browser turns a drawing into a picture

  1. You draw with a mouse or trackpad.
  2. JavaScript records the pointer’s X-Y movement.
  3. The coordinates become two numerical waveform streams.
  4. The streams are placed into the left and right channels of a WAV file.
  5. The browser plays that stereo audio through the computer, phone, or USB audio interface.
  6. The oscilloscope interprets the two channels as X and Y positions.

Fraser describes the original implementation as roughly one hundred lines of JavaScript. The browser is not directly communicating with the oscilloscope over USB or LAN; it is simply producing ordinary stereo audio. In the original wiring convention, the right channel drives X and the left channel drives Y.Source

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

What you need

  • The original browser experiment.
  • An oscilloscope with an X-Y display mode and two usable analog inputs.
  • A stereo headphone output, USB audio interface, or compatible phone/tablet audio output.
  • Two suitable signal connections, plus a common ground or shield connection arranged according to the equipment manuals.

Not every oscilloscope supports X-Y operation in the same way. Digital scopes may also differ substantially from analog scopes in triggering, persistence, memory depth, and how they render X-Y traces.

Rank #2
4Pcs Oscilloscope Probe Accessories Ground Wire Cable with Clip Oscilloscope Accessories
  • Not easy to damage, long life, oscilloscope probe accessories.
  • It conforms to RoHS (2002/95/EC) standard, which is and .
  • Suitable for standard oscilloscope probes, easy to use and practical.
  • Lightweight and easy to carry, you can replace your damaged or old ground .
  • The oscilloscope probe ground with clip has and .

Connect and configure the scope

Menu names differ by manufacturer, but this sequence is a practical starting point:

  1. Connect the right audio channel to the input used for X and the left channel to the input used for Y.
  2. Enable both scope channels.
  3. Select X-Y mode rather than the usual voltage-versus-time display.
  4. Start with the lowest practical audio volume and a relatively high volts-per-division setting.
  5. Use the same coupling mode on both channels initially. AC coupling is often a useful starting point for an audio source, but the correct choice depends on the scope and signal.
  6. Center both axes and adjust their scales independently until the trace fits.
  7. Draw a simple line or circle before trying a detailed illustration.
  8. Adjust intensity, focus, persistence, and triggering if those controls are available in X-Y mode.

Hackaday reported needing voltage adjustment and slope triggering rather than edge triggering to obtain a stable result. That is useful practical guidance, not a universal setting; X-Y trigger behavior varies by instrument.Hackaday report

Safety before connecting anything

Use only a line-level or headphone-level source and stay within the oscilloscope’s input-voltage, attenuation, and impedance limits. Begin with low volume and high volts per division. Do not connect an oscilloscope input to a power-amplifier output, speaker terminal, mains-referenced circuit, or unknown source.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Be especially careful with grounded bench oscilloscopes. A ground clip connected to the wrong point can short a circuit or create a hazardous connection. Check the exact scope and adapter documentation before wiring anything.

Rank #3
PNGKNYOCN 3 Feet BNC Q9 to Double Alligator Clip Test Cable Probe Leads Oscilloscope Test for Oscilloscope, Signal Generators, Video Surveillance
  • bnc to alligator clip cable standard bnc ends can be used for all bnc interfaces such as: oscilloscope, signal generators,video surveillance, etc,Application: Testing Work
  • Alligator clip connect and disconnect quickly and easily. Edit immediately and start working.
  • BNC connector to Alligator Clips are molded directly to the wire for pull strength durability .
  • BNC male to Dual Alligator, Red, Black Lead each 16cm AWG18 heavy insulation copper wire, sturdy and durable, easy installation, plastic boots cover crocodile connectors for safety
  • Resistance: 75ohm;Total Length: 1m/3ft; Alligator Clip Max Open Width: 7mm/0.27''

What you should see

A simple stroke should appear as a bright line or moving luminous trace. The image may initially be:

  • Rotated or mirrored: swap X and Y, invert an axis if the scope allows it, or transform the coordinates in code.
  • Too large or clipped: reduce audio level or increase volts per division.
  • Off-center: adjust X and Y position controls.
  • Dim or unstable: review signal level, triggering, focus, and persistence.
  • Flickery: simplify the drawing or reduce the number of points.

Troubleshooting common failures

Symptom Likely causes and fixes
Nothing appears Confirm X-Y mode, enabled channels, audio playback, channel connections, browser playback permission, and volts-per-division settings. A user gesture may be required before the browser starts audio.
A diagonal line appears One channel may be missing, both inputs may be receiving the same channel, or the source may be mono.
The image is rotated or mirrored Swap the inputs, invert one axis, or modify the coordinate transformation.
The image is clipped Lower the source volume or increase the vertical scale. Adjust X and Y separately because channel gains may differ.
The image drifts Try different trigger settings, adjust centering, and compare AC and DC coupling.
The image flickers Reduce point count, simplify the path, improve resampling, or increase the repetition rate. Too many points can make the trace take longer than the display can refresh.
The shape is warped Check unequal channel gain, clipping, input scaling, filtering, interpolation, low-frequency attenuation, and operating-system audio enhancements.
A phone does not work It may lack analog headphone output, use an incompatible USB-C or Lightning adapter, apply volume limiting, or expose unexpected headset wiring. Try a known stereo source or USB audio interface.

Why the picture flickers, bends, or disappears

The drawing must be completed repeatedly fast enough to appear continuous. A path with too many points, long jumps, or unnecessary retracing can leave portions of the image dim or incomplete.

The audio path also imposes limits. Output filtering and bandwidth restrict how quickly the coordinates can change. Audio systems generally do not preserve a true DC level, and AC coupling can remove or shift the average position of the image. Unequal gain between channels changes the aspect ratio, while clipping flattens parts of the drawing.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Operating-system resampling, audio enhancements, and compressed playback can further alter the waveform. A generated WAV played directly is more predictable than an image encoded into a compressed online video or audio stream.

Rank #4
AST Labs Oscilloscope Probe Test Cable BNC to Mini Hook 50 ohm [3 feet]
  • Cable: 36 inches, 50 ohm
  • Mini Hook: 2.25 inches long, 1/8 inch extension
  • BNC: Male
  • Manufacturer Certificate of Authenticity & Lifetime Support
  • Great for all electrical and electronic applications

A follow-up scope-art project documented flicker caused by having too many points to draw in the available time. It also noted that a Rigol DS1054Z did not allow persistence to be increased in X-Y mode, making some captures incomplete.Hackaday scope-art coverage

Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Support on Ko-Fi

Make your own oscilloscope drawings

The easy route: draw freehand

The original experiment is the simplest starting point. Draw with a mouse or trackpad, then tune the scope’s scale and position. Freehand drawings are also useful for learning how point count, speed, and channel balance affect the trace.

Use ordered polylines

For repeatable images, represent the artwork as a sequence of line segments or point arrays. The basic workflow is:

Free tools Windows power users keep installed

One-click scans. No signup required.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
  1. Trace a bitmap into vector-like polylines.
  2. Normalize the X and Y coordinates.
  3. Scale and translate the coordinates into the desired channel range.
  4. Interpolate between points, usually with more samples for longer segments.
  5. Convert the X and Y streams into the two audio channels.
  6. Write a stereo WAV file and loop it.

Ted Yapo’s JavaScript Oscilloscope Wrencher project demonstrates this approach, including coordinate normalization into approximately 0–255 channel values, interpolation based on segment length, WAV generation, and looping playback.

Best Value
RioRand 2-Pack PP150 100 MHz Oscilloscope Clip Probes with Accessory Kit (2PCS) (B)
  • Bandwidth: 100MHz
  • Attenuation: x1/x10
  • System input resistance,10M / 1M, typical input capacity 85-115pf / 18.5-22.5PF
  • Max. Voltage: x1: <200V DC + peak AC, x10: <600V DC + peak AC
  • Compensation range 15-40 PF, tip/head style: 5 mm

Hosted JSFiddle examples from that project—version 3 and version 4—are useful historical references but should not be treated as permanent dependencies. The project includes code that can be saved locally as an HTML file.

For better-looking artwork

SVG paths and Canvas pointer events make it easier to work with deliberate geometry. Bézier curves can be flattened into points, while point simplification reduces unnecessary samples. Segment-length-based resampling keeps long lines from appearing too sparse.

Path order matters. Converting pixels directly into samples does not produce good scope art: the scope needs an efficient route through the image. Minimize unnecessary travel, avoid large jumps where possible, and consider dwell time at important vertices. More advanced systems also manage blanking or retrace behavior, although ordinary stereo audio does not provide a separate blanking channel.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

The Wrencher and other extensions

The Wrencher example extends Fraser’s freehand idea into a repeatable logo generator. A computer or smartphone’s left and right audio outputs feed the scope’s X and Y inputs, while JavaScript turns traced polyline data into a looping waveform.Project details

Other directions include Fraser’s JavaScript oscilloscope clock, which uses the same stereo-audio principle to create an analog clock display, and audiovisual projects such as Youscope. These are related experiments, not evidence that any arbitrary oscilloscope video can safely drive hardware.

Real scope art versus browser visualizers

These two categories are easy to confuse:

Approach What it does Best for
Physical X-Y oscilloscope Uses real stereo waveforms to control two scope coordinates. Electronics learning, makers, physical displays, and scope photography.
Browser-only visualizer Renders an oscilloscope-style effect on screen and may export video. Music promotion, social video, VJ work, and people without hardware.
Pre-rendered WAV Provides a repeatable waveform for a compatible physical setup. Demonstrations and performances, provided playback does not resample or compress it.

For example, Mondniles’ browser tool reacts to audio and exports MP4 with effects such as phosphor glow and persistence trails. It is a video-production tool, not a documented replacement for a stereo WAV intended to drive a real X-Y scope. Its plans and limits are time-sensitive; consult its current pricing page if you choose that route.

The practical verdict

Oscilloscope art from a browser works because a stereo audio signal is already two synchronized voltage waveforms. Feed one channel to X and the other to Y, and the scope turns their changing amplitudes into a moving vector drawing. The most reliable results come from a compatible X-Y scope, conservative signal levels, a direct stereo connection, and artwork designed as an efficient ordered path rather than a sampled bitmap.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Quick Recap

Bestseller No. 1
Clyxgs BNC Double Alligator Clip Test Cable Probe Lead Oscilloscope Test, Oscilloscope Probes BNC to Alligator Clip 92cm/36.2in (5pcs)
Clyxgs BNC Double Alligator Clip Test Cable Probe Lead Oscilloscope Test, Oscilloscope Probes BNC to Alligator Clip 92cm/36.2in (5pcs)
These test leads are very useful in a lab environment for all your testing needs.; Package Content: 5XBNC Alligator Clip Test Lead
$12.99
Bestseller No. 2
4Pcs Oscilloscope Probe Accessories Ground Wire Cable with Clip Oscilloscope Accessories
4Pcs Oscilloscope Probe Accessories Ground Wire Cable with Clip Oscilloscope Accessories
Not easy to damage, long life, oscilloscope probe accessories.; It conforms to RoHS (2002/95/EC) standard, which is and .
$9.28
Bestseller No. 3
Bestseller No. 4
AST Labs Oscilloscope Probe Test Cable BNC to Mini Hook 50 ohm [3 feet]
AST Labs Oscilloscope Probe Test Cable BNC to Mini Hook 50 ohm [3 feet]
Cable: 36 inches, 50 ohm; Mini Hook: 2.25 inches long, 1/8 inch extension; BNC: Male; Manufacturer Certificate of Authenticity & Lifetime Support
Bestseller No. 5
RioRand 2-Pack PP150 100 MHz Oscilloscope Clip Probes with Accessory Kit (2PCS) (B)
RioRand 2-Pack PP150 100 MHz Oscilloscope Clip Probes with Accessory Kit (2PCS) (B)
Bandwidth: 100MHz; Attenuation: x1/x10; System input resistance,10M / 1M, typical input capacity 85-115pf / 18.5-22.5PF
$15.99

Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.

More from the Paint Desk

Recommended PC Tool
Recommended PC Tool
Windows Errors? Fix Them Before They SpreadFree repair scan
Outdated Drivers Are Slowing You DownFree scan - exact matches

Two free Windows tools

One Free Minute Could Fix That PC

Before you go - each of these free tools takes about a minute and tackles what quietly slows a Windows PC down.

Special offer. View Outbyte info, uninstall instructions, EULA, and Privacy Policy.