James Sumners avatar James Sumners committed 8e2957e

Initial commit.

Comments (0)

Files changed (4)

Empty file added.

Added
New image
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>Frequency Calculator</title>
+	<style>
+		table {
+			border-collapse: collapse;
+			border-spacing: 0;
+			margin: auto auto;
+			table-layout: fixed;
+			width: 75%;
+		}
+
+		tr {
+			padding: 0;
+			width: 100%;
+		}
+
+		td {
+			border: 1px solid black;
+			text-align: center;
+			margin: 0;
+			width: auto;
+		}
+
+		.dtriangle_open {
+			cursor: pointer;
+		}
+
+		.dtriangle_closed {
+			cursor: pointer;
+			-moz-transform:rotate(-90deg);
+			-webkit-transform:rotate(-90deg);
+			-o-transform:rotate(-90deg);
+			-ms-transform:rotate(-90deg);
+		}
+	</style>
+</head>
+<body>
+	<section id="calculator">
+		<h1>Calculator</h1>
+		<p>
+			BPM: <input id="bpm" name="bpm" length="3">&nbsp;
+			<input id="calcButton" type="button" value="calculate">
+		</p>
+
+		<table id="output">
+			<tbody>
+				<tr>
+					<th>&nbsp;</th>
+					<th>1/32</th>
+					<th>1/16</th>
+					<th>1/8</th>
+					<th>1/4</th>
+					<th>1/2t</th>
+					<th>1/2</th>
+					<th>1</th>
+					<th>2</th>
+					<th>3</th>
+					<th>4</th>
+				</tr>
+				<tr>
+					<th>Hz</th>
+					<td id="thirtysecond">0.00</td>
+					<td id="sixteenth">0.00</td>
+					<td id="eighth">0.00</td>
+					<td id="quarter">0.00</td>
+					<td id="triplets">0.00</td>
+					<td id="half">0.00</td>
+					<td id="whole">0.00</td>
+					<td id="twobars">0.00</td>
+					<td id="threebars">0.00</td>
+					<td id="fourbars">0.00</td>
+				</tr>
+			</tbody>
+		</table>
+	</section>
+
+	<section id="information">
+		<h1><img class="dtriangle_open" src="images/dtriangle.gif"> Information</h1>
+
+		<p>This calculator is inspired by Mr. Bill's <a href="http://vimeo.com/23941142">Ableton Tutorial 15: Calculating Hz for LFO rates</a>. The caclulator is a work in progress. I plan to add the full list of common time divisions available in Ableton Live. Additionally, I plan to add output for delays in milliseconds.</p>
+
+		<p>This calculator is written with <a href="http://www.whatwg.org/html">modern HTML</a>, CSS, and JavaScript. If it isn't "working" for you, please try another browser. This calculator was developed with <a href="https://www.google.com/chrome">Google Chrome</a>, but the following browsers should also work: <a href="http://www.apple.com/safari/">Safari 5.1+</a>, <a href="http://www.firefox.com/">Firefox 9+</a>, <a href="http://www.opera.com/">Opera 11.60+</a>, and <a href="http://www.microsoft.com/ie">Internet Explorer 9+</a>.</p>
+	</section>
+
+	<script src="main.js"></script>
+</body>
+</html>
+(function() {
+
+	var freqcalc = {},
+		_ = function(selector) {
+			var sel = selector.substr(0,1);
+			selector = selector.substr(1);
+
+			if (sel === '#') {
+				return document.getElementById(selector);
+			}
+
+			if (sel === '.') {
+				return document.getElementsByClassName(selector);
+			}
+		},
+		bpmInput = _('#bpm'),
+		calc = function() {},
+		i, j,
+		openTriangles = _('.dtriangle_open'),
+		outputElements = {
+			thirtysecond: _('#thirtysecond'),
+			sixteenth: _('#sixteenth'),
+			eighth: _('#eighth'),
+			quarter: _('#quarter'),
+			triplets: _('#triplets'),
+			half: _('#half'),
+			whole: _('#whole'),
+			twobars: _('#twobars'),
+			threebars: _('#threebars'),
+			fourbars: _('#fourbars')
+		},
+		toggleTriangle;
+
+	freqcalc.constants = {
+		// All note/beat constants are defined at 60 beats per minute
+		quarterNoteMsec: 1000
+	};
+
+	freqcalc.noteLengthToHz = function(bpm) {
+		if (!bpm) {
+			throw new Error('Missing argument.');
+		}
+
+		var halfNote, hzTable = {};
+
+		// bpm divided by 120 gives half note length
+		halfNote = bpm / 120.0;
+
+		hzTable.fourbars = halfNote / 16.0;
+		hzTable.threebars = halfNote / 8.0;
+		hzTable.twobars = halfNote / 4.0;
+
+		hzTable.whole = halfNote / 2.0;
+		hzTable.half = halfNote;
+		hzTable.quarter = 2 * halfNote;
+		hzTable.triplets = 3 * halfNote;
+		hzTable.eighth = 4 * halfNote;
+		hzTable.sixteenth = 8 * halfNote;
+		hzTable.thirtysecond = 16 * halfNote;
+
+		return hzTable;
+	};
+
+	calc = function() {
+		var hzTable = freqcalc.noteLengthToHz(bpmInput.value, '0'),
+			outputTable = _('#output');
+
+		if (!hzTable) {
+			throw new Error('Unexpected output.');
+		}
+
+		for (var prop in hzTable) {
+			if (hzTable.hasOwnProperty(prop)) {
+				outputElements[prop].innerText = hzTable[prop].toString().substr(0,4);
+			}
+		}
+	};
+
+	_('#calcButton').addEventListener('click', calc, false);
+
+	toggleTriangle = function() {
+		var classes = this.className,
+			children,
+			container = this.parentNode.parentNode,
+			i, j,
+			parent = this.parentNode;
+
+		children = container.children;
+
+		if (classes.match(/dtriangle_open/)) {
+			this.className = this.className.replace(/dtriangle_open/, 'dtriangle_closed');
+
+			for (i = 0, j = children.length; i < j; i += 1) {
+				if (children[i] !== parent) {
+					children[i].style.display = 'none';
+				}
+			}
+		} else {
+			this.className = this.className.replace(/dtriangle_closed/, 'dtriangle_open');
+
+			for (i = 0, j = children.length; i < j; i += 1) {
+				children[i].style.display = 'block';
+			}
+		}
+	};
+
+	for (i = 0, j = openTriangles.length; i < j; i += 1) {
+		openTriangles[i].addEventListener('click', toggleTriangle, false);
+	}
+}());
Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.