major thank you to 2swap for inspiring this project


Keybinds (unlisted)

Fast Mode - explores new nodes offscreen, faster
- j to enter/exit
- k to add any offscreen nodes to the graph
Simulation
- w to scramble node positions (really fun)
- x to disable the global central attraction force
- q to cancel all exploration
- s to explore the next state, once
- z to backtrack to the current node's parent
- r to return to the root node


Soli

Solitaire is a game some people find fun that generally involves merging groups of cards to continue a pattern formed by their suits and ranks. It is my go to when it's time for bed but I'm not tired yet. 

State

The arrangement of all the cards in a given game, their positions in the draw deck, build piles, columns, and etc, is considered the "state" of the game for our purposes. Moving a card, either between columns, from the deck to the draw pile, or otherwise, creates a new state of the game. By calling these states nodes, and these moves links, I learned all the graph theory I needed for this project.

Drive

In SSD, the user can select a move from a list of currently legal moves, or let the computer try things out at lightning speed. As new nodes are discovered, they are added to the 3D force directed graph simulation. Keep an eye out for green, blue, and purple nodes - they hue shift as the board approaches victory.


Technical Stuff

The canvas API of choice is p5.js in WebGL mode, the graph simulation is done with a Barnes-Hut octree for repulsion and a simple spring integration for the links, all custom. There's some optimization opportunities left to go but architecturally, my mind is on WebGPU compute shaders...


Keywords (seo listed)

state machine, graph theory, real-time simulation, n-body simulation, barnes-hut, webgl, p5.js, solitaire,
force directed graph, data visualization,
particle systems, creative coding

soli state drive | site homepage