ben.burlingham
/
dust
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Wall avoidance algorithm finalized.

Browse Source
master
Ben Burlingham 8 years ago
parent 6544b3b5f6
commit 905921ceb0
6 changed files with 489 additions and 200 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 6
      css/animation3.scss
  2. 4
      css/style.css
  3. 2
      index.html
  4. 279
      js/animation3-ORIGINAL.js
  5. 173
      js/animation3.js
  6. 225
      js/bundle.js

6
css/animation3.scss
Unescape View File

@ -71,6 +71,10 @@
&.removed {
// background: purple;
background: yellow;
background: green;
}
&.touching {
outline: 2px solid yellow;
}
}

4
css/style.css
Unescape View File

@ -102,7 +102,9 @@ body {
width: 2px;
z-index: 99; }
.anim3-dot.removed {
background: yellow; }
background: green; }
.anim3-dot.touching {
outline: 2px solid yellow; }
.anim3-particle {
background: url(../res/seahorse.svg) no-repeat center top #aaa;
background-size: 20px 20px;

2
index.html
Unescape View File

@ -7,7 +7,7 @@
</head>
<body>
<h1>Dust</h1>
<h2>Swarm behavior studies with RxJs</h2>
<h2>Studying AI movement along arcs with RxJs</h2>
<hr>
<div class="particles"></div>

279
js/animation3-ORIGINAL.js
Unescape View File

@ -0,0 +1,279 @@
// Single particle movement.
// Goal: per-frame decisions
// 20 x 20 grid
// The trickiest portion of this iteration was animating the curved paths. Calculating arc length (for scalar speed) along an elliptical
// geometry is quite difficult, so the current solution uses circular paths, which change radius and sometimes rotation after a random
// 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.
// This algorithm travels a random period of time around a random arc.
// If a wall is detected, a 180-degree turn is executed.
import Rx, { Observable } from 'rxjs';
import AnimationBase from './animation0';
import DOM from './dom';
import Store from './store';
const speed = 4;
const visionRadius = 50;
const grid = {};
const t45 = Math.PI / 4;
const t90 = Math.PI / 2;
const t270 = 3 * Math.PI / 2;
const t360 = Math.PI * 2;
const movementCircle = document.createElement('div');
movementCircle.className = 'anim3-movement-circle';
const visionGrid = document.createElement('div');
visionGrid.className = 'anim3-vision-grid';
const particle = document.createElement('div');
particle.className = 'anim3-particle';
const visionGridPoints = calculateVisionGridPoints();
function move(store) {
let {
clockwise,
interval,
circleX,
circleY,
particleX,
particleY,
radius,
theta
} = store.get();
// If wall detected, tight 180
if (detectWall(store) && radius !== 20) {
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 (Math.random() < 0.5) {
clockwise = !clockwise;
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;
const delta = speed / radius;
theta += (clockwise ? -delta : +delta);
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
});
}
function detectWall(store) {
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) {
// 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 - 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) {
const { clockwise, particleX, particleY, theta } = store.get();
const rad = clockwise ? Math.PI - theta : t360 - theta;
particle.style.left = `${particleX}px`;
particle.style.top = `${particleY}px`;
particle.style.transform = `rotate(${rad}rad)`;
}
function transformVisionGrid(store) {
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);
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) {
div.style.display = (clockwise ? 'none' : 'block');
} else {
div.style.display = (clockwise ? 'block' : 'none');
}
div.style.left = `${x + gridX}px`;
div.style.top = `${-y + gridY}px`;
});
}
function calculateVisionGridPoints() {
const gridSize = 5;
const squareGrid = [];
for (let x = -visionRadius; x <= visionRadius; x += gridSize) {
for (let y = -visionRadius; y <= visionRadius; y += gridSize) {
let alpha = Math.atan(y / x);
if (x === 0 && y === 0) {
alpha = 0;
} else if (x === 0 && y < 0) {
alpha = t270;
} else if (y === 0 && x < 0) {
alpha = Math.PI;
} else if (x === 0 && y > 0) {
alpha = t90;
} else if (x < 0 && y < 0) {
alpha = alpha + Math.PI;
} else if (x <= 0) {
alpha = Math.PI + alpha;
} else if (y < 0) {
alpha = 2 * Math.PI + alpha;
}
squareGrid.push({ x, y, alpha });
}
}
const r0 = Math.pow(visionRadius, 2);
const r1 = Math.pow(visionRadius - gridSize, 2);
return squareGrid.reduce((acc, point) => {
const p = Math.pow(point.x, 2) + Math.pow(point.y, 2);
if (p > r0 || p < r1) {
return acc;
}
const div = document.createElement('div');
div.className = 'anim3-dot';
acc.push(Object.assign(point, { div }));
return acc;
}, []);
}
function reset() {
while (DOM.container.childNodes.length) {
DOM.container.removeChild(DOM.container.firstChild);
}
const store = new Store({
clockwise: false,
interval: 10,
circleX: 300,
circleY: 300,
radius: 270,
theta: Math.PI * 3 / 4
});
move(store);
transformParticle(store);
// transformMovementCircle(store);
// transformVisionGrid(store);
DOM.container.appendChild(particle);
DOM.container.appendChild(movementCircle);
visionGridPoints.forEach(point => {
DOM.container.appendChild(point.div);
});
return store;
};
function init() {
const store = reset();
for (let x = 0; x <= 600; x += 5) {
grid[x] = {};
for (let y = 0; y <= 600; y += 5) {
grid[x][y] = { type: null };
if (x === 0 || y === 0 || x === 600 || y === 600) {
grid[x][y] = { type: 'wall' };
}
}
}
const stop$ = Rx.Observable.fromEvent(DOM.container, 'stop');
const fps$ = Rx.Observable.interval(1000 / 32)
.map(_ => store)
// .take(300)
// .take(15)
.takeUntil(stop$); console.error("CLICK TO STOP");
const click$ = Rx.Observable.fromEvent(DOM.container, 'click');
click$.subscribe(() => {
DOM.container.dispatchEvent(new CustomEvent('stop'));
});
fps$.subscribe(move);
fps$.subscribe(transformParticle);
// fps$.subscribe(transformMovementCircle);
fps$.subscribe(transformVisionGrid);
};
const Animation3 = Object.assign({}, AnimationBase, { init, reset });
export default Animation3;

173
js/animation3.js
Unescape View File

@ -7,13 +7,15 @@
// 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.
// This algorithm travels a random period of time around a random arc.
// If a wall is detected, a 180-degree turn is executed.
import Rx, { Observable } from 'rxjs';
import AnimationBase from './animation0';
import DOM from './dom';
import Store from './store';
const speed = 4;
const visionRadius = 50;
const grid = {};
const t45 = Math.PI / 4;
const t90 = Math.PI / 2;
@ -23,9 +25,6 @@ const t360 = Math.PI * 2;
const movementCircle = document.createElement('div');
movementCircle.className = 'anim3-movement-circle';
const visionGrid = document.createElement('div');
visionGrid.className = 'anim3-vision-grid';
const particle = document.createElement('div');
particle.className = 'anim3-particle';
@ -33,102 +32,103 @@ const visionGridPoints = calculateVisionGridPoints();
function move(store) {
let {
arc,
clockwise,
interval,
circleX,
circleY,
particleX,
particleY,
radius,
theta
} = store.get();
// 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 (Math.random() < 0.5) {
clockwise = !clockwise;
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);
}
}
const delta = speed / arc.r;
arc.t += (clockwise ? -delta : +delta);
arc.t = (arc.t > 0 ? arc.t % t360 : t360 - arc.t);
interval -= 1;
const wall = detectWall(store);
const delta = speed / radius;
theta += (clockwise ? -delta : +delta);
theta = (theta > 0 ? theta % t360 : t360 - theta);
if (wall.x !== null) {
// console.warn(wall.x, wall.y, particleX, particleY)
const x = wall.x - particleX;
const y = wall.y - particleY;
const v = Math.atan((particleY - wall.y) / (particleX - wall.x));
arc = modifyArc(arc, 40);
} else {
arc = modifyArc(arc, 400);
}
particleX = circleX + radius * Math.cos(theta);
particleY = circleY - radius * Math.sin(theta);
particleX = arc.x + arc.r * Math.cos(arc.t);
particleY = arc.y - arc.r * Math.sin(arc.t);
store.set({
clockwise,
interval,
circleX,
circleY,
arc,
particleX,
particleY,
radius,
theta
});
}
// generate next arc:
// starting point will be locked
// starting angle will be locked
// therefore tangential
function modifyArc(arc, newRadius) {
const r0 = arc.r;
const r1 = newRadius;
arc.x -= (r1 - r0) * Math.cos(arc.t);
arc.y += (r1 - r0) * Math.sin(arc.t);
arc.r = r1;
return arc;
}
function changeDirection(arc) {
// clockwise = !clockwise;
// theta = (theta + Math.PI) % t360;
// circleX -= (radius + radius0) * Math.cos(theta);
// circleY += (radius + radius0) * Math.sin(theta);
}
function detectWall(store) {
const len = visionGridPoints.length;
const { particleX, particleY } = store.get();
const { arc, clockwise, particleX, particleY } = store.get();
const r0 = Math.min(arc.t, arc.t - Math.PI);
const r1 = Math.max(arc.t, arc.t + Math.PI);
const gridX = particleX - particleX % 5;
const gridY = particleY - particleY % 5;
for (let i = 0; i < len; i++) {
const { x, y } = visionGridPoints[i];
return visionGridPoints.reduce((acc, { div, x, y, alpha }) => {
const xx = x + gridX;
const yy = y + gridY;
const yy = gridY - y;
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;
if (alpha >= 0 && alpha <= r0) {
if (clockwise === false) {
DOM.addClass(div, 'touching');
}
return (clockwise ? acc : { x: xx, y: yy });
} else if (alpha >= arc.t && alpha <= r1) {
if (clockwise === false) {
DOM.addClass(div, 'touching');
}
return (clockwise ? acc : { x: xx, y: yy });
} else {
if (clockwise === true) {
DOM.addClass(div, 'touching');
}
return (clockwise ? { x: xx, y: yy } : acc);
}
}
}
return false;
}
DOM.removeClass(div, 'touching');
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 - 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`;
return acc;
}, { x: null, y: null });
}
function transformParticle(store) {
const { clockwise, particleX, particleY, theta } = store.get();
const rad = clockwise ? Math.PI - theta : t360 - theta;
const { arc, clockwise, particleX, particleY } = store.get();
const rad = clockwise ? Math.PI - arc.t : t360 - arc.t;
particle.style.left = `${particleX}px`;
particle.style.top = `${particleY}px`;
@ -137,17 +137,15 @@ function transformParticle(store) {
function transformVisionGrid(store) {
const {
circleX,
circleY,
arc,
clockwise,
particleX,
particleY,
radius,
theta
} = store.get();
const r0 = Math.min(theta, theta - Math.PI);
const r1 = Math.max(theta, theta + Math.PI);
const r0 = Math.min(arc.t, arc.t - Math.PI);
const r1 = Math.max(arc.t, arc.t + Math.PI);
const gridX = particleX - particleX % 5;
const gridY = particleY - particleY % 5;
@ -155,10 +153,13 @@ function transformVisionGrid(store) {
visionGridPoints.forEach(({ x, y, alpha, div }, i) => {
if (alpha >= 0 && alpha <= r0) {
div.style.display = (clockwise ? 'none' : 'block');
} else if (alpha >= theta && alpha <= r1) {
// div.className = (clockwise ? 'anim3-dot removed' : 'anim3-dot');
} else if (alpha >= arc.t && alpha <= r1) {
div.style.display = (clockwise ? 'none' : 'block');
// div.className = (clockwise ? 'anim3-dot removed' : 'anim3-dot');
} else {
div.style.display = (clockwise ? 'block' : 'none');
// div.className = (clockwise ? 'anim3-dot' : 'anim3-dot removed');
}
div.style.left = `${x + gridX}px`;
@ -168,6 +169,7 @@ function transformVisionGrid(store) {
function calculateVisionGridPoints() {
const gridSize = 5;
const visionRadius = 50;
const squareGrid = [];
for (let x = -visionRadius; x <= visionRadius; x += gridSize) {
@ -217,18 +219,19 @@ function reset() {
}
const store = new Store({
arc: {
r: Math.round(Math.random() * 200) + 100,
t: Math.random() * t360,
x: 300,
y: 300,
},
clockwise: false,
interval: 10,
circleX: 300,
circleY: 300,
radius: 270,
theta: Math.PI * 3 / 4
});
move(store);
transformParticle(store);
transformMovementCircle(store);
// transformMovementCircle(store);
transformVisionGrid(store);
DOM.container.appendChild(particle);
@ -256,11 +259,11 @@ function init() {
}
const stop$ = Rx.Observable.fromEvent(DOM.container, 'stop');
const fps$ = Rx.Observable.interval(1000 / 32)
const fps$ = Rx.Observable.interval(1000 / 256)
.map(_ => store)
.take(300)
// .take(300)
// .take(15)
// .takeUntil(stop$); console.error("CLICK TO STOP");
.takeUntil(stop$); console.error("CLICK TO STOP");
const click$ = Rx.Observable.fromEvent(DOM.container, 'click');
click$.subscribe(() => {
@ -269,8 +272,8 @@ function init() {
fps$.subscribe(move);
fps$.subscribe(transformParticle);
fps$.subscribe(transformMovementCircle);
fps$.subscribe(transformVisionGrid);
// fps$.subscribe(transformMovementCircle);
};
const Animation3 = Object.assign({}, AnimationBase, { init, reset });

225
js/bundle.js
Unescape View File

@ -6379,8 +6379,10 @@ 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.
// This algorithm travels a random period of time around a random arc.
// If a wall is detected, a 180-degree turn is executed.
var speed = 4;
var visionRadius = 50;
var grid = {};
var t45 = Math.PI / 4;
var t90 = Math.PI / 2;
@ -6390,9 +6392,6 @@ var t360 = Math.PI * 2;
var movementCircle = document.createElement('div');
movementCircle.className = 'anim3-movement-circle';
var visionGrid = document.createElement('div');
visionGrid.className = 'anim3-vision-grid';
var particle = document.createElement('div');
particle.className = 'anim3-particle';
@ -6400,118 +6399,116 @@ var visionGridPoints = calculateVisionGridPoints();
function move(store) {
var _store$get = store.get(),
arc = _store$get.arc,
clockwise = _store$get.clockwise,
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;
// 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;
interval = Math.round(Math.random() * 10) + 50;
radius = Math.round(Math.random() * 200) + 50;
if (Math.random() < 0.5) {
clockwise = !clockwise;
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);
}
}
particleY = _store$get.particleY;
interval -= 1;
var delta = speed / arc.r;
arc.t += clockwise ? -delta : +delta;
arc.t = arc.t > 0 ? arc.t % t360 : t360 - arc.t;
var delta = speed / radius;
theta += clockwise ? -delta : +delta;
theta = theta > 0 ? theta % t360 : t360 - theta;
var wall = detectWall(store);
particleX = circleX + radius * Math.cos(theta);
particleY = circleY - radius * Math.sin(theta);
if (wall.x !== null) {
// console.warn(wall.x, wall.y, particleX, particleY)
var x = wall.x - particleX;
var y = wall.y - particleY;
var v = Math.atan((particleY - wall.y) / (particleX - wall.x));
arc = modifyArc(arc, 40);
} else {
arc = modifyArc(arc, 400);
}
particleX = arc.x + arc.r * Math.cos(arc.t);
particleY = arc.y - arc.r * Math.sin(arc.t);
store.set({
clockwise: clockwise,
interval: interval,
circleX: circleX,
circleY: circleY,
arc: arc,
particleX: particleX,
particleY: particleY,
radius: radius,
theta: theta
particleY: particleY
});
}
// generate next arc:
// starting point will be locked
// starting angle will be locked
// therefore tangential
function modifyArc(arc, newRadius) {
var r0 = arc.r;
var r1 = newRadius;
arc.x -= (r1 - r0) * Math.cos(arc.t);
arc.y += (r1 - r0) * Math.sin(arc.t);
arc.r = r1;
return arc;
}
function changeDirection(arc) {
// clockwise = !clockwise;
// theta = (theta + Math.PI) % t360;
// circleX -= (radius + radius0) * Math.cos(theta);
// circleY += (radius + radius0) * Math.sin(theta);
}
function detectWall(store) {
var len = visionGridPoints.length;
var _store$get2 = store.get(),
arc = _store$get2.arc,
clockwise = _store$get2.clockwise,
particleX = _store$get2.particleX,
particleY = _store$get2.particleY;
var r0 = Math.min(arc.t, arc.t - Math.PI);
var r1 = Math.max(arc.t, arc.t + Math.PI);
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;
return visionGridPoints.reduce(function (acc, _ref) {
var div = _ref.div,
x = _ref.x,
y = _ref.y,
alpha = _ref.alpha;
var xx = x + gridX;
var yy = y + gridY;
var yy = gridY - y;
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;
if (alpha >= 0 && alpha <= r0) {
if (clockwise === false) {
_dom2.default.addClass(div, 'touching');
}
return clockwise ? acc : { x: xx, y: yy };
} else if (alpha >= arc.t && alpha <= r1) {
if (clockwise === false) {
_dom2.default.addClass(div, 'touching');
}
return clockwise ? acc : { x: xx, y: yy };
} else {
if (clockwise === true) {
_dom2.default.addClass(div, 'touching');
}
return clockwise ? { x: xx, y: yy } : acc;
}
}
}
return false;
}
_dom2.default.removeClass(div, 'touching');
function transformMovementCircle(store) {
// TODO UPDATE ONLY IF THETA CHANGED - MUST HAVE PREVSTATE
var _store$get3 = store.get(),
circleX = _store$get3.circleX,
circleY = _store$get3.circleY,
radius = _store$get3.radius,
theta = _store$get3.theta;
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';
return acc;
}, { x: null, y: null });
}
function transformParticle(store) {
var _store$get4 = store.get(),
clockwise = _store$get4.clockwise,
particleX = _store$get4.particleX,
particleY = _store$get4.particleY,
theta = _store$get4.theta;
var _store$get3 = store.get(),
arc = _store$get3.arc,
clockwise = _store$get3.clockwise,
particleX = _store$get3.particleX,
particleY = _store$get3.particleY;
var rad = clockwise ? Math.PI - theta : t360 - theta;
var rad = clockwise ? Math.PI - arc.t : t360 - arc.t;
particle.style.left = particleX + 'px';
particle.style.top = particleY + 'px';
@ -6519,33 +6516,34 @@ function transformParticle(store) {
}
function transformVisionGrid(store) {
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);
var _store$get4 = store.get(),
arc = _store$get4.arc,
clockwise = _store$get4.clockwise,
particleX = _store$get4.particleX,
particleY = _store$get4.particleY,
radius = _store$get4.radius;
var r0 = Math.min(arc.t, arc.t - Math.PI);
var r1 = Math.max(arc.t, arc.t + Math.PI);
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,
div = _ref.div;
visionGridPoints.forEach(function (_ref2, i) {
var x = _ref2.x,
y = _ref2.y,
alpha = _ref2.alpha,
div = _ref2.div;
if (alpha >= 0 && alpha <= r0) {
div.style.display = clockwise ? 'none' : 'block';
} else if (alpha >= theta && alpha <= r1) {
// div.className = (clockwise ? 'anim3-dot removed' : 'anim3-dot');
} else if (alpha >= arc.t && alpha <= r1) {
div.style.display = clockwise ? 'none' : 'block';
// div.className = (clockwise ? 'anim3-dot removed' : 'anim3-dot');
} else {
div.style.display = clockwise ? 'block' : 'none';
// div.className = (clockwise ? 'anim3-dot' : 'anim3-dot removed');
}
div.style.left = x + gridX + 'px';
@ -6555,6 +6553,7 @@ function transformVisionGrid(store) {
function calculateVisionGridPoints() {
var gridSize = 5;
var visionRadius = 50;
var squareGrid = [];
for (var x = -visionRadius; x <= visionRadius; x += gridSize) {
@ -6604,18 +6603,19 @@ function reset() {
}
var store = new _store2.default({
clockwise: false,
interval: 10,
circleX: 300,
circleY: 300,
radius: 270,
theta: Math.PI * 3 / 4
arc: {
r: Math.round(Math.random() * 200) + 100,
t: Math.random() * t360,
x: 300,
y: 300
},
clockwise: false
});
move(store);
transformParticle(store);
transformMovementCircle(store);
// transformMovementCircle(store);
transformVisionGrid(store);
_dom2.default.container.appendChild(particle);
@ -6643,11 +6643,12 @@ function init() {
}
var stop$ = _rxjs2.default.Observable.fromEvent(_dom2.default.container, 'stop');
var fps$ = _rxjs2.default.Observable.interval(1000 / 32).map(function (_) {
var fps$ = _rxjs2.default.Observable.interval(1000 / 256).map(function (_) {
return store;
}).take(300);
})
// .take(300)
// .take(15)
// .takeUntil(stop$); console.error("CLICK TO STOP");
.takeUntil(stop$);console.error("CLICK TO STOP");
var click$ = _rxjs2.default.Observable.fromEvent(_dom2.default.container, 'click');
click$.subscribe(function () {
@ -6656,8 +6657,8 @@ function init() {
fps$.subscribe(move);
fps$.subscribe(transformParticle);
fps$.subscribe(transformMovementCircle);
fps$.subscribe(transformVisionGrid);
// fps$.subscribe(transformMovementCircle);
};
var Animation3 = Object.assign({}, _animation2.default, { init: init, reset: reset });

Write Preview
Loading…
Cancel
Save