Single line waveform formulas

index.pug

canvas#canvas Your browser doesn't support the HTML5 Canvas element :(

script.babel

((ctx, w, h) => {
	const maxValue = h / 10;
	const graphWidth = 200;
	const graphHeight = maxValue;
	let curY = h / 2 - graphHeight / 2;
	let curX = 50;
	let waves = [];
  let tick = 0;
	  
  function Main() {
		canvas.width = w;
		canvas.height = h;
    this.init();
  }
  
  Main.prototype = {
    init: function() {
			/**
			 * Initialize the waveforms and push them into 'waves'.
			 * The first argument is the display name, 
			 * the second the function that takes 1 argument (i) 
			 * which is the value to evaluate the function to.
			 */
			waves.push(new WaveForm(
				'sawtooth',
				i => i % maxValue
			));
			
			waves.push(new WaveForm(
				'square',
				i => (i % maxValue * 2 < maxValue) ? maxValue : 0
			));
			
			waves.push(new WaveForm(
				'triangle',
				i => Math.abs((i % (maxValue * 2)) - maxValue)
			));
			
			waves.push(new WaveForm(
				'sine',
				i => maxValue / 2 * Math.sin(i / 24.5) + maxValue / 2
				// the divider ( / 24.5) is only added to spread the graph, you can leave it out or change the value to whatever you like
			));
			
			
      this.request = requestAnimationFrame(() => this.draw());
      window.addEventListener('resize', () => this.resize());
    },
    draw: function() {
      this.request = requestAnimationFrame(() => this.draw());
      ctx.clearRect(0, 0, w, h);
      tick++;
			
			ctx.strokeStyle = 'white';
			ctx.lineWidth = 3;
			ctx.lineCap = 'round';
			waves.forEach(wave => wave.draw(tick));
    }
  };
	
	function WaveForm(name, fn) {
		this.name = name;
		this.fn = fn;
		this.x = 50;
		this.y = 50 + waves.length * (graphHeight + 50);
	}
	
	WaveForm.prototype = {
		draw: function(currentTick) {
			// plot the entire graph first
			this.plotGraph();
			
			// then draw a little circle at the head
			this.drawPosition(currentTick + graphWidth);
			
			// draw the title
			ctx.font = 'Arial 18px';
			ctx.fillStyle = 'white';
			ctx.fillText(this.name, this.x, this.y - 20);
		},
		plotGraph: function() {
			ctx.beginPath();
			ctx.moveTo(this.x, this.y + this.fn(tick));
			for(var i = 1; i < graphWidth; i++) 
				ctx.lineTo(this.x + i, this.y + this.fn(i + tick));
			ctx.stroke();
			ctx.closePath();
		},
	 	drawPosition: function(position) {
			ctx.fillStyle = `hsla(0,0%,100%,${ Math.abs((tick / 100 % 2) - 1) + .25 })`;
			ctx.beginPath();
			ctx.arc(this.x + graphWidth, this.y + this.fn(position), 5, 0, Math.PI * 2);
			ctx.closePath();
			ctx.fill();
		}
	}
  
  const main = new Main();
})(canvas.getContext('2d'), 300, 450);

single-line-waveform-formulas.markdown

Single line waveform formulas

Some default waveforms defined as a single line function

A Pen by Robert on CodePen.

License.

style.scss

body { background: hsla(210,100%,20%,1) }
canvas {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}