Mayhem Path Planner

https://codingtherobot.github.io/VEX-VRC-Path-Planner/

A browser-based path planning tool for VEX Robotics.

Mayhem Path Planner lets you plot robot waypoints on a field, shape curved paths, annotate actions, customize colors, and save or export paths. Everything runs locally in your browser!

Features

• Waypoint Planning

  • Click to add waypoints
  • Drag nodes to reposition them
  • Automatically connects waypoints into a path
  • Displays waypoint numbers

• Curved Paths

  • Toggle between straight and curved paths
  • Drag cyan control points to shape curves
  • Automatically calculates curved-path distance

• Action Labels

  • Double-click a waypoint to add an action

  • Customize:

    • Label text
    • Text color
    • Background color
    • Transparency

  • Move and resize labels independently

• Color Customization

  • Select individual waypoint colors
  • Select individual segment colors
  • Apply a color to every waypoint
  • Apply a color to every path segment
  • Generate a gradient across the entire path

• Field Backgrounds

  • Upload a custom field image
  • Use your own VEX field layout or other background
  • Backgrounds are saved locally

• Path Library

  • Save paths with custom names
  • Load previously saved paths
  • Delete saved paths
  • Store multiple autonomous routines in the browser

• Import / Export

  • Export complete paths as JSON
  • Import paths from JSON
  • Export a PNG snapshot of the current field

• Customization

  • Adjustable waypoint size
  • Adjustable path thickness
  • Toggle waypoint numbers
  • Settings are saved automatically

Modes

Add Nodes

The default mode.

• Left-click an empty area to add a waypoint
• Drag a waypoint to move it
• When curves are enabled, drag the cyan control points to shape the path
• Double-click a waypoint to create or edit an action label

Draw Path

A clean viewing mode for inspecting the finished path without editing nodes.

Edit Action Labels

Allows action labels to be repositioned and resized.

• Drag a label to move it
• Drag the orange handle in the bottom-right corner to resize it

Select Color

Allows individual path elements to be recolored.

• Click a waypoint to change its color
• Click a path segment to change its color
• Use the toolbar to apply colors or gradients

Distance Calculation

The planner estimates the total distance traveled by the robot and displays it in both inches and feet.

For straight paths, distance is calculated directly between consecutive waypoints.

For curved paths, the quadratic Bézier curves are sampled and their individual distances are summed to produce an approximation of the total path length.

Note: Path distance is based on the canvas dimensions and assumes the canvas represents a 12-foot field. Distance measurements should therefore be treated as planning estimates rather than precision measurements.

Saving Data

Mayhem Path Planner uses the browser's Local Storage to automatically save:

• Current waypoints
• Node colors
• Segment colors
• Background image
• Node size
• Path thickness
• Waypoint number visibility
• Saved path presets

Your paths remain available when you reload the page in the same browser.

JSON Export

Use:

Settings → Export Path JSON

The exported JSON contains the path configuration, including nodes, colors, curve settings, display settings, and the background image.

You can later restore it using:

Settings → Upload Path JSON

Running the Planner

The Mayhem Path Planner can be accessed at this website: https://codingtherobot.github.io/VEX-VRC-Path-Planner/