parent
1032d66cff
commit
65b8e275b4
7 changed files with 158 additions and 24 deletions
@ -0,0 +1,122 @@ |
||||
import Rx, { Observable } from 'rxjs'; |
||||
import Particle from './particle'; |
||||
import Store from './store'; |
||||
import Controls from './controls'; |
||||
import { CONTROLS } from './enums'; |
||||
|
||||
function Animation2b() { |
||||
this.options = { |
||||
count: 1, |
||||
maxCount: 1000, |
||||
speed: 4 |
||||
}; |
||||
|
||||
this.container = document.getElementById('animation2b'); |
||||
this.bounds = this.container.getBoundingClientRect(); |
||||
|
||||
this.particles = []; |
||||
this.globalGrid = createGlobalGrid(this.container, this.bounds); |
||||
|
||||
const controls = new Controls( |
||||
document.getElementById('controls2b'), |
||||
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, maybe recalc grid in animation start?
|
||||
// TODO remove bottom padding from Disqus
|
||||
// TODO ANIM2ab randomize hazards
|
||||
// TODO fix "hangup" small radius evade bug
|
||||
|
||||
// TODO ANIM2b perf Scale vision grid to 1000 particles
|
||||
|
||||
// TODO ANIM3 flocking
|
||||
}; |
||||
|
||||
Animation2b.prototype.subscriber = function({ key, value }) { |
||||
switch(key) { |
||||
case CONTROLS.ANIMATING: this.updateAnimating(value); break; |
||||
case CONTROLS.COUNT: this.updateCount(value); break; |
||||
case CONTROLS.SPEED: this.updateSpeed(value); break; |
||||
} |
||||
} |
||||
|
||||
Animation2b.prototype.nextFrame = function() { |
||||
this.particles.forEach(p => p.nextFrame()); |
||||
} |
||||
|
||||
Animation2b.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)); |
||||
} |
||||
} |
||||
|
||||
Animation2b.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.globalGrid); |
||||
this.particles.push(p); |
||||
} |
||||
} |
||||
|
||||
Animation2b.prototype.updateSpeed = function(value) { |
||||
this.options.speed = value; |
||||
this.particles.forEach(p => p.updateConfig({ speed: value })); |
||||
} |
||||
|
||||
function createGlobalGrid(container, bounds) { |
||||
const grid = {}; |
||||
const gridSize = 5; |
||||
|
||||
const hazards = [ |
||||
{ x: 100, y: 100, w: 200, h: 200 }, |
||||
{ x: 600, y: 200, w: 200, h: 200 }, |
||||
]; |
||||
|
||||
return hazards.reduce((acc, { x, y, w, h }) => { |
||||
const div = document.createElement('div'); |
||||
div.className = 'hazard'; |
||||
div.style.left = `${x}px`; |
||||
div.style.top = `${y}px`; |
||||
div.style.height = `${h}px`; |
||||
div.style.width = `${w}px`; |
||||
container.appendChild(div); |
||||
|
||||
for (let i = x; i <= (x + w); i += gridSize) { |
||||
for (let j = y; j <= (y + h); j += gridSize) { |
||||
if (acc[i] === undefined) { |
||||
acc[i] = {}; |
||||
} |
||||
|
||||
if (acc[i][j] !== undefined) { |
||||
continue; |
||||
} |
||||
|
||||
const dot = document.createElement('dot'); |
||||
dot.className = 'hazard-dot'; |
||||
dot.style.left = `${i - x}px`; |
||||
dot.style.top = `${j - y}px`; |
||||
div.appendChild(dot); |
||||
|
||||
acc[i][j] = true; |
||||
} |
||||
} |
||||
|
||||
|
||||
return acc; |
||||
}, {}); |
||||
} |
||||
|
||||
export default Animation2b; |
||||
File diff suppressed because one or more lines are too long
Loading…
Reference in new issue