diff --git a/js/animation3.js b/js/animation3.js index e173d6b..e466914 100644 --- a/js/animation3.js +++ b/js/animation3.js @@ -36,14 +36,16 @@ function move(store) { interval, circleX, circleY, + particleX, + particleY, radius, theta } = store.get(); + // detectWall(store); if (interval <= 0) { - const particleX = circleX + radius * Math.cos(theta); - const particleY = circleY - radius * Math.sin(theta); + const radius0 = radius; interval = Math.round(Math.random() * 10) + 50; radius = Math.round(Math.random() * 200) + 50; @@ -56,48 +58,60 @@ function move(store) { // state.interval = Math.PI * 20 / speed; // } + circleX -= (radius - radius0) * Math.cos(theta); + circleY += (radius - radius0) * Math.sin(theta); + if (Math.random() < 0.5) { clockwise = !clockwise; theta = (theta > Math.PI ? theta - Math.PI : theta + Math.PI); radius *= -1; } - - circleX = particleX - radius * Math.cos(theta); - circleY = particleY + radius * Math.sin(theta); } - // interval -= 1; + interval -= 1; // TODO store delta const delta = speed / radius; theta += (clockwise ? -delta : +delta); - theta %= t360; + theta = (theta > 0 ? theta % t360 : t360 - theta); + + particleX = circleX + radius * Math.cos(theta); + particleY = circleY - radius * Math.sin(theta); store.set({ clockwise, interval, circleX, circleY, + particleX, + particleY, radius, theta }); - - // detectWall(store); } function detectWall(store) { - // const { circleX, circleY, radius, theta } = store.get(); - // const len = visionGridPoints.length; - // - // for (let i = 0; i < len; i++) { - // const { x, y } = visionGridPoints[i]; - // if (grid[x] && grid[x][y] && grid[x][y].type === 'wall') { - // console.warn("Wall detected", x, y); - // return true; - // } - // } - // - // return false; + const len = visionGridPoints.length; + + const { particleX, particleY } = store.get(); + + const gridX = particleX - particleX % 5; + const gridY = particleY - particleY % 5; + + for (let i = 0; i < len; i++) { + const { x, y } = visionGridPoints[i]; + const xx = x + gridX; + const yy = y + gridY; + + if (grid[xx] && grid[xx][yy] && grid[xx][yy].type === 'wall') { + console.warn("Wall detected", xx, yy); + // TODO this goes somewhere else + // DOM.container.dispatchEvent(new CustomEvent('stop')); + return true; + } + } + + return false; } function transformMovementCircle(store) { @@ -112,23 +126,32 @@ function transformMovementCircle(store) { } function transformParticle(store) { - const { clockwise, circleX, circleY, radius, theta } = store.get(); + const { clockwise, particleX, particleY, theta } = store.get(); const rad = clockwise ? Math.PI - theta : t360 - theta; - particle.style.left = `${circleX + radius * Math.cos(theta)}px`; - particle.style.top = `${circleY - radius * Math.sin(theta)}px`; + particle.style.left = `${particleX}px`; + particle.style.top = `${particleY}px`; particle.style.transform = `rotate(${rad}rad)`; } function transformVisionGrid(store) { - const { clockwise, circleX, circleY, radius, theta } = store.get(); - const particleX = circleX + radius * Math.cos(theta); - const particleY = circleY - radius * Math.sin(theta); + const { + circleX, + circleY, + clockwise, + particleX, + particleY, + radius, + theta + } = store.get(); const r0 = Math.min(theta, theta - Math.PI); const r1 = Math.max(theta, theta + Math.PI); - visionGridPoints.forEach(({ x, y, alpha, div }) => { + const gridX = particleX - particleX % 5; + const gridY = particleY - particleY % 5; + + visionGridPoints.forEach(({ x, y, alpha, div }, i) => { if (alpha >= 0 && alpha <= r0) { div.style.display = (clockwise ? 'none' : 'block'); } else if (alpha >= theta && alpha <= r1) { @@ -137,8 +160,13 @@ function transformVisionGrid(store) { div.style.display = (clockwise ? 'block' : 'none'); } - div.style.left = `${x + particleX}px`; - div.style.top = `${-y + particleY}px`; + const newX = x + gridX; + const newY = -y + gridY; + + // PERF: Moving all the points, only need to move half. + // PERF: Only need outer points + div.style.left = `${newX}px`; + div.style.top = `${newY}px`; }); } @@ -192,12 +220,12 @@ function reset() { } const store = new Store({ - clockwise: true, + clockwise: false, interval: 10, circleX: 300, circleY: 300, - radius: 150, - theta: 0 + radius: 270, + theta: Math.PI * 7 / 4 }); move(store); @@ -233,9 +261,9 @@ function init() { const stop$ = Rx.Observable.fromEvent(DOM.container, 'stop'); const fps$ = Rx.Observable.interval(1000 / 32) .map(_ => store) - .take(300) - // .take(0) - // .takeUntil(stop$); console.error("CLICK TO STOP"); + // .take(300) + // .take(11) + .takeUntil(stop$); console.error("CLICK TO STOP"); const click$ = Rx.Observable.fromEvent(DOM.container, 'click'); click$.subscribe(() => { @@ -244,7 +272,7 @@ function init() { fps$.subscribe(move); fps$.subscribe(transformParticle); - fps$.subscribe(transformMovementCircle); + // fps$.subscribe(transformMovementCircle); fps$.subscribe(transformVisionGrid); }; diff --git a/js/bundle.js b/js/bundle.js index be7f603..714cc9f 100644 --- a/js/bundle.js +++ b/js/bundle.js @@ -6403,12 +6403,15 @@ function move(store) { interval = _store$get.interval, circleX = _store$get.circleX, circleY = _store$get.circleY, + particleX = _store$get.particleX, + particleY = _store$get.particleY, radius = _store$get.radius, theta = _store$get.theta; + // detectWall(store); + if (interval <= 0) { - var particleX = circleX + radius * Math.cos(theta); - var particleY = circleY - radius * Math.sin(theta); + var radius0 = radius; interval = Math.round(Math.random() * 10) + 50; radius = Math.round(Math.random() * 200) + 50; @@ -6421,57 +6424,74 @@ function move(store) { // state.interval = Math.PI * 20 / speed; // } + circleX -= (radius - radius0) * Math.cos(theta); + circleY += (radius - radius0) * Math.sin(theta); + if (Math.random() < 0.5) { clockwise = !clockwise; theta = theta > Math.PI ? theta - Math.PI : theta + Math.PI; radius *= -1; } - - circleX = particleX - radius * Math.cos(theta); - circleY = particleY + radius * Math.sin(theta); } - // interval -= 1; + interval -= 1; // TODO store delta var delta = speed / radius; theta += clockwise ? -delta : +delta; - theta %= t360; + theta = theta > 0 ? theta % t360 : t360 - theta; + + particleX = circleX + radius * Math.cos(theta); + particleY = circleY - radius * Math.sin(theta); store.set({ clockwise: clockwise, interval: interval, circleX: circleX, circleY: circleY, + particleX: particleX, + particleY: particleY, radius: radius, theta: theta }); - - // detectWall(store); } function detectWall(store) { - // const { circleX, circleY, radius, theta } = store.get(); - // const len = visionGridPoints.length; - // - // for (let i = 0; i < len; i++) { - // const { x, y } = visionGridPoints[i]; - // if (grid[x] && grid[x][y] && grid[x][y].type === 'wall') { - // console.warn("Wall detected", x, y); - // return true; - // } - // } - // - // return false; + var len = visionGridPoints.length; + + var _store$get2 = store.get(), + particleX = _store$get2.particleX, + particleY = _store$get2.particleY; + + var gridX = particleX - particleX % 5; + var gridY = particleY - particleY % 5; + + for (var i = 0; i < len; i++) { + var _visionGridPoints$i = visionGridPoints[i], + x = _visionGridPoints$i.x, + y = _visionGridPoints$i.y; + + var xx = x + gridX; + var yy = y + gridY; + + if (grid[xx] && grid[xx][yy] && grid[xx][yy].type === 'wall') { + console.warn("Wall detected", xx, yy); + // TODO this goes somewhere else + // DOM.container.dispatchEvent(new CustomEvent('stop')); + return true; + } + } + + return false; } function transformMovementCircle(store) { // TODO UPDATE ONLY IF THETA CHANGED - MUST HAVE PREVSTATE - var _store$get2 = store.get(), - circleX = _store$get2.circleX, - circleY = _store$get2.circleY, - radius = _store$get2.radius, - theta = _store$get2.theta; + var _store$get3 = store.get(), + circleX = _store$get3.circleX, + circleY = _store$get3.circleY, + radius = _store$get3.radius, + theta = _store$get3.theta; movementCircle.style.left = circleX - radius + 'px'; movementCircle.style.top = circleY - radius + 'px'; @@ -6481,35 +6501,36 @@ function transformMovementCircle(store) { } function transformParticle(store) { - var _store$get3 = store.get(), - clockwise = _store$get3.clockwise, - circleX = _store$get3.circleX, - circleY = _store$get3.circleY, - radius = _store$get3.radius, - theta = _store$get3.theta; + var _store$get4 = store.get(), + clockwise = _store$get4.clockwise, + particleX = _store$get4.particleX, + particleY = _store$get4.particleY, + theta = _store$get4.theta; var rad = clockwise ? Math.PI - theta : t360 - theta; - particle.style.left = circleX + radius * Math.cos(theta) + 'px'; - particle.style.top = circleY - radius * Math.sin(theta) + 'px'; + particle.style.left = particleX + 'px'; + particle.style.top = particleY + 'px'; particle.style.transform = 'rotate(' + rad + 'rad)'; } function transformVisionGrid(store) { - var _store$get4 = store.get(), - clockwise = _store$get4.clockwise, - circleX = _store$get4.circleX, - circleY = _store$get4.circleY, - radius = _store$get4.radius, - theta = _store$get4.theta; - - var particleX = circleX + radius * Math.cos(theta); - var particleY = circleY - radius * Math.sin(theta); + var _store$get5 = store.get(), + circleX = _store$get5.circleX, + circleY = _store$get5.circleY, + clockwise = _store$get5.clockwise, + particleX = _store$get5.particleX, + particleY = _store$get5.particleY, + radius = _store$get5.radius, + theta = _store$get5.theta; var r0 = Math.min(theta, theta - Math.PI); var r1 = Math.max(theta, theta + Math.PI); - visionGridPoints.forEach(function (_ref) { + var gridX = particleX - particleX % 5; + var gridY = particleY - particleY % 5; + + visionGridPoints.forEach(function (_ref, i) { var x = _ref.x, y = _ref.y, alpha = _ref.alpha, @@ -6523,8 +6544,13 @@ function transformVisionGrid(store) { div.style.display = clockwise ? 'block' : 'none'; } - div.style.left = x + particleX + 'px'; - div.style.top = -y + particleY + 'px'; + var newX = x + gridX; + var newY = -y + gridY; + + // PERF: Moving all the points, only need to move half. + // PERF: Only need outer points + div.style.left = newX + 'px'; + div.style.top = newY + 'px'; }); } @@ -6578,12 +6604,12 @@ function reset() { } var store = new _store2.default({ - clockwise: true, + clockwise: false, interval: 10, circleX: 300, circleY: 300, - radius: 150, - theta: 0 + radius: 270, + theta: Math.PI * 7 / 4 }); move(store); @@ -6619,9 +6645,10 @@ function init() { var stop$ = _rxjs2.default.Observable.fromEvent(_dom2.default.container, 'stop'); var fps$ = _rxjs2.default.Observable.interval(1000 / 32).map(function (_) { return store; - }).take(300); - // .take(0) - // .takeUntil(stop$); console.error("CLICK TO STOP"); + }) + // .take(300) + // .take(11) + .takeUntil(stop$);console.error("CLICK TO STOP"); var click$ = _rxjs2.default.Observable.fromEvent(_dom2.default.container, 'click'); click$.subscribe(function () { @@ -6630,7 +6657,7 @@ function init() { fps$.subscribe(move); fps$.subscribe(transformParticle); - fps$.subscribe(transformMovementCircle); + // fps$.subscribe(transformMovementCircle); fps$.subscribe(transformVisionGrid); }; diff --git a/res/.DS_Store b/res/.DS_Store index 5008ddf..25a5993 100644 Binary files a/res/.DS_Store and b/res/.DS_Store differ