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

Only allowing randomization UI option on 1a.

Browse Source
master
Ben Burlingham 8 years ago
parent 3a350da3cc
commit 9fb75a5223
7 changed files with 43 additions and 58 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. 31
      js/animation1a.js
  2. 6
      js/animation1b.js
  3. 10
      js/animation2a.js
  4. 12
      js/bundle.js
  5. 30
      js/controls.js
  6. 4
      js/index.js
  7. 8
      js/particle.js

31
js/animation1a.js
Unescape View File

@ -7,7 +7,7 @@ import { CONTROLS } from './enums';
function Animation1a() { function Animation1a() {
this.options = { this.options = {
count: 1, count: 1,
maxCount: 25, maxCount: 10,
randomize: true, randomize: true,
showMovementCircle: true, showMovementCircle: true,
speed: 4 speed: 4
@ -17,24 +17,29 @@ function Animation1a() {
this.bounds = this.container.getBoundingClientRect(); this.bounds = this.container.getBoundingClientRect();
this.movementCircleCtrl = createMovementCircleControl(); this.movementCircleCtrl = createMovementCircleControl();
this.randomizeCtrl = createRandomizeControl();
this.particles = []; this.particles = [];
const controls = new Controls( const controls = new Controls(
document.getElementById('controls1a'), document.getElementById('controls1a'),
this.options, this.options,
[this.movementCircleCtrl] [this.movementCircleCtrl, this.randomizeCtrl]
); );
const circle$ = Rx.Observable.fromEvent(this.movementCircleCtrl, 'change') const circle$ = Rx.Observable.fromEvent(this.movementCircleCtrl, 'change')
.map(evt => ({ key: CONTROLS.MOVEMENT_CIRCLE, value: evt.target.checked })); .map(evt => ({ key: CONTROLS.MOVEMENT_CIRCLE, value: evt.target.checked }));
const eventStack$ = controls.mount().merge(circle$); const randomize$ = Rx.Observable.fromEvent(this.randomizeCtrl, 'change')
.map(evt => ({ key: CONTROLS.RANDOMIZE, value: evt.target.checked }));
const eventStack$ = controls.mount().merge(circle$, randomize$);
eventStack$.subscribe(this.subscriber.bind(this)); eventStack$.subscribe(this.subscriber.bind(this));
this.updateCount(this.options.count); this.updateCount(this.options.count);
this.updateMovementCircle(this.options.showMovementCircle); this.updateMovementCircle(this.options.showMovementCircle);
this.updateRandomize(this.options.randomize);
}; };
function createMovementCircleControl() { function createMovementCircleControl() {
@ -55,6 +60,25 @@ function createMovementCircleControl() {
return label; return label;
} }
function createRandomizeControl(value) {
const label = document.createElement('label');
label.className = 'controls-checkbox';
const text = document.createElement('span');
text.innerHTML = 'Randomize movement';
text.className = 'controls-checkbox-text';
const checkbox = document.createElement('input');
checkbox.type = 'checkbox';
checkbox.className = 'controls-checkbox-input';
checkbox.checked = value;
label.appendChild(checkbox);
label.appendChild(text);
return label;
}
Animation1a.prototype.subscriber = function({ key, value }) { Animation1a.prototype.subscriber = function({ key, value }) {
switch(key) { switch(key) {
case CONTROLS.ANIMATING: this.updateAnimating(value); break; case CONTROLS.ANIMATING: this.updateAnimating(value); break;
@ -99,6 +123,7 @@ Animation1a.prototype.updateMovementCircle = function(value) {
Animation1a.prototype.updateRandomize = function(value) { Animation1a.prototype.updateRandomize = function(value) {
this.options.randomize = value; this.options.randomize = value;
this.randomizeCtrl.querySelector('[type=checkbox]').checked = value;
this.particles.forEach(p => p.updateConfig({ randomize: value })); this.particles.forEach(p => p.updateConfig({ randomize: value }));
} }

6
js/animation1b.js
Unescape View File

@ -31,7 +31,6 @@ Animation1b.prototype.subscriber = function({ key, value }) {
switch(key) { switch(key) {
case CONTROLS.ANIMATING: this.updateAnimating(value); break; case CONTROLS.ANIMATING: this.updateAnimating(value); break;
case CONTROLS.COUNT: this.updateCount(value); break; case CONTROLS.COUNT: this.updateCount(value); break;
case CONTROLS.RANDOMIZE: this.updateRandomize(value); break;
case CONTROLS.SPEED: this.updateSpeed(value); break; case CONTROLS.SPEED: this.updateSpeed(value); break;
} }
} }
@ -62,11 +61,6 @@ Animation1b.prototype.updateCount = function(count) {
} }
} }
Animation1b.prototype.updateRandomize = function(value) {
this.options.randomize = value;
this.particles.forEach(p => p.updateConfig({ randomize: value }));
}
Animation1b.prototype.updateSpeed = function(value) { Animation1b.prototype.updateSpeed = function(value) {
this.options.speed = value; this.options.speed = value;
this.particles.forEach(p => p.updateConfig({ speed: value })); this.particles.forEach(p => p.updateConfig({ speed: value }));

10
js/animation2a.js
Unescape View File

@ -33,11 +33,9 @@ function Animation2a() {
// TODO X dimension modified by core UI, maybe recalc grid in animation start? // TODO X dimension modified by core UI, maybe recalc grid in animation start?
// TODO remove bottom padding from Disqus // TODO remove bottom padding from Disqus
// TODO perf - cache trig or perform operations // TODO perf - cache trig or perform operations
// TODO only randomize movement on 1a
// TODO ANIM2a randomize hazards // TODO ANIM2a randomize hazards
// TODO can the vision grid be relative to the particle // TODO vision grid be relative to the particle
// TODO ANIM2 particle evade
// TODO ANIM2b Scale vision grid to 1000 particles // TODO ANIM2b Scale vision grid to 1000 particles
// TODO ANIM3 flocking // TODO ANIM3 flocking
@ -47,7 +45,6 @@ Animation2a.prototype.subscriber = function({ key, value }) {
switch(key) { switch(key) {
case CONTROLS.ANIMATING: this.updateAnimating(value); break; case CONTROLS.ANIMATING: this.updateAnimating(value); break;
case CONTROLS.COUNT: this.updateCount(value); break; case CONTROLS.COUNT: this.updateCount(value); break;
case CONTROLS.RANDOMIZE: this.updateRandomize(value); break;
case CONTROLS.SPEED: this.updateSpeed(value); break; case CONTROLS.SPEED: this.updateSpeed(value); break;
} }
} }
@ -78,11 +75,6 @@ Animation2a.prototype.updateCount = function(count) {
} }
} }
Animation2a.prototype.updateRandomize = function(value) {
this.options.randomize = value;
this.particles.forEach(p => p.updateConfig({ randomize: value }));
}
Animation2a.prototype.updateSpeed = function(value) { Animation2a.prototype.updateSpeed = function(value) {
this.options.speed = value; this.options.speed = value;
this.particles.forEach(p => p.updateConfig({ speed: value })); this.particles.forEach(p => p.updateConfig({ speed: value }));

12
js/bundle.js
View File

File diff suppressed because one or more lines are too long

30
js/controls.js vendored
Unescape View File

@ -1,17 +1,15 @@
import Rx, { Observable } from 'rxjs'; import Rx, { Observable } from 'rxjs';
import { CONTROLS } from './enums'; import { CONTROLS } from './enums';
function Controls(container, { animating, count, maxCount, randomize, speed }, customNodes) { function Controls(container, { animating, count, maxCount, speed }, customNodes) {
this.nodes = { this.nodes = {
animating: createAnimatingControl(animating), animating: createAnimatingControl(animating),
count: createCountControl(count, maxCount), count: createCountControl(count, maxCount),
randomize: createRandomizeControl(randomize),
speed: createSpeedControl(speed), speed: createSpeedControl(speed),
} }
container.appendChild(this.nodes.count); container.appendChild(this.nodes.count);
container.appendChild(this.nodes.speed); container.appendChild(this.nodes.speed);
container.appendChild(this.nodes.randomize);
if (customNodes !== undefined) { if (customNodes !== undefined) {
customNodes.forEach(node => { container.appendChild(node); }); customNodes.forEach(node => { container.appendChild(node); });
@ -21,7 +19,6 @@ function Controls(container, { animating, count, maxCount, randomize, speed }, c
this.updateOptions({ key: CONTROLS.ANIMATING, value: animating }); this.updateOptions({ key: CONTROLS.ANIMATING, value: animating });
this.updateOptions({ key: CONTROLS.COUNT, value: count }); this.updateOptions({ key: CONTROLS.COUNT, value: count });
this.updateOptions({ key: CONTROLS.RANDOMIZE, value: randomize });
this.updateOptions({ key: CONTROLS.SPEED, value: speed }); this.updateOptions({ key: CONTROLS.SPEED, value: speed });
} }
@ -49,16 +46,12 @@ Controls.prototype.mount = function(customNodes) {
const count$ = Rx.Observable.fromEvent(this.nodes.count, 'input') const count$ = Rx.Observable.fromEvent(this.nodes.count, 'input')
.map(evt => ({ key: CONTROLS.COUNT, value: evt.target.value * 1 })); .map(evt => ({ key: CONTROLS.COUNT, value: evt.target.value * 1 }));
const randomize$ = Rx.Observable.fromEvent(this.nodes.randomize, 'change')
.map(evt => ({ key: CONTROLS.RANDOMIZE, value: evt.target.checked }));
const speed$ = Rx.Observable.fromEvent(this.nodes.speed, 'input') const speed$ = Rx.Observable.fromEvent(this.nodes.speed, 'input')
.map(evt => ({ key: CONTROLS.SPEED, value: evt.target.value * 1 })); .map(evt => ({ key: CONTROLS.SPEED, value: evt.target.value * 1 }));
const eventStack$ = Rx.Observable.merge( const eventStack$ = Rx.Observable.merge(
animating$, animating$,
count$, count$,
randomize$,
speed$ speed$
); );
@ -106,25 +99,6 @@ function createCountControl(value, max) {
return label; return label;
} }
function createRandomizeControl(value) {
const label = document.createElement('label');
label.className = 'controls-checkbox';
const text = document.createElement('span');
text.innerHTML = 'Randomize movement';
text.className = 'controls-checkbox-text';
const checkbox = document.createElement('input');
checkbox.type = 'checkbox';
checkbox.className = 'controls-checkbox-input';
checkbox.checked = value;
label.appendChild(checkbox);
label.appendChild(text);
return label;
}
function createSpeedControl(value) { function createSpeedControl(value) {
const label = document.createElement('label'); const label = document.createElement('label');
label.className = 'controls-range'; label.className = 'controls-range';
@ -135,7 +109,7 @@ function createSpeedControl(value) {
const slider = document.createElement('input'); const slider = document.createElement('input');
slider.type = 'range'; slider.type = 'range';
slider.min = 1; slider.min = 1;
slider.max = 20; slider.max = 15;
slider.value = value; slider.value = value;
slider.className = 'controls-range-input'; slider.className = 'controls-range-input';

4
js/index.js
Unescape View File

@ -9,6 +9,6 @@ require('../css/index.scss');
require('../css/particle.scss'); require('../css/particle.scss');
require('../css/controls.scss'); require('../css/controls.scss');
// new Animation1a(); new Animation1a();
// new Animation1b(); new Animation1b();
new Animation2a(); new Animation2a();

8
js/particle.js
Unescape View File

@ -27,7 +27,7 @@ function Particle(parent, bounds, config, globalGrid) {
vision: createVisionGrid(this.config) vision: createVisionGrid(this.config)
}; };
this.arc = createArc(bounds, globalGrid, this.config); // TODO no need to pass config after testing this.arc = createArc(bounds, this.grids, this.config); // TODO no need to pass config after testing
this.nodes = { this.nodes = {
body: createBodyNode(this.config), body: createBodyNode(this.config),
@ -92,7 +92,7 @@ Particle.prototype.updateConfig = function(config) {
// ===== CREATION ===== // ===== CREATION =====
function createArc(bounds, globalGrid, config) { function createArc(bounds, grids, config) {
let arc = { let arc = {
centerX: random.num(0, bounds.width), centerX: random.num(0, bounds.width),
centerY: random.num(0, bounds.height), centerY: random.num(0, bounds.height),
@ -113,8 +113,8 @@ function createArc(bounds, globalGrid, config) {
const y = arc.endY - arc.endY % 5; const y = arc.endY - arc.endY % 5;
// If starting in a hazard, recurse. // If starting in a hazard, recurse.
if (globalGrid[x] !== undefined && globalGrid[x][y] !== undefined) { if (grids.global[x] !== undefined && grids.global[x][y] !== undefined) {
arc = createArc(bounds, globalGrid, config); arc = createArc(bounds, grids, config);
} }
return arc; return arc;

Write Preview
Loading…
Cancel
Save