thallada/proximity-structures
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Color shift slider, close buttons, fix mouse end

Browse Source
This commit is contained in:
Tyler Hallada 2017-08-13 00:56:47 -04:00
parent 71459734e3
commit 94b6fdead2
3 changed files with 56 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
css/style.css
View File

@ -26,7 +26,7 @@ td, th {
form input, form button {
margin-bottom: 5px;
margin-top: 10px;
margin-top: 5px;
}
form label, form label strong {
@ -42,8 +42,8 @@ form label strong {
input {
color: white;
background-color: #2e2e2e;
border-color: #4a4a4a;
background-color: rgba(46, 46, 46, 0.2);
border-color: #222222;
}
input[type=number] {
@ -75,3 +75,10 @@ div.panel {
left: 0;
z-index: 10;
}
#close-controls, #close-help {
position: absolute;
top: 0;
right: 0;
padding: 3px 6px;
}

10
index.html
View File

@ -21,6 +21,7 @@
<button id="toggle-controls">Settings</button>
</div>
<div id="help" class="panel" style="display: none;">
<button type="button" id="close-help">x</button>
<h2>Help</h2>
<table>
<tr>
@ -106,11 +107,14 @@
</table>
</div>
<div id="controls" class="panel" style="display: none;">
<button type="button" id="close-controls">x</button>
<form action="">
<button type="button" id="reset">Reset</button><br />
<label><strong>Cycle Duration:</strong>
<input type="range" name="timeRange" min="1" max="360" value="60" oninput="this.form.timeInput.value=this.value" />
<input type="number" name="timeInput" min="1" max="360" value="60" oninput="this.form.timeRange.value=this.value" />
<button type="button" id="randomize-cycles">Randomize Point Cycle Starts</button>
<button type="button" id="synchronize-cycles">Synchronize Point Cycles</button>
<button type="button" id="randomize-cycles">Randomize Point Cycles</button>
</label><br />
<label><strong>Point Size:</strong>
<input type="range" name="pointSizeRange" min="0" max="50" value="0" oninput="this.form.pointSizeInput.value=this.value" />
@ -120,6 +124,10 @@
<input type="range" name="lineSizeRange" min="1" max="50" value="1" oninput="this.form.lineSizeInput.value=this.value" />
<input type="number" name="lineSizeInput" min="1" max="50" value="1" oninput="this.form.lineSizeRange.value=this.value" />
</label><br />
<label><strong>Color Shift:</strong>
<input type="range" name="colorShiftRange" min="0" max="85" value="10" oninput="this.form.colorShiftInput.value=this.value" />
<input type="number" name="colorShiftInput" min="0" max="85" value="10" oninput="this.form.colorShiftRange.value=this.value" />
</label><br />
<label><strong>Point tweening:</strong>
<label><input type="radio" name="tweening" value="linear" /> Linear</label>
<label><input type="radio" name="tweening" value="meandering" checked /> Meandering</label>

43
js/proximity.js
View File

@ -248,7 +248,7 @@ function easeInOutCirc (t, b, c, d) {
}
/* eslint-enable no-unused-vars */
/* UTILITY FUNCTIONS */
/* TOGGLE FUNCTIONS */
function toggleHelp () {
var help, controls;
@ -338,6 +338,8 @@ function toggleLines () {
linesCheckbox.checked = drawLines;
}
/* UTILITY FUNCTIONS */
function randomInt (min, max) {
// inclusive of min and max
return Math.floor(Math.random() * (max - min + 1)) + min;
@ -579,6 +581,14 @@ function randomizeCycles (points, cycleDuration) {
return points;
}
function synchronizeCycles (points, cycleDuration) {
/* Assigns every point the same cycle start (0) */
for (var i = 0; i < points.original.length; i++) {
points.target[i][3] = 0;
}
return points;
}
/* DRAW FUNCTIONS */
function drawPolygon (polygon, points, counter, tweeningFns) {
@ -849,12 +859,10 @@ window.onload = function () {
});
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;
});
@ -875,21 +883,18 @@ window.onload = function () {
});
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;
@ -949,6 +954,19 @@ window.onload = function () {
toggleControls();
}, false);
document.getElementById('close-help').addEventListener('click', function () {
toggleHelp();
}, false);
document.getElementById('close-controls').addEventListener('click', function () {
toggleControls();
}, false);
document.getElementById('synchronize-cycles').addEventListener('click', function () {
synchronizeCycles(polygonPoints, cycleDuration);
return false;
}, false);
document.getElementById('randomize-cycles').addEventListener('click', function () {
randomizeCycles(polygonPoints, cycleDuration);
return false;
@ -1005,6 +1023,19 @@ window.onload = function () {
lineSize = parseInt(this.value, 10);
});
var colorShiftRange, colorShiftInput;
colorShiftRange = document.getElementsByName('colorShiftRange')[0];
colorShiftRange.value = disconnectedColorShiftAmt;
colorShiftRange.addEventListener('input', function (e) {
disconnectedColorShiftAmt = parseInt(this.value, 10);
});
colorShiftRange = document.getElementsByName('colorShiftRange')[0];
colorShiftRange.value = disconnectedColorShiftAmt;
colorShiftRange.addEventListener('input', function (e) {
disconnectedColorShiftAmt = parseInt(this.value, 10);
});
debugCheckbox.addEventListener('change', function (e) {
toggleDebug();