WIP proper help and options panel
Keypresses not working. TweeningFns inputs are not synced.
This commit is contained in:
Tyler Hallada
parent
ce38957abe
commit
e97a4ee3ec
@ -4,19 +4,52 @@
|
||||
}
|
||||
|
||||
html {
|
||||
overflow: hidden;
|
||||
background-color: #1e1e1e;
|
||||
}
|
||||
|
||||
#help {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
background-color: black;
|
||||
button {
|
||||
background-color: #2e2e2e;
|
||||
border-color: #4a4a4a;
|
||||
color: #fafafa;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
td, th {
|
||||
padding: 2px 5px;
|
||||
}
|
||||
|
||||
input {
|
||||
color: white;
|
||||
background-color: #2e2e2e;
|
||||
border-color: #4a4a4a;
|
||||
}
|
||||
|
||||
input[type=number] {
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
div.panel {
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
border: 2px solid #1e1e1e;
|
||||
color: white;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
top: 26px;
|
||||
left: 0;
|
||||
z-index: 11;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
#help h2 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#help table {
|
||||
color: white;
|
||||
}
|
||||
|
||||
#options {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
242
index.html
242
index.html
@ -1,114 +1,134 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Proximity Structures</title>
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<!-- open graph tags -->
|
||||
<meta property="og:title" content="Proximity Structures" />
|
||||
<meta property="og:url" content="http://proximity.hallada.net/" />
|
||||
<meta property="og:image" content="http://proximity.hallada.net/img/proximity-300-zoomed.png" />
|
||||
<meta property="og:image:type" content="image/png" />
|
||||
<meta property="og:image:width" content="300" />
|
||||
<meta property="og:image:height" content="300" />
|
||||
<meta property="og:image:alt" content="Screenshot of the animation in action" />
|
||||
<meta property="og:description" content="A procedurally generated and interactive animation created with PixiJS" />
|
||||
</head>
|
||||
<body>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.2.2/pixi.min.js"></script>
|
||||
<script src="js/proximity.js"></script>
|
||||
<div id="help" style="display: none;">
|
||||
<h2>Help</h2>
|
||||
<table>
|
||||
<tr>
|
||||
<th>Interaction</th>
|
||||
<th>Action</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>mouse hover</td>
|
||||
<td>push points away from cursor</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>mouse/touch click and hold</td>
|
||||
<td>attract points to cursor, then explode outwards</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>mouse wheel scroll down</td>
|
||||
<td>slow down time</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>mouse wheel scroll up</td>
|
||||
<td>speed up time</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>left</td>
|
||||
<td>hold to restrict points to the left of the screen</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>right</td>
|
||||
<td>hold to restrict points to the right of the screen</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>up</td>
|
||||
<td>hold to restrict points to the top of the screen</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>down</td>
|
||||
<td>hold to restrict points to the bottom of the screen</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>makes points move linearly</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>makes points meander</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>makes points snappy</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td>makes points bouncy</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5</td>
|
||||
<td>makes points elastic</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>6</td>
|
||||
<td>makes points overshoot</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>f</td>
|
||||
<td>toggle FPS counter</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>d</td>
|
||||
<td>toggles debug mode (including FPS counter)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>n</td>
|
||||
<td>toggles display of nodes</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>l</td>
|
||||
<td>toggles display of lines</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>?</td>
|
||||
<td>toggles this help modal</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</body>
|
||||
<head>
|
||||
<title>Proximity Structures</title>
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<!-- open graph tags -->
|
||||
<meta property="og:title" content="Proximity Structures" />
|
||||
<meta property="og:url" content="http://proximity.hallada.net/" />
|
||||
<meta property="og:image" content="http://proximity.hallada.net/img/proximity-300-zoomed.png" />
|
||||
<meta property="og:image:type" content="image/png" />
|
||||
<meta property="og:image:width" content="300" />
|
||||
<meta property="og:image:height" content="300" />
|
||||
<meta property="og:image:alt" content="Screenshot of the animation in action" />
|
||||
<meta property="og:description" content="A procedurally generated and interactive animation created with PixiJS" />
|
||||
</head>
|
||||
<body>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.2.2/pixi.min.js"></script>
|
||||
<script src="js/proximity.js"></script>
|
||||
<div id="options">
|
||||
<button id="toggle-help">Help</button>
|
||||
<button id="toggle-controls">Controls</button>
|
||||
</div>
|
||||
<div id="help" class="panel" style="display: none;">
|
||||
<h2>Help</h2>
|
||||
<table>
|
||||
<tr>
|
||||
<th>Interaction</th>
|
||||
<th>Action</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>mouse hover</td>
|
||||
<td>push points away from cursor</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>mouse/touch click and hold</td>
|
||||
<td>attract points to cursor, then explode outwards</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>mouse wheel scroll down</td>
|
||||
<td>slow down time</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>mouse wheel scroll up</td>
|
||||
<td>speed up time</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>←</code> (left)</td>
|
||||
<td>hold to restrict points to the left of the screen</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>→</code> (right)</td>
|
||||
<td>hold to restrict points to the right of the screen</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>↑</code> (up)</td>
|
||||
<td>hold to restrict points to the top of the screen</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>↓</code> (down)</td>
|
||||
<td>hold to restrict points to the bottom of the screen</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>1</code></td>
|
||||
<td>makes points move linearly</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>2</code></td>
|
||||
<td>makes points meander</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>3</code></td>
|
||||
<td>makes points snappy</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>4</code></td>
|
||||
<td>makes points bouncy</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>5</code></td>
|
||||
<td>makes points elastic</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>6</code></td>
|
||||
<td>makes points overshoot</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>f</code></td>
|
||||
<td>toggle FPS counter</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>d</code></td>
|
||||
<td>toggles debug mode (including FPS counter)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>n</code></td>
|
||||
<td>toggles display of nodes</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>l</code></td>
|
||||
<td>toggles display of lines</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>?</code></td>
|
||||
<td>toggles this help modal</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div id="controls" class="panel" style="display: none;">
|
||||
<form action="">
|
||||
<label>Time:
|
||||
<input type="range" name="timeRange" min="1" max="360" value="0" oninput="this.form.timeInput.value=this.value" />
|
||||
<input type="number" name="timeInput" min="1" max="360" value="0" oninput="this.form.timeRange.value=this.value" />
|
||||
</label><br />
|
||||
<label>Point tweening:
|
||||
<label><input type="radio" name="tweening" value="linear" /> Linear</label>
|
||||
<label><input type="radio" name="tweening" value="meandering" checked /> Meandering</label>
|
||||
<label><input type="radio" name="tweening" value="snappy" /> Snappy</label>
|
||||
<label><input type="radio" name="tweening" value="bouncy" /> Bouncy</label>
|
||||
<label><input type="radio" name="tweening" value="elastic" /> Elastic</label>
|
||||
<label><input type="radio" name="tweening" value="back" /> Overshoot</label>
|
||||
</label>
|
||||
</form>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<!-- Google Analytics -->
|
||||
<script>
|
||||
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
|
||||
ga('create', 'UA-39880341-1', 'auto');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
<script async src='https://www.google-analytics.com/analytics.js'></script>
|
||||
<!-- End Google Analytics -->
|
||||
<!-- Google Analytics -->
|
||||
<script>
|
||||
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
|
||||
ga('create', 'UA-39880341-1', 'auto');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
<script async src='https://www.google-analytics.com/analytics.js'></script>
|
||||
<!-- End Google Analytics -->
|
||||
</html>
|
||||
|
||||
324
js/proximity.js
324
js/proximity.js
@ -248,6 +248,38 @@ function easeInOutCirc (t, b, c, d) {
|
||||
|
||||
/* UTILITY FUNCTIONS */
|
||||
|
||||
function toggleHelp () {
|
||||
var help, controls;
|
||||
help = document.getElementById('help');
|
||||
controls = document.getElementById('controls');
|
||||
if (help.style.display === 'none') {
|
||||
help.style.display = 'block';
|
||||
|
||||
// hide controls if open (only want one panel open at a time)
|
||||
if (controls.style.display === 'block') {
|
||||
controls.style.display = 'none';
|
||||
}
|
||||
} else {
|
||||
help.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
function toggleControls () {
|
||||
var help, controls;
|
||||
help = document.getElementById('help');
|
||||
controls = document.getElementById('controls');
|
||||
if (controls.style.display === 'none') {
|
||||
controls.style.display = 'block';
|
||||
|
||||
// hide help if open (only want one panel open at a time)
|
||||
if (help.style.display === 'block') {
|
||||
help.style.display = 'none';
|
||||
}
|
||||
} else {
|
||||
controls.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
function randomInt (min, max) {
|
||||
// inclusive of min and max
|
||||
return Math.floor(Math.random() * (max - min + 1)) + min;
|
||||
@ -644,6 +676,12 @@ function loop () {
|
||||
}
|
||||
scrollDelta = 0;
|
||||
polygonPoints = redistributeCycles(polygonPoints, oldCycleDuration, cycleDuration);
|
||||
|
||||
// Update control inputs
|
||||
var timeRange = document.getElementsByName('timeRange')[0];
|
||||
var timeInput = document.getElementsByName('timeInput')[0];
|
||||
timeRange.value = cycleDuration;
|
||||
timeInput.value = cycleDuration;
|
||||
}
|
||||
|
||||
// Tell the `renderer` to `render` the `stage`
|
||||
@ -694,6 +732,10 @@ function loopStart () {
|
||||
|
||||
scrollDelta = 0;
|
||||
|
||||
// Try to fix bug where click initializes to a bogus value
|
||||
click = null;
|
||||
hover = null;
|
||||
|
||||
window.requestAnimationFrame(loop);
|
||||
}
|
||||
|
||||
@ -702,132 +744,182 @@ window.PIXI.loader
|
||||
.add(nodeImg)
|
||||
.load(loopStart);
|
||||
|
||||
/* MOUSE AND TOUCH EVENTS */
|
||||
window.onload = function () {
|
||||
var tweeningInputs;
|
||||
tweeningInputs = document.getElementsByName('tweening');
|
||||
/* MOUSE AND TOUCH EVENTS */
|
||||
|
||||
window.addEventListener('mousewheel', function (e) {
|
||||
scrollDelta = scrollDelta + ((e.deltaY / 100) * 3);
|
||||
});
|
||||
window.addEventListener('mousewheel', function (e) {
|
||||
if (e.target.tagName !== 'CANVAS') return;
|
||||
scrollDelta = scrollDelta + ((e.deltaY / 100) * 3);
|
||||
});
|
||||
|
||||
window.addEventListener('touchstart', function (e) {
|
||||
click = getMousePos(e.changedTouches[0], resolution);
|
||||
clickEnd = false;
|
||||
});
|
||||
|
||||
window.addEventListener('touchmove', function (e) {
|
||||
if (click !== null) {
|
||||
window.addEventListener('touchstart', function (e) {
|
||||
if (e.target.tagName !== 'CANVAS') return;
|
||||
click = getMousePos(e.changedTouches[0], resolution);
|
||||
}
|
||||
});
|
||||
clickEnd = false;
|
||||
});
|
||||
|
||||
window.addEventListener('touchend', function (e) {
|
||||
clickEnd = true;
|
||||
});
|
||||
|
||||
window.addEventListener('touchcancel', function (e) {
|
||||
clickEnd = true;
|
||||
});
|
||||
|
||||
window.addEventListener('mousedown', function (e) {
|
||||
click = getMousePos(e, resolution);
|
||||
clickEnd = false;
|
||||
});
|
||||
|
||||
window.addEventListener('mousemove', function (e) {
|
||||
var pos = getMousePos(e, resolution);
|
||||
if (click !== null) {
|
||||
click = pos;
|
||||
}
|
||||
hover = pos;
|
||||
});
|
||||
|
||||
window.addEventListener('mouseup', function (e) {
|
||||
clickEnd = true;
|
||||
hover = null;
|
||||
lastHover = null;
|
||||
});
|
||||
|
||||
window.addEventListener('mouseleave', function (e) {
|
||||
clickEnd = true;
|
||||
hover = null;
|
||||
lastHover = null;
|
||||
});
|
||||
|
||||
document.addEventListener('mouseleave', function (e) {
|
||||
clickEnd = true;
|
||||
hover = null;
|
||||
lastHover = null;
|
||||
});
|
||||
|
||||
/* KEYBOARD EVENTS */
|
||||
|
||||
window.addEventListener('keydown', function (e) {
|
||||
var i, help;
|
||||
if (e.keyCode === 37) { // left
|
||||
pointShiftBiasX = -1;
|
||||
} else if (e.keyCode === 38) { // up
|
||||
pointShiftBiasY = -1;
|
||||
} else if (e.keyCode === 39) { // right
|
||||
pointShiftBiasX = 1;
|
||||
} else if (e.keyCode === 40) { // down
|
||||
pointShiftBiasY = 1;
|
||||
} else if (e.keyCode === 49) { // 1
|
||||
tweeningFns = tweeningSets.linear;
|
||||
} else if (e.keyCode === 50) { // 2
|
||||
tweeningFns = tweeningSets.meandering;
|
||||
} else if (e.keyCode === 51) { // 3
|
||||
tweeningFns = tweeningSets.snappy;
|
||||
} else if (e.keyCode === 52) { // 4
|
||||
tweeningFns = tweeningSets.bouncy;
|
||||
} else if (e.keyCode === 53) { // 5
|
||||
tweeningFns = tweeningSets.elastic;
|
||||
} else if (e.keyCode === 54) { // 6
|
||||
tweeningFns = tweeningSets.back;
|
||||
} else if (e.keyCode === 70) { // f
|
||||
// toggle fpsCounter
|
||||
if (fpsEnabled) {
|
||||
stage.removeChild(fpsGraphic);
|
||||
fpsEnabled = false;
|
||||
} else {
|
||||
stage.addChild(fpsGraphic);
|
||||
fpsEnabled = true;
|
||||
lastLoop = new Date();
|
||||
window.addEventListener('touchmove', function (e) {
|
||||
if (e.target.tagName !== 'CANVAS') return;
|
||||
if (click !== null) {
|
||||
click = getMousePos(e.changedTouches[0], resolution);
|
||||
}
|
||||
} else if (e.keyCode === 68) { // d
|
||||
// toggle debug
|
||||
if (debug) {
|
||||
});
|
||||
|
||||
window.addEventListener('touchend', function (e) {
|
||||
if (e.target.tagName !== 'CANVAS') return;
|
||||
clickEnd = true;
|
||||
});
|
||||
|
||||
window.addEventListener('touchcancel', function (e) {
|
||||
if (e.target.tagName !== 'CANVAS') return;
|
||||
clickEnd = true;
|
||||
});
|
||||
|
||||
window.addEventListener('mousedown', function (e) {
|
||||
if (e.target.tagName !== 'CANVAS') return;
|
||||
click = getMousePos(e, resolution);
|
||||
clickEnd = false;
|
||||
});
|
||||
|
||||
window.addEventListener('mousemove', function (e) {
|
||||
if (e.target.tagName !== 'CANVAS') return;
|
||||
var pos = getMousePos(e, resolution);
|
||||
if (click !== null) {
|
||||
click = pos;
|
||||
}
|
||||
hover = pos;
|
||||
});
|
||||
|
||||
window.addEventListener('mouseup', function (e) {
|
||||
if (e.target.tagName !== 'CANVAS') return;
|
||||
clickEnd = true;
|
||||
hover = null;
|
||||
lastHover = null;
|
||||
});
|
||||
|
||||
window.addEventListener('mouseleave', function (e) {
|
||||
if (e.target.tagName !== 'CANVAS') return;
|
||||
clickEnd = true;
|
||||
hover = null;
|
||||
lastHover = null;
|
||||
});
|
||||
|
||||
document.addEventListener('mouseleave', function (e) {
|
||||
if (e.target.tagName !== 'CANVAS') return;
|
||||
clickEnd = true;
|
||||
hover = null;
|
||||
lastHover = null;
|
||||
});
|
||||
|
||||
/* KEYBOARD EVENTS */
|
||||
|
||||
window.addEventListener('keydown', function (e) {
|
||||
var i;
|
||||
if (e.target.tagName !== 'CANVAS' || e.target.tagName !== 'BODY') return;
|
||||
if (e.keyCode === 37) { // left
|
||||
pointShiftBiasX = -1;
|
||||
} else if (e.keyCode === 38) { // up
|
||||
pointShiftBiasY = -1;
|
||||
} else if (e.keyCode === 39) { // right
|
||||
pointShiftBiasX = 1;
|
||||
} else if (e.keyCode === 40) { // down
|
||||
pointShiftBiasY = 1;
|
||||
} else if (e.keyCode === 49) { // 1
|
||||
tweeningFns = tweeningSets.linear;
|
||||
tweeningInputs[0].checked = true;
|
||||
} else if (e.keyCode === 50) { // 2
|
||||
tweeningFns = tweeningSets.meandering;
|
||||
tweeningInputs[1].checked = true;
|
||||
} else if (e.keyCode === 51) { // 3
|
||||
tweeningFns = tweeningSets.snappy;
|
||||
tweeningInputs[2].checked = true;
|
||||
} else if (e.keyCode === 52) { // 4
|
||||
tweeningFns = tweeningSets.bouncy;
|
||||
tweeningInputs[3].checked = true;
|
||||
} else if (e.keyCode === 53) { // 5
|
||||
tweeningFns = tweeningSets.elastic;
|
||||
tweeningInputs[4].checked = true;
|
||||
} else if (e.keyCode === 54) { // 6
|
||||
tweeningFns = tweeningSets.back;
|
||||
tweeningInputs[5].checked = true;
|
||||
} else if (e.keyCode === 70) { // f
|
||||
// toggle fpsCounter
|
||||
if (fpsEnabled) {
|
||||
stage.removeChild(fpsGraphic);
|
||||
}
|
||||
debug = false;
|
||||
fpsEnabled = debug;
|
||||
} else {
|
||||
if (!fpsEnabled) {
|
||||
fpsEnabled = false;
|
||||
} else {
|
||||
stage.addChild(fpsGraphic);
|
||||
fpsEnabled = true;
|
||||
lastLoop = new Date();
|
||||
}
|
||||
debug = true;
|
||||
fpsEnabled = debug;
|
||||
lastLoop = new Date();
|
||||
}
|
||||
} else if (e.keyCode === 78) { // n
|
||||
if (drawNodes) {
|
||||
for (i = 0; i < sprites.length; i++) {
|
||||
sprites[i].visible = false;
|
||||
} else if (e.keyCode === 68) { // d
|
||||
// toggle debug
|
||||
if (debug) {
|
||||
if (fpsEnabled) {
|
||||
stage.removeChild(fpsGraphic);
|
||||
}
|
||||
debug = false;
|
||||
fpsEnabled = debug;
|
||||
} else {
|
||||
if (!fpsEnabled) {
|
||||
stage.addChild(fpsGraphic);
|
||||
}
|
||||
debug = true;
|
||||
fpsEnabled = debug;
|
||||
lastLoop = new Date();
|
||||
}
|
||||
drawNodes = false;
|
||||
} else {
|
||||
for (i = 0; i < sprites.length; i++) {
|
||||
sprites[i].visible = true;
|
||||
} else if (e.keyCode === 78) { // n
|
||||
if (drawNodes) {
|
||||
for (i = 0; i < sprites.length; i++) {
|
||||
sprites[i].visible = false;
|
||||
}
|
||||
drawNodes = false;
|
||||
} else {
|
||||
for (i = 0; i < sprites.length; i++) {
|
||||
sprites[i].visible = true;
|
||||
}
|
||||
drawNodes = true;
|
||||
}
|
||||
drawNodes = true;
|
||||
}
|
||||
} else if (e.keyCode === 76) { // l
|
||||
drawLines = !drawLines;
|
||||
} else if (e.keyCode === 191) { // ?
|
||||
help = document.getElementById('help');
|
||||
if (help.style.display === 'none') {
|
||||
help.style.display = 'flex';
|
||||
} else {
|
||||
help.style.display = 'none';
|
||||
} else if (e.keyCode === 76) { // l
|
||||
drawLines = !drawLines;
|
||||
} else if (e.keyCode === 191) { // ?
|
||||
toggleHelp();
|
||||
}
|
||||
});
|
||||
|
||||
/* BUTTON EVENTS */
|
||||
|
||||
document.getElementById('toggle-help').addEventListener('click', function () {
|
||||
toggleHelp();
|
||||
}, false);
|
||||
|
||||
document.getElementById('toggle-controls').addEventListener('click', function () {
|
||||
toggleControls();
|
||||
}, false);
|
||||
|
||||
var timeRange, timeInput;
|
||||
timeRange = document.getElementsByName('timeRange')[0];
|
||||
timeRange.value = cycleDuration;
|
||||
timeRange.addEventListener('input', function (e) {
|
||||
var oldCycleDuration = cycleDuration;
|
||||
cycleDuration = parseInt(this.value, 10);
|
||||
polygonPoints = redistributeCycles(polygonPoints, oldCycleDuration, cycleDuration);
|
||||
});
|
||||
|
||||
timeInput = document.getElementsByName('timeInput')[0];
|
||||
timeInput.value = cycleDuration;
|
||||
timeInput.addEventListener('input', function (e) {
|
||||
var oldCycleDuration = cycleDuration;
|
||||
cycleDuration = parseInt(this.value, 10);
|
||||
polygonPoints = redistributeCycles(polygonPoints, oldCycleDuration, cycleDuration);
|
||||
});
|
||||
|
||||
var i;
|
||||
for (i = 0; i < tweeningInputs.length; i++) {
|
||||
tweeningInputs[i].addEventListener('change', function (e) {
|
||||
tweeningFns = tweeningSets[this.value];
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user