You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
334 lines
9.1 KiB
334 lines
9.1 KiB
import Rx, { Observable } from 'rxjs';
|
|
import { RAD } from './enums';
|
|
import Store from './store';
|
|
|
|
const random = {
|
|
bool: (weight) => Math.random() < (weight || 0.5),
|
|
color: () => `rgb(${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)})`,
|
|
num: (min, max) => min + Math.round(Math.random() * max),
|
|
}
|
|
|
|
// ===== Constructor =====
|
|
|
|
function Particle(parent, bounds, config, globalGrid) {
|
|
this.config = Object.assign({
|
|
bounds,
|
|
color: random.color(),
|
|
gridSize: 5,
|
|
randomize: false,
|
|
showMovementCircle: false,
|
|
showVisionGrid: false,
|
|
speed: 4,
|
|
visionRadius: 50
|
|
}, config);
|
|
|
|
this.grids = {
|
|
global: globalGrid,
|
|
vision: calculateVisionGrid(this.config)
|
|
};
|
|
|
|
this.arc = {
|
|
centerX: random.num(0, bounds.width),
|
|
centerY: random.num(0, bounds.height),
|
|
clockwise: random.bool(),
|
|
endX: 0,
|
|
endY: 0,
|
|
length: random.num(RAD.t90, RAD.t360),
|
|
radius: random.num(100, 200),
|
|
theta: random.num(RAD.t90, RAD.t360),
|
|
};
|
|
|
|
this.nodes = {
|
|
body: createBodyNode(this.config),
|
|
circle: undefined,
|
|
container: createContainerNode(this.config),
|
|
parent,
|
|
vision: undefined,
|
|
visionGrid: undefined,
|
|
};
|
|
|
|
this.nodes.container.appendChild(this.nodes.body);
|
|
parent.appendChild(this.nodes.container);
|
|
|
|
this.updateConfig(this.config);
|
|
this.nextFrame();
|
|
};
|
|
|
|
// ===== PROTOTYPE =====
|
|
|
|
Particle.prototype.remove = function() {
|
|
this.nodes.parent.removeChild(this.nodes.container);
|
|
return this;
|
|
}
|
|
|
|
Particle.prototype.nextFrame = function() {
|
|
// this.visionGrid = updateVisionGrid(this.visionGrid, this.globalGrid, this.particle);
|
|
this.arc = updateArc(this.arc, this.config);
|
|
|
|
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);
|
|
}
|
|
|
|
Particle.prototype.updateConfig = function(config) {
|
|
Object.assign(this.config, config);
|
|
|
|
const { showMovementCircle, showVisionGrid } = this.config;
|
|
|
|
if (showMovementCircle === true && this.nodes.circle === undefined) {
|
|
this.nodes.circle = createCircleNode(config);
|
|
this.nodes.container.appendChild(this.nodes.circle);
|
|
}
|
|
|
|
if (showMovementCircle === false && this.nodes.circle !== undefined) {
|
|
this.nodes.container.removeChild(this.nodes.circle);
|
|
delete this.nodes.circle;
|
|
}
|
|
|
|
if (showVisionGrid === true && this.nodes.vision === undefined) {
|
|
this.nodes.vision = createVisionNode(config, this.grids);
|
|
// visionNode.appendChild(div);
|
|
this.nodes.container.appendChild(this.nodes.vision);
|
|
}
|
|
|
|
if (showMovementCircle === false && this.nodes.circle !== undefined) {
|
|
this.nodes.container.removeChild(this.nodes.vision);
|
|
delete this.nodes.vision;
|
|
}
|
|
|
|
// 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 =====
|
|
|
|
function createBodyNode(config) {
|
|
const node = document.createElement('div');
|
|
node.className = 'particle-body';
|
|
node.style.backgroundColor = config.color;
|
|
return node;
|
|
}
|
|
|
|
function createCircleNode(config) {
|
|
if (config.showMovementCircle === false) {
|
|
return undefined;
|
|
}
|
|
|
|
const node = document.createElement('div');
|
|
node.className = 'particle-movement-circle';
|
|
node.style.borderColor = config.color;
|
|
return node;
|
|
}
|
|
|
|
function createContainerNode(config) {
|
|
const node = document.createElement('div');
|
|
node.className = 'particle-container';
|
|
return node;
|
|
}
|
|
|
|
function createVisionNode(config) {
|
|
if (config.showVisionGrid === false) {
|
|
return undefined;
|
|
}
|
|
|
|
const node = document.createElement('div');
|
|
node.className = 'particle-vision';
|
|
|
|
return node;
|
|
}
|
|
|
|
function createVisionGridNodes(config, grids) {
|
|
if (config.showVisionGrid === false) {
|
|
return undefined;
|
|
}
|
|
|
|
return grids.visionGrid.forEach((acc, { x, y }) => {
|
|
const div = document.createElement('div');
|
|
div.className = 'particle-vision-dot';
|
|
// div.style.backgroundColor = config.color;
|
|
div.style.left = `${x + config.visionRadius}px`;
|
|
div.style.top = `${y + config.visionRadius}px`;
|
|
|
|
if (acc[x] === undefined) {
|
|
acc[x] = {};
|
|
}
|
|
|
|
acc[x][y] = div;
|
|
|
|
return acc;
|
|
}, {});
|
|
}
|
|
|
|
// ===== CALCULATIONS =====
|
|
|
|
function updateArc(arc, { bounds, randomize, speed }) {
|
|
// Randomly change radius and rotation direction.
|
|
if (arc.length <= 0) {
|
|
arc.length = random.num(RAD.t90, RAD.t360);
|
|
|
|
if (randomize === true) {
|
|
arc = moveArc(arc, random.num(100, 200));
|
|
|
|
if (random.bool(0.8)) {
|
|
arc.clockwise = !arc.clockwise;
|
|
arc = changeDirection(arc);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Ensure constant velocity and theta between 0 and 2π.
|
|
const delta = speed / arc.radius;
|
|
arc.length -= delta;
|
|
|
|
arc.theta += (arc.clockwise ? -delta : +delta);
|
|
arc.theta = (arc.theta > 0 ? arc.theta % RAD.t360 : RAD.t360 + arc.theta);
|
|
|
|
arc.endX = arc.centerX + arc.radius * Math.cos(arc.theta);
|
|
arc.endY = arc.centerY - arc.radius * Math.sin(arc.theta);
|
|
|
|
// // Overflow.
|
|
if (arc.endX < 0) {
|
|
arc.endX += bounds.width;
|
|
arc.centerX += bounds.width
|
|
} else if (arc.endX > bounds.width) {
|
|
arc.endX -= bounds.width;
|
|
arc.centerX -= bounds.width
|
|
}
|
|
|
|
if (arc.endY < 0) {
|
|
arc.endY += bounds.height;
|
|
arc.centerY += bounds.height
|
|
} else if (arc.endY > bounds.height) {
|
|
arc.endY -= bounds.height;
|
|
arc.centerY -= bounds.height
|
|
}
|
|
|
|
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 moveArc(arc, newRadius) {
|
|
const r0 = arc.radius;
|
|
const r1 = newRadius;
|
|
|
|
// Moves arc center to new radius while keeping theta constant.
|
|
arc.centerX -= (r1 - r0) * Math.cos(arc.theta);
|
|
arc.centerY += (r1 - r0) * Math.sin(arc.theta);
|
|
arc.radius = r1;
|
|
|
|
return arc;
|
|
}
|
|
|
|
function changeDirection(arc) {
|
|
arc.theta = (arc.theta + RAD.t180) % RAD.t360;
|
|
arc.centerX -= (2 * arc.radius) * Math.cos(arc.theta);
|
|
arc.centerY += (2 * arc.radius) * Math.sin(arc.theta);
|
|
|
|
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`;
|
|
node.style.top = `${arc.endY}px`;
|
|
}
|
|
|
|
function repaintBody(node, arc) {
|
|
const rad = arc.clockwise
|
|
? RAD.t180 - arc.theta
|
|
: RAD.t360 - arc.theta;
|
|
|
|
node.style.transform = `rotate(${rad + RAD.t45}rad)`;
|
|
}
|
|
|
|
function repaintCircle(node, arc) {
|
|
if (node === undefined) {
|
|
return;
|
|
}
|
|
|
|
node.style.width = `${2 * arc.radius}px`;
|
|
node.style.height = `${2 * arc.radius}px`;
|
|
|
|
node.style.left = `-${arc.radius + arc.radius * Math.cos(arc.theta)}px`;
|
|
node.style.top = `-${arc.radius - arc.radius * Math.sin(arc.theta)}px`;
|
|
|
|
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';
|
|
// }
|
|
// });
|
|
// }
|
|
|
|
export default Particle;
|
|
|