From 6544b3b5f66c23fa94ed1eee08a833f0a0f2d282 Mon Sep 17 00:00:00 2001 From: Ben Burlingham Date: Sun, 23 Jul 2017 19:37:47 +0200 Subject: [PATCH] Direction changing updates. --- js/animation3.js | 71 ++++++++++++++++++++++------------------------ js/bundle.js | 73 ++++++++++++++++++++++++------------------------ 2 files changed, 70 insertions(+), 74 deletions(-) diff --git a/js/animation3.js b/js/animation3.js index e466914..766d0a4 100644 --- a/js/animation3.js +++ b/js/animation3.js @@ -12,7 +12,8 @@ import AnimationBase from './animation0'; import DOM from './dom'; import Store from './store'; -const speed = 6; +const speed = 4; +const visionRadius = 50; const grid = {}; const t45 = Math.PI / 4; const t90 = Math.PI / 2; @@ -42,35 +43,34 @@ function move(store) { theta } = store.get(); - // detectWall(store); - + // Separation, alignment, cohesion + // if (detectWall(store) && radius !== 20) { + // // IF SEEING A WALL: tight 180 + // const radius0 = radius; + // radius = 20; + // interval = Math.PI * 20 / speed; + // circleX -= (radius - radius0) * Math.cos(theta); + // circleY += (radius - radius0) * Math.sin(theta); + // } else if (interval <= 0) { const radius0 = radius; interval = Math.round(Math.random() * 10) + 50; radius = Math.round(Math.random() * 200) + 50; - // IF SEEING A WALL: tight 180 - // if ( < visionRadius - // if (Math.random() < 0.3) { - // console.warn("turn!") - // state.radius = 20; - // 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; + theta = (theta + Math.PI) % t360; + circleX -= (radius + radius0) * Math.cos(theta); + circleY += (radius + radius0) * Math.sin(theta); + } else { + circleX -= (radius - radius0) * Math.cos(theta); + circleY += (radius - radius0) * Math.sin(theta); } } interval -= 1; - // TODO store delta const delta = speed / radius; theta += (clockwise ? -delta : +delta); theta = (theta > 0 ? theta % t360 : t360 - theta); @@ -117,12 +117,13 @@ function detectWall(store) { function transformMovementCircle(store) { // TODO UPDATE ONLY IF THETA CHANGED - MUST HAVE PREVSTATE const { circleX, circleY, radius, theta } = store.get(); + const r = Math.abs(radius); - movementCircle.style.left = `${circleX - radius}px`; - movementCircle.style.top = `${circleY - radius}px`; - movementCircle.style.height = `${2 * radius}px`; - movementCircle.style.width = `${2 * radius}px`; - movementCircle.style.borderRadius = `${radius}px`; + movementCircle.style.left = `${circleX - r}px`; + movementCircle.style.top = `${circleY - r}px`; + movementCircle.style.height = `${2 * r}px`; + movementCircle.style.width = `${2 * r}px`; + movementCircle.style.borderRadius = `${r}px`; } function transformParticle(store) { @@ -160,18 +161,12 @@ function transformVisionGrid(store) { div.style.display = (clockwise ? 'block' : 'none'); } - 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`; + div.style.left = `${x + gridX}px`; + div.style.top = `${-y + gridY}px`; }); } function calculateVisionGridPoints() { - const visionRadius = 50; const gridSize = 5; const squareGrid = []; @@ -199,10 +194,12 @@ function calculateVisionGridPoints() { } } - const visionRadiusSquared = Math.pow(visionRadius, 2); + const r0 = Math.pow(visionRadius, 2); + const r1 = Math.pow(visionRadius - gridSize, 2); return squareGrid.reduce((acc, point) => { - if ((Math.pow(point.x, 2) + Math.pow(point.y, 2)) > visionRadiusSquared) { + const p = Math.pow(point.x, 2) + Math.pow(point.y, 2); + if (p > r0 || p < r1) { return acc; } @@ -225,7 +222,7 @@ function reset() { circleX: 300, circleY: 300, radius: 270, - theta: Math.PI * 7 / 4 + theta: Math.PI * 3 / 4 }); move(store); @@ -261,9 +258,9 @@ function init() { const stop$ = Rx.Observable.fromEvent(DOM.container, 'stop'); const fps$ = Rx.Observable.interval(1000 / 32) .map(_ => store) - // .take(300) - // .take(11) - .takeUntil(stop$); console.error("CLICK TO STOP"); + .take(300) + // .take(15) + // .takeUntil(stop$); console.error("CLICK TO STOP"); const click$ = Rx.Observable.fromEvent(DOM.container, 'click'); click$.subscribe(() => { @@ -272,7 +269,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 714cc9f..2311e00 100644 --- a/js/bundle.js +++ b/js/bundle.js @@ -6379,7 +6379,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de // number of frames have emitted. A smoothstep cubic curve was considered, but maintaining consistent entry and exit angles will affect // performance for large particle counts. -var speed = 6; +var speed = 4; +var visionRadius = 50; var grid = {}; var t45 = Math.PI / 4; var t90 = Math.PI / 2; @@ -6408,7 +6409,16 @@ function move(store) { radius = _store$get.radius, theta = _store$get.theta; - // detectWall(store); + // Separation, alignment, cohesion + // if (detectWall(store) && radius !== 20) { + // // IF SEEING A WALL: tight 180 + // const radius0 = radius; + // radius = 20; + // interval = Math.PI * 20 / speed; + // circleX -= (radius - radius0) * Math.cos(theta); + // circleY += (radius - radius0) * Math.sin(theta); + // } else + if (interval <= 0) { var radius0 = radius; @@ -6416,27 +6426,19 @@ function move(store) { interval = Math.round(Math.random() * 10) + 50; radius = Math.round(Math.random() * 200) + 50; - // IF SEEING A WALL: tight 180 - // if ( < visionRadius - // if (Math.random() < 0.3) { - // console.warn("turn!") - // state.radius = 20; - // 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; + theta = (theta + Math.PI) % t360; + circleX -= (radius + radius0) * Math.cos(theta); + circleY += (radius + radius0) * Math.sin(theta); + } else { + circleX -= (radius - radius0) * Math.cos(theta); + circleY += (radius - radius0) * Math.sin(theta); } } interval -= 1; - // TODO store delta var delta = speed / radius; theta += clockwise ? -delta : +delta; theta = theta > 0 ? theta % t360 : t360 - theta; @@ -6493,11 +6495,13 @@ function transformMovementCircle(store) { radius = _store$get3.radius, theta = _store$get3.theta; - movementCircle.style.left = circleX - radius + 'px'; - movementCircle.style.top = circleY - radius + 'px'; - movementCircle.style.height = 2 * radius + 'px'; - movementCircle.style.width = 2 * radius + 'px'; - movementCircle.style.borderRadius = radius + 'px'; + var r = Math.abs(radius); + + movementCircle.style.left = circleX - r + 'px'; + movementCircle.style.top = circleY - r + 'px'; + movementCircle.style.height = 2 * r + 'px'; + movementCircle.style.width = 2 * r + 'px'; + movementCircle.style.borderRadius = r + 'px'; } function transformParticle(store) { @@ -6544,18 +6548,12 @@ function transformVisionGrid(store) { div.style.display = clockwise ? 'block' : 'none'; } - 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'; + div.style.left = x + gridX + 'px'; + div.style.top = -y + gridY + 'px'; }); } function calculateVisionGridPoints() { - var visionRadius = 50; var gridSize = 5; var squareGrid = []; @@ -6583,10 +6581,12 @@ function calculateVisionGridPoints() { } } - var visionRadiusSquared = Math.pow(visionRadius, 2); + var r0 = Math.pow(visionRadius, 2); + var r1 = Math.pow(visionRadius - gridSize, 2); return squareGrid.reduce(function (acc, point) { - if (Math.pow(point.x, 2) + Math.pow(point.y, 2) > visionRadiusSquared) { + var p = Math.pow(point.x, 2) + Math.pow(point.y, 2); + if (p > r0 || p < r1) { return acc; } @@ -6609,7 +6609,7 @@ function reset() { circleX: 300, circleY: 300, radius: 270, - theta: Math.PI * 7 / 4 + theta: Math.PI * 3 / 4 }); move(store); @@ -6645,10 +6645,9 @@ 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(11) - .takeUntil(stop$);console.error("CLICK TO STOP"); + }).take(300); + // .take(15) + // .takeUntil(stop$); console.error("CLICK TO STOP"); var click$ = _rxjs2.default.Observable.fromEvent(_dom2.default.container, 'click'); click$.subscribe(function () { @@ -6657,7 +6656,7 @@ function init() { fps$.subscribe(move); fps$.subscribe(transformParticle); - // fps$.subscribe(transformMovementCircle); + fps$.subscribe(transformMovementCircle); fps$.subscribe(transformVisionGrid); };