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

Start/stop in place.

Browse Source
master
Ben Burlingham 8 years ago
parent 7bf8ec67a2
commit 20a3a14f88
5 changed files with 130 additions and 110 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. 4
      css/controls.scss
  2. 2
      css/style.css
  3. 55
      js/animation1.js
  4. 123
      js/bundle.js
  5. 56
      js/controls.js

4
css/controls.scss
Unescape View File

@ -31,6 +31,10 @@
&:hover { &:hover {
background: #fff; background: #fff;
} }
&:focus {
outline: 0;
}
} }
.controls-bottom { .controls-bottom {

2
css/style.css
Unescape View File

@ -113,6 +113,8 @@ body {
padding: 10px; } padding: 10px; }
.controls-button:hover { .controls-button:hover {
background: #fff; } background: #fff; }
.controls-button:focus {
outline: 0; }
.controls-bottom { .controls-bottom {
margin-top: auto; } margin-top: auto; }

55
js/animation1.js
Unescape View File

@ -5,7 +5,8 @@ import Controls from './controls';
function Animation1() { function Animation1() {
this.options = { this.options = {
count: 1 count: 1,
animating: false
}; };
this.container = document.getElementById('animation1'); this.container = document.getElementById('animation1');
@ -14,41 +15,28 @@ function Animation1() {
const eventStack = this.controls.mount(); const eventStack = this.controls.mount();
eventStack.subscribe(this.subscriber); eventStack.subscribe(this.subscriber.bind(this));
this.particles = []; this.particles = [];
this.updateCount(); this.updateCount();
this.updateAnimating(true);
// this.particles = Array(5).fill().map(_ => new Particle(this.container, this.bounds)); // TODO Change animal pic
// // TODO show movement circle
// const stop$ = Rx.Observable.fromEvent(this.container, 'stop'); // TODO add core UI
//
// // Change animation speed // TODO ANIM2 Show vision grid (including touches!)
// // Change animal pic
// // Enable random radius changes
// // Enable random rotation changes
// // Show movement circle
// // Show vision grid (including touches!)
// // Start / stop
// // TODO add core UI
//
// console.error("Click container to stop.");
// const fps$ = Rx.Observable.interval(1000 / 32)
// .takeUntil(stop$)
// .finally(() => { console.error("Stopped."); })
//
// const click$ = Rx.Observable.fromEvent(this.container, 'click');
// click$.subscribe(() => {
// this.container.dispatchEvent(new CustomEvent('stop'));
// });
//
// fps$.subscribe(this.nextFrame.bind(this));
}; };
Animation1.prototype.subscriber = function({ key, value }) { Animation1.prototype.subscriber = function({ key, value }) {
switch(key) { switch(key) {
case 'count': this.updateCount(); break; case 'count':
this.updateCount();
break;
case 'animating':
this.updateAnimating(!this.options.animating);
break;
} }
} }
@ -68,4 +56,17 @@ Animation1.prototype.updateCount = function() {
} }
}; };
Animation1.prototype.updateAnimating = function(animating) {
Object.assign(this.options, { animating });
this.controls.updateOptions(this.options);
if (animating) {
const fps$ = Rx.Observable.interval(1000 / 32)
.takeWhile(_ => this.options.animating)
.finally(() => { console.error("Stopped."); })
fps$.subscribe(this.nextFrame.bind(this));
}
};
export default Animation1; export default Animation1;

123
js/bundle.js
Unescape View File

@ -3462,40 +3462,48 @@ var _rxjs2 = _interopRequireDefault(_rxjs);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function Controls(node, _ref) { function Controls(node, options) {
var speed = _ref.speed,
otherstuff = _ref.otherstuff;
this.node = node; this.node = node;
this.options = options;
this.countCtrl = createCountControl();
this.speedCtrl = createSpeedControl();
this.radiusCtrl = createRadiusControl();
this.rotationCtrl = createRotationControl();
this.animatingCtrl = createAnimatingControl();
this.updateOptions(options);
} }
Controls.prototype.updateOptions = function (_ref) {
var animating = _ref.animating,
count = _ref.count,
speed = _ref.speed;
this.animatingCtrl.innerHTML = animating ? '◼ Stop' : '▶ Start';
};
Controls.prototype.mount = function (customNodes) { Controls.prototype.mount = function (customNodes) {
var countCtrl = renderCountControl(); this.node.appendChild(this.countCtrl);
var speedCtrl = renderSpeedControl(); this.node.appendChild(this.speedCtrl);
var radiusCtrl = renderRadiusControl(); this.node.appendChild(this.radiusCtrl);
var rotationCtrl = renderRotationControl(); this.node.appendChild(this.rotationCtrl);
var startStopCtrl = renderStartStopControl(); this.node.appendChild(this.animatingCtrl);
this.node.appendChild(countCtrl); return _rxjs2.default.Observable.merge(_rxjs2.default.Observable.fromEvent(this.countCtrl, 'change').map(function (evt) {
this.node.appendChild(speedCtrl);
this.node.appendChild(radiusCtrl);
this.node.appendChild(rotationCtrl);
this.node.appendChild(startStopCtrl);
return _rxjs2.default.Observable.merge(_rxjs2.default.Observable.fromEvent(countCtrl, 'change').map(function (evt) {
return { key: 'count', value: evt.target.value * 1 }; return { key: 'count', value: evt.target.value * 1 };
}), _rxjs2.default.Observable.fromEvent(speedCtrl, 'change').map(function (evt) { }), _rxjs2.default.Observable.fromEvent(this.speedCtrl, 'change').map(function (evt) {
return { key: 'speed', value: evt.target.value * 1 }; return { key: 'speed', value: evt.target.value * 1 };
}), _rxjs2.default.Observable.fromEvent(radiusCtrl, 'change').map(function (evt) { }), _rxjs2.default.Observable.fromEvent(this.radiusCtrl, 'change').map(function (evt) {
return { key: 'radius', value: evt.target.checked }; return { key: 'radius', value: evt.target.checked };
}), _rxjs2.default.Observable.fromEvent(rotationCtrl, 'change').map(function (evt) { }), _rxjs2.default.Observable.fromEvent(this.rotationCtrl, 'change').map(function (evt) {
return { key: 'rotation', value: evt.target.checked }; return { key: 'rotation', value: evt.target.checked };
}), _rxjs2.default.Observable.fromEvent(startStopCtrl, 'click').map(function (evt) { }), _rxjs2.default.Observable.fromEvent(this.animatingCtrl, 'click').map(function (evt) {
return { key: 'startstop', value: null }; return { key: 'animating', value: null };
})); }));
}; };
var renderCountControl = function renderCountControl() { var createCountControl = function createCountControl() {
var label = document.createElement('label'); var label = document.createElement('label');
label.className = 'controls-label'; label.className = 'controls-label';
@ -3515,7 +3523,7 @@ var renderCountControl = function renderCountControl() {
return label; return label;
}; };
var renderSpeedControl = function renderSpeedControl() { var createSpeedControl = function createSpeedControl() {
var label = document.createElement('label'); var label = document.createElement('label');
label.className = 'controls-label'; label.className = 'controls-label';
@ -3535,7 +3543,7 @@ var renderSpeedControl = function renderSpeedControl() {
return label; return label;
}; };
var renderRadiusControl = function renderRadiusControl() { var createRadiusControl = function createRadiusControl() {
var label = document.createElement('label'); var label = document.createElement('label');
label.className = 'controls-label'; label.className = 'controls-label';
@ -3553,7 +3561,7 @@ var renderRadiusControl = function renderRadiusControl() {
return label; return label;
}; };
var renderRotationControl = function renderRotationControl() { var createRotationControl = function createRotationControl() {
var label = document.createElement('label'); var label = document.createElement('label');
label.className = 'controls-label'; label.className = 'controls-label';
@ -3571,12 +3579,9 @@ var renderRotationControl = function renderRotationControl() {
return label; return label;
}; };
var renderStartStopControl = function renderStartStopControl() { var createAnimatingControl = function createAnimatingControl() {
var button = document.createElement('button'); var button = document.createElement('button');
button.className = 'controls-button controls-bottom'; button.className = 'controls-button controls-bottom';
button.innerHTML = '▶ Start';
// button.innerHTML = '◼ Stop';
return button; return button;
}; };
@ -6207,7 +6212,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
function Animation1() { function Animation1() {
this.options = { this.options = {
count: 1 count: 1,
animating: false
}; };
this.container = document.getElementById('animation1'); this.container = document.getElementById('animation1');
@ -6216,36 +6222,18 @@ function Animation1() {
var eventStack = this.controls.mount(); var eventStack = this.controls.mount();
eventStack.subscribe(this.subscriber); eventStack.subscribe(this.subscriber.bind(this));
this.particles = []; this.particles = [];
this.updateCount(); this.updateCount();
this.updateAnimating(true);
// TODO Change animal pic
// TODO show movement circle
// TODO add core UI
// this.particles = Array(5).fill().map(_ => new Particle(this.container, this.bounds)); // TODO ANIM2 Show vision grid (including touches!)
//
// const stop$ = Rx.Observable.fromEvent(this.container, 'stop');
//
// // Change animation speed
// // Change animal pic
// // Enable random radius changes
// // Enable random rotation changes
// // Show movement circle
// // Show vision grid (including touches!)
// // Start / stop
// // TODO add core UI
//
// console.error("Click container to stop.");
// const fps$ = Rx.Observable.interval(1000 / 32)
// .takeUntil(stop$)
// .finally(() => { console.error("Stopped."); })
//
// const click$ = Rx.Observable.fromEvent(this.container, 'click');
// click$.subscribe(() => {
// this.container.dispatchEvent(new CustomEvent('stop'));
// });
//
// fps$.subscribe(this.nextFrame.bind(this));
}; };
Animation1.prototype.subscriber = function (_ref) { Animation1.prototype.subscriber = function (_ref) {
@ -6254,7 +6242,11 @@ Animation1.prototype.subscriber = function (_ref) {
switch (key) { switch (key) {
case 'count': case 'count':
this.updateCount();break; this.updateCount();
break;
case 'animating':
this.updateAnimating(!this.options.animating);
break;
} }
}; };
@ -6276,6 +6268,23 @@ Animation1.prototype.updateCount = function () {
} }
}; };
Animation1.prototype.updateAnimating = function (animating) {
var _this = this;
Object.assign(this.options, { animating: animating });
this.controls.updateOptions(this.options);
if (animating) {
var fps$ = _rxjs2.default.Observable.interval(1000 / 32).takeWhile(function (_) {
return _this.options.animating;
}).finally(function () {
console.error("Stopped.");
});
fps$.subscribe(this.nextFrame.bind(this));
}
};
exports.default = Animation1; exports.default = Animation1;
/***/ }), /***/ }),

56
js/controls.js vendored
Unescape View File

@ -1,37 +1,44 @@
import Rx, { Observable } from 'rxjs'; import Rx, { Observable } from 'rxjs';
function Controls(node, { speed, otherstuff }) { function Controls(node, options) {
this.node = node; this.node = node;
this.options = options;
this.countCtrl = createCountControl();
this.speedCtrl = createSpeedControl();
this.radiusCtrl = createRadiusControl();
this.rotationCtrl = createRotationControl();
this.animatingCtrl = createAnimatingControl();
this.updateOptions(options);
}
Controls.prototype.updateOptions = function({ animating, count, speed }) {
this.animatingCtrl.innerHTML = (animating ? '◼ Stop' : '▶ Start');
} }
Controls.prototype.mount = function(customNodes) { Controls.prototype.mount = function(customNodes) {
const countCtrl = renderCountControl(); this.node.appendChild(this.countCtrl);
const speedCtrl = renderSpeedControl(); this.node.appendChild(this.speedCtrl);
const radiusCtrl = renderRadiusControl(); this.node.appendChild(this.radiusCtrl);
const rotationCtrl = renderRotationControl(); this.node.appendChild(this.rotationCtrl);
const startStopCtrl = renderStartStopControl(); this.node.appendChild(this.animatingCtrl);
this.node.appendChild(countCtrl);
this.node.appendChild(speedCtrl);
this.node.appendChild(radiusCtrl);
this.node.appendChild(rotationCtrl);
this.node.appendChild(startStopCtrl);
return Rx.Observable.merge( return Rx.Observable.merge(
Rx.Observable.fromEvent(countCtrl, 'change') Rx.Observable.fromEvent(this.countCtrl, 'change')
.map(evt => ({ key: 'count', value: evt.target.value * 1 })), .map(evt => ({ key: 'count', value: evt.target.value * 1 })),
Rx.Observable.fromEvent(speedCtrl, 'change') Rx.Observable.fromEvent(this.speedCtrl, 'change')
.map(evt => ({ key: 'speed', value: evt.target.value * 1 })), .map(evt => ({ key: 'speed', value: evt.target.value * 1 })),
Rx.Observable.fromEvent(radiusCtrl, 'change') Rx.Observable.fromEvent(this.radiusCtrl, 'change')
.map(evt => ({ key: 'radius', value: evt.target.checked })), .map(evt => ({ key: 'radius', value: evt.target.checked })),
Rx.Observable.fromEvent(rotationCtrl, 'change') Rx.Observable.fromEvent(this.rotationCtrl, 'change')
.map(evt => ({ key: 'rotation', value: evt.target.checked })), .map(evt => ({ key: 'rotation', value: evt.target.checked })),
Rx.Observable.fromEvent(startStopCtrl, 'click') Rx.Observable.fromEvent(this.animatingCtrl, 'click')
.map(evt => ({ key: 'startstop', value: null })), .map(evt => ({ key: 'animating', value: null })),
); );
} }
const renderCountControl = function() { const createCountControl = function() {
const label = document.createElement('label'); const label = document.createElement('label');
label.className = 'controls-label'; label.className = 'controls-label';
@ -51,7 +58,7 @@ const renderCountControl = function() {
return label; return label;
} }
const renderSpeedControl = function() { const createSpeedControl = function() {
const label = document.createElement('label'); const label = document.createElement('label');
label.className = 'controls-label'; label.className = 'controls-label';
@ -71,7 +78,7 @@ const renderSpeedControl = function() {
return label; return label;
} }
const renderRadiusControl = function() { const createRadiusControl = function() {
const label = document.createElement('label'); const label = document.createElement('label');
label.className = 'controls-label'; label.className = 'controls-label';
@ -89,7 +96,7 @@ const renderRadiusControl = function() {
return label; return label;
} }
const renderRotationControl = function() { const createRotationControl = function() {
const label = document.createElement('label'); const label = document.createElement('label');
label.className = 'controls-label'; label.className = 'controls-label';
@ -107,12 +114,9 @@ const renderRotationControl = function() {
return label; return label;
} }
const renderStartStopControl = function() { const createAnimatingControl = function() {
const button = document.createElement('button'); const button = document.createElement('button');
button.className = 'controls-button controls-bottom'; button.className = 'controls-button controls-bottom';
button.innerHTML = '▶ Start';
// button.innerHTML = '◼ Stop';
return button; return button;
} }

Write Preview
Loading…
Cancel
Save