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
Split 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 {
background: #fff;
}
&:focus {
outline: 0;
}
}
.controls-bottom {

2
css/style.css
Unescape View File

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

55
js/animation1.js
Unescape View File

@ -5,7 +5,8 @@ import Controls from './controls';
function Animation1() {
this.options = {
count: 1
count: 1,
animating: false
};
this.container = document.getElementById('animation1');
@ -14,41 +15,28 @@ function Animation1() {
const eventStack = this.controls.mount();
eventStack.subscribe(this.subscriber);
eventStack.subscribe(this.subscriber.bind(this));
this.particles = [];
this.updateCount();
this.updateAnimating(true);
// this.particles = Array(5).fill().map(_ => new Particle(this.container, this.bounds));
//
// 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));
// TODO Change animal pic
// TODO show movement circle
// TODO add core UI
// TODO ANIM2 Show vision grid (including touches!)
};
Animation1.prototype.subscriber = function({ key, value }) {
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;

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 Controls(node, _ref) {
var speed = _ref.speed,
otherstuff = _ref.otherstuff;
function Controls(node, options) {
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) {
var countCtrl = renderCountControl();
var speedCtrl = renderSpeedControl();
var radiusCtrl = renderRadiusControl();
var rotationCtrl = renderRotationControl();
var startStopCtrl = renderStartStopControl();
this.node.appendChild(countCtrl);
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) {
this.node.appendChild(this.countCtrl);
this.node.appendChild(this.speedCtrl);
this.node.appendChild(this.radiusCtrl);
this.node.appendChild(this.rotationCtrl);
this.node.appendChild(this.animatingCtrl);
return _rxjs2.default.Observable.merge(_rxjs2.default.Observable.fromEvent(this.countCtrl, 'change').map(function (evt) {
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 };
}), _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 };
}), _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 };
}), _rxjs2.default.Observable.fromEvent(startStopCtrl, 'click').map(function (evt) {
return { key: 'startstop', value: null };
}), _rxjs2.default.Observable.fromEvent(this.animatingCtrl, 'click').map(function (evt) {
return { key: 'animating', value: null };
}));
};
var renderCountControl = function renderCountControl() {
var createCountControl = function createCountControl() {
var label = document.createElement('label');
label.className = 'controls-label';
@ -3515,7 +3523,7 @@ var renderCountControl = function renderCountControl() {
return label;
};
var renderSpeedControl = function renderSpeedControl() {
var createSpeedControl = function createSpeedControl() {
var label = document.createElement('label');
label.className = 'controls-label';
@ -3535,7 +3543,7 @@ var renderSpeedControl = function renderSpeedControl() {
return label;
};
var renderRadiusControl = function renderRadiusControl() {
var createRadiusControl = function createRadiusControl() {
var label = document.createElement('label');
label.className = 'controls-label';
@ -3553,7 +3561,7 @@ var renderRadiusControl = function renderRadiusControl() {
return label;
};
var renderRotationControl = function renderRotationControl() {
var createRotationControl = function createRotationControl() {
var label = document.createElement('label');
label.className = 'controls-label';
@ -3571,12 +3579,9 @@ var renderRotationControl = function renderRotationControl() {
return label;
};
var renderStartStopControl = function renderStartStopControl() {
var createAnimatingControl = function createAnimatingControl() {
var button = document.createElement('button');
button.className = 'controls-button controls-bottom';
button.innerHTML = '▶ Start';
// button.innerHTML = '◼ Stop';
return button;
};
@ -6207,7 +6212,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
function Animation1() {
this.options = {
count: 1
count: 1,
animating: false
};
this.container = document.getElementById('animation1');
@ -6216,36 +6222,18 @@ function Animation1() {
var eventStack = this.controls.mount();
eventStack.subscribe(this.subscriber);
eventStack.subscribe(this.subscriber.bind(this));
this.particles = [];
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));
//
// 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));
// TODO ANIM2 Show vision grid (including touches!)
};
Animation1.prototype.subscriber = function (_ref) {
@ -6254,7 +6242,11 @@ Animation1.prototype.subscriber = function (_ref) {
switch (key) {
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;
/***/ }),

56
js/controls.js vendored
Unescape View File

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

Write Preview
Loading…
Cancel
Save