Laurian / wavefont

Typeface for rendering data

wavefont

A typeface for rendering data: waveforms, spectrums, diagrams, bars etc.

The charcodes for the data fall under Letters unicode category, therefore recognized as word boundary in regexps and can be selected by Ctrl + → or double click .

Latin set is covered with empty values to allow for recognizing the font by system.

Available styles:

• wavefont-bars
• wavefont-dots
• wavefont-bars-reflected
• wavefont-dots-reflected

Usage

Include @font-face directive:

@font-face {
	font-family: "wavefont";
	font-weight: normal;
	src: url("./wavefont-bars-400.otf");
}

Include amplitude to letter converter:

const fromAmp = require('wavefont');

let input = document.body.appendChild(document.createElement('input'));
input.style.fontFamily = 'wavefont';

//fromAmp gets symbol corresponding to value from -1..1 range
input.value = [-1, -.75, -.5, -.25, 0, .25, .5, .75, 1].map(fromAmp);

Or you can use font directly. There are 256 characters available for the levels of amplitude from -128..127 range. Use 0x200 offset for 0 level, 0x201 for 1 level etc.

//Strings
'\u0180'; //-128
//...
'\u01fe'; //-2
'\u01ff'; //-1
'\u0200'; //0
'\u0201'; //1
'\u0202'; //2
//...
'\u027f'; //127

//ES6 strings
`\u{200}`; //0
`\u{201}`; //1
//...
`\u{27f}`; //127

//Programmatically
let char = String.fromCharCode(0x200 + level);

Building

To build or debug own wavefont:

You get builder function, available in node:

const createFont = require('wavefont');

let font = createFont({
	name: 'wavefont',

	//append to the end of the name, e.g. `-bold`
	postfix: '',

	//letter-spacing
	spacing: 0,

	//letter width/height proportion
	ratio: 1/64,

	//unicode range start
	//ideally the letter range, good ones (for 255 levels):
	//0x0100, 0x1100, 0x1500 0x1e00, 0xa000, 0xb000, 0xc000, 0xd000
	//symmetrical offset is 0x0200
	offset: 0x0200,

	//number of amplitude levels
	//values span from -128..-1 and 0..127
	levels: 256,

	//symmetrical mode
	reflect: false,

	//style - bars or dots
	type: 'bars',

	//values outside the amplitude range
	clip: 1.5,

	//size of dot, number of levels
	dotSize: 2
});

font now is an opentype.Font instance, you can attach it to window fonts with add-font, output to stdout, download, save to file etc., see opentype.js for reference.

Credits

opentype.js — covers technical details of generating OpenType font.