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 b38624af70
commit 98b46bc659
3 changed files with 145 additions and 90 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. 102
      js/animation3.js
  2. 133
      js/bundle.js
  3. BIN
      res/.DS_Store

102
js/animation3.js
Unescape View File

@ -36,14 +36,16 @@ function move(store) {
interval, interval,
circleX, circleX,
circleY, circleY,
particleX,
particleY,
radius, radius,
theta theta
} = store.get(); } = store.get();
// detectWall(store);
if (interval <= 0) { if (interval <= 0) {
const particleX = circleX + radius * Math.cos(theta); const radius0 = radius;
const particleY = circleY - radius * Math.sin(theta);
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;
@ -56,48 +58,60 @@ function move(store) {
// state.interval = Math.PI * 20 / speed; // 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 ? theta - Math.PI : theta + Math.PI);
radius *= -1; radius *= -1;
} }
circleX = particleX - radius * Math.cos(theta);
circleY = particleY + radius * Math.sin(theta);
} }
// interval -= 1; interval -= 1;
// TODO store delta // TODO store delta
const delta = speed / radius; const delta = speed / radius;
theta += (clockwise ? -delta : +delta); 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({ store.set({
clockwise, clockwise,
interval, interval,
circleX, circleX,
circleY, circleY,
particleX,
particleY,
radius, radius,
theta theta
}); });
// detectWall(store);
} }
function detectWall(store) { function detectWall(store) {
// const { circleX, circleY, radius, theta } = store.get(); const len = visionGridPoints.length;
// const len = visionGridPoints.length;
// const { particleX, particleY } = store.get();
// for (let i = 0; i < len; i++) {
// const { x, y } = visionGridPoints[i]; const gridX = particleX - particleX % 5;
// if (grid[x] && grid[x][y] && grid[x][y].type === 'wall') { const gridY = particleY - particleY % 5;
// console.warn("Wall detected", x, y);
// return true; for (let i = 0; i < len; i++) {
// } const { x, y } = visionGridPoints[i];
// } const xx = x + gridX;
// const yy = y + gridY;
// return false;
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) { function transformMovementCircle(store) {
@ -112,23 +126,32 @@ function transformMovementCircle(store) {
} }
function transformParticle(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; const rad = clockwise ? Math.PI - theta : t360 - theta;
particle.style.left = `${circleX + radius * Math.cos(theta)}px`; particle.style.left = `${particleX}px`;
particle.style.top = `${circleY - radius * Math.sin(theta)}px`; particle.style.top = `${particleY}px`;
particle.style.transform = `rotate(${rad}rad)`; particle.style.transform = `rotate(${rad}rad)`;
} }
function transformVisionGrid(store) { function transformVisionGrid(store) {
const { clockwise, circleX, circleY, radius, theta } = store.get(); const {
const particleX = circleX + radius * Math.cos(theta); circleX,
const particleY = circleY - radius * Math.sin(theta); circleY,
clockwise,
particleX,
particleY,
radius,
theta
} = store.get();
const r0 = Math.min(theta, theta - Math.PI); const r0 = Math.min(theta, theta - Math.PI);
const r1 = Math.max(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) { if (alpha >= 0 && alpha <= r0) {
div.style.display = (clockwise ? 'none' : 'block'); div.style.display = (clockwise ? 'none' : 'block');
} else if (alpha >= theta && alpha <= r1) { } else if (alpha >= theta && alpha <= r1) {
@ -137,8 +160,13 @@ function transformVisionGrid(store) {
div.style.display = (clockwise ? 'block' : 'none'); div.style.display = (clockwise ? 'block' : 'none');
} }
div.style.left = `${x + particleX}px`; const newX = x + gridX;
div.style.top = `${-y + particleY}px`; 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({ const store = new Store({
clockwise: true, clockwise: false,
interval: 10, interval: 10,
circleX: 300, circleX: 300,
circleY: 300, circleY: 300,
radius: 150, radius: 270,
theta: 0 theta: Math.PI * 7 / 4
}); });
move(store); move(store);
@ -233,9 +261,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(0) // .take(11)
// .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(() => {
@ -244,7 +272,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);
}; };

133
js/bundle.js
Unescape View File

@ -6403,12 +6403,15 @@ function move(store) {
interval = _store$get.interval, interval = _store$get.interval,
circleX = _store$get.circleX, circleX = _store$get.circleX,
circleY = _store$get.circleY, circleY = _store$get.circleY,
particleX = _store$get.particleX,
particleY = _store$get.particleY,
radius = _store$get.radius, radius = _store$get.radius,
theta = _store$get.theta; theta = _store$get.theta;
// detectWall(store);
if (interval <= 0) { if (interval <= 0) {
var particleX = circleX + radius * Math.cos(theta); var radius0 = radius;
var particleY = circleY - radius * Math.sin(theta);
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;
@ -6421,57 +6424,74 @@ function move(store) {
// state.interval = Math.PI * 20 / speed; // 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 ? theta - Math.PI : theta + Math.PI;
radius *= -1; radius *= -1;
} }
circleX = particleX - radius * Math.cos(theta);
circleY = particleY + radius * Math.sin(theta);
} }
// interval -= 1; interval -= 1;
// TODO store delta // TODO store delta
var delta = speed / radius; var delta = speed / radius;
theta += clockwise ? -delta : +delta; 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({ store.set({
clockwise: clockwise, clockwise: clockwise,
interval: interval, interval: interval,
circleX: circleX, circleX: circleX,
circleY: circleY, circleY: circleY,
particleX: particleX,
particleY: particleY,
radius: radius, radius: radius,
theta: theta theta: theta
}); });
// detectWall(store);
} }
function detectWall(store) { function detectWall(store) {
// const { circleX, circleY, radius, theta } = store.get(); var len = visionGridPoints.length;
// const len = visionGridPoints.length;
// var _store$get2 = store.get(),
// for (let i = 0; i < len; i++) { particleX = _store$get2.particleX,
// const { x, y } = visionGridPoints[i]; particleY = _store$get2.particleY;
// if (grid[x] && grid[x][y] && grid[x][y].type === 'wall') {
// console.warn("Wall detected", x, y); var gridX = particleX - particleX % 5;
// return true; var gridY = particleY - particleY % 5;
// }
// } for (var i = 0; i < len; i++) {
// var _visionGridPoints$i = visionGridPoints[i],
// return false; 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) { function transformMovementCircle(store) {
// TODO UPDATE ONLY IF THETA CHANGED - MUST HAVE PREVSTATE // TODO UPDATE ONLY IF THETA CHANGED - MUST HAVE PREVSTATE
var _store$get2 = store.get(), var _store$get3 = store.get(),
circleX = _store$get2.circleX, circleX = _store$get3.circleX,
circleY = _store$get2.circleY, circleY = _store$get3.circleY,
radius = _store$get2.radius, radius = _store$get3.radius,
theta = _store$get2.theta; theta = _store$get3.theta;
movementCircle.style.left = circleX - radius + 'px'; movementCircle.style.left = circleX - radius + 'px';
movementCircle.style.top = circleY - radius + 'px'; movementCircle.style.top = circleY - radius + 'px';
@ -6481,35 +6501,36 @@ function transformMovementCircle(store) {
} }
function transformParticle(store) { function transformParticle(store) {
var _store$get3 = store.get(), var _store$get4 = store.get(),
clockwise = _store$get3.clockwise, clockwise = _store$get4.clockwise,
circleX = _store$get3.circleX, particleX = _store$get4.particleX,
circleY = _store$get3.circleY, particleY = _store$get4.particleY,
radius = _store$get3.radius, theta = _store$get4.theta;
theta = _store$get3.theta;
var rad = clockwise ? Math.PI - theta : t360 - theta; var rad = clockwise ? Math.PI - theta : t360 - theta;
particle.style.left = circleX + radius * Math.cos(theta) + 'px'; particle.style.left = particleX + 'px';
particle.style.top = circleY - radius * Math.sin(theta) + 'px'; particle.style.top = particleY + 'px';
particle.style.transform = 'rotate(' + rad + 'rad)'; particle.style.transform = 'rotate(' + rad + 'rad)';
} }
function transformVisionGrid(store) { function transformVisionGrid(store) {
var _store$get4 = store.get(), var _store$get5 = store.get(),
clockwise = _store$get4.clockwise, circleX = _store$get5.circleX,
circleX = _store$get4.circleX, circleY = _store$get5.circleY,
circleY = _store$get4.circleY, clockwise = _store$get5.clockwise,
radius = _store$get4.radius, particleX = _store$get5.particleX,
theta = _store$get4.theta; particleY = _store$get5.particleY,
radius = _store$get5.radius,
var particleX = circleX + radius * Math.cos(theta); theta = _store$get5.theta;
var particleY = circleY - radius * Math.sin(theta);
var r0 = Math.min(theta, theta - Math.PI); var r0 = Math.min(theta, theta - Math.PI);
var r1 = Math.max(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, var x = _ref.x,
y = _ref.y, y = _ref.y,
alpha = _ref.alpha, alpha = _ref.alpha,
@ -6523,8 +6544,13 @@ function transformVisionGrid(store) {
div.style.display = clockwise ? 'block' : 'none'; div.style.display = clockwise ? 'block' : 'none';
} }
div.style.left = x + particleX + 'px'; var newX = x + gridX;
div.style.top = -y + particleY + 'px'; 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({ var store = new _store2.default({
clockwise: true, clockwise: false,
interval: 10, interval: 10,
circleX: 300, circleX: 300,
circleY: 300, circleY: 300,
radius: 150, radius: 270,
theta: 0 theta: Math.PI * 7 / 4
}); });
move(store); move(store);
@ -6619,9 +6645,10 @@ 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(0) // .take(300)
// .takeUntil(stop$); console.error("CLICK TO STOP"); // .take(11)
.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 () {
@ -6630,7 +6657,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);
}; };

BIN
res/.DS_Store vendored
View File

Binary file not shown.
Write Preview
Loading…
Cancel
Save