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
Split 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 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);
};

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
// 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);
};

Write Preview
Loading…
Cancel
Save