Skip to content

nathanfx330/compass

Repository files navigation

Compass

A constraint-based, parametric graphic design tool built in Flutter.


The Manifesto

Modern graphic design software is built on mathematics. Every Bézier handle, every alignment guide, and every pathfinder operation is a genuine mathematical idea exposed as a tool. But that is all it is: a collection of isolated tools, each representing its own fragment of the underlying math. There is no shared foundation or unifying model, so the structure you build with one tool dissolves the moment you reach for the next. The mathematics is there. It was simply never designed to cohere.

This becomes most apparent in direct manipulation, the cursor and the brush. It is not unique to Illustrator. It is the dominant paradigm behind almost every modern graphics application. Direct manipulation is genuinely the right tool for fine detail. Eventually, a specific vertex has to sit in a specific place, and nothing is more intuitive than simply reaching out and moving it.

The problem is not direct manipulation itself. The problem is that it is the only altitude these tools offer.

It is the correct primitive at the leaf level. It excels at moving an individual point or adjusting a single Bézier handle, but it is the wrong organizing principle for an entire design. We have built software that excels at microscopic edits to isolated pieces of geometry, much like editing a novel one character at a time, yet offers almost no way to express the larger structure those details belong to. Making a sweeping structural change often means tediously selecting and dragging dozens of unrelated objects by hand.

Compass was built to introduce the missing altitude. It adds high-level, hierarchical transformations that naturally cascade down into the precise vertex edits that direct manipulation already does well.

High-level design is not about drawing. It is about defining rules, systems, constraints, and relationships.

Consider the Apple logo. It is famously believed to have been constructed from intersecting circles and Golden Ratio proportions. Recreating that construction in a traditional vector editor means overlapping circles and using a Shape Builder or Pathfinder operation to cut out the final silhouette. The moment you click Merge, those circles cease to exist. If you later decide one curve should be five percent wider, there is nothing left to modify. You either rebuild the construction from scratch or manually reshape the finished path. The geometry survives, but the reasoning behind it does not.

This is not a cursor problem. It is a storage problem. Traditional vector software has nowhere to preserve the relationships that produced the design.

The same limitation appears in Smart Guides. They help you position objects once, then disappear. They never become part of the document itself. The alignment exists only during the edit, never as a persistent relationship the software can continue enforcing.

Compass is built on a different philosophy. Design is fundamentally relational, and the software should preserve those relationships as Persistent Mathematical Truth.

In Compass, you do not merely draw lines and circles. You define how they relate to one another.

"Create Point A. Create Point B. Draw a line between them. Now create a circle centered on Point A whose radius always equals the distance between A and B."

Drag Point A and the entire construction moves together. Drag Point B and the line stretches while the circle scales perfectly to maintain its constraint. Nothing needs to be rebuilt because nothing was ever destroyed.

You are not pushing dead pixels around a canvas. You are constructing a living mathematical system. When you eventually reach in to move a single point by hand, that direct edit is simply the lowest altitude of the same system. It is not a separate mode that discards the relationships you have already established.


Core Concepts

  1. Points are the Source of Truth: Shapes do not own their own coordinates. Every shape is merely a visual manifestation of the relationships between underlying mathematical Points.
  2. Constraints over Clicks: Objects are bound together by unbreakable rules. A radius isn't "100 pixels"—it is a live formula driven by the canvas state.
  3. Parent/Child Relativity: Moving an anchor point calculates a mathematical delta and pushes that movement down to all dependent geometries, ensuring complex structures move as a single rigid body without ever "grouping" them.
  4. Pure Geometry: Toggle off the scaffolding to hide the points and rules, revealing only the mathematically perfect design you have constructed.

✨ Current Features

Compass is rapidly evolving into a desktop-grade parametric engine. It currently supports:

  • Parametric Geometry: Lines, Circles, perfectly calculated Golden Spirals, and dynamic X-Splines. Splines live in two mathematical modes: a fluid Catmull-Rom curve whose vertex tension you adjust with the A key via a global distance tether, or explicit Bézier—right-click any vertex to Convert to Bézier and freeze its current tangent into independently draggable in/out handles for exact, asymmetric control. Right-click again to Reset Handles and dissolve back into fluid curvature. Conversion is loss-free: the curve never jumps, it simply becomes editable.
  • Live Corner Pulleys: Bind a spline vertex to a persistent corner constraint rather than cutting it. Right-click a vertex to bind it to a round pulley—a rope that wraps the corner in a smooth arc, leaving and rejoining the edges tangentially—or a miter pulley, the same outward wrap brought to a single sharp point. A pulley is live: drag its rim on the canvas to resize it, or remove it to restore the plain corner, and it survives save/load, undo, and rotation. This is the constraint-engine counterpart to the destructive F-key fillet: where a fillet bakes a rounded corner into new, fixed points, a pulley is a rule the vertex carries—the underlying point never moves, so the relationship is never lost.
  • Coons Patch Gradient Meshes: Convert any Rectangle into a live Gradient Mesh. Built on true Bicubic Coons Patch interpolation rather than flat planar math, you can use the A key to adjust node tension and seamlessly bow the internal gradient and outer boundary edges. Meshes are fully integrated into the Boolean Engine—drop a Subtract shape over a mesh to non-destructively punch a hole through the color field. Use the X key to mathematically slice new rows and columns directly into the grid without breaking structural integrity. Select nodes and use the Custom Color Picker to paint the mesh.
  • Parametric Area Strokes & Width Constraints: Hold W to sculpt variable-width ribbon strokes. Instead of manually smoothing hundreds of points, Right-click a width handle to drop a Constraint Flag (turning it orange). Drop two flags, and Compass dynamically calculates the parametric distance between them, fluidly interpolating the width of every node in-between. Dragging a pinned flag mathematically updates the entire tapered section in real-time.
  • Interactive Drag-and-Drop Hierarchy: Fully reorderable Z-layers and shapes. Drag a layer to change global Z-order, drag a shape within a layer to dynamically change its Boolean evaluation order, or seamlessly drag a shape across layers to migrate it. Lock layers to freeze underlying scaffolding and safely work on top of complex construction geometry.
  • Advanced Stroke Stacking: Shapes are not limited to a single outline. Build an ordered stack of outward-expanding stroke rings per shape. Each ring acts as an independent Boolean operand—set it to "Fill" with a custom color, or "Cut" to non-destructively carve a gap through the underlying geometry. Drag rings up and down the stack to build complex concentric gaps or tree-ring effects.
  • Live Boolean Engine: Assign Union, Subtract, Intersect, or "Construction" (invisible guide) rules to any shape or stroke, recalculating the master path at 60fps.
  • Rigid Body Transformations: Use Shift+R to mathematically rotate an entire hierarchical system around a pivot, R to rotate a shape locally, Ctrl/Cmd+R to explicitly rotate isolated Bézier handles, or Shift+Drag to translate complex shape groupings. Explicit Bézier handles rotate in perfect lockstep with their points, so a hand-tuned corner stays mathematically true through any rotation.
  • Axis-Locked Editing: Hold 1 or 2 while dragging a vertex to constrain its motion to a single axis—horizontal or vertical—anchored exactly to the point where the drag began, for pixel-true orthogonal moves without guesswork.
  • Infinite Mathematical Canvas: Pan infinitely using the middle mouse button and zoom seamlessly without breaking underlying coordinate math.
  • Reference Imagery: Load, scale, position, and lock underlying raster sketches to trace over with perfect mathematics.
  • Bake Layers to Editable Splines: Right-click any layer to bake its live Boolean result into clean, editable X-Splines on a fresh layer above—the source layer is preserved and simply switched off, never destroyed. Because the merged Boolean boundary exists only as an opaque rendered path, Compass samples that outline and reconstructs it with a least-squares Bézier curve fit: the output is sparse, smooth, and fully handle-editable, and—unlike a flattened polygon—stays mathematically smooth at any zoom level on the infinite canvas. Holes and disjoint islands are faithfully preserved by emitting outer contours as Union and inner contours as Subtract, so the baked silhouette is identical to the original. Only filled geometry is baked; pure strokes and construction guides are correctly ignored.
  • Scaffolding Toggle: Right-click the canvas (or use the View menu) to instantly hide all points, rules, and wireframes, leaving only your pure, clean vector geometry.
  • Native .compass Serialization: Save and Open projects directly to your local file system, preserving every mathematical constraint.
  • 3D Mesh Compiler (.obj): Right-click any layer to export its fully resolved boolean fill as a 2D Wavefront .obj mesh. This bridges 2D design directly into 3D/game-engine pipelines (like Blender or Godot) where SVG masks typically fail to handle boolean holes. Features two custom tessellation engines: a Scanline algorithm that traces curves robustly for high-fidelity silhouettes, and a Grid mode that generates uniform quad-based topology perfect for subdivision and displacement.
  • Vector & Raster Compilers: Export pure XML-based SVG files—Compass calculates complex bounding boxes and utilizes native SVG <mask...> tags to perfectly replicate dynamic Boolean Subtractions for external image viewers. For pixel-based workflows, export crisp PNG images at 1x, 2x, or 4x resolution; the raster compiler re-renders the design offscreen from the same mathematical truth, emitting only the clean geometry on a transparent background—never the scaffolding.
  • Desktop UI & Themes: Complete with a native desktop Menu Bar, floating toolbars, contextual right-click menus, and dynamic Light/Dark modes.

⌨️ Controls & Hotkeys

Compass heavily utilizes keyboard modifiers to keep the UI clean while providing complex mathematical transformations.

Mouse Controls:

  • Left Click: Select shapes, drag points. Drag the purple in/out dots of a Bézier vertex to sculpt its curve handles directly.
  • Right Click: Context menu for Boolean operations, baking a layer into editable X-Splines, exporting to OBJ, converting geometry to splines/meshes, converting a vertex to or from Bézier handles, binding a corner to a round or miter pulley, toggling parametric width constraint flags, and hiding scaffolding.
  • Drag a Pulley Rim: With a spline selected, drag the colored rim handle of a bound corner pulley to resize it live—light blue for a round pulley, orange for a miter. The underlying point never moves; only the constraint's size changes.
  • Middle Click & Drag: Pan the infinite canvas.
  • Scroll Wheel: Zoom the infinite canvas.
  • Drag in Hierarchy Panel: Grab the indicator dot next to a layer or shape to dynamically reorder Z-index, restack boolean logic, or move geometry between layers.

Keyboard Modifiers:

  • Shift + Drag: Pan a rigid-body shape hierarchy.
  • R + Drag: Rotate a selected shape or point locally around its centroid.
  • Shift + R + Drag: Rotate an entire hierarchical rigid-body system around the targeted centroid.
  • Ctrl/Cmd + R + Drag: Rotate the explicit Bézier handles of a selected vertex (or group of vertices) around their local centroid without moving the underlying points. Automatically converts fluid Catmull-Rom nodes to explicit handles.
  • A + Drag: Target an X-Spline or Gradient Mesh vertex and drag anywhere on the screen to fluidly adjust its structural tension.
  • W + Drag: Target an X-Spline vertex and drag to adjust its variable stroke width. Shift+Drag to symmetrically scale both sides. Right-click the width handle to drop an Orange Width Constraint flag for automatic parametric tapering.
  • F + Drag: With an X-Spline vertex selected, hold F and drag horizontally anywhere on the screen to dynamically apply a curve-aware fillet (corner rounding). Unlike a corner pulley, a fillet is destructive—it bakes the rounded corner into fixed points.
  • X + Hover / Click: Hover over a Gradient Mesh to preview a slice. Compass auto-detects horizontal or vertical cuts based on edge proximity. Click to commit the topological slice without altering the visual gradient.
  • Z + Drag: Select multiple nodes, hold Z, and drag to Laplacian smooth them. Hold Shift+Z to smooth variable widths.
  • 1 + Drag: Constrain a point or vertex drag to the horizontal axis. When using the X mesh slice tool, hold 1 to explicitly force a Horizontal (Row) cut.
  • 2 + Drag: Constrain a point or vertex drag to the vertical axis. When using the X mesh slice tool, hold 2 to explicitly force a Vertical (Column) cut.
  • Ctrl/Cmd + Z: Undo mathematical and geometric state changes.

🏗️ Project Architecture

Compass uses a highly decoupled, feature-driven architecture to ensure scalable mathematics and 60fps rendering:

  • models/geometry/: The pure data models representing shapes, splines, meshes, and points.
  • constraints.dart: The mathematical rule engine enforcing logic (e.g., Point-on-Circle, Distance-Radius).
  • hierarchy_ops.dart: Safely mutates Z-order and layer containment without breaking constraints.
  • engine.dart: The centralized state holder that cascades updates from the models to the UI.
  • path_baker.dart: Reconstructs editable Bézier geometry from opaque rendered Boolean paths via least-squares curve fitting—the math behind Layer Baking.
  • io/: Standalone serializers and compilers—the .compass project format, the SVG XML exporter, the offscreen PNG raster exporter, and the OBJ mesh tessellator.
  • ui/: Modular UI panels (layer_tile.dart, shape_row.dart), pure-Dart color pickers, dynamic HUDs, and the interactive CustomPainter canvas.

Getting Started

Compass is built entirely in Flutter, utilizing the reactive UI framework to instantly cascade mathematical updates to the CustomPainter canvas.

To run the application:

flutter pub get
flutter run -d linux

License

Compass is licensed under the GNU Affero General Public License v3.0 (AGPL-3.0).

This means you are free to use, study, share, and modify the software. However, if you modify the code and distribute it—or offer it as a service over a network (like a web app)—you must make your modified source code available to the public under the same AGPL-3.0 license.

For full terms, see the LICENSE file. Copyright (C) 2026 Nathaniel Westveer.

About

A constraint-based, parametric graphic design tool.

Resources

License

Stars

0 stars

Watchers

0 watching

Forks

Packages

 
 
 

Contributors