From 20168d1dc4682dd9db96a83288ff52adf8a347a7 Mon Sep 17 00:00:00 2001 From: Tyler Hallada Date: Thu, 10 Aug 2017 01:07:09 -0400 Subject: [PATCH] Add 3rd dimension, use sprite instead of circle 3rd dimension (z value) is not used right now, but indices were updated to support it. I should really make a Point class... Using a sprite image instead of drawCircle noticeably improves performance. --- img/node.png | Bin 0 -> 1512 bytes js/proximity.js | 75 +++++++++++++++++++++++++++++++----------------- 2 files changed, 49 insertions(+), 26 deletions(-) create mode 100644 img/node.png diff --git a/img/node.png b/img/node.png new file mode 100644 index 0000000000000000000000000000000000000000..41e676e03530e58ef7d1dedcab1630b4820311f7 GIT binary patch literal 1512 zcmVP)e zSad^gZEa<4bO1wgWnpw>WFU8GbZ8()Nlj2!fese{00mGFz( z`TYf86<7h5fxHUxJ{e#F7zfV8{M#GAV_*?@-pPWbfUCeHaL$rH=o;`4xDV`fiXcP4 zG;keoEbYpRz&+qDu%1*whJYF13hl)La62wx;t(VS+ycI(y_p5RkGd<1T97H=2jC>h zU>CRvmOjlFb2d1DLm2kR0$eoyDBnHCrXfDc}Kc zp3dYM@FlQigCH5;Q3NTDcB24%5p=a5RFI3n&%g&L0QG+DqrNC(t+bR@1jzuuX*cDm`x^B-ruY@)6ta&npz-!R&}aS3zWjDM4^#|a z47f2P3PExmyv_*1d3@x)ymndFfS)wBf%pm!X%;Vnq=7$4er_si4uDT+l92S$W!+IR zLgBa@%Rpnu6v<7Yn_!G4iO5D>Rtor= z>>}l3Y8;%X*Ft7AUXe57wS{QwFxX0JwUB9zQ*2B(YauD%A2h8V7e(O1${AO6;IFC} zvEsNfuiIr!YK&rMvYsFr>^X(rNt|RDDAxr3*eV-U!f zTgZsU!#E?AT~=1(VVrEGAj29D;|!O_kY40Iw_=_?2f385*uh!H9o-d6W?BwnSE1O! zX$SERQS6}KL5y4!iw5-`je|AxIEclOVh1N2#BWNmgYK?Usq`Dn zgF^@LC{*m=t%DdwDt55vAnu)t9lUYS)Vob=JBY8XVh67r#AH~pgG~oLZDJEIbqm)n z`W(ayy`Zr$P62pbPMxf3JdCpn|0fk!G#c<6)fTNo&I8?FXN_CX$N zT#WH9_LYJxYFv!*F80-zKL0>(QN_&~@M*0U0#eLGiI*cW*K5&cX?iVs2dONh#KS$R zT!GYD!z`YxHP(?bKT5PLP{R#K?U^iU9W)rc*O8h_N;J$;r^uLE{KZep7JoZP0W2k4 zZqlIAn-|~SUr}e$uvh{vHF`jel;a~bBjr3&jZ6u~4Lp?D^O_==N2-x2tucqk@_K&j zhy0FKNbt)u;DXnOwV+G16o|N>%N9}^ZeL^Flzlf=zG@q`l4gI7l!hy6%5dCb8#$_Zo86 z_C5{vy^|_PB^jh-!#Hpz=HK2x?q@89v9L>uAeE#MWBM#&zdaB^ienYo*IABgwv;46 zs_8}Cw+9iA;eNzPwFmKw>;{gx&mJOnQ+tT1&NgBlvWXZZyg;sjTg!hZD00ENu3NkS O0000= cycleDuration) { + if (points.target[i][3] >= cycleDuration) { // cycleDuration was reduced and now this point's cycle is out of bounds. Randomly pick a new valid one. - points.target[i][2] = randomInt(0, cycleDuration - 1); + points.target[i][3] = randomInt(0, cycleDuration - 1); } - if (points.target[i][2] === counter) { + if (points.target[i][3] === counter) { points.original[i] = points.target[i].slice(); shiftX = randomInt(maxShiftAmt * -1, maxShiftAmt); shiftY = randomInt(maxShiftAmt * -1, maxShiftAmt); @@ -397,9 +411,9 @@ function shiftPoints (points, maxShiftAmt, counter, tweeningFns) { } points.target[i][0] = candidateX; points.target[i][1] = candidateY; - points.target[i][4] = tweeningFns[Math.floor(Math.random() * tweeningFns.length)]; + points.target[i][5] = tweeningFns[Math.floor(Math.random() * tweeningFns.length)]; // FIXME: buggy, makes points jump around too fast - // points.target[i][2] = shiftPointCounter(points.original[i][2], maxShiftAmt); + // points.target[i][3] = shiftPointCounter(points.original[i][3], maxShiftAmt); } } // clear pointShiftBiases now that they have been "used" @@ -425,7 +439,7 @@ function pullPoints (points, clickPos, pullRate, inertia, maxDist, counter, rese points.target[i][0] += Math.round((targetXDiff + (inertia * originXDiff)) * pullRate); // pull X points.target[i][1] += Math.round((targetYDiff + (inertia * originYDiff)) * pullRate); // pull Y // shift the color of each point in effect radius by some configurable amount - points.target[i][3] = shiftColor(points.original[i][3], clickColorShiftAmt); + points.target[i][4] = shiftColor(points.original[i][4], clickColorShiftAmt); if (tweeningFn !== null) { // Also switch the tweening function for all affected points for additional effect // The tweening function will be re-assigned at the start of the point's next cycle @@ -433,8 +447,8 @@ function pullPoints (points, clickPos, pullRate, inertia, maxDist, counter, rese } } // If this point's cycle is near it's end, bump it up some ticks to make the animation smoother - if (relativeCounter(points.target[i][2]) > Math.roundcycleDuration - 10) { - points.target[i][2] = (points.target[i][2] + Math.round(cycleDuration / 2)) % cycleDuration; + if (relativeCounter(points.target[i][3]) > Math.roundcycleDuration - 10) { + points.target[i][3] = (points.target[i][3] + Math.round(cycleDuration / 2)) % cycleDuration; } } } @@ -448,8 +462,8 @@ function redistributeCycles (points, oldCycleDuration, cycleDuration) { // cycleDuration goes back up, the values will remain the same, making the points appear to dance in sync. var progress; for (var i = 0; i < points.original.length; i++) { - progress = points.target[i][2] / oldCycleDuration; - points.target[i][2] = Math.round(progress * cycleDuration); + progress = points.target[i][3] / oldCycleDuration; + points.target[i][3] = Math.round(progress * cycleDuration); } return points; } @@ -457,11 +471,11 @@ function redistributeCycles (points, oldCycleDuration, cycleDuration) { /* DRAW FUNCTIONS */ function drawPolygon (polygon, points, counter, tweeningFns) { - var i, j, easingFn, relativeCount, avgColor, shadedColor, connectionCount, dist, connectivity; + var i, j, easingFn, relativeCount, avgColor, shadedColor, connectionCount, dist, connectivity, scale; // calculate vectors for (i = 0; i < points.original.length; i++) { - easingFn = allTweeningFns[points.target[i][4]]; - relativeCount = relativeCounter(counter, points.target[i][2]); + easingFn = allTweeningFns[points.target[i][5]]; + relativeCount = relativeCounter(counter, points.target[i][3]); points.tweened[i][0] = easingFn(relativeCount, points.original[i][0], points.target[i][0] - points.original[i][0], cycleDuration); points.tweened[i][1] = easingFn(relativeCount, points.original[i][1], points.target[i][1] - points.original[i][1], cycleDuration); @@ -487,12 +501,12 @@ function drawPolygon (polygon, points, counter, tweeningFns) { connectivity = dist / connectionDistance; if ((j !== i) && (dist <= connectionDistance)) { // find average color of both points - if ((points.tweened[i][2] === counter) || (points.tweened[j][2] === counter)) { + if ((points.tweened[i][3] === counter) || (points.tweened[j][3] === counter)) { // avgColor = shiftColor(avgColor, Math.round(colorShiftAmt * (1 - connectivity))); - points.tweened[i][3] = weightedAverageColor(points.tweened[i][3], points.tweened[j][3], connectivity); - points.tweened[j][3] = weightedAverageColor(points.tweened[j][3], points.tweened[i][3], connectivity); + points.tweened[i][4] = weightedAverageColor(points.tweened[i][4], points.tweened[j][4], connectivity); + points.tweened[j][4] = weightedAverageColor(points.tweened[j][4], points.tweened[i][4], connectivity); } - avgColor = averageColor(points.tweened[i][3], points.tweened[j][3]); + avgColor = averageColor(points.tweened[i][4], points.tweened[j][4]); shadedColor = shadeColor(avgColor, connectivity); polygon.lineStyle(1, rgbToHex(shadedColor), 1); @@ -503,12 +517,18 @@ function drawPolygon (polygon, points, counter, tweeningFns) { } if (connectionCount === 0) { - points.tweened[i][3] = shiftColor(points.tweened[i][3], disconnectedColorShiftAmt); + points.tweened[i][4] = shiftColor(points.tweened[i][4], disconnectedColorShiftAmt); } // draw vectors - polygon.lineStyle(1, rgbToHex(points.tweened[i][3]), 1); - polygon.drawCircle(points.tweened[i][0], points.tweened[i][1], 1); + polygon.lineStyle(1, rgbToHex(points.tweened[i][4]), 1); + // TODO: numbers here should be derived from a configuration variable + scale = 0.03; + sprites[i].scale.x = scale; + sprites[i].scale.y = scale; + sprites[i].x = points.tweened[i][0] - 1.5; + sprites[i].y = points.tweened[i][1] - 1.5; + sprites[i].tint = rgbToHex(points.tweened[i][4]); } } @@ -633,13 +653,13 @@ function loopStart () { connectionDistance = Math.min(Math.round(totalScreenPixels / 16), 75); pointShiftDistance = Math.round(totalScreenPixels / 45); polygon = new window.PIXI.Graphics(); - startPoints = getRandomPoints(Math.round(totalScreenPixels / 6), screenWidth, screenHeight, tweeningFns); + stage.addChild(polygon); + startPoints = getRandomPoints(Math.round(totalScreenPixels / 6), screenWidth, screenHeight, zRange, tweeningFns); polygonPoints = { original: startPoints, target: JSON.parse(JSON.stringify(startPoints)), tweened: JSON.parse(JSON.stringify(startPoints)) }; - stage.addChild(polygon); fpsGraphic = new window.PIXI.Text('0', {font: '25px monospace', fill: 'yellow'}); fpsGraphic.x = 0; @@ -656,7 +676,10 @@ function loopStart () { window.requestAnimationFrame(loop); } -window.onload = loopStart; +// Use PIXI loader to load image and then start animation +window.PIXI.loader + .add(nodeImg) + .load(loopStart); /* MOUSE AND TOUCH EVENTS */