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

Direction changing updates.

Browse Source
master
Ben Burlingham 8 years ago
parent 98b46bc659
commit 6544b3b5f6
2 changed files with 70 additions and 74 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 71
      js/animation3.js
  2. 73
      js/bundle.js

71
js/animation3.js
Unescape View File

@ -12,7 +12,8 @@ import AnimationBase from './animation0';
import DOM from './dom'; import DOM from './dom';
import Store from './store'; import Store from './store';
const speed = 6; const speed = 4;
const visionRadius = 50;
const grid = {}; const grid = {};
const t45 = Math.PI / 4; const t45 = Math.PI / 4;
const t90 = Math.PI / 2; const t90 = Math.PI / 2;
@ -42,35 +43,34 @@ function move(store) {
theta theta
} = store.get(); } = 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) { if (interval <= 0) {
const radius0 = radius; const radius0 = radius;
interval = Math.round(Math.random() * 10) + 50; interval = Math.round(Math.random() * 10) + 50;
radius = Math.round(Math.random() * 200) + 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) { if (Math.random() < 0.5) {
clockwise = !clockwise; clockwise = !clockwise;
theta = (theta > Math.PI ? theta - Math.PI : theta + Math.PI); theta = (theta + Math.PI) % t360;
radius *= -1; 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; interval -= 1;
// TODO store delta
const delta = speed / radius; const delta = speed / radius;
theta += (clockwise ? -delta : +delta); theta += (clockwise ? -delta : +delta);
theta = (theta > 0 ? theta % t360 : t360 - theta); theta = (theta > 0 ? theta % t360 : t360 - theta);
@ -117,12 +117,13 @@ function detectWall(store) {
function transformMovementCircle(store) { function transformMovementCircle(store) {
// TODO UPDATE ONLY IF THETA CHANGED - MUST HAVE PREVSTATE // TODO UPDATE ONLY IF THETA CHANGED - MUST HAVE PREVSTATE
const { circleX, circleY, radius, theta } = store.get(); const { circleX, circleY, radius, theta } = store.get();
const r = Math.abs(radius);
movementCircle.style.left = `${circleX - radius}px`; movementCircle.style.left = `${circleX - r}px`;
movementCircle.style.top = `${circleY - radius}px`; movementCircle.style.top = `${circleY - r}px`;
movementCircle.style.height = `${2 * radius}px`; movementCircle.style.height = `${2 * r}px`;
movementCircle.style.width = `${2 * radius}px`; movementCircle.style.width = `${2 * r}px`;
movementCircle.style.borderRadius = `${radius}px`; movementCircle.style.borderRadius = `${r}px`;
} }
function transformParticle(store) { function transformParticle(store) {
@ -160,18 +161,12 @@ function transformVisionGrid(store) {
div.style.display = (clockwise ? 'block' : 'none'); div.style.display = (clockwise ? 'block' : 'none');
} }
const newX = x + gridX; div.style.left = `${x + gridX}px`;
const newY = -y + gridY; div.style.top = `${-y + gridY}px`;
// 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`;
}); });
} }
function calculateVisionGridPoints() { function calculateVisionGridPoints() {
const visionRadius = 50;
const gridSize = 5; const gridSize = 5;
const squareGrid = []; 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) => { 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; return acc;
} }
@ -225,7 +222,7 @@ function reset() {
circleX: 300, circleX: 300,
circleY: 300, circleY: 300,
radius: 270, radius: 270,
theta: Math.PI * 7 / 4 theta: Math.PI * 3 / 4
}); });
move(store); move(store);
@ -261,9 +258,9 @@ function init() {
const stop$ = Rx.Observable.fromEvent(DOM.container, 'stop'); const stop$ = Rx.Observable.fromEvent(DOM.container, 'stop');
const fps$ = Rx.Observable.interval(1000 / 32) const fps$ = Rx.Observable.interval(1000 / 32)
.map(_ => store) .map(_ => store)
// .take(300) .take(300)
// .take(11) // .take(15)
.takeUntil(stop$); console.error("CLICK TO STOP"); // .takeUntil(stop$); console.error("CLICK TO STOP");
const click$ = Rx.Observable.fromEvent(DOM.container, 'click'); const click$ = Rx.Observable.fromEvent(DOM.container, 'click');
click$.subscribe(() => { click$.subscribe(() => {
@ -272,7 +269,7 @@ function init() {
fps$.subscribe(move); fps$.subscribe(move);
fps$.subscribe(transformParticle); fps$.subscribe(transformParticle);
// fps$.subscribe(transformMovementCircle); fps$.subscribe(transformMovementCircle);
fps$.subscribe(transformVisionGrid); fps$.subscribe(transformVisionGrid);
}; };

73
js/bundle.js
Unescape View File

@ -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 // 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. // performance for large particle counts.
var speed = 6; var speed = 4;
var visionRadius = 50;
var grid = {}; var grid = {};
var t45 = Math.PI / 4; var t45 = Math.PI / 4;
var t90 = Math.PI / 2; var t90 = Math.PI / 2;
@ -6408,7 +6409,16 @@ function move(store) {
radius = _store$get.radius, radius = _store$get.radius,
theta = _store$get.theta; 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) { if (interval <= 0) {
var radius0 = radius; var radius0 = radius;
@ -6416,27 +6426,19 @@ function move(store) {
interval = Math.round(Math.random() * 10) + 50; interval = Math.round(Math.random() * 10) + 50;
radius = Math.round(Math.random() * 200) + 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) { if (Math.random() < 0.5) {
clockwise = !clockwise; clockwise = !clockwise;
theta = theta > Math.PI ? theta - Math.PI : theta + Math.PI; theta = (theta + Math.PI) % t360;
radius *= -1; 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; interval -= 1;
// TODO store delta
var delta = speed / radius; var delta = speed / radius;
theta += clockwise ? -delta : +delta; theta += clockwise ? -delta : +delta;
theta = theta > 0 ? theta % t360 : t360 - theta; theta = theta > 0 ? theta % t360 : t360 - theta;
@ -6493,11 +6495,13 @@ function transformMovementCircle(store) {
radius = _store$get3.radius, radius = _store$get3.radius,
theta = _store$get3.theta; theta = _store$get3.theta;
movementCircle.style.left = circleX - radius + 'px'; var r = Math.abs(radius);
movementCircle.style.top = circleY - radius + 'px';
movementCircle.style.height = 2 * radius + 'px'; movementCircle.style.left = circleX - r + 'px';
movementCircle.style.width = 2 * radius + 'px'; movementCircle.style.top = circleY - r + 'px';
movementCircle.style.borderRadius = radius + 'px'; movementCircle.style.height = 2 * r + 'px';
movementCircle.style.width = 2 * r + 'px';
movementCircle.style.borderRadius = r + 'px';
} }
function transformParticle(store) { function transformParticle(store) {
@ -6544,18 +6548,12 @@ function transformVisionGrid(store) {
div.style.display = clockwise ? 'block' : 'none'; div.style.display = clockwise ? 'block' : 'none';
} }
var newX = x + gridX; div.style.left = x + gridX + 'px';
var newY = -y + gridY; div.style.top = -y + gridY + 'px';
// 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';
}); });
} }
function calculateVisionGridPoints() { function calculateVisionGridPoints() {
var visionRadius = 50;
var gridSize = 5; var gridSize = 5;
var squareGrid = []; 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) { 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; return acc;
} }
@ -6609,7 +6609,7 @@ function reset() {
circleX: 300, circleX: 300,
circleY: 300, circleY: 300,
radius: 270, radius: 270,
theta: Math.PI * 7 / 4 theta: Math.PI * 3 / 4
}); });
move(store); move(store);
@ -6645,10 +6645,9 @@ function init() {
var stop$ = _rxjs2.default.Observable.fromEvent(_dom2.default.container, 'stop'); 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 / 32).map(function (_) {
return store; return store;
}) }).take(300);
// .take(300) // .take(15)
// .take(11) // .takeUntil(stop$); console.error("CLICK TO STOP");
.takeUntil(stop$);console.error("CLICK TO STOP");
var click$ = _rxjs2.default.Observable.fromEvent(_dom2.default.container, 'click'); var click$ = _rxjs2.default.Observable.fromEvent(_dom2.default.container, 'click');
click$.subscribe(function () { click$.subscribe(function () {
@ -6657,7 +6656,7 @@ function init() {
fps$.subscribe(move); fps$.subscribe(move);
fps$.subscribe(transformParticle); fps$.subscribe(transformParticle);
// fps$.subscribe(transformMovementCircle); fps$.subscribe(transformMovementCircle);
fps$.subscribe(transformVisionGrid); fps$.subscribe(transformVisionGrid);
}; };

Write Preview
Loading…
Cancel
Save