-
### Multiple peers in range
When there are multiple neighbours in range the velocity of the given ant is equal to vector sum of it's neighbours' push vectors.
@@ -122,7 +121,8 @@ When there are no peers in range ant's velocity will be turned at random to left
`l` ‒ previous frame's velocity
-`α` ‒ amount to change velocity direction based on ants agility
+`α` ‒ amount to change velocity direction based on ants agility
+
> `(Math.random() -.5) *2 *`_agility_
## Summary
diff --git a/public/index.html b/public/index.html
index e5bf226..31e54e4 100644
--- a/public/index.html
+++ b/public/index.html
@@ -3,7 +3,10 @@
-
+
{
switch (action.type) {
- case 'updateAntVelocities':
+ case "updateAntVelocities":
const neighbours: (Ant | { pos: [number, number] })[] = [...state.ants];
if (state.mouseDown) neighbours.push({ pos: state.mousePos });
- state.touches.forEach(touch => neighbours.push({ pos: touch }));
- state.ants.forEach(ant => ant.updateVelocity(neighbours));
+ state.touches.forEach((touch) => neighbours.push({ pos: touch }));
+ state.ants.forEach((ant) => ant.updateVelocity(neighbours));
return { ...state };
- case 'updateAntPositions':
- state.ants.forEach(ant => ant.updatePosition());
+ case "updateAntPositions":
+ state.ants.forEach((ant) => ant.updatePosition());
return { ...state };
- case 'updateSettings':
+ case "updateSettings":
if (action.setting && action.value) {
- if (action.setting === 'count') {
- while (state.ants.length < action.value) state.ants.push(new Ant(state.antSettings));
+ if (action.setting === "count") {
+ while (state.ants.length < action.value)
+ state.ants.push(new Ant(state.antSettings));
while (state.ants.length > action.value) state.ants.pop();
return { ...state };
- } else if (action.setting === 'renderRate') {
+ } else if (action.setting === "renderRate") {
return { ...state, renderRate: action.value };
} else {
const setting = action.setting as AntSetting;
const value = action.value as number;
state.antSettings[setting] = value;
- state.ants.forEach(ant => { ant[setting] = value; });
- return { ...state }
+ state.ants.forEach((ant) => {
+ ant[setting] = value;
+ });
+ return { ...state };
}
}
break;
- case 'mouseDown':
- return { ...state, mouseDown: true, mousePos: action.pos || state.mousePos }
- case 'mouseUp':
- return { ...state, mouseDown: false, mousePos: action.pos || state.mousePos }
- case 'mouseMove':
- if (action.pos) return { ...state, mousePos: action.pos }
+ case "mouseDown":
+ return {
+ ...state,
+ mouseDown: true,
+ mousePos: action.pos || state.mousePos,
+ };
+ case "mouseUp":
+ return {
+ ...state,
+ mouseDown: false,
+ mousePos: action.pos || state.mousePos,
+ };
+ case "mouseMove":
+ if (action.pos) return { ...state, mousePos: action.pos };
break;
- case 'touch':
+ case "touch":
state.touches = [];
if (action.touches) {
- for (let i=0; i < action.touches.length; i++) {
+ for (let i = 0; i < action.touches.length; i++) {
const item = action.touches.item(i);
if (item) state.touches.push([item.clientX, item.clientY]);
}
@@ -88,7 +104,6 @@ const reducer = (state: State, action: Action): State => {
return state;
};
-
const App: React.FC = () => {
const [state, dispatch] = useReducer(reducer, {
renderRate: 60,
@@ -103,112 +118,122 @@ const App: React.FC = () => {
},
mousePos: [0, 0],
mouseDown: false,
- touches: []
+ touches: [],
});
- React.useEffect(() => dispatch({
- type: 'updateSettings',
- setting: 'count',
- value: 30
- }), []);
+ React.useEffect(
+ () =>
+ dispatch({
+ type: "updateSettings",
+ setting: "count",
+ value: 30,
+ }),
+ []
+ );
React.useEffect(() => {
const ticker = setInterval(() => {
- dispatch({ type: 'updateAntPositions' });
- dispatch({ type: 'updateAntVelocities' });
- }, 1000 /state.renderRate);
+ dispatch({ type: "updateAntPositions" });
+ dispatch({ type: "updateAntVelocities" });
+ }, 1000 / state.renderRate);
return () => clearInterval(ticker);
}, [state.renderRate]);
- return
-
- = ({ posX, posY, radius, opacity }) => {
- return ;
+ return (
+
+ );
};
export default Dot;
diff --git a/src/index.tsx b/src/index.tsx
index b597a44..c24e9d8 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import App from './App';
+import React from "react";
+import ReactDOM from "react-dom";
+import App from "./App";
-ReactDOM.render(
- {fields.map((obj, i) =>
-
- update(obj.key, Number(e.target.value))}
- />
- )}
+ return (
+
;
+ );
};
export default Dock;
diff --git a/src/components/Dot.css b/src/components/Dot.css
index f5530d2..06e9166 100644
--- a/src/components/Dot.css
+++ b/src/components/Dot.css
@@ -1,19 +1,20 @@
@keyframes emerge {
- from { transform: scale(0); }
- to { transform: scale(1); }
+ from {
+ transform: scale(0);
+ }
+ to {
+ transform: scale(1);
+ }
}
@keyframes highlight {
from {
- box-shadow:
- 0 0 80px var(--fg),
- 0 0 60px var(--fg),
- 0 0 60px var(--fg),
- 0 0 40px var(--fg),
- 0 0 40px var(--fg),
- 0 0 20px var(--fg),
+ box-shadow: 0 0 80px var(--fg), 0 0 60px var(--fg), 0 0 60px var(--fg),
+ 0 0 40px var(--fg), 0 0 40px var(--fg), 0 0 20px var(--fg),
0 0 20px var(--fg);
}
- to { box-shadow: none; }
+ to {
+ box-shadow: none;
+ }
}
.dot {
@@ -22,5 +23,5 @@
width: 10px;
height: 10px;
border-radius: 100vmax;
- animation: .05s emerge, 1s highlight;
+ animation: 0.05s emerge, 1s highlight;
}
diff --git a/src/components/Dot.tsx b/src/components/Dot.tsx
index 619cc13..39a6590 100644
--- a/src/components/Dot.tsx
+++ b/src/components/Dot.tsx
@@ -1,24 +1,26 @@
-import React from 'react';
-import './Dot.css';
+import React from "react";
+import "./Dot.css";
interface Props {
- posX: number,
- posY: number,
- radius: number,
- opacity?: number
+ posX: number;
+ posY: number;
+ radius: number;
+ opacity?: number;
}
const Dot: React.FC
+
+
-
+ {fields.map((obj, i) => (
+
+
+ update(obj.key, Number(e.target.value))}
+ />
+
+ ))}
+
+
+
+ 
+
+
-
-
-
-
-