diff --git a/dev/GraphBrowser.tsx b/dev/GraphBrowser.tsx index 5d0549b..690422a 100644 --- a/dev/GraphBrowser.tsx +++ b/dev/GraphBrowser.tsx @@ -9,8 +9,6 @@ import { } from "#/lib/Graph.ts"; import { createVector, - fromPolar, - getDirection, getDistance, scale, setDistanceNormal, @@ -102,7 +100,7 @@ function applyRepulsion(nodes: Array): void { function hookEdge([a, b]: Edge): void { const restLength = 86; - const stiffness = 0.2; + const stiffness = 0.05; const direction = createVector(); setDistanceNormal(direction, a.position, b.position); @@ -130,7 +128,7 @@ export const GraphBrowser: Component<{ const enhanceNode = (node: string) => { return { name: node, - position: createVector(Math.random(), Math.random()), + position: createVector(Math.random() * 128 - 64, Math.random() * 32 - 16), velocity: createVector(), acceleration: createVector(), }; @@ -184,6 +182,7 @@ export const GraphBrowser: Component<{ hookEdge(edge); } + let absV = 0; for (const node of nodes) { node.velocity.x += node.acceleration.x; node.velocity.y += node.acceleration.y; @@ -196,33 +195,38 @@ export const GraphBrowser: Component<{ node.acceleration.x = 0; node.acceleration.y = 0; + + absV = Math.abs(node.velocity.x) + Math.abs(node.velocity.y); } - ctx.restore(); - ctx.clearRect(0, 0, canvasRef.width, canvasRef.height); - ctx.save(); - const activeRenderNode = nodes.find((n) => n.name === activeNode)!; - ctx.translate( - width() / 2 - activeRenderNode.position.x, - height() / 2 - activeRenderNode.position.y, - ); + if (absV < 0.01) { + ctx.restore(); + ctx.clearRect(0, 0, canvasRef.width, canvasRef.height); + ctx.save(); + const activeRenderNode = nodes.find((n) => n.name === activeNode)!; + ctx.translate( + width() / 2 - activeRenderNode.position.x, + height() / 2 - activeRenderNode.position.y, + ); - for (const edge of edges) { - drawEdge(edge, ctx); - } - - for (const node of nodes) { - if (activeNeighbours.includes(node.name)) { - drawNode(node, ctx, "#6572f5"); - } else { - drawNode(node, ctx, "#404249"); + for (const edge of edges) { + drawEdge(edge, ctx); } + + for (const node of nodes) { + if (activeNeighbours.includes(node.name)) { + drawNode(node, ctx, "#6572f5"); + } else { + drawNode(node, ctx, "#404249"); + } + } + drawNode(activeRenderNode, ctx, "#ee459e"); + + setTimeout(animate, 100); + } else { + animate(); } - drawNode(activeRenderNode, ctx, "#ee459e"); - - setTimeout(animate, 100); }; - animate(); }); diff --git a/scenes/fuzzScene/data.json b/scenes/fuzzScene/data.json new file mode 100644 index 0000000..9b4965c --- /dev/null +++ b/scenes/fuzzScene/data.json @@ -0,0 +1,21 @@ +{ + "name": "fuzzScene", + "width": 240, + "height": 160, + "entities": [ + { + "name": "barEntity", + "position": { + "x": 0, + "y": 0 + } + }, + { + "name": "barEntity", + "position": { + "x": 24, + "y": 16 + } + } + ] +} diff --git a/scenes/fuzzScene/index.ts b/scenes/fuzzScene/index.ts new file mode 100644 index 0000000..ea96f4a --- /dev/null +++ b/scenes/fuzzScene/index.ts @@ -0,0 +1,8 @@ +import { useScene } from "#/engine/Scene.ts"; +import data from "./data.json"; + +const { process, linkScenes } = useScene(data); + +linkScenes(["testScene"] as const); + +process((_ctx, _delta) => {}); diff --git a/scenes/testScene/index.ts b/scenes/testScene/index.ts index 88fba78..f2a8c4d 100644 --- a/scenes/testScene/index.ts +++ b/scenes/testScene/index.ts @@ -3,6 +3,6 @@ import data from "./data.json"; const { process, linkScenes } = useScene(data); -linkScenes(["fooScene", "barScene"] as const); +linkScenes(["fooScene", "fuzzScene"] as const); process((_ctx, _delta) => {});