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

Node size and line size

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

12
css/style.css
View File

@ -13,14 +13,15 @@ html, button {
} }
button { button {
background-color: #2e2e2e; background-color: rgba(46, 46, 46, 0.2);
border-color: #4a4a4a; border-color: #4a4a4a;
color: #fafafa; color: #fafafa;
padding: 2px; padding: 3px;
} }
td, th { td, th {
padding: 2px 5px; padding: 2px 5px;
font-size: 10pt;
} }
form input, form button { form input, form button {
@ -29,9 +30,16 @@ form input, form button {
} }
form label, form label strong { form label, form label strong {
overflow: auto;
display: inline-block;
margin-right: 10px; margin-right: 10px;
} }
form label strong {
display: inline-block;
width: 100px;
}
input { input {
color: white; color: white;
background-color: #2e2e2e; background-color: #2e2e2e;

24
index.html
View File

@ -108,10 +108,18 @@
<div id="controls" class="panel" style="display: none;"> <div id="controls" class="panel" style="display: none;">
<form action=""> <form action="">
<label><strong>Cycle Duration:</strong> <label><strong>Cycle Duration:</strong>
<input type="range" name="timeRange" min="1" max="360" value="0" oninput="this.form.timeInput.value=this.value" /> <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="0" oninput="this.form.timeRange.value=this.value" /> <input type="number" name="timeInput" min="1" max="360" value="60" oninput="this.form.timeRange.value=this.value" />
</label> <button type="button" id="randomize-cycles">Randomize Point Cycle Starts</button>
<button type="button" id="randomize-cycles">Randomize Point Cycles</button><br /> </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" />
<input type="number" name="pointSizeInput" min="0" max="50" value="0" oninput="this.form.pointSizeRange.value=this.value" />
</label><br />
<label><strong>Line Size:</strong>
<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>Point tweening:</strong> <label><strong>Point tweening:</strong>
<label><input type="radio" name="tweening" value="linear" /> Linear</label> <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="meandering" checked /> Meandering</label>
@ -120,9 +128,11 @@
<label><input type="radio" name="tweening" value="elastic" /> Elastic</label> <label><input type="radio" name="tweening" value="elastic" /> Elastic</label>
<label><input type="radio" name="tweening" value="back" /> Overshoot</label> <label><input type="radio" name="tweening" value="back" /> Overshoot</label>
</label><br /> </label><br />
<label><strong>Debugging:</strong> <label><strong>Drawing:</strong>
<label><input type="checkbox" name="debug"> Debug</label> <label><input type="checkbox" name="debugToggle"> Debugging</label>
<label><input type="checkbox" name="fpsCounter"> FPS Counter</label> <label><input type="checkbox" name="fpsCounterToggle"> FPS Counter</label>
<label><input type="checkbox" name="nodesToggle" checked> Points</label>
<label><input type="checkbox" name="linesToggle" checked> Lines</label>
<label> <label>
</form> </form>
</div> </div>

102
js/proximity.js
View File

@ -102,8 +102,10 @@ var zRange = 50; // maximum value for the range of possible z coords for a poin
var nodeImg = 'img/node.png'; // image file location for representing every point var nodeImg = 'img/node.png'; // image file location for representing every point
var nodeImgRes = 100; // resolution of nodeImg file in pixels (aspect ratio should be square) var nodeImgRes = 100; // resolution of nodeImg file in pixels (aspect ratio should be square)
var minNodeDiameter = 3; // minimum pixel size of point on canvas when z coord is 0, maximum is this value plus zRange var minNodeDiameter = 3; // minimum pixel size of point on canvas when z coord is 0, maximum is this value plus zRange
var nodeSize = 0; // with z coord ignored, this value is used for scaling the drawing for each node
var drawNodes = true; // whether to display circles at each point's current position var drawNodes = true; // whether to display circles at each point's current position
var drawLines = true; // whether to display lines connecting points if they are in connection distance var drawLines = true; // whether to display lines connecting points if they are in connection distance
var lineSize = 1; // thickness in pixels of drawn lines between points
/* TWEENING FUNCTIONS */ /* TWEENING FUNCTIONS */
@ -281,7 +283,7 @@ function toggleControls () {
} }
function toggleFPS () { function toggleFPS () {
var fpsCheckbox = document.getElementsByName('fpsCounter')[0]; var fpsCheckbox = document.getElementsByName('fpsCounterToggle')[0];
if (fpsEnabled) { if (fpsEnabled) {
stage.removeChild(fpsGraphic); stage.removeChild(fpsGraphic);
fpsEnabled = false; fpsEnabled = false;
@ -294,8 +296,8 @@ function toggleFPS () {
} }
function toggleDebug () { function toggleDebug () {
var fpsCheckbox = document.getElementsByName('fpsCounter')[0]; var fpsCheckbox = document.getElementsByName('fpsCounterToggle')[0];
var debugCheckbox = document.getElementsByName('debug')[0]; var debugCheckbox = document.getElementsByName('debugToggle')[0];
if (debug) { if (debug) {
if (fpsEnabled) { if (fpsEnabled) {
stage.removeChild(fpsGraphic); stage.removeChild(fpsGraphic);
@ -314,6 +316,28 @@ function toggleDebug () {
debugCheckbox.checked = debug; debugCheckbox.checked = debug;
} }
function toggleNodes () {
nodesCheckbox = document.getElementsByName('nodesToggle')[0];
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;
}
nodesCheckbox.checked = drawNodes;
}
function toggleLines () {
linesCheckbox = document.getElementsByName('linesToggle')[0];
drawLines = !drawLines;
linesCheckbox.checked = drawLines;
}
function randomInt (min, max) { function randomInt (min, max) {
// inclusive of min and max // inclusive of min and max
return Math.floor(Math.random() * (max - min + 1)) + min; return Math.floor(Math.random() * (max - min + 1)) + min;
@ -600,7 +624,7 @@ function drawPolygon (polygon, points, counter, tweeningFns) {
avgColor = averageColor(points.tweened[i][4], points.tweened[j][4]); avgColor = averageColor(points.tweened[i][4], points.tweened[j][4]);
shadedColor = shadeColor(avgColor, connectivity); shadedColor = shadeColor(avgColor, connectivity);
if (drawLines) { if (drawLines) {
polygon.lineStyle(1, rgbToHex(shadedColor), 1); polygon.lineStyle(lineSize, rgbToHex(shadedColor), 1);
polygon.moveTo(points.tweened[i][0], points.tweened[i][1]); polygon.moveTo(points.tweened[i][0], points.tweened[i][1]);
polygon.lineTo(points.tweened[j][0], points.tweened[j][1]); polygon.lineTo(points.tweened[j][0], points.tweened[j][1]);
} }
@ -614,7 +638,7 @@ function drawPolygon (polygon, points, counter, tweeningFns) {
if (drawNodes) { if (drawNodes) {
// draw nodes // draw nodes
nodeDiameter = (points.tweened[i][2] + minNodeDiameter); nodeDiameter = (nodeSize + minNodeDiameter);
scale = nodeDiameter / nodeImgRes; scale = nodeDiameter / nodeImgRes;
sprites[i].scale.x = scale; sprites[i].scale.x = scale;
sprites[i].scale.y = scale; sprites[i].scale.y = scale;
@ -672,6 +696,12 @@ function loop () {
clickPullRate = clickPullRateStart; clickPullRate = clickPullRateStart;
clickInertia = clickInertiaStart; clickInertia = clickInertiaStart;
clickTweeningFn = clickTweeningFnStart; clickTweeningFn = clickTweeningFnStart;
// clear affected status for all points
var i;
for (i = 0; i < polygonPoints.target.length; i++) {
polygonPoints.target[i][6] = false;
}
} }
} else if (hover !== null) { } else if (hover !== null) {
if (lastHover !== null) { if (lastHover !== null) {
@ -788,10 +818,15 @@ window.PIXI.loader
.load(loopStart); .load(loopStart);
window.onload = function () { window.onload = function () {
var tweeningInputs, debug, fpsCheckbox; var canvas, tweeningInputs, debugCheckbox, fpsCheckbox, nodeCheckbox, linesCheckbox;
canvas = document.getElementsByTagName('canvas')[0];
canvas.setAttribute('tabindex', 0);
tweeningInputs = document.getElementsByName('tweening'); tweeningInputs = document.getElementsByName('tweening');
debugCheckbox = document.getElementsByName('debug')[0]; debugCheckbox = document.getElementsByName('debugToggle')[0];
fpsCheckbox = document.getElementsByName('fpsCounter')[0]; fpsCheckbox = document.getElementsByName('fpsCounterToggle')[0];
nodesCheckbox = document.getElementsByName('nodesToggle')[0];
linesCheckbox = document.getElementsByName('linesToggle')[0];
/* MOUSE AND TOUCH EVENTS */ /* MOUSE AND TOUCH EVENTS */
window.addEventListener('mousewheel', function (e) { window.addEventListener('mousewheel', function (e) {
@ -801,6 +836,7 @@ window.onload = function () {
window.addEventListener('touchstart', function (e) { window.addEventListener('touchstart', function (e) {
if (e.target.tagName !== 'CANVAS') return; if (e.target.tagName !== 'CANVAS') return;
e.target.focus();
click = getMousePos(e.changedTouches[0], resolution); click = getMousePos(e.changedTouches[0], resolution);
clickEnd = false; clickEnd = false;
}); });
@ -824,6 +860,7 @@ window.onload = function () {
window.addEventListener('mousedown', function (e) { window.addEventListener('mousedown', function (e) {
if (e.target.tagName !== 'CANVAS') return; if (e.target.tagName !== 'CANVAS') return;
e.target.focus();
click = getMousePos(e, resolution); click = getMousePos(e, resolution);
clickEnd = false; clickEnd = false;
}); });
@ -894,19 +931,9 @@ window.onload = function () {
} else if (e.keyCode === 68) { // d } else if (e.keyCode === 68) { // d
toggleDebug(); toggleDebug();
} else if (e.keyCode === 78) { // n } else if (e.keyCode === 78) { // n
if (drawNodes) { toggleNodes();
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;
}
} else if (e.keyCode === 76) { // l } else if (e.keyCode === 76) { // l
drawLines = !drawLines; toggleLines();
} else if (e.keyCode === 191) { // ? } else if (e.keyCode === 191) { // ?
toggleHelp(); toggleHelp();
} }
@ -952,6 +979,33 @@ window.onload = function () {
}); });
} }
var pointSizeRange, pointSizeInput;
pointSizeRange = document.getElementsByName('pointSizeRange')[0];
pointSizeRange.value = nodeSize;
pointSizeRange.addEventListener('input', function (e) {
nodeSize = parseInt(this.value, 10);
});
pointSizeInput = document.getElementsByName('pointSizeInput')[0];
pointSizeInput.value = nodeSize;
pointSizeInput.addEventListener('input', function (e) {
nodeSize = parseInt(this.value, 10);
});
var lineSizeRange, lineSizeInput;
lineSizeRange = document.getElementsByName('lineSizeRange')[0];
lineSizeRange.value = lineSize;
lineSizeRange.addEventListener('input', function (e) {
lineSize = parseInt(this.value, 10);
});
lineSizeRange = document.getElementsByName('lineSizeRange')[0];
lineSizeRange.value = lineSize;
lineSizeRange.addEventListener('input', function (e) {
lineSize = parseInt(this.value, 10);
});
debugCheckbox.addEventListener('change', function (e) { debugCheckbox.addEventListener('change', function (e) {
toggleDebug(); toggleDebug();
}); });
@ -959,4 +1013,12 @@ window.onload = function () {
fpsCheckbox.addEventListener('change', function (e) { fpsCheckbox.addEventListener('change', function (e) {
toggleFPS(); toggleFPS();
}); });
nodesCheckbox.addEventListener('change', function (e) {
toggleNodes();
});
linesCheckbox.addEventListener('change', function (e) {
toggleLines();
});
}; };