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

24
index.html
View File

@ -108,10 +108,18 @@
<div id="controls" class="panel" style="display: none;">
<form action="">
<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="number" name="timeInput" min="1" max="360" value="0" oninput="this.form.timeRange.value=this.value" />
</label>
<button type="button" id="randomize-cycles">Randomize Point Cycles</button><br />
<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>
</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><input type="radio" name="tweening" value="linear" /> Linear</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="back" /> Overshoot</label>
</label><br />
<label><strong>Debugging:</strong>
<label><input type="checkbox" name="debug"> Debug</label>
<label><input type="checkbox" name="fpsCounter"> FPS Counter</label>
<label><strong>Drawing:</strong>
<label><input type="checkbox" name="debugToggle"> Debugging</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>
</form>
</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 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 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 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 */
@ -281,7 +283,7 @@ function toggleControls () {
}
function toggleFPS () {
var fpsCheckbox = document.getElementsByName('fpsCounter')[0];
var fpsCheckbox = document.getElementsByName('fpsCounterToggle')[0];
if (fpsEnabled) {
stage.removeChild(fpsGraphic);
fpsEnabled = false;
@ -294,8 +296,8 @@ function toggleFPS () {
}
function toggleDebug () {
var fpsCheckbox = document.getElementsByName('fpsCounter')[0];
var debugCheckbox = document.getElementsByName('debug')[0];
var fpsCheckbox = document.getElementsByName('fpsCounterToggle')[0];
var debugCheckbox = document.getElementsByName('debugToggle')[0];
if (debug) {
if (fpsEnabled) {
stage.removeChild(fpsGraphic);
@ -314,6 +316,28 @@ function toggleDebug () {
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) {
// inclusive of min and max
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]);
shadedColor = shadeColor(avgColor, connectivity);
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.lineTo(points.tweened[j][0], points.tweened[j][1]);
}
@ -614,7 +638,7 @@ function drawPolygon (polygon, points, counter, tweeningFns) {
if (drawNodes) {
// draw nodes
nodeDiameter = (points.tweened[i][2] + minNodeDiameter);
nodeDiameter = (nodeSize + minNodeDiameter);
scale = nodeDiameter / nodeImgRes;
sprites[i].scale.x = scale;
sprites[i].scale.y = scale;
@ -672,6 +696,12 @@ function loop () {
clickPullRate = clickPullRateStart;
clickInertia = clickInertiaStart;
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) {
if (lastHover !== null) {
@ -788,10 +818,15 @@ window.PIXI.loader
.load(loopStart);
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');
debugCheckbox = document.getElementsByName('debug')[0];
fpsCheckbox = document.getElementsByName('fpsCounter')[0];
debugCheckbox = document.getElementsByName('debugToggle')[0];
fpsCheckbox = document.getElementsByName('fpsCounterToggle')[0];
nodesCheckbox = document.getElementsByName('nodesToggle')[0];
linesCheckbox = document.getElementsByName('linesToggle')[0];
/* MOUSE AND TOUCH EVENTS */
window.addEventListener('mousewheel', function (e) {
@ -801,6 +836,7 @@ window.onload = function () {
window.addEventListener('touchstart', function (e) {
if (e.target.tagName !== 'CANVAS') return;
e.target.focus();
click = getMousePos(e.changedTouches[0], resolution);
clickEnd = false;
});
@ -824,6 +860,7 @@ window.onload = function () {
window.addEventListener('mousedown', function (e) {
if (e.target.tagName !== 'CANVAS') return;
e.target.focus();
click = getMousePos(e, resolution);
clickEnd = false;
});
@ -894,19 +931,9 @@ window.onload = function () {
} else if (e.keyCode === 68) { // d
toggleDebug();
} 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;
}
toggleNodes();
} else if (e.keyCode === 76) { // l
drawLines = !drawLines;
toggleLines();
} else if (e.keyCode === 191) { // ?
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) {
toggleDebug();
});
@ -959,4 +1013,12 @@ window.onload = function () {
fpsCheckbox.addEventListener('change', function (e) {
toggleFPS();
});
nodesCheckbox.addEventListener('change', function (e) {
toggleNodes();
});
linesCheckbox.addEventListener('change', function (e) {
toggleLines();
});
};