svg rendering waveform

for engraving on cnc

by tom burns

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/3.0.11/svg.min.js"></script>
<div id="container">
<div id="drawing"
  style="width:600px; height: 600px; backgroundColor:white"
></div>
</div>

CSS

html, body, #drawing {
    margin: 0;
}

#container {
  background-color: black;
  width: 600px;
  height: 600px;
  border: 1;
}

JavaScript

// ISOMETRIC

/* create an svg drawing */
var draw = SVG('drawing')

draw.rect(1000,1000)

var points = []

function WavFileVisualizer()
{
	// do nothing
}
{
	var prototype = WavFileVisualizer.prototype;

	prototype.initialize = function()
	{
		Globals.Instance.initialize(this);

		var inputFileChooser = document.createElement("input");
		inputFileChooser.type = "file";
		inputFileChooser.addEventListener("change", this.loadFileAndVisualize);
		document.body.appendChild(inputFileChooser);
	}

	prototype.loadFileAndVisualize = function(event)
	{
		var fileSpecified = event.target.files[0];			   
		WavFile.readFromFile(fileSpecified);
	}

	prototype.loadFileAndVisualize_LoadComplete = function(wavFileLoaded)
	{
		var viewport = new Viewport
		(
			"Viewport0",
			new Coords(400, 200)
		);

		var canvas = document.createElement("canvas");
		canvas.width = viewport.size.x;
		canvas.height = viewport.size.y;
		document.body.appendChild(canvas);

		var graphics = canvas.getContext("2d");
		graphics.fillStyle="#000080";
		graphics.fillRect(0,0,viewport.size.x, viewport.size.y);		   
		graphics.fillStyle="#00ff00";

		var samples = wavFileLoaded.samplesForChannels[0];
		var numberOfSamples = samples.length;
		var pixelsPerSample = viewport.size.x / wavFileLoaded.durationInSamples();

		var drawPos = new Coords(0, 0);

		for (var s = 0; s < numberOfSamples; s+=15)
		{
			drawPos.x = s * pixelsPerSample;

			drawPos.y = 
				viewport.sizeHalf.y 
				+ (samples[s].convertToDouble() * viewport.sizeHalf.y);
        
      points.push([s/15, 200 + samples[s].convertToDouble() * 100]);

			graphics.fillRect(drawPos.x, drawPos.y, 1, 1);
		}
    
    draw.polyline(points).fill("none").stroke({width: 1, color:"white"})
	}
}

function ByteStreamLittleEndian(bytes)
{
	this.bytes = bytes;  

	this.numberOfBytesTotal = this.bytes.length;
	this.byteIndexCurrent = 0;
}
{
	var prototype = ByteStreamLittleEndian.prototype;

	prototype.peekBytes = function(numberOfBytesToRead)
	{
		var...