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

Fix occasional failure to init event handlers

Browse Source 
If the 'load' event fired on the `window` before Pixi.js ran `.load()`, then the
canvas element would not be in the DOM and an exception would be thrown before
the event handlers could be registered. Now, the event handlers are added at the
end of `loopStart`, the function called on Pixi's `.load()`.
This commit is contained in:
Tyler Hallada 2018-06-07 22:33:02 -04:00
parent 6a0513e989
commit b350f1b271
1 changed files with 61 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

120
js/proximity.js
View File

@ -818,64 +818,7 @@ function loop () {
window.requestAnimationFrame(loop); window.requestAnimationFrame(loop);
} }
function loopStart () { function registerEventHandlers() {
screenWidth = window.innerWidth;
screenHeight = window.innerHeight;
// Create the renderer
renderer = window.PIXI.autoDetectRenderer(screenWidth, screenHeight, {antialias: true, resolution: resolution});
// Add the canvas to the HTML document
document.body.appendChild(renderer.view);
// Create a container object called the `stage`
stage = new window.PIXI.Container();
renderer.view.style.position = 'absolute';
renderer.view.style.display = 'block';
renderer.autoResize = true;
counter = 0;
totalScreenPixels = screenWidth + screenHeight;
connectionDistance = Math.min(Math.round(totalScreenPixels / 16), 75);
pointShiftDistance = Math.round(totalScreenPixels / 45);
clickMaxDistStart = Math.min(Math.round(totalScreenPixels / 20), clickMaxDistStart);
hoverMaxDistStart = Math.min(Math.round(totalScreenPixels / 16), hoverMaxDistStart);
polygon = new window.PIXI.Graphics();
stage.addChild(polygon);
numPoints = Math.round(totalScreenPixels / 6);
startPoints = getRandomPoints(numPoints, screenWidth, screenHeight, zRange, tweeningFns);
polygonPoints = {
original: startPoints,
target: JSON.parse(JSON.stringify(startPoints)),
tweened: JSON.parse(JSON.stringify(startPoints))
};
fpsGraphic = new window.PIXI.Text('0', {font: '25px monospace', fill: 'yellow'});
fpsGraphic.anchor = new window.PIXI.Point(1, 0);
fpsGraphic.x = screenWidth - 1;
fpsGraphic.y = 0;
if (fpsEnabled) {
stage.addChild(fpsGraphic);
}
lastLoop = new Date();
scrollDelta = 0;
// Try to fix bug where click initializes to a bogus value
click = null;
hover = null;
window.requestAnimationFrame(loop);
}
// Use PIXI loader to load image and then start animation
window.PIXI.loader
.add(nodeImg)
.load(loopStart);
window.addEventListener('load', function () {
var tweeningInputs, debugCheckbox, fpsCheckbox, nodeCheckbox, linesCheckbox; var tweeningInputs, debugCheckbox, fpsCheckbox, nodeCheckbox, linesCheckbox;
tweeningInputs = document.getElementsByName('tweening'); tweeningInputs = document.getElementsByName('tweening');
debugCheckbox = document.getElementsByName('debugToggle')[0]; debugCheckbox = document.getElementsByName('debugToggle')[0];
@ -1148,4 +1091,63 @@ window.addEventListener('load', function () {
linesCheckbox.addEventListener('change', function (e) { linesCheckbox.addEventListener('change', function (e) {
toggleLines(); toggleLines();
}); });
}, false); }
function loopStart () {
screenWidth = window.innerWidth;
screenHeight = window.innerHeight;
// Create the renderer
renderer = window.PIXI.autoDetectRenderer(screenWidth, screenHeight, {antialias: true, resolution: resolution});
// Add the canvas to the HTML document
document.body.appendChild(renderer.view);
// Create a container object called the `stage`
stage = new window.PIXI.Container();
renderer.view.style.position = 'absolute';
renderer.view.style.display = 'block';
renderer.autoResize = true;
counter = 0;
totalScreenPixels = screenWidth + screenHeight;
connectionDistance = Math.min(Math.round(totalScreenPixels / 16), 75);
pointShiftDistance = Math.round(totalScreenPixels / 45);
clickMaxDistStart = Math.min(Math.round(totalScreenPixels / 20), clickMaxDistStart);
hoverMaxDistStart = Math.min(Math.round(totalScreenPixels / 16), hoverMaxDistStart);
polygon = new window.PIXI.Graphics();
stage.addChild(polygon);
numPoints = Math.round(totalScreenPixels / 6);
startPoints = getRandomPoints(numPoints, screenWidth, screenHeight, zRange, tweeningFns);
polygonPoints = {
original: startPoints,
target: JSON.parse(JSON.stringify(startPoints)),
tweened: JSON.parse(JSON.stringify(startPoints))
};
fpsGraphic = new window.PIXI.Text('0', {font: '25px monospace', fill: 'yellow'});
fpsGraphic.anchor = new window.PIXI.Point(1, 0);
fpsGraphic.x = screenWidth - 1;
fpsGraphic.y = 0;
if (fpsEnabled) {
stage.addChild(fpsGraphic);
}
lastLoop = new Date();
scrollDelta = 0;
// Try to fix bug where click initializes to a bogus value
click = null;
hover = null;
registerEventHandlers();
window.requestAnimationFrame(loop);
}
// Use PIXI loader to load image and then start animation
window.PIXI.loader
.add(nodeImg)
.load(loopStart);