parent
aae9a8fe90
commit
5edcdea48f
13 changed files with 2503 additions and 18920 deletions
@ -0,0 +1,75 @@ |
||||
import Rx, { Observable } from 'rxjs'; |
||||
import Particle from './particle'; |
||||
import Store from './store'; |
||||
import Controls from './controls'; |
||||
import { CONTROLS } from './enums'; |
||||
|
||||
function Animation1b() { |
||||
this.options = { |
||||
count: 1, |
||||
maxCount: 2000, |
||||
randomize: false, |
||||
speed: 8 |
||||
}; |
||||
|
||||
this.container = document.getElementById('animation1b'); |
||||
this.bounds = this.container.getBoundingClientRect(); |
||||
|
||||
this.particles = []; |
||||
|
||||
const controls = new Controls( |
||||
document.getElementById('controls1b'), |
||||
this.options |
||||
); |
||||
|
||||
controls.mount().subscribe(this.subscriber.bind(this)); |
||||
|
||||
this.updateCount(this.options.count); |
||||
}; |
||||
|
||||
Animation1b.prototype.subscriber = function({ key, value }) { |
||||
switch(key) { |
||||
case CONTROLS.ANIMATING: this.updateAnimating(value); break; |
||||
case CONTROLS.COUNT: this.updateCount(value); break; |
||||
case CONTROLS.RANDOMIZE: this.updateRandomize(value); break; |
||||
case CONTROLS.SPEED: this.updateSpeed(value); break; |
||||
} |
||||
} |
||||
|
||||
Animation1b.prototype.nextFrame = function() { |
||||
this.particles.forEach(p => p.nextFrame()); |
||||
} |
||||
|
||||
Animation1b.prototype.updateAnimating = function(isAnimating) { |
||||
this.options.animating = isAnimating; |
||||
|
||||
if (isAnimating) { |
||||
const fps$ = Rx.Observable.interval(1000 / 32) |
||||
.takeWhile(_ => this.options.animating); |
||||
|
||||
fps$.subscribe(this.nextFrame.bind(this)); |
||||
} |
||||
} |
||||
|
||||
Animation1b.prototype.updateCount = function(count) { |
||||
while (this.particles.length >= count) { |
||||
delete this.particles.pop().remove(); |
||||
} |
||||
|
||||
while (this.particles.length < count) { |
||||
const p = new Particle(this.container, this.bounds, this.options); |
||||
this.particles.push(p); |
||||
} |
||||
} |
||||
|
||||
Animation1b.prototype.updateRandomize = function(value) { |
||||
this.options.randomize = value; |
||||
this.particles.forEach(p => p.updateOptions({ randomize: value })); |
||||
} |
||||
|
||||
Animation1b.prototype.updateSpeed = function(value) { |
||||
this.options.speed = value; |
||||
this.particles.forEach(p => p.updateOptions({ speed: value })); |
||||
} |
||||
|
||||
export default Animation1b; |
||||
@ -1,89 +0,0 @@ |
||||
import Rx, { Observable } from 'rxjs'; |
||||
import Particle from './particle'; |
||||
import Store from './store'; |
||||
import Controls from './controls'; |
||||
import { CONTROLS } from './enums'; |
||||
|
||||
function Animation2() { |
||||
this.options = { |
||||
animating: false, |
||||
count: 1, |
||||
maxCount: 2000, |
||||
speed: 4 |
||||
}; |
||||
|
||||
this.container = document.getElementById('animation2'); |
||||
this.bounds = this.container.getBoundingClientRect(); |
||||
|
||||
this.particles = []; |
||||
|
||||
const controls = new Controls( |
||||
document.getElementById('controls2'), |
||||
this.options |
||||
); |
||||
|
||||
controls.mount().subscribe(this.subscriber.bind(this)); |
||||
|
||||
this.updateAnimating(this.options.animating); |
||||
this.updateCount(this.options.count); |
||||
|
||||
// TODO X dimension modified by core UI
|
||||
|
||||
// TODO ANIM3 Show vision grid (including touches!)
|
||||
// TODO ANIM3 regen vision grid is option updated
|
||||
// TODO ANIM3 cleanup vision grid
|
||||
// TODO ANIM3 Pallet avoidance
|
||||
|
||||
// TODO ANIM4 Flocking
|
||||
}; |
||||
|
||||
Animation2.prototype.subscriber = function({ key, value }) { |
||||
switch(key) { |
||||
case CONTROLS.ANIMATING: this.updateAnimating(value); break; |
||||
case CONTROLS.COUNT: this.updateCount(value); break; |
||||
case CONTROLS.RADIUS: this.updateRadius(value); break; |
||||
case CONTROLS.ROTATION: this.updateRotation(value); break; |
||||
case CONTROLS.SPEED: this.updateSpeed(value); break; |
||||
} |
||||
} |
||||
|
||||
Animation2.prototype.nextFrame = function() { |
||||
this.particles.forEach(p => p.nextFrame()); |
||||
} |
||||
|
||||
Animation2.prototype.updateAnimating = function(isAnimating) { |
||||
this.options.animating = isAnimating; |
||||
|
||||
if (isAnimating) { |
||||
const fps$ = Rx.Observable.interval(1000 / 32) |
||||
.takeWhile(_ => this.options.animating); |
||||
|
||||
fps$.subscribe(this.nextFrame.bind(this)); |
||||
} |
||||
} |
||||
|
||||
Animation2.prototype.updateCount = function(count) { |
||||
while (this.particles.length >= count) { |
||||
const p = this.particles.pop(); |
||||
this.container.removeChild(p.node); |
||||
} |
||||
|
||||
while (this.particles.length < count) { |
||||
const p = new Particle(this.container, this.bounds, this.options); |
||||
this.particles.push(p); |
||||
} |
||||
} |
||||
|
||||
Animation2.prototype.updateRadius = function(value) { |
||||
this.particles.forEach(p => p.updateOptions({ randomizeRadius: value })); |
||||
} |
||||
|
||||
Animation2.prototype.updateRotation = function(value) { |
||||
this.particles.forEach(p => p.updateOptions({ randomizeRotation: value })); |
||||
} |
||||
|
||||
Animation2.prototype.updateSpeed = function(speed) { |
||||
this.particles.forEach(p => p.updateOptions({ speed })); |
||||
} |
||||
|
||||
export default Animation2; |
||||
@ -0,0 +1,93 @@ |
||||
import Rx, { Observable } from 'rxjs'; |
||||
import Particle from './particle'; |
||||
import Store from './store'; |
||||
import Controls from './controls'; |
||||
import { CONTROLS } from './enums'; |
||||
|
||||
function Animation2a() { |
||||
this.options = { |
||||
count: 1, |
||||
maxCount: 10, |
||||
randomize: true, |
||||
showVisionGrid: true, |
||||
showMovementCircle: false, |
||||
speed: 4 |
||||
}; |
||||
|
||||
this.container = document.getElementById('animation2a'); |
||||
this.bounds = this.container.getBoundingClientRect(); |
||||
|
||||
this.particles = []; |
||||
|
||||
const controls = new Controls( |
||||
document.getElementById('controls2a'), |
||||
this.options |
||||
); |
||||
|
||||
controls.mount().subscribe(this.subscriber.bind(this)); |
||||
|
||||
this.updateAnimating(this.options.animating); |
||||
this.updateCount(this.options.count); |
||||
|
||||
// TODO X dimension modified by core UI
|
||||
// TODO remove bottom padding from Disqus
|
||||
// TODO perf - cache trig or perform operations
|
||||
// TODO move animating into controls
|
||||
// TODO particle evade
|
||||
|
||||
// TODO ANIM2 put pallettes in animation
|
||||
// TODO ANIM2a Show vision grid (including touches!)
|
||||
// TODO ANIM2b Scale vision grid to 1000? particles
|
||||
|
||||
// TODO ANIM4 Pallet avoidance
|
||||
// TODO ANIM4 Lots of particles
|
||||
|
||||
// TODO ANIM5 Flocking
|
||||
}; |
||||
|
||||
Animation2a.prototype.subscriber = function({ key, value }) { |
||||
switch(key) { |
||||
case CONTROLS.ANIMATING: this.updateAnimating(value); break; |
||||
case CONTROLS.COUNT: this.updateCount(value); break; |
||||
case CONTROLS.RANDOMIZE: this.updateRandomize(value); break; |
||||
case CONTROLS.SPEED: this.updateSpeed(value); break; |
||||
} |
||||
} |
||||
|
||||
Animation2a.prototype.nextFrame = function() { |
||||
this.particles.forEach(p => p.nextFrame()); |
||||
} |
||||
|
||||
Animation2a.prototype.updateAnimating = function(isAnimating) { |
||||
this.options.animating = isAnimating; |
||||
|
||||
if (isAnimating) { |
||||
const fps$ = Rx.Observable.interval(1000 / 32) |
||||
.takeWhile(_ => this.options.animating); |
||||
|
||||
fps$.subscribe(this.nextFrame.bind(this)); |
||||
} |
||||
} |
||||
|
||||
Animation2a.prototype.updateCount = function(count) { |
||||
while (this.particles.length >= count) { |
||||
delete this.particles.pop().remove(); |
||||
} |
||||
|
||||
while (this.particles.length < count) { |
||||
const p = new Particle(this.container, this.bounds, this.options); |
||||
this.particles.push(p); |
||||
} |
||||
} |
||||
|
||||
Animation2a.prototype.updateRandomize = function(value) { |
||||
this.options.randomize = value; |
||||
this.particles.forEach(p => p.updateOptions({ randomize: value })); |
||||
} |
||||
|
||||
Animation2a.prototype.updateSpeed = function(value) { |
||||
this.options.speed = value; |
||||
this.particles.forEach(p => p.updateOptions({ speed: value })); |
||||
} |
||||
|
||||
export default Animation2a; |
||||
File diff suppressed because one or more lines are too long
@ -1,12 +1,14 @@ |
||||
import Rx, { Observable } from 'rxjs'; |
||||
import Controls from './controls'; |
||||
import Animation1 from './animation1'; |
||||
import Animation2 from './animation2'; |
||||
import Animation1a from './animation1a'; |
||||
import Animation1b from './animation1b'; |
||||
import Animation2a from './animation2a'; |
||||
|
||||
require('../css/reset.scss'); |
||||
require('../css/index.scss'); |
||||
require('../css/particle.scss'); |
||||
require('../css/controls.scss'); |
||||
|
||||
new Animation1(); |
||||
new Animation2(); |
||||
new Animation1a(); |
||||
new Animation1b(); |
||||
new Animation2a(); |
||||
|
||||
Loading…
Reference in new issue