Jul 2022

Oscilloscope Sound GeneratorFrom drawing to sound

Oscilloscope Sound Generator

Download the WAV and play it on a real oscilloscope or an emulator. - Free emulator software

- This soundfile is generated every time you load the page.

SVG - Intention.
Canvas - Redrawn

How it works

  1. Parse the drawing instructions into different shapes.
  2. Calculate the full length and store intermedia lookup.
  3. Create lookup for points on each line with equal distance from each other.
  4. This lookup is used while drawing the canvas or the wave file.

The canvas uses the same instructions and lookup to draw as the sound does, with these additional features for visibility.

  • The start is marked with a green square.
  • Each shape segment is colored from start to finish with red to blue.
  • The whole line is shaded light to dark, with grey lines showing the connectivity.

Unfortunately, because I need to use inline svg data, I cannot allow people to upload their own image. If they really want to, you can use the source code.

Uses the excellent rochars/wavefile javascript library to render to sound.

SVG compatibility

The following support has been built in, more support could be added in source.

  • The third number of the svg.viewbox is used to get a square shape and to know the scale of the drawing.
  • The "d" attribute of the first path in the svg is used for the drawing, other parts are ignored.
  • Absolute and relative positioning.
  • M / m - Move
  • L / l - Straight lines.
  • A / a - Partial and full arcs, however ellipses are not supported.
  • Q / q / T / t - Quadratic bezier curves and the continuation of them.
  • C / c / S / s - Qubic bezier curves and the continuation of them.
  • z - Closing the path. - If a new path is started after this, it can be closed as well.