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

Connection limit and distance, warning

Browse Source
This commit is contained in:
Tyler Hallada 2017-08-13 02:46:51 -04:00
parent 6b6997511e
commit c38f19dac0
3 changed files with 94 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
css/style.css
View File

@ -61,7 +61,7 @@ div.panel {
padding: 5px;
}
#help h2 {
.panel h2 {
text-align: center;
}
@ -81,4 +81,12 @@ div.panel {
top: 0;
right: 0;
padding: 3px 6px;
font-family: monospace;
}
#controls p.warning {
color: darksalmon;
margin-top: 5px;
margin-bottom: 5px;
}

16
index.html
View File

@ -108,8 +108,22 @@
</div>
<div id="controls" class="panel" style="display: none;">
<button type="button" id="close-controls">x</button>
<h2>Settings</h2>
<p class="warning">WARNING: Certain combinations of settings can crash your browser or tab.</p>
<form action="">
<button type="button" id="reset">Reset</button><br />
<label><strong>Points Count:</strong>
<input type="range" name="pointsNumRange" min="0" max="5000" value="0" oninput="this.form.pointsNumInput.value=this.value" />
<input type="number" name="pointsNumInput" min="0" max="5000" value="0" oninput="this.form.pointsNumRange.value=this.value" />
<button type="button" id="reset">Reset Points</button>
</label><br />
<label><strong>Connection Distance:</strong>
<input type="range" name="connectDistRange" min="0" max="5000" value="0" oninput="this.form.connectDistInput.value=this.value" />
<input type="number" name="connectDistInput" min="0" max="5000" value="0" oninput="this.form.connectDistRange.value=this.value" />
</label><br />
<label><strong>Connection Limit:</strong>
<input type="range" name="connectLimitRange" min="0" max="100" value="10" oninput="this.form.connectLimitInput.value=this.value" />
<input type="number" name="connectLimitInput" min="0" max="100" value="10" oninput="this.form.connectLimitRange.value=this.value" />
</label><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" />

90
js/proximity.js
View File

@ -21,6 +21,7 @@ var fpsGraphic;
var scrollDelta;
var pointShiftBiasX;
var pointShiftBiasY;
var numPoints;
// global non-configurable vars (modifying these might break stuff)
var click = null;
@ -465,6 +466,13 @@ function createSprite () {
function getRandomPoints (numPoints, maxX, maxY, maxZ, tweeningFns) {
var i, x, y, z, color, cycleStart, easingFn, sprite;
var points = [];
if (sprites.length > 0) {
// need to clear out old sprites
for (i = 0; i < sprites.length; i++) {
stage.removeChild(sprites[i]);
}
sprites = [];
}
for (i = 0; i < numPoints; i++) {
x = randomInt(0, maxX - 1);
y = randomInt(0, maxY - 1);
@ -473,12 +481,10 @@ function getRandomPoints (numPoints, maxX, maxY, maxZ, tweeningFns) {
cycleStart = randomInt(0, cycleDuration - 1);
color = randomColor();
easingFn = tweeningFns[Math.floor(Math.random() * tweeningFns.length)];
if (sprites.length <= i) {
// save PIXI Sprite for each point in array
sprite = createSprite();
sprites.push(sprite);
stage.addChild(sprite);
}
points[i] = [x, y, z, cycleStart, color, easingFn];
}
return points;
@ -530,7 +536,8 @@ function pullPoints (points, clickPos, pullRate, inertia, maxDist, counter, rese
targetYDiff = clickPos.y - points.target[i][1];
originXDiff = clickPos.x - points.original[i][0];
originYDiff = clickPos.y - points.original[i][1];
if (Math.abs(targetXDiff) <= maxDist && Math.abs(targetYDiff) <= maxDist) { // point is within effect radius
if (Math.sqrt((targetXDiff * targetXDiff) + (targetYDiff * targetYDiff)) <= maxDist) {
// point is within effect radius
if (resetPoints) {
// Good for changing directions, reset the points original positions to their current positions
points.original[i][0] = points.tweened[i][0];
@ -561,6 +568,12 @@ function pullPoints (points, clickPos, pullRate, inertia, maxDist, counter, rese
}
}
function clearAffectedPoints (points) {
for (var i = 0; i < points.target.length; i++) {
points.target[i][6] = false;
}
}
function redistributeCycles (points, oldCycleDuration, cycleDuration) {
/* Given old and new cycleDuration, re-assign points' cycle starts that expand/compress to fit the new range in a
* way that ensures the current progress of the point in its cycle is around the same percentage (so that the point
@ -673,8 +686,7 @@ function loop () {
if (reset === true) {
var newPoints;
newPoints = getRandomPoints(Math.round(totalScreenPixels / 6), screenWidth, screenHeight, zRange,
tweeningFns);
newPoints = getRandomPoints(numPoints, screenWidth, screenHeight, zRange, tweeningFns);
polygonPoints = {
original: newPoints,
target: JSON.parse(JSON.stringify(newPoints)),
@ -721,12 +733,7 @@ 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;
}
clearAffectedPoints(polygonPoints);
}
} else if (hover !== null) {
if (lastHover !== null) {
@ -810,7 +817,8 @@ function loopStart () {
hoverMaxDistStart = Math.min(Math.round(totalScreenPixels / 16), hoverMaxDistStart);
polygon = new window.PIXI.Graphics();
stage.addChild(polygon);
startPoints = getRandomPoints(Math.round(totalScreenPixels / 6), screenWidth, screenHeight, zRange, tweeningFns);
numPoints = Math.round(totalScreenPixels / 6);
startPoints = getRandomPoints(numPoints, screenWidth, screenHeight, zRange, tweeningFns);
polygonPoints = {
original: startPoints,
target: JSON.parse(JSON.stringify(startPoints)),
@ -907,12 +915,14 @@ window.onload = function () {
clickEnd = true;
hover = null;
lastHover = null;
clearAffectedPoints(polygonPoints);
});
document.addEventListener('mouseleave', function (e) {
clickEnd = true;
hover = null;
lastHover = null;
clearAffectedPoints(polygonPoints);
});
/* KEYBOARD EVENTS */
@ -989,8 +999,43 @@ window.onload = function () {
reset = true;
}, false);
var timeRange, timeInput;
timeRange = document.getElementsByName('timeRange')[0];
var connectDistRange = document.getElementsByName('connectDistRange')[0];
connectDistRange.value = connectionDistance;
connectDistRange.addEventListener('input', function (e) {
connectionDistance = parseInt(this.value, 10);
});
var connectDistInput = document.getElementsByName('connectDistInput')[0];
connectDistInput.value = connectionDistance;
connectDistInput.addEventListener('input', function (e) {
connectionDistance = parseInt(this.value, 10);
});
var connectLimitRange = document.getElementsByName('connectLimitRange')[0];
connectLimitRange.value = connectionLimit;
connectLimitRange.addEventListener('input', function (e) {
connectionLimit = parseInt(this.value, 10);
});
var connectLimitInput = document.getElementsByName('connectLimitInput')[0];
connectLimitInput.value = connectionLimit;
connectLimitInput.addEventListener('input', function (e) {
connectionLimit = parseInt(this.value, 10);
});
var pointsNumRange = document.getElementsByName('pointsNumRange')[0];
pointsNumRange.value = numPoints;
pointsNumRange.addEventListener('input', function (e) {
numPoints = parseInt(this.value, 10);
});
var pointsNumInput = document.getElementsByName('pointsNumInput')[0];
pointsNumInput.value = numPoints;
pointsNumInput.addEventListener('input', function (e) {
numPoints = parseInt(this.value, 10);
});
var timeRange = document.getElementsByName('timeRange')[0];
timeRange.value = cycleDuration;
timeRange.addEventListener('input', function (e) {
var oldCycleDuration = cycleDuration;
@ -998,7 +1043,7 @@ window.onload = function () {
polygonPoints = redistributeCycles(polygonPoints, oldCycleDuration, cycleDuration);
});
timeInput = document.getElementsByName('timeInput')[0];
var timeInput = document.getElementsByName('timeInput')[0];
timeInput.value = cycleDuration;
timeInput.addEventListener('input', function (e) {
var oldCycleDuration = cycleDuration;
@ -1014,40 +1059,37 @@ window.onload = function () {
});
}
var pointSizeRange, pointSizeInput;
pointSizeRange = document.getElementsByName('pointSizeRange')[0];
var pointSizeRange = document.getElementsByName('pointSizeRange')[0];
pointSizeRange.value = nodeSize;
pointSizeRange.addEventListener('input', function (e) {
nodeSize = parseInt(this.value, 10);
});
pointSizeInput = document.getElementsByName('pointSizeInput')[0];
var 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];
var lineSizeRange = document.getElementsByName('lineSizeRange')[0];
lineSizeRange.value = lineSize;
lineSizeRange.addEventListener('input', function (e) {
lineSize = parseInt(this.value, 10);
});
lineSizeRange = document.getElementsByName('lineSizeRange')[0];
var lineSizeRange = document.getElementsByName('lineSizeRange')[0];
lineSizeRange.value = lineSize;
lineSizeRange.addEventListener('input', function (e) {
lineSize = parseInt(this.value, 10);
});
var colorShiftRange, colorShiftInput;
colorShiftRange = document.getElementsByName('colorShiftRange')[0];
var colorShiftRange = document.getElementsByName('colorShiftRange')[0];
colorShiftRange.value = disconnectedColorShiftAmt;
colorShiftRange.addEventListener('input', function (e) {
disconnectedColorShiftAmt = parseInt(this.value, 10);
});
colorShiftRange = document.getElementsByName('colorShiftRange')[0];
var colorShiftRange = document.getElementsByName('colorShiftRange')[0];
colorShiftRange.value = disconnectedColorShiftAmt;
colorShiftRange.addEventListener('input', function (e) {
disconnectedColorShiftAmt = parseInt(this.value, 10);