funkytype.js

// Makes text funky.

"use strict";

function funkyType(selector, args) {

	function limitDecimals(n, decimals) {
		decimals = Math.pow(10, decimals);
		return Math.trunc(n * decimals) / decimals;
	}

	function minMaxRand(min, max) {
		return Math.random() * (max - min) + min;
	}

	// Get all the elements to process.
	var funkyTypes = document.getElementsByClassName(selector);

	// Loop through elements.
	for (var i = 0; i < funkyTypes.length; i++) {

		var elt = funkyTypes[i];
		var str = elt.innerHTML;
		var newhtml = [];

		// Loop through textcontent one char at a time.
		for (var j = 0; j < str.length; j++) {

			var char = str[j];

			// Skip whitespace.
			if (char === "\t" || char === " " || char === "\n") {
				continue;
			}

			// TODO: this is kinda messy... ah well, suffices for now.
			var span = [
				"<span class=\"",
				selector,
				"_Char\" style=\"display: inline-block; ",
				// Randomize char size.
				"transform: scale(",
				limitDecimals(minMaxRand(args.size.min, args.size.max), 4),
				// Randomize char rotation.
				") rotate(",
				Math.random() > 0.5 ? "-" : "", // Randomize tilting direction
				limitDecimals(minMaxRand(args.rot.min, args.rot.max), 4),
				"turn",
				// Randomize x and y offsets.
				") translate(",
				limitDecimals(Math.random() * args.x, 1),
				"px,",
				limitDecimals(Math.random() * args.y, 1),
				"px)",
				";\">",
				// Put char.
				char,
				"</span>"
			].join("");

			// Push span onto new innerhtml.
			newhtml.push(span);
		}

		// Turn array into string and update DOM.
		elt.innerHTML = newhtml.join("\n");
	}
}

var args = {
	size: {
		min: 0.75,
		max: 1.5
	},
	rot: {
		min: 0,
		max: 0.01
	},
	x: 2,
	y: 5
};

funkyType("jsFunkytype", args);