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
Split 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,
circleX,
circleY,
particleX,
particleY,
radius,
theta
} = store.get();
// detectWall(store);
if (interval <= 0) {
const particleX = circleX + radius * Math.cos(theta);
const particleY = circleY - radius * Math.sin(theta);
const radius0 = radius;
interval = Math.round(Math.random() * 10) + 50;
radius = Math.round(Math.random() * 200) + 50;
@ -56,48 +58,60 @@ function move(store) {
// 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;
}
circleX = particleX - radius * Math.cos(theta);
circleY = particleY + radius * Math.sin(theta);
}
// interval -= 1;
interval -= 1;
// TODO store delta
const delta = speed / radius;
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({
clockwise,
interval,
circleX,
circleY,
particleX,
particleY,
radius,
theta
});
// detectWall(store);
}
function detectWall(store) {
// const { circleX, circleY, radius, theta } = store.get();
// const len = visionGridPoints.length;
//
// for (let i = 0; i < len; i++) {
// const { x, y } = visionGridPoints[i];
// if (grid[x] && grid[x][y] && grid[x][y].type === 'wall') {
// console.warn("Wall detected", x, y);
// return true;
// }
// }
//
// return false;
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) {
@ -112,23 +126,32 @@ function transformMovementCircle(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;
particle.style.left = `${circleX + radius * Math.cos(theta)}px`;
particle.style.top = `${circleY - radius * Math.sin(theta)}px`;
particle.style.left = `${particleX}px`;
particle.style.top = `${particleY}px`;
particle.style.transform = `rotate(${rad}rad)`;
}
function transformVisionGrid(store) {
const { clockwise, circleX, circleY, radius, theta } = store.get();
const particleX = circleX + radius * Math.cos(theta);
const particleY = circleY - radius * Math.sin(theta);
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);
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) {
div.style.display = (clockwise ? 'none' : 'block');
} else if (alpha >= theta && alpha <= r1) {
@ -137,8 +160,13 @@ function transformVisionGrid(store) {
div.style.display = (clockwise ? 'block' : 'none');
}
div.style.left = `${x + particleX}px`;
div.style.top = `${-y + particleY}px`;
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`;
});
}
@ -192,12 +220,12 @@ function reset() {
}
const store = new Store({
clockwise: true,
clockwise: false,
interval: 10,
circleX: 300,
circleY: 300,
radius: 150,
theta: 0
radius: 270,
theta: Math.PI * 7 / 4
});
move(store);
@ -233,9 +261,9 @@ function init() {
const stop$ = Rx.Observable.fromEvent(DOM.container, 'stop');
const fps$ = Rx.Observable.interval(1000 / 32)
.map(_ => store)
.take(300)
// .take(0)
// .takeUntil(stop$); console.error("CLICK TO STOP");
// .take(300)
// .take(11)
.takeUntil(stop$); console.error("CLICK TO STOP");
const click$ = Rx.Observable.fromEvent(DOM.container, 'click');
click$.subscribe(() => {
@ -244,7 +272,7 @@ function init() {
fps$.subscribe(move);
fps$.subscribe(transformParticle);
fps$.subscribe(transformMovementCircle);
// fps$.subscribe(transformMovementCircle);
fps$.subscribe(transformVisionGrid);
};

133
js/bundle.js
Unescape View File

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

BIN
res/.DS_Store vendored
View File

Binary file not shown.
Write Preview
Loading…
Cancel
Save