Dynamically add/remove points as numPoints changes
This commit is contained in:
parent
dd47eef459
commit
e8d7f8b62c
@ -461,11 +461,7 @@ function createSprite () {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* POINT OPERATION FUNCTIONS */
|
function clearSprites () {
|
||||||
|
|
||||||
function getRandomPoints (numPoints, maxX, maxY, maxZ, tweeningFns) {
|
|
||||||
var i, x, y, z, color, cycleStart, easingFn, sprite;
|
|
||||||
var points = [];
|
|
||||||
if (sprites.length > 0) {
|
if (sprites.length > 0) {
|
||||||
// need to clear out old sprites
|
// need to clear out old sprites
|
||||||
for (i = 0; i < sprites.length; i++) {
|
for (i = 0; i < sprites.length; i++) {
|
||||||
@ -473,6 +469,13 @@ function getRandomPoints (numPoints, maxX, maxY, maxZ, tweeningFns) {
|
|||||||
}
|
}
|
||||||
sprites = [];
|
sprites = [];
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* POINT OPERATION FUNCTIONS */
|
||||||
|
|
||||||
|
function getRandomPoints (numPoints, maxX, maxY, maxZ, tweeningFns) {
|
||||||
|
var i, x, y, z, color, cycleStart, easingFn, sprite;
|
||||||
|
var points = [];
|
||||||
for (i = 0; i < numPoints; i++) {
|
for (i = 0; i < numPoints; i++) {
|
||||||
x = randomInt(0, maxX - 1);
|
x = randomInt(0, maxX - 1);
|
||||||
y = randomInt(0, maxY - 1);
|
y = randomInt(0, maxY - 1);
|
||||||
@ -491,6 +494,26 @@ function getRandomPoints (numPoints, maxX, maxY, maxZ, tweeningFns) {
|
|||||||
return points;
|
return points;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function addOrRemovePoints (numPoints, points) {
|
||||||
|
/* Given new value numPoints, remove or add new random points to match new count. */
|
||||||
|
var deletedSprites, newPoints;
|
||||||
|
if (points.target.length > numPoints) {
|
||||||
|
points.original.splice(numPoints - 1);
|
||||||
|
points.target.splice(numPoints - 1);
|
||||||
|
points.tweened.splice(numPoints - 1);
|
||||||
|
deletedSprites = sprites.splice(numPoints - 1);
|
||||||
|
for (var i = 0; i < deletedSprites.length; i++) {
|
||||||
|
stage.removeChild(deletedSprites[i]);
|
||||||
|
}
|
||||||
|
} else if (points.target.length < numPoints) {
|
||||||
|
newPoints = getRandomPoints(numPoints - points.target.length, screenWidth, screenHeight, zRange, tweeningFns);
|
||||||
|
points.original = points.original.concat(newPoints);
|
||||||
|
points.target = points.target.concat(JSON.parse(JSON.stringify(newPoints)));
|
||||||
|
points.tweened = points.tweened.concat(JSON.parse(JSON.stringify(newPoints)));
|
||||||
|
}
|
||||||
|
return points;
|
||||||
|
}
|
||||||
|
|
||||||
function shiftPoints (points, maxShiftAmt, counter, tweeningFns) {
|
function shiftPoints (points, maxShiftAmt, counter, tweeningFns) {
|
||||||
var i, shiftX, shiftY, candidateX, candidateY;
|
var i, shiftX, shiftY, candidateX, candidateY;
|
||||||
for (i = 0; i < points.original.length; i++) {
|
for (i = 0; i < points.original.length; i++) {
|
||||||
@ -687,6 +710,7 @@ function loop () {
|
|||||||
|
|
||||||
if (reset === true) {
|
if (reset === true) {
|
||||||
var newPoints;
|
var newPoints;
|
||||||
|
clearSprites();
|
||||||
newPoints = getRandomPoints(numPoints, screenWidth, screenHeight, zRange, tweeningFns);
|
newPoints = getRandomPoints(numPoints, screenWidth, screenHeight, zRange, tweeningFns);
|
||||||
polygonPoints = {
|
polygonPoints = {
|
||||||
original: newPoints,
|
original: newPoints,
|
||||||
@ -1028,12 +1052,14 @@ window.onload = function () {
|
|||||||
pointsNumRange.value = numPoints;
|
pointsNumRange.value = numPoints;
|
||||||
pointsNumRange.addEventListener('input', function (e) {
|
pointsNumRange.addEventListener('input', function (e) {
|
||||||
numPoints = parseInt(this.value, 10);
|
numPoints = parseInt(this.value, 10);
|
||||||
|
polygonPoints = addOrRemovePoints(numPoints, polygonPoints);
|
||||||
});
|
});
|
||||||
|
|
||||||
var pointsNumInput = document.getElementsByName('pointsNumInput')[0];
|
var pointsNumInput = document.getElementsByName('pointsNumInput')[0];
|
||||||
pointsNumInput.value = numPoints;
|
pointsNumInput.value = numPoints;
|
||||||
pointsNumInput.addEventListener('input', function (e) {
|
pointsNumInput.addEventListener('input', function (e) {
|
||||||
numPoints = parseInt(this.value, 10);
|
numPoints = parseInt(this.value, 10);
|
||||||
|
polygonPoints = addOrRemovePoints(numPoints, polygonPoints);
|
||||||
});
|
});
|
||||||
|
|
||||||
var maxTravelRange = document.getElementsByName('maxTravelRange')[0];
|
var maxTravelRange = document.getElementsByName('maxTravelRange')[0];
|
||||||
|
4
notes.md
4
notes.md
@ -13,8 +13,8 @@ larger the polygon) the more dark the color is shaded.
|
|||||||
Add a bunch of dials and switches to the UI to tweak the different configurable
|
Add a bunch of dials and switches to the UI to tweak the different configurable
|
||||||
values.
|
values.
|
||||||
* Mostly implemented, need to add dials for click and hover vars
|
* Mostly implemented, need to add dials for click and hover vars
|
||||||
* Make point count slider add/remove points dynamically without having to
|
* ~~Make point count slider add/remove points dynamically without having to
|
||||||
reset.
|
reset.~~
|
||||||
* Make increasing cycleDuration auto randomize point cycles?
|
* Make increasing cycleDuration auto randomize point cycles?
|
||||||
* Save config to local storage and add a reset config to defaults button
|
* Save config to local storage and add a reset config to defaults button
|
||||||
* Allow sharing configs
|
* Allow sharing configs
|
||||||
|
Loading…
Reference in New Issue
Block a user