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

Movement touches WIP.

Browse Source
master
Ben Burlingham 8 years ago
parent 82ca9182b2
commit 5011609a9f
6 changed files with 101 additions and 106 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. 6
      js/animation1a.js
  2. 6
      js/animation1b.js
  3. 6
      js/animation2a.js
  4. 10
      js/bundle.js
  5. 4
      js/index.js
  6. 175
      js/particle.js

6
js/animation1a.js
Unescape View File

@ -94,17 +94,17 @@ Animation1a.prototype.updateCount = function(count) {
Animation1a.prototype.updateMovementCircle = function(value) {
this.options.showMovementCircle = value;
this.movementCircleCtrl.querySelector('[type=checkbox]').checked = value;
this.particles.forEach(p => p.updateOptions({ showMovementCircle: value }));
this.particles.forEach(p => p.updateConfig({ showMovementCircle: value }));
}
Animation1a.prototype.updateRandomize = function(value) {
this.options.randomize = value;
this.particles.forEach(p => p.updateOptions({ randomize: value }));
this.particles.forEach(p => p.updateConfig({ randomize: value }));
}
Animation1a.prototype.updateSpeed = function(value) {
this.options.speed = value;
this.particles.forEach(p => p.updateOptions({ speed: value }));
this.particles.forEach(p => p.updateConfig({ speed: value }));
}
export default Animation1a;

6
js/animation1b.js
Unescape View File

@ -7,7 +7,7 @@ import { CONTROLS } from './enums';
function Animation1b() {
this.options = {
count: 1,
maxCount: 2000,
maxCount: 1000,
randomize: false,
speed: 8
};
@ -64,12 +64,12 @@ Animation1b.prototype.updateCount = function(count) {
Animation1b.prototype.updateRandomize = function(value) {
this.options.randomize = value;
this.particles.forEach(p => p.updateOptions({ randomize: value }));
this.particles.forEach(p => p.updateConfig({ randomize: value }));
}
Animation1b.prototype.updateSpeed = function(value) {
this.options.speed = value;
this.particles.forEach(p => p.updateOptions({ speed: value }));
this.particles.forEach(p => p.updateConfig({ speed: value }));
}
export default Animation1b;

6
js/animation2a.js
Unescape View File

@ -33,11 +33,11 @@ function Animation2a() {
// TODO X dimension modified by core UI, maybe recalc grid in animation start?
// TODO remove bottom padding from Disqus
// TODO perf - cache trig or perform operations
// TODO particle gridzie and vision rad into options
// TODO only randomize movement on 1a
// TODO ANIM2 particle evade
// TODO ANIM2a Vision grid touches
// TODO ANIM2a Vision grid touches trig transform
// TODO ANIM2a randomize hazards
// TODO ANIM2 particle evade
// TODO ANIM2b Scale vision grid to 1000? particles
// TODO ANIM3 flocking

10
js/bundle.js
View File

File diff suppressed because one or more lines are too long

4
js/index.js
Unescape View File

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

175
js/particle.js
Unescape View File

@ -23,8 +23,8 @@ function Particle(parent, bounds, config, globalGrid) {
}, config);
this.grids = {
global: globalGrid,
vision: calculateVisionGrid(this.config)
global: globalGrid || {},
vision: createVisionGrid(this.config)
};
this.arc = {
@ -62,13 +62,14 @@ Particle.prototype.remove = function() {
}
Particle.prototype.nextFrame = function() {
// this.visionGrid = updateVisionGrid(this.visionGrid, this.globalGrid, this.particle);
this.arc = updateArc(this.arc, this.config);
this.grids.vision = updateVisionGrid(this.arc, this.grids);
repaintContainer(this.nodes.container, this.arc);
repaintBody(this.nodes.body, this.arc);
repaintCircle(this.nodes.circle, this.arc);
// repaintVision(this.arc, this.nodes.vision, this.visionGrid, this.visionGridDivs);
repaintVision(this.nodes.vision, this.arc);
repaintVisionGrid(this.nodes.visionGrid, this.grids, this.config);
}
Particle.prototype.updateConfig = function(config) {
@ -88,27 +89,18 @@ Particle.prototype.updateConfig = function(config) {
if (showVisionGrid === true && this.nodes.vision === undefined) {
this.nodes.vision = createVisionNode(config, this.grids);
// visionNode.appendChild(div);
this.nodes.visionGrid = createVisionGridNodes(this.config, this.grids, this.nodes);
this.nodes.container.appendChild(this.nodes.vision);
}
if (showMovementCircle === false && this.nodes.circle !== undefined) {
if (showVisionGrid === false && this.nodes.vision !== undefined) {
this.nodes.container.removeChild(this.nodes.vision);
delete this.nodes.vision;
delete this.nodex.visionGrid;
}
// if (config.showVisionGrid === false && this.nodes.vision !== undefined) {
// // this.nodes.container.removeChild(this.vision);
// // delete this.vision;
//
// // this.visionGrid.forEach(point => {
// // this.vision.removeChild(point.div);
// // });
// // this.visionGrid = [];
// }
}
// ===== DOM CREATION =====
// ===== CREATION =====
function createBodyNode(config) {
const node = document.createElement('div');
@ -145,18 +137,51 @@ function createVisionNode(config) {
return node;
}
function createVisionGridNodes(config, grids) {
function createVisionGrid(config) {
if (config.showVisionGrid === false) {
return [];
}
const { gridSize: side, visionRadius: radius } = config;
const r0 = Math.pow(radius, 2);
const r1 = Math.pow(radius - side, 2);
const points = [];
for (let x = -radius; x <= radius; x += side) {
for (let y = -radius; y <= radius; y += side) {
// Half of triangle
if (x > -y) {
continue;
}
// Vision band
const p = Math.pow(x, 2) + Math.pow(y, 2);
if (p > r0 || p < r1) {
continue;
}
points.push({ x, y, touch: false });
}
}
return points;
}
function createVisionGridNodes(config, grids, nodes) {
if (config.showVisionGrid === false) {
return undefined;
}
return grids.visionGrid.forEach((acc, { x, y }) => {
return grids.vision.reduce((acc, { x, y }) => {
const div = document.createElement('div');
div.className = 'particle-vision-dot';
// div.style.backgroundColor = config.color;
div.style.backgroundColor = config.color;
div.style.left = `${x + config.visionRadius}px`;
div.style.top = `${y + config.visionRadius}px`;
nodes.vision.appendChild(div);
if (acc[x] === undefined) {
acc[x] = {};
}
@ -194,7 +219,7 @@ function updateArc(arc, { bounds, randomize, speed }) {
arc.endX = arc.centerX + arc.radius * Math.cos(arc.theta);
arc.endY = arc.centerY - arc.radius * Math.sin(arc.theta);
// // Overflow.
// Overflow.
if (arc.endX < 0) {
arc.endX += bounds.width;
arc.centerX += bounds.width
@ -204,7 +229,7 @@ function updateArc(arc, { bounds, randomize, speed }) {
}
if (arc.endY < 0) {
arc.endY += bounds.height;
arc.endY += bounds.height;
arc.centerY += bounds.height
} else if (arc.endY > bounds.height) {
arc.endY -= bounds.height;
@ -214,26 +239,23 @@ function updateArc(arc, { bounds, randomize, speed }) {
return arc;
}
// function updateVisionGrid(visionGrid, globalGrid, particle) {
// return visionGrid.reduce((acc, point) => {
// // Location of point on grid
// const x = Math.round(particle.x + point.x);
// const y = Math.round(particle.y + point.y);
//
// const gridX = x - x % 5;
// const gridY = y - y % 5;
//
// // console.warn(gridX, particle.x, point.x);
// point.touch = (globalGrid[gridX] !== undefined && globalGrid[gridX][gridY] !== undefined);
//
// if (point.touch) {
// console.warn('yay');
// }
//
// return acc.concat(point);
// }, []);
// }
//
function updateVisionGrid(arc, grids) {
const { global, vision } = grids;
return vision.reduce((acc, point) => {
// Location of point on grid
const x = Math.round(arc.endX + point.x);
const y = Math.round(arc.endY + point.y);
const gridX = x - x % 5;
const gridY = y - y % 5;
point.touch = (global[gridX] !== undefined && global[gridX][gridY] !== undefined);
return acc.concat(point);
}, []);
}
function moveArc(arc, newRadius) {
const r0 = arc.radius;
const r1 = newRadius;
@ -254,36 +276,6 @@ function changeDirection(arc) {
return arc;
}
function calculateVisionGrid(config) {
if (config.showVisionGrid === false) {
return null;
}
const { gridSize: side, visionRadius: radius } = config;
const r0 = Math.pow(radius, 2);
const r1 = Math.pow(radius - side, 2);
const points = [];
for (let x = -radius; x <= radius; x += side) {
for (let y = -radius; y <= radius; y += side) {
// Half of triangle
if (x > -y) {
continue;
}
// Vision band
const p = Math.pow(x, 2) + Math.pow(y, 2);
if (p > r0 || p < r1) {
continue;
}
points.push({ x, y, touch: false });
}
}
return points;
}
// ===== RENDERING =====
function repaintContainer(node, arc) {
node.style.left = `${arc.endX}px`;
@ -312,23 +304,26 @@ function repaintCircle(node, arc) {
node.style.borderRadius = `${arc.radius}px`;
}
// function repaintVision(arc, visionNode, visionGrid, visionGridDivs) {
// if (visionNode === undefined) {
// return;
// }
//
// const rad = arc.clockwise
// ? RAD.t180 - arc.theta
// : RAD.t360 - arc.theta;
//
// // visionNode.style.transform = `rotate(${rad + RAD.t45}rad)`;
//
// visionGrid.forEach(({ x, y, touch }) => {
// if (touch === true) {
// console.warn(x, y)
// visionGridDivs[x][y].style.background = 'black';
// }
// });
// }
function repaintVision(node, arc) {
if (node === undefined) {
return;
}
const rad = arc.clockwise
? RAD.t180 - arc.theta
: RAD.t360 - arc.theta;
node.style.transform = `rotate(${rad + RAD.t45}rad)`;
}
function repaintVisionGrid(nodes, grids) {
if (nodes === undefined) {
return;
}
grids.vision.forEach(({ x, y, touch }) => {
nodes[x][y].style.border = (touch ? '2px solid red' : '0');
});
}
export default Particle;

Write Preview
Loading…
Cancel
Save