A Spatial AI System for Pattern-Based Workflows
What I Built
AngleCore (powered by ENGO Core) is a spatial interface for constructing and interpreting AI workflows through patterns instead of prompts.
Most AI systems today rely on text input. This creates a bottleneck:
- Users must translate intent into language
- Language becomes ambiguous
- Systems respond inconsistently
AngleCore removes that layer.
Instead of writing prompts, users construct workflows visually using nodes that represent fundamental computational roles:
- Input
- Process
- Branch
- Memory
- Agent
- Output
By interacting with these nodes in a spatial environment, users generate structured intent patterns that can be interpreted and extended by AI.
This turns workflow design into something:
- Visual
- Iterative
- Reusable
At its core, ENGO Core acts as the pattern engine behind this system, allowing workflows to be:
- Captured
- Interpreted
- Replayed
- Shared as templates
How I Used OpenClaw
OpenClaw was used as the execution and interpretation backbone of AngleCore.
Rather than using AI as a direct output generator, I integrated OpenClaw as a pattern interpreter.
1. Pattern Construction Layer
Users create a sequence of nodes:
INPUT → PROCESS → BRANCH → OUTPUT
Each node carries semantic meaning. The sequence itself becomes a structured representation of intent.
2. Pattern Translation (OpenClaw Integration)
When a pattern is created, it is transformed into a structured instruction:
Pattern sequence: INPUT → PROCESS → BRANCH → OUTPUT
Tasks:
1. Interpret workflow intent
2. Name the workflow
3. Suggest next node
4. Evaluate coherence
OpenClaw processes this structure and returns:
- Workflow interpretation
- Suggested continuation
- Structural evaluation
This is where OpenClaw shifts from being a tool to being a reasoning layer.
3. Structured Output Layer
The system enforces structured responses:
- JSON-based interpretation
- Named workflows
- Coherence scoring
This ensures that outputs are not just readable — they are system-compatible and reusable.
4. Workflow as Reusable Units
Each interpreted pattern becomes:
- A template
- A reusable workflow
- A potential automation unit
ENGO Core is designed to evolve these patterns into:
- Executable pipelines
- AI-assisted decision flows
- Shareable system components
Demo
Core Interaction Flow:
- Spawn nodes in the spatial field
- Connect nodes through interaction
- Build a traversal pattern
- Trigger interpretation
- Receive structured workflow analysis
What You See:
- Dynamic node system
- Pattern trails
- Real-time interaction feedback
- AI interpretation panel
(Video demo or live link recommended here)
What I Learned
1. AI is not limited by capability — it is limited by structure
The biggest realization was that most AI limitations are not model-based.
They are input design problems.
By introducing structured patterning, output quality becomes significantly more consistent.
2. Visual systems reduce cognitive load
Constructing workflows spatially:
- Reduces ambiguity
- Improves iteration speed
- Makes complex logic easier to reason about
3. OpenClaw works best as an interpreter, not just a generator
Using OpenClaw to:
- Evaluate
- Extend
- Validate
…is far more powerful than using it to simply generate text.
4. Workflows can become assets
Patterns are not just temporary interactions.
They can be:
- Stored
- Reused
- Shared
- Expanded
This introduces the idea of workflow ecosystems, not just applications.
ClawCon Michigan
Not attended.
Closing Note
AngleCore is an early exploration of a broader idea:
AI systems should not rely on better prompts.
They should rely on better patterns.
ENGO Core is the foundation for making that possible.
This is a submission for the OpenClaw Writing Challenge
The Problem With Modern AI Interfaces
We are not lacking intelligence.
We are lacking structure.
Most AI systems today operate on a simple loop:
Input → Interpretation → Output
The assumption is that better prompts lead to better outputs.
In reality:
- Prompts are inconsistent
- Interpretations vary
- Outputs are unpredictable
The issue is not the AI.
The issue is the interface layer between humans and AI systems.
OpenClaw and the Shift Toward Structured Interaction
OpenClaw introduces something important:
It allows developers to move beyond raw prompting and into designed workflows.
Instead of asking:
“What should I say to get the right result?”
We start asking:
“What structure produces consistent results?”
This is a fundamental shift.
From Prompts to Patterns
A prompt is a one-time instruction.
A pattern is:
- Repeatable
- Structured
- Interpretable
In systems like AngleCore (built using OpenClaw as the reasoning layer), patterns are constructed through:
- Node relationships
- Sequential logic
- Decision pathways
Example:
INPUT → PROCESS → BRANCH → OUTPUT
This is not a prompt.
It is a workflow definition.
Why Patterns Matter
Patterns introduce:
1. Consistency
The same structure produces predictable results.
2. Reusability
Patterns can be stored and reused across contexts.
3. Scalability
Systems can evolve by combining patterns instead of rewriting prompts.
4. Interpretability
AI can reason about structure more effectively than free-form language.
Tutorials as Executable Systems
One of the most overlooked opportunities is how we treat knowledge.
Today:
- Tutorials are static
- Documentation is passive
In a pattern-based system:
- Tutorials become workflows
- Workflows become templates
- Templates become executable units
With OpenClaw:
- A tutorial can act like an agent
- It can guide, adapt, and respond
- It becomes part of a living system
The Emergence of Workflow Ecosystems
When patterns are:
- Created
- Shared
- Interpreted
You don’t just get tools.
You get an ecosystem:
- Users contribute workflows
- Workflows evolve into systems
- Systems interact with each other
This is where AI moves from:
- Tool → Platform
- Platform → Ecosystem
A Personal Take
The most important realization for me while building with OpenClaw was this:
The bottleneck is no longer computation.
The bottleneck is how we define intent.
Once intent is structured properly:
- AI becomes predictable
- Systems become scalable
- Workflows become composable
Final Thought
We don’t need better prompts.
We need:
- Better structure
- Better patterning
- Better ways of interacting with intelligence
OpenClaw doesn’t just improve AI workflows.
It opens the door to redefining how those workflows are created in the first place.
ClawCon Michigan
Not attended.
Closing
The next generation of AI systems will not be built on prompts.
They will be built on patterns.
And the teams that understand that early will define how these systems evolve.
“How I Used OpenClaw”
System Architecture Overview
┌──────────────┐
│ USER INPUT │
│ (Spatial UI) │
└──────┬───────┘
↓
┌────────────────────┐
│ PATTERN BUILDER │
│ (Node Sequences) │
└──────┬─────────────┘
↓
┌────────────────────┐
│ PATTERN TRANSLATOR │
│ (Structured Prompt)│
└──────┬─────────────┘
↓
┌────────────────────┐
│ OPENCLAW AI │
│ (Interpretation) │
└──────┬─────────────┘
↓
┌────────────────────┐
│ STRUCTURED OUTPUT │
│ (Workflow Insight) │
└────────────────────┘
This shows:
- You’re not using AI directly
- You built a layered system around it
Spatial Pattern Construction
[INPUT]
↓
[PROCESS] ──→ [MEMORY]
↓ ↓
[BRANCH] ─────→ [AGENT]
↓
[OUTPUT]
This represents:
- Non-linear thinking
- Multi-path workflows
- Real system logic (not linear prompts)
Pattern → AI Translation
Visual Pattern:
INPUT → PROCESS → BRANCH → OUTPUT
↓ Translated into ↓
Structured Instruction:
{
"steps": [
"INPUT",
"PROCESS",
"BRANCH",
"OUTPUT"
],
"tasks": [
"interpret",
"name",
"extend",
"evaluate"
]
}
This is your core innovation visualized
Interaction Loop
[User Builds Pattern]
↓
[System Structures Intent]
↓
[OpenClaw Interprets]
↓
[User Refines Pattern]
↺
This shows:
- Iteration loop
- Learning system
- Not one-shot prompting
ADD THIS TO PART 2 (Writing Post)
Place under “From Prompts to Patterns”
Prompt-Based System (Old Model)
User Thought
↓
Text Prompt
↓
AI Guess
↓
Output (Unstable)
Problems:
- Ambiguity
- Inconsistency
- No structure
Pattern-Based System (Your Model)
User Intent
↓
Pattern Structure
↓
AI Interpretation
↓
Structured Output
Benefits:
- Clarity
- Repeatability
- Scalability
Prompt vs Pattern (Side-by-Side)
PROMPT SYSTEM PATTERN SYSTEM
────────────── ──────────────
"Write code for X" INPUT → PROCESS → OUTPUT
↓ ↓
Ambiguous intent Structured intent
↓ ↓
Unpredictable output Interpretable workflow
↓ ↓
Hard to reuse Easily reusable
This one hits HARD. Keep it.
Knowledge Evolution Model
Tutorial (Static)
↓
Pattern (Structured)
↓
Template (Reusable)
↓
Agent (Executable)
This connects directly to your idea:
“Tutorials become agents”
Ecosystem Vision
User A → Creates Pattern
↓
Stored as Template
↓
User B → Reuses + Modifies
↓
AI → Enhances Pattern
↓
System → Evolves
This shows:
- Network effects
- Platform thinking
- Why this scales
Final Touch (Optional but Powerful)
At the VERY end of Part 2, add this:
The Shift
Past: Interface → Tool → Output
Now: Interface → Pattern → Intelligence
Next: Pattern → Ecosystem → Autonomous Systems
AngleCore — Spatial AI as an Interface
A formal tutorial and system introduction aligned with the OpenClaw model of building through structured, composable intelligence.
1. What AngleCore Is Actually Doing
AngleCore is not a visualization tool. It is a spatial programming interface.
The HTML system you built is effectively a runtime environment where thought becomes structure, and structure becomes a prompt.
Instead of writing linear instructions, the user constructs node sequences in space. That sequence is then transformed into a machine-interpretable workflow.
At its core, AngleCore operates on three principles:
Spatial Encoding of Intent
Position, order, and interaction replace syntax.Pattern as Prompt
A sequence of nodes becomes a structured instruction set.Interpretation as Execution Layer
The AI does not execute code directly — it interprets structure and proposes meaning.
This is the shift:
from writing commands → to drawing intelligence paths.
2. System Architecture (What’s Actually Happening Under the Hood)
The HTML file defines a full client-side system composed of five tightly coupled layers.
2.1 Field Layer — The Spatial Substrate
The dual canvas system:
bg-canvas→ static spatial grid (polar + radial logic)
main-canvas→ dynamic node simulation
This is not aesthetic. The polar grid establishes:
- radial symmetry (decision branching)
- circular recursion (feedback loops)
- spatial anchoring (center = origin of logic)
This turns the screen into a coordinate system for reasoning.
2.2 Node System — Semantic Primitives
Each node is not just a visual object. It is a typed unit of computation intent.
Defined types:
- INPUT
- PROCESS
- OUTPUT
- BRANCH
- MEMORY
- AGENT
Each node contains:
- identity (
id) - semantic role (
type) - behavior (
velocity,interaction states) - visual encoding (
polygon sides,glyphs) - pattern metadata (
inPattern,patternOrder)
This is effectively a graph-based DSL without text.
2.3 Interaction Layer — Pattern Construction
User interaction creates meaning through:
- Click → focus + implicit inclusion in pattern
- Shift + Click → explicit pattern building
- Right-click → structural manipulation (node spawning, clustering)
The critical structure:
pattern = [N001, N004, N002, ...]
This array is the core data product of the system.
Everything else is scaffolding.
2.4 Graph Dynamics — Emergent Structure
The system uses lightweight physics:
- node repulsion
- boundary constraints
- velocity damping
- cluster generation
This does two things:
- Prevents visual collapse
- Encourages emergent topology
Meaning is not just clicked — it forms organically.
2.5 AI Interpretation Layer — OpenClaw Integration
This is where the system aligns directly with the OpenClaw philosophy.
The pattern is transformed into a structured prompt:
Step 1: Node N001 [INPUT]
Step 2: Node N004 [PROCESS]
Step 3: Node N002 [OUTPUT]
Pattern: INPUT → PROCESS → OUTPUT
Then sent to an AI model.
The AI returns:
- workflow name
- interpretation
- next node suggestion
- coherence score
- insight
This is not execution. It is semantic compilation.
AngleCore does not run workflows —
it discovers them.
3. Why This Is Not Just Another Node Editor
Most node-based systems:
- are deterministic
- require predefined logic
- operate as visual wrappers for code
AngleCore breaks that model:
| Traditional Systems | AngleCore |
|---|---|
| Nodes execute logic | Nodes represent intent |
| Graph defines output | Graph is interpreted |
| Static workflows | Emergent workflows |
| Developer-defined meaning | AI-inferred meaning |
This is closer to:
- cognitive mapping
- symbolic reasoning
- proto-agent orchestration
4. OpenClaw Alignment — Where This Fits
OpenClaw is fundamentally about:
- composability
- modular intelligence
- structured workflows
- interpretable systems
AngleCore uses OpenClaw not as a backend tool, but as a philosophical layer:
- The node pattern = a composable unit
- The structured prompt = a portable workflow
- The interpretation = a reusable insight object
This makes AngleCore:
an interface for generating OpenClaw-compatible workflows without writing them manually
5. Build Use Cases (Real, Not Hypothetical)
5.1 Workflow Discovery Engine
Users map out processes visually, and the system names and formalizes them.
5.2 AI System Design Interface
Instead of writing pipelines, users draw agent interactions.
5.3 Cognitive Debugging Tool
Patterns reveal:
- missing steps
- redundant loops
- broken logic chains
5.4 Data Flow Prototyping
Clearing agents, analysts, or operators can simulate:
- input → validation → processing → output chains
without writing a single script.
6. The Innovation Layer (Why This Matters)
There are three non-obvious innovations in this system.
6.1 Pattern → Prompt Conversion
This is the real breakthrough.
You are not prompting AI directly.
You are constructing prompts through interaction.
That unlocks:
- non-technical users
- visual reasoning
- system-level thinking
6.2 Semantic Nodes Instead of Functional Nodes
Nodes don’t execute.
They represent intent categories.
That allows:
- abstraction
- flexibility
- reinterpretation across contexts
6.3 AI as an Interpreter, Not an Executor
Most systems use AI to:
- generate
- automate
- predict
AngleCore uses AI to:
- understand structure
- assign meaning
- suggest evolution
This is closer to:
AI as a reasoning partner, not a tool
7. Tutorial — How to Actually Use It
Step 1: Spawn Nodes
Use the spawn button or right-click to create nodes.
Step 2: Build a Pattern
Click nodes in sequence.
Use Shift + Click for controlled pattern construction.
Step 3: Observe the Chain
The system displays:
INPUT → PROCESS → OUTPUT
This is your implicit workflow.
Step 4: Interpret
Click “Interpret Pattern”.
The system:
- builds a structured prompt
- sends it to the AI
- returns a semantic breakdown
Step 5: Iterate
Add nodes, branch paths, test variations.
You are not building code.
You are exploring possibility space.
8. What This Means Going Forward
AngleCore is an early form of something larger:
- spatial programming environments
- AI-native interfaces
- intent-driven system design
If extended, this becomes:
- multi-agent orchestration layer
- real-time workflow compiler
- visual language for AI systems
9. Final Positioning
AngleCore is not a product yet.
It is a new interaction model:
A system where users don’t write workflows —
they trace them, and AI makes them legible.
That aligns directly with the direction OpenClaw is pushing:
- less syntax
- more structure
- composable intelligence
10. ClawCon Michigan
Not attended. Focus remained on building and formalizing the system architecture.
This is Phase I.
What matters is not the interface —
it’s the idea that interaction itself can be compiled into intelligence.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AngleCore — Spatial AI System</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;800&family=Space+Mono:wght@400;700&display=swap');
:root {
--void: #02040a;
--deep: #060b14;
--field: #0a1120;
--grid: rgba(30,80,160,0.12);
--node-idle: rgba(20,60,140,0.7);
--node-hover: rgba(40,120,255,0.9);
--node-focus: rgba(80,200,255,1);
--node-active: rgba(0,255,180,1);
--edge: rgba(40,100,200,0.3);
--edge-hot: rgba(0,220,180,0.7);
--text-dim: rgba(100,160,255,0.5);
--text-bright: rgba(180,220,255,0.95);
--text-gold: rgba(255,200,80,0.9);
--accent: rgba(0,255,180,0.8);
--danger: rgba(255,60,80,0.8);
--glow: 0 0 20px rgba(40,120,255,0.4);
--glow-hot: 0 0 40px rgba(0,255,180,0.6);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
background: var(--void);
font-family: 'Space Mono', monospace;
color: var(--text-bright);
overflow: hidden;
height: 100vh;
width: 100vw;
cursor: crosshair;
user-select: none;
}
#field {
position: absolute;
inset: 0;
overflow: hidden;
}
#bg-canvas {
position: absolute;
inset: 0;
opacity: 0.6;
}
#main-canvas {
position: absolute;
inset: 0;
}
/* HUD */
#hud {
position: absolute;
top: 0; left: 0; right: 0;
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: 20px 28px;
pointer-events: none;
z-index: 10;
}
#logo {
font-family: 'Syne', sans-serif;
font-weight: 800;
font-size: 22px;
letter-spacing: 4px;
color: var(--text-bright);
text-transform: uppercase;
pointer-events: auto;
}
#logo span {
color: var(--accent);
}
#phase-badge {
font-size: 9px;
letter-spacing: 3px;
color: var(--text-dim);
margin-top: 4px;
text-transform: uppercase;
}
#status-bar {
text-align: right;
font-size: 10px;
color: var(--text-dim);
letter-spacing: 1px;
line-height: 1.8;
}
#status-bar .val {
color: var(--accent);
}
/* Pattern trail display */
#pattern-display {
position: absolute;
bottom: 20px;
left: 28px;
right: 28px;
display: flex;
align-items: flex-end;
gap: 0;
pointer-events: none;
z-index: 10;
}
#pattern-chain {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
flex: 1;
}
.pattern-node-badge {
font-size: 9px;
letter-spacing: 2px;
padding: 3px 8px;
border: 1px solid rgba(0,255,180,0.3);
color: var(--accent);
background: rgba(0,255,180,0.05);
font-family: 'Space Mono', monospace;
transition: all 0.3s;
}
.pattern-arrow {
color: var(--text-dim);
font-size: 9px;
}
/* AI Response Panel */
#ai-panel {
position: absolute;
right: 28px;
top: 50%;
transform: translateY(-50%);
width: 300px;
background: rgba(6,11,20,0.95);
border: 1px solid rgba(40,100,200,0.3);
border-left: 2px solid var(--accent);
padding: 20px;
z-index: 20;
display: none;
box-shadow: -10px 0 60px rgba(0,0,0,0.8), inset 0 0 40px rgba(0,20,60,0.5);
max-height: 70vh;
overflow-y: auto;
}
#ai-panel.visible {
display: block;
animation: slideIn 0.3s ease;
}
@keyframes slideIn {
from { opacity: 0; transform: translateY(-50%) translateX(20px); }
to { opacity: 1; transform: translateY(-50%) translateX(0); }
}
#ai-panel-header {
font-family: 'Syne', sans-serif;
font-size: 10px;
letter-spacing: 3px;
color: var(--text-dim);
text-transform: uppercase;
margin-bottom: 12px;
display: flex;
justify-content: space-between;
align-items: center;
}
#ai-panel-close {
cursor: pointer;
color: var(--text-dim);
font-size: 14px;
pointer-events: auto;
transition: color 0.2s;
}
#ai-panel-close:hover { color: var(--danger); }
#ai-response-text {
font-size: 11px;
line-height: 1.8;
color: var(--text-bright);
white-space: pre-wrap;
}
#ai-response-text .thinking {
color: var(--text-dim);
font-style: italic;
}
#ai-prompt-preview {
margin-top: 16px;
padding: 10px;
background: rgba(0,30,80,0.5);
border-left: 2px solid rgba(40,100,200,0.4);
font-size: 9px;
color: var(--text-dim);
line-height: 1.6;
}
/* Context menu */
#context-menu {
position: absolute;
background: rgba(6,11,20,0.97);
border: 1px solid rgba(40,100,200,0.4);
padding: 6px 0;
z-index: 30;
display: none;
min-width: 160px;
box-shadow: 0 10px 40px rgba(0,0,0,0.8);
}
#context-menu.visible { display: block; }
.ctx-item {
padding: 7px 16px;
font-size: 10px;
letter-spacing: 1px;
color: var(--text-dim);
cursor: pointer;
transition: all 0.15s;
}
.ctx-item:hover {
background: rgba(0,255,180,0.08);
color: var(--accent);
}
.ctx-divider {
height: 1px;
background: rgba(40,100,200,0.2);
margin: 4px 0;
}
/* Node label tooltip */
#node-tooltip {
position: absolute;
background: rgba(6,11,20,0.95);
border: 1px solid rgba(40,100,200,0.3);
padding: 6px 12px;
font-size: 9px;
letter-spacing: 2px;
color: var(--text-bright);
pointer-events: none;
z-index: 25;
display: none;
text-transform: uppercase;
}
/* Spawn button */
#spawn-btn {
position: absolute;
bottom: 70px;
right: 28px;
background: transparent;
border: 1px solid rgba(0,255,180,0.4);
color: var(--accent);
font-family: 'Space Mono', monospace;
font-size: 9px;
letter-spacing: 3px;
padding: 10px 18px;
cursor: pointer;
z-index: 10;
transition: all 0.2s;
text-transform: uppercase;
}
#spawn-btn:hover {
background: rgba(0,255,180,0.1);
box-shadow: 0 0 20px rgba(0,255,180,0.3);
}
#interpret-btn {
position: absolute;
bottom: 110px;
right: 28px;
background: transparent;
border: 1px solid rgba(40,120,255,0.4);
color: rgba(140,180,255,0.9);
font-family: 'Space Mono', monospace;
font-size: 9px;
letter-spacing: 3px;
padding: 10px 18px;
cursor: pointer;
z-index: 10;
transition: all 0.2s;
text-transform: uppercase;
display: none;
}
#interpret-btn.visible { display: block; }
#interpret-btn:hover {
background: rgba(40,120,255,0.1);
box-shadow: 0 0 20px rgba(40,120,255,0.3);
}
#interpret-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
#clear-btn {
position: absolute;
bottom: 20px;
right: 28px;
background: transparent;
border: 1px solid rgba(255,60,80,0.2);
color: rgba(255,60,80,0.5);
font-family: 'Space Mono', monospace;
font-size: 9px;
letter-spacing: 3px;
padding: 8px 14px;
cursor: pointer;
z-index: 10;
transition: all 0.2s;
text-transform: uppercase;
}
#clear-btn:hover {
border-color: rgba(255,60,80,0.5);
color: rgba(255,60,80,0.9);
background: rgba(255,60,80,0.05);
}
#loading-overlay {
position: absolute;
inset: 0;
background: rgba(2,4,10,0.85);
z-index: 50;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
}
#loading-overlay.hidden { display: none; }
.loading-ring {
width: 48px;
height: 48px;
border: 2px solid rgba(40,120,255,0.2);
border-top-color: var(--accent);
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-text {
font-size: 9px;
letter-spacing: 4px;
color: var(--text-dim);
text-transform: uppercase;
}
/* Scrollbar */
#ai-panel::-webkit-scrollbar { width: 3px; }
#ai-panel::-webkit-scrollbar-track { background: transparent; }
#ai-panel::-webkit-scrollbar-thumb { background: rgba(40,100,200,0.3); }
</style>
</head>
<body>
<div id="field">
<canvas id="bg-canvas"></canvas>
<canvas id="main-canvas"></canvas>
</div>
<div id="hud">
<div>
<div id="logo">Angle<span>Core</span></div>
<div id="phase-badge">Spatial AI System · Phase I</div>
</div>
<div id="status-bar">
NODES: <span class="val" id="stat-nodes">0</span>
PATTERN: <span class="val" id="stat-pattern">—</span><br>
FOCUS: <span class="val" id="stat-focus">NONE</span>
FIELD: <span class="val" id="stat-field">OPEN</span>
</div>
</div>
<div id="pattern-display">
<div id="pattern-chain"></div>
</div>
<div id="ai-panel">
<div id="ai-panel-header">
<span>AI Interpretation</span>
<span id="ai-panel-close">✕</span>
</div>
<div id="ai-response-text"></div>
<div id="ai-prompt-preview"></div>
</div>
<div id="context-menu">
<div class="ctx-item" id="ctx-add-node">＋ Spawn Node Here</div>
<div class="ctx-item" id="ctx-add-cluster">⬡ Spawn Cluster</div>
<div class="ctx-divider"></div>
<div class="ctx-item" id="ctx-clear-pattern">◎ Clear Pattern</div>
<div class="ctx-item" id="ctx-reset-field">↺ Reset Field</div>
</div>
<div id="node-tooltip"></div>
<button id="spawn-btn">⊕ Spawn Node</button>
<button id="interpret-btn" class="visible">◈ Interpret Pattern</button>
<button id="clear-btn">✕ Clear</button>
<div id="loading-overlay" class="hidden">
<div class="loading-ring"></div>
<div class="loading-text">Interpreting Pattern</div>
</div>
<script>
// ============================================================
// ANGLECORE — Spatial AI System — Phase I
// ============================================================
const bgCanvas = document.getElementById('bg-canvas');
const mainCanvas = document.getElementById('main-canvas');
const bgCtx = bgCanvas.getContext('2d');
const ctx = mainCanvas.getContext('2d');
// State
let W, H, cx, cy;
let nodes = [];
let edges = [];
let pattern = []; // sequence of clicked node ids
let focusedNode = null;
let hoveredNode = null;
let mouseX = 0, mouseY = 0;
let panX = 0, panY = 0;
let isPanning = false;
let panStartX, panStartY;
let zoom = 1;
let frameCount = 0;
let contextMenuOpen = false;
let contextX = 0, contextY = 0;
const NODE_TYPES = [
{ label: 'INPUT', color: '#1e6aff', glyph: '▷', sides: 3 },
{ label: 'PROCESS', color: '#00ffd4', glyph: '◈', sides: 6 },
{ label: 'OUTPUT', color: '#ffb800', glyph: '◉', sides: 4 },
{ label: 'BRANCH', color: '#ff3c64', glyph: '⬡', sides: 5 },
{ label: 'MEMORY', color: '#9b6fff', glyph: '∿', sides: 8 },
{ label: 'AGENT', color: '#00ff9d', glyph: '⊛', sides: 7 },
];
// ---- Resize ----
function resize() {
W = window.innerWidth; H = window.innerHeight;
cx = W/2; cy = H/2;
bgCanvas.width = mainCanvas.width = W;
bgCanvas.height = mainCanvas.height = H;
drawBackground();
}
// ---- Background: polar grid ----
function drawBackground() {
bgCtx.clearRect(0,0,W,H);
// Deep void gradient
const grad = bgCtx.createRadialGradient(cx,cy,0, cx,cy, Math.max(W,H)*0.7);
grad.addColorStop(0, 'rgba(8,18,40,1)');
grad.addColorStop(0.5, 'rgba(4,10,22,1)');
grad.addColorStop(1, 'rgba(2,4,10,1)');
bgCtx.fillStyle = grad;
bgCtx.fillRect(0,0,W,H);
// Polar rings
bgCtx.strokeStyle = 'rgba(20,60,160,0.12)';
bgCtx.lineWidth = 1;
for (let r = 80; r < Math.max(W,H); r += 80) {
bgCtx.beginPath();
bgCtx.arc(cx, cy, r, 0, Math.PI*2);
bgCtx.stroke();
}
// Radial spokes every 30deg
bgCtx.strokeStyle = 'rgba(20,60,160,0.08)';
for (let a = 0; a < 360; a += 30) {
const rad = a * Math.PI/180;
bgCtx.beginPath();
bgCtx.moveTo(cx, cy);
bgCtx.lineTo(cx + Math.cos(rad)*Math.max(W,H), cy + Math.sin(rad)*Math.max(W,H));
bgCtx.stroke();
}
// Fine grid
bgCtx.strokeStyle = 'rgba(20,60,160,0.06)';
bgCtx.lineWidth = 0.5;
for (let x = 0; x < W; x += 40) {
bgCtx.beginPath(); bgCtx.moveTo(x,0); bgCtx.lineTo(x,H); bgCtx.stroke();
}
for (let y = 0; y < H; y += 40) {
bgCtx.beginPath(); bgCtx.moveTo(0,y); bgCtx.lineTo(W,y); bgCtx.stroke();
}
// Center origin marker
bgCtx.strokeStyle = 'rgba(0,255,180,0.25)';
bgCtx.lineWidth = 1;
bgCtx.beginPath();
bgCtx.arc(cx, cy, 6, 0, Math.PI*2);
bgCtx.stroke();
bgCtx.beginPath();
bgCtx.moveTo(cx-14,cy); bgCtx.lineTo(cx+14,cy);
bgCtx.moveTo(cx,cy-14); bgCtx.lineTo(cx,cy+14);
bgCtx.stroke();
}
// ---- Node Factory ----
let nodeCounter = 0;
function createNode(x, y, typeIndex) {
const t = typeIndex !== undefined ? typeIndex : Math.floor(Math.random()*NODE_TYPES.length);
const type = NODE_TYPES[t];
const id = 'N' + (++nodeCounter).toString().padStart(3,'0');
return {
id,
x, y,
vx: (Math.random()-0.5)*0.3,
vy: (Math.random()-0.5)*0.3,
baseRadius: 22 + Math.random()*10,
radius: 22 + Math.random()*10,
type,
state: 'idle', // idle | hover | focused
angle: Math.random()*Math.PI*2,
angleSpeed: (Math.random()-0.5)*0.008,
pulsePhase: Math.random()*Math.PI*2,
inPattern: false,
patternOrder: -1,
weight: 1,
cluster: null,
spawnTime: Date.now(),
opacity: 0,
};
}
function spawnCluster(ox, oy) {
const count = 4 + Math.floor(Math.random()*4);
const clusterNodes = [];
for (let i = 0; i < count; i++) {
const a = (i/count)*Math.PI*2;
const r = 90 + Math.random()*40;
const n = createNode(ox + Math.cos(a)*r, oy + Math.sin(a)*r);
n.cluster = 'C' + nodeCounter;
clusterNodes.push(n);
nodes.push(n);
}
// Create edges within cluster
for (let i = 0; i < clusterNodes.length-1; i++) {
edges.push({ from: clusterNodes[i].id, to: clusterNodes[i+1].id, hot: false });
}
}
// ---- Draw Polygon Node ----
function drawPolygon(ctx, x, y, r, sides, angle) {
ctx.beginPath();
for (let i = 0; i < sides; i++) {
const a = angle + (i/sides)*Math.PI*2;
const px = x + Math.cos(a)*r;
const py = y + Math.sin(a)*r;
i === 0 ? ctx.moveTo(px,py) : ctx.lineTo(px,py);
}
ctx.closePath();
}
// ---- Draw a single node ----
function drawNode(node) {
if (node.opacity <= 0) return;
ctx.save();
ctx.globalAlpha = node.opacity;
const { x, y, radius, type, state, angle, pulsePhase } = node;
const pulse = 1 + 0.04 * Math.sin(frameCount*0.04 + pulsePhase);
const r = radius * pulse;
// Outer glow ring
if (state === 'focused' || state === 'hover') {
const glowR = r * (state === 'focused' ? 2.8 : 1.8);
const glow = ctx.createRadialGradient(x,y,r*0.5, x,y,glowR);
const glowColor = state === 'focused' ? type.color : type.color;
glow.addColorStop(0, hexToRgba(glowColor, state === 'focused' ? 0.25 : 0.12));
glow.addColorStop(1, hexToRgba(glowColor, 0));
ctx.fillStyle = glow;
ctx.beginPath(); ctx.arc(x,y,glowR,0,Math.PI*2); ctx.fill();
}
// In-pattern pulse ring
if (node.inPattern) {
ctx.strokeStyle = 'rgba(0,255,180,0.5)';
ctx.lineWidth = 1.5;
ctx.setLineDash([4,6]);
ctx.beginPath();
ctx.arc(x, y, r + 10 + 4*Math.sin(frameCount*0.06 + pulsePhase), 0, Math.PI*2);
ctx.stroke();
ctx.setLineDash([]);
}
// Node body
const bodyGrad = ctx.createRadialGradient(x-r*0.3, y-r*0.3, 0, x, y, r*1.2);
bodyGrad.addColorStop(0, hexToRgba(type.color, 0.35));
bodyGrad.addColorStop(0.6, hexToRgba(type.color, 0.15));
bodyGrad.addColorStop(1, hexToRgba(type.color, 0.05));
ctx.fillStyle = bodyGrad;
drawPolygon(ctx, x, y, r, type.sides, angle);
ctx.fill();
// Node border
ctx.strokeStyle = hexToRgba(type.color, state === 'idle' ? 0.5 : 0.9);
ctx.lineWidth = state === 'focused' ? 2 : 1.2;
drawPolygon(ctx, x, y, r, type.sides, angle);
ctx.stroke();
// Inner detail ring
ctx.strokeStyle = hexToRgba(type.color, 0.2);
ctx.lineWidth = 0.5;
drawPolygon(ctx, x, y, r*0.65, type.sides, angle + Math.PI/type.sides);
ctx.stroke();
// Glyph
ctx.font = `${Math.floor(r*0.65)}px Space Mono`;
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillStyle = hexToRgba(type.color, state === 'idle' ? 0.7 : 1);
ctx.fillText(type.glyph, x, y);
// ID label (only on hover/focus)
if (state !== 'idle') {
ctx.font = '8px Space Mono';
ctx.fillStyle = hexToRgba(type.color, 0.8);
ctx.fillText(node.id, x, y + r + 14);
ctx.font = '7px Space Mono';
ctx.fillStyle = 'rgba(100,160,255,0.5)';
ctx.fillText(type.label, x, y + r + 24);
}
// Pattern order badge
if (node.inPattern && node.patternOrder >= 0) {
const bx = x + r*0.7, by = y - r*0.7;
ctx.fillStyle = 'rgba(0,255,180,0.9)';
ctx.beginPath(); ctx.arc(bx,by,8,0,Math.PI*2); ctx.fill();
ctx.font = 'bold 8px Space Mono';
ctx.fillStyle = '#000';
ctx.fillText(node.patternOrder+1, bx, by);
}
ctx.restore();
}
// ---- Draw edge ----
function drawEdge(edge) {
const a = nodes.find(n=>n.id===edge.from);
const b = nodes.find(n=>n.id===edge.to);
if (!a||!b) return;
const dx = b.x-a.x, dy = b.y-a.y;
const dist = Math.sqrt(dx*dx+dy*dy);
if (dist < 1) return;
ctx.save();
ctx.globalAlpha = 0.6;
if (edge.hot) {
ctx.strokeStyle = 'rgba(0,255,180,0.6)';
ctx.lineWidth = 1.5;
ctx.shadowColor = 'rgba(0,255,180,0.4)';
ctx.shadowBlur = 8;
} else {
ctx.strokeStyle = 'rgba(40,100,200,0.25)';
ctx.lineWidth = 0.8;
}
// Curved edge with midpoint offset
const mx = (a.x+b.x)/2 + dy*0.15;
const my = (a.y+b.y)/2 - dx*0.15;
ctx.beginPath();
ctx.moveTo(a.x, a.y);
ctx.quadraticCurveTo(mx, my, b.x, b.y);
ctx.stroke();
// Arrow head
if (edge.hot) {
const t = 0.75;
const qx = (1-t)*(1-t)*a.x + 2*(1-t)*t*mx + t*t*b.x;
const qy = (1-t)*(1-t)*a.y + 2*(1-t)*t*my + t*t*b.y;
const ex = b.x, ey = b.y;
const ang = Math.atan2(ey-qy, ex-qx);
const hs = 8;
ctx.beginPath();
ctx.moveTo(ex, ey);
ctx.lineTo(ex-Math.cos(ang-0.4)*hs, ey-Math.sin(ang-0.4)*hs);
ctx.lineTo(ex-Math.cos(ang+0.4)*hs, ey-Math.sin(ang+0.4)*hs);
ctx.closePath();
ctx.fillStyle = 'rgba(0,255,180,0.7)';
ctx.fill();
}
ctx.restore();
}
// ---- Draw pattern trail ----
function drawPatternTrail() {
if (pattern.length < 2) return;
ctx.save();
for (let i = 0; i < pattern.length-1; i++) {
const a = nodes.find(n=>n.id===pattern[i]);
const b = nodes.find(n=>n.id===pattern[i+1]);
if (!a||!b) continue;
const prog = i/(pattern.length-1);
const alpha = 0.4 + 0.4*prog;
ctx.strokeStyle = `rgba(0,255,180,${alpha})`;
ctx.lineWidth = 2 - prog;
ctx.setLineDash([5,8]);
ctx.shadowColor = 'rgba(0,255,180,0.3)';
ctx.shadowBlur = 6;
ctx.beginPath();
ctx.moveTo(a.x, a.y);
ctx.lineTo(b.x, b.y);
ctx.stroke();
ctx.setLineDash([]);
}
ctx.restore();
}
// ---- Main render loop ----
function render() {
ctx.clearRect(0,0,W,H);
frameCount++;
// Physics
for (const node of nodes) {
// Fade in
node.opacity = Math.min(1, node.opacity + 0.04);
// Rotate
node.angle += node.angleSpeed;
// Gentle float
node.x += node.vx;
node.y += node.vy;
// Boundary repulsion
const margin = 60;
if (node.x < margin) node.vx += 0.08;
if (node.x > W-margin) node.vx -= 0.08;
if (node.y < margin) node.vy += 0.08;
if (node.y > H-margin) node.vy -= 0.08;
// Damping
node.vx *= 0.98;
node.vy *= 0.98;
// Node-node repulsion
for (const other of nodes) {
if (other.id === node.id) continue;
const dx = node.x - other.x;
const dy = node.y - other.y;
const d = Math.sqrt(dx*dx+dy*dy);
const minD = node.radius + other.radius + 30;
if (d < minD && d > 0.5) {
const f = (minD-d)/minD * 0.15;
node.vx += (dx/d)*f;
node.vy += (dy/d)*f;
}
}
// Mouse proximity
const mdx = mouseX - node.x;
const mdy = mouseY - node.y;
const md = Math.sqrt(mdx*mdx+mdy*mdy);
const expandZone = 100;
if (md < expandZone) {
node.radius = node.baseRadius + (expandZone-md)/expandZone * 12;
node.state = md < 30 ? 'hover' : 'idle';
} else {
node.radius = node.baseRadius + (node.state === 'focused' ? 8 : 0);
if (node.state !== 'focused') node.state = 'idle';
}
}
// Determine hovered node
hoveredNode = null;
let minDist = 999;
for (const node of nodes) {
const d = Math.sqrt((mouseX-node.x)**2+(mouseY-node.y)**2);
if (d < node.radius+8 && d < minDist) {
minDist = d;
hoveredNode = node;
}
}
// Draw pattern trail
drawPatternTrail();
// Draw edges
for (const edge of edges) drawEdge(edge);
// Draw nodes
const sorted = [...nodes].sort((a,b)=>(a.state==='focused'?1:-1)-(b.state==='focused'?1:-1));
for (const node of sorted) drawNode(node);
// Cursor indicator
ctx.save();
ctx.strokeStyle = hoveredNode ? 'rgba(0,255,180,0.6)' : 'rgba(40,100,200,0.3)';
ctx.lineWidth = 1;
ctx.beginPath();
ctx.arc(mouseX, mouseY, hoveredNode ? 20 : 10, 0, Math.PI*2);
ctx.stroke();
if (!hoveredNode) {
ctx.strokeStyle = 'rgba(40,100,200,0.15)';
ctx.beginPath();
ctx.arc(mouseX, mouseY, 40, 0, Math.PI*2);
ctx.stroke();
}
ctx.restore();
// Update HUD
updateHUD();
requestAnimationFrame(render);
}
function updateHUD() {
document.getElementById('stat-nodes').textContent = nodes.length;
document.getElementById('stat-pattern').textContent = pattern.length > 0 ? pattern.join('→') : '—';
document.getElementById('stat-focus').textContent = focusedNode ? focusedNode.id : 'NONE';
// Pattern chain display
const chain = document.getElementById('pattern-chain');
if (pattern.length !== chain.children.length / 2 + (chain.children.length > 0 ? 0.5 : 0)) {
chain.innerHTML = '';
pattern.forEach((id, i) => {
if (i > 0) {
const arr = document.createElement('span');
arr.className = 'pattern-arrow'; arr.textContent = '→';
chain.appendChild(arr);
}
const badge = document.createElement('span');
badge.className = 'pattern-node-badge';
const n = nodes.find(x=>x.id===id);
badge.textContent = n ? `${id} ${n.type.glyph}` : id;
chain.appendChild(badge);
});
}
}
// ---- Input ----
mainCanvas.addEventListener('mousemove', e => {
mouseX = e.clientX; mouseY = e.clientY;
const tooltip = document.getElementById('node-tooltip');
if (hoveredNode) {
tooltip.style.display = 'block';
tooltip.style.left = (e.clientX+16)+'px';
tooltip.style.top = (e.clientY-10)+'px';
tooltip.textContent = `${hoveredNode.id} · ${hoveredNode.type.label}`;
} else {
tooltip.style.display = 'none';
}
});
mainCanvas.addEventListener('click', e => {
if (contextMenuOpen) { closeContextMenu(); return; }
if (hoveredNode) {
// Add to pattern or toggle focus
if (e.shiftKey) {
// Shift+click = add to pattern
if (!pattern.includes(hoveredNode.id)) {
pattern.push(hoveredNode.id);
hoveredNode.inPattern = true;
hoveredNode.patternOrder = pattern.length-1;
updateEdgeHotness();
}
} else {
// Click = set focus
if (focusedNode) {
focusedNode.state = 'idle';
focusedNode = null;
}
hoveredNode.state = 'focused';
focusedNode = hoveredNode;
// Auto-add to pattern
if (!pattern.includes(hoveredNode.id)) {
pattern.push(hoveredNode.id);
hoveredNode.inPattern = true;
hoveredNode.patternOrder = pattern.length-1;
updateEdgeHotness();
}
}
// Show interpret button if pattern >= 2
document.getElementById('interpret-btn').className = pattern.length >= 2 ? 'visible' : '';
}
});
mainCanvas.addEventListener('contextmenu', e => {
e.preventDefault();
contextX = e.clientX; contextY = e.clientY;
const menu = document.getElementById('context-menu');
menu.style.left = contextX+'px';
menu.style.top = contextY+'px';
menu.className = 'visible';
contextMenuOpen = true;
});
function closeContextMenu() {
document.getElementById('context-menu').className = '';
contextMenuOpen = false;
}
document.addEventListener('keydown', e => {
if (e.key === 'Escape') {
closeContextMenu();
if (focusedNode) { focusedNode.state = 'idle'; focusedNode = null; }
}
if (e.key === 'n' || e.key === 'N') spawnNodeAtMouse();
if (e.key === 'c' || e.key === 'C') clearPattern();
});
function updateEdgeHotness() {
// Mark edges along pattern as hot
for (const edge of edges) {
edge.hot = false;
for (let i = 0; i < pattern.length-1; i++) {
if ((edge.from===pattern[i]&&edge.to===pattern[i+1])||
(edge.to===pattern[i]&&edge.from===pattern[i+1])) {
edge.hot = true;
}
}
}
}
function spawnNodeAtMouse(x, y) {
const nx = x||mouseX, ny = y||mouseY;
const node = createNode(nx, ny);
nodes.push(node);
// Connect to nearest node if within range
let nearest = null, nearD = 999;
for (const n of nodes) {
if (n.id === node.id) continue;
const d = Math.sqrt((n.x-nx)**2+(n.y-ny)**2);
if (d < 200 && d < nearD) { nearD = d; nearest = n; }
}
if (nearest) edges.push({ from: nearest.id, to: node.id, hot: false });
}
function clearPattern() {
for (const n of nodes) { n.inPattern = false; n.patternOrder = -1; if (n.state==='focused') n.state='idle'; }
pattern.length = 0;
focusedNode = null;
updateEdgeHotness();
document.getElementById('interpret-btn').className = '';
document.getElementById('ai-panel').className = '';
}
function resetField() {
nodes.length = 0;
edges.length = 0;
clearPattern();
nodeCounter = 0;
initField();
}
// ---- AI Integration ----
async function interpretPattern() {
if (pattern.length < 2) return;
const btn = document.getElementById('interpret-btn');
btn.disabled = true;
document.getElementById('loading-overlay').className = '';
// Build structured prompt from pattern
const patternNodes = pattern.map(id => {
const n = nodes.find(x=>x.id===id);
return n ? { id: n.id, type: n.type.label, glyph: n.type.glyph } : { id };
});
const structuredPrompt = `You are the AI core of AngleCore, a spatial workflow system.
The user has constructed a node traversal pattern on the spatial field:
${patternNodes.map((n,i)=>` Step ${i+1}: Node ${n.id} [${n.type}] ${n.glyph}`).join('\n')}
Pattern sequence: ${patternNodes.map(n=>`${n.type}`).join(' → ')}
Based on this spatial interaction pattern:
1. Interpret what workflow or intent this pattern represents (2-3 sentences)
2. Name this workflow pattern (short, evocative name)
3. Suggest the next logical node type to add
4. Rate the pattern coherence 1-10
Respond in this exact JSON format:
{
"workflow_name": "...",
"interpretation": "...",
"next_node": "...",
"coherence": 8,
"insight": "..."
}`;
const aiPanel = document.getElementById('ai-panel');
const responseText = document.getElementById('ai-response-text');
const promptPreview = document.getElementById('ai-prompt-preview');
try {
const response = await fetch('https://api.anthropic.com/v1/messages', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
model: 'claude-sonnet-4-20250514',
max_tokens: 1000,
messages: [{ role: 'user', content: structuredPrompt }]
})
});
const data = await response.json();
const raw = data.content.map(i=>i.text||'').join('');
let parsed;
try {
const clean = raw.replace(/```
{% endraw %}
json|
{% raw %}
```/g,'').trim();
parsed = JSON.parse(clean);
} catch {
parsed = null;
}
document.getElementById('loading-overlay').className = 'hidden';
aiPanel.className = 'visible';
if (parsed) {
responseText.innerHTML = `
<div style="color:rgba(0,255,180,0.9);font-family:'Syne',sans-serif;font-size:14px;font-weight:600;margin-bottom:10px;">${parsed.workflow_name}</div>
<div style="color:rgba(140,180,255,0.9);margin-bottom:14px;line-height:1.7;">${parsed.interpretation}</div>
<div style="color:rgba(100,160,255,0.6);font-size:9px;letter-spacing:2px;margin-bottom:6px;">NEXT SUGGESTED NODE</div>
<div style="color:rgba(255,180,80,0.9);margin-bottom:14px;">${parsed.next_node}</div>
<div style="color:rgba(100,160,255,0.6);font-size:9px;letter-spacing:2px;margin-bottom:6px;">INSIGHT</div>
<div style="color:rgba(180,220,255,0.7);margin-bottom:14px;font-style:italic;">${parsed.insight}</div>
<div style="display:flex;align-items:center;gap:10px;margin-top:6px;">
<div style="color:rgba(100,160,255,0.6);font-size:9px;letter-spacing:2px;">COHERENCE</div>
<div style="flex:1;height:3px;background:rgba(40,100,200,0.2);border-radius:2px;">
<div style="height:100%;width:${parsed.coherence*10}%;background:rgba(0,255,180,0.7);border-radius:2px;transition:width 0.5s;"></div>
</div>
<div style="color:rgba(0,255,180,0.9);font-size:11px;">${parsed.coherence}/10</div>
</div>`;
} else {
responseText.innerHTML = `<div class="thinking">${raw}</div>`;
}
promptPreview.innerHTML = `<div style="color:rgba(40,100,200,0.6);font-size:8px;letter-spacing:2px;margin-bottom:6px;">STRUCTURED PROMPT</div>${patternNodes.map(n=>`${n.type}`).join(' → ')}`;
} catch (err) {
document.getElementById('loading-overlay').className = 'hidden';
aiPanel.className = 'visible';
responseText.innerHTML = `<div style="color:rgba(255,60,80,0.8);">Connection error. Check API access.<br><br><span style="color:rgba(100,160,255,0.5);font-size:9px;">${err.message}</span></div>`;
}
btn.disabled = false;
}
// ---- Buttons & Context ----
document.getElementById('spawn-btn').addEventListener('click', () => spawnNodeAtMouse(cx + (Math.random()-0.5)*200, cy + (Math.random()-0.5)*200));
document.getElementById('interpret-btn').addEventListener('click', interpretPattern);
document.getElementById('clear-btn').addEventListener('click', clearPattern);
document.getElementById('ai-panel-close').addEventListener('click', () => {
document.getElementById('ai-panel').className = '';
});
document.getElementById('ctx-add-node').addEventListener('click', () => {
spawnNodeAtMouse(contextX, contextY);
closeContextMenu();
});
document.getElementById('ctx-add-cluster').addEventListener('click', () => {
spawnCluster(contextX, contextY);
closeContextMenu();
});
document.getElementById('ctx-clear-pattern').addEventListener('click', () => { clearPattern(); closeContextMenu(); });
document.getElementById('ctx-reset-field').addEventListener('click', () => { resetField(); closeContextMenu(); });
// ---- Utility ----
function hexToRgba(hex, alpha) {
const r = parseInt(hex.slice(1,3),16);
const g = parseInt(hex.slice(3,5),16);
const b = parseInt(hex.slice(5,7),16);
return `rgba(${r},${g},${b},${alpha})`;
}
// ---- Init ----
function initField() {
// Spawn initial nodes in spiral arrangement
const count = 7;
for (let i = 0; i < count; i++) {
const angle = (i/count)*Math.PI*2;
const r = 140 + i*15;
const x = cx + Math.cos(angle)*r;
const y = cy + Math.sin(angle)*r;
const n = createNode(x, y, i % NODE_TYPES.length);
nodes.push(n);
}
// Initial edges forming a partial network
edges.push({ from: nodes[0].id, to: nodes[1].id, hot: false });
edges.push({ from: nodes[1].id, to: nodes[2].id, hot: false });
edges.push({ from: nodes[2].id, to: nodes[3].id, hot: false });
edges.push({ from: nodes[3].id, to: nodes[4].id, hot: false });
edges.push({ from: nodes[4].id, to: nodes[5].id, hot: false });
edges.push({ from: nodes[5].id, to: nodes[6].id, hot: false });
edges.push({ from: nodes[0].id, to: nodes[3].id, hot: false });
edges.push({ from: nodes[1].id, to: nodes[5].id, hot: false });
}
window.addEventListener('resize', () => { resize(); });
resize();
initField();
render();
</script>
</body>
</html>
SOCIAL SHARE CARD GENERATOR