From e97a4ee3eca57b39e6de8f98842a9db181aaa1f3 Mon Sep 17 00:00:00 2001 From: Tyler Hallada Date: Sat, 12 Aug 2017 18:50:51 -0400 Subject: [PATCH] WIP proper help and options panel Keypresses not working. TweeningFns inputs are not synced. --- css/style.css | 45 ++++++- index.html | 242 +++++++++++++++++++----------------- js/proximity.js | 324 +++++++++++++++++++++++++++++++----------------- 3 files changed, 378 insertions(+), 233 deletions(-) diff --git a/css/style.css b/css/style.css index 0dcc521..ccd8346 100644 --- a/css/style.css +++ b/css/style.css @@ -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; +} diff --git a/index.html b/index.html index 8a6d671..7d262e7 100644 --- a/index.html +++ b/index.html @@ -1,114 +1,134 @@ - - Proximity Structures - - - - - - - - - - - - - - - - - + + Proximity Structures + + + + + + + + + + + + + + + +
+ + +
+ + + - - - - + + + + diff --git a/js/proximity.js b/js/proximity.js index a79ae3d..8ab0e44 100644 --- a/js/proximity.js +++ b/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]; + }); } -}); +};