Welcome to Sloptopia

Force-Directed Graph Layout

This interactive visualization uses a force-directed graph layout algorithm to position nodes and edges in 3D space. The algorithm simulates physical forces between nodes, creating natural, aesthetically pleasing arrangements that reveal the structure of the network.

The Physics

Each node experiences two primary forces:

• Repulsion Force: All nodes repel each other, preventing overlap and spreading the graph. The force follows an inverse-square law: F = k / d², where k is the repulsion constant and d is the distance between nodes.
• Attraction Force: Connected nodes (edges) attract each other, pulling the network together. The force is proportional to the distance from an ideal edge length: F = k × (d - ideal).

A damping factor (currently 0.98) gradually reduces node velocities, allowing the system to settle into equilibrium. This creates the smooth, organic motion you observe.

Historical Origins

Force-directed algorithms emerged from graph drawing research in the 1980s and 1990s:

• Peter Eades (1984): Introduced the "spring-embedder" model, treating edges as springs and nodes as masses. This was one of the first force-directed approaches.
• Thomas Fruchterman & Edward Reingold (1991): Developed the Fruchterman-Reingold algorithm, which improved performance and visual quality by using a simpler force model. Their approach is the foundation for many modern implementations.
• Kamada & Kawai (1989): Created an algorithm that minimizes the total energy of the system, finding optimal layouts based on graph-theoretic distances.

These algorithms revolutionized network visualization, making it possible to automatically generate readable layouts for complex graphs without manual positioning. Today, they power everything from social network visualizations to circuit design tools.

Graph Theory Context

In graph theory, a graph consists of:

• Vertices (Nodes): The fundamental units of the graph, represented here as glowing spheres.
• Edges (Connections): Relationships between vertices, shown as colored lines. Each edge cycles through colors independently, creating a "Christmas lights" effect.

The algorithm finds a layout that minimizes edge crossings and distributes nodes evenly, making the graph's structure easier to understand. This is particularly valuable for visualizing complex networks like social connections, neural pathways, or data dependencies.

Interactive Controls

• Left Click: Adds a new node at the click position and automatically connects it to 2-3 existing nodes. This demonstrates how the algorithm adapts to new structure—watch as the network reorganizes to accommodate the new node while maintaining equilibrium.
• Right Click: Removes the nearest node to the click position. This shows how the network restructures itself when nodes are removed, with edges reconnecting and the remaining nodes redistributing to maintain balance.
• Left Click and Drag: Destroys any nodes that the drag path crosses over. This allows you to "erase" multiple nodes by drawing a line through them, demonstrating the algorithm's resilience to structural changes.
• Right Click and Drag: Controls camera rotation, allowing you to pan around the 3D graph and view it from different angles. This helps reveal the graph's structure in three-dimensional space.

The visualization automatically resets after 21 seconds or when nodes spread beyond a threshold, ensuring continuous exploration of different network configurations. Nodes slowly cycle through neon colors with brightness dimming before color changes, and edges independently cycle through colors like "Christmas lights."

3D Rendering

This implementation uses WebGL to render the graph in three dimensions with real-time lighting and color effects. The camera slowly rotates around the Y-axis (vertical axis) to reveal the graph's structure, while nodes and edges cycle through colors using HSL (Hue, Saturation, Lightness) color space for smooth transitions. You can also manually control the camera rotation by right-clicking and dragging.