Pure Pursuit Path Planning - but through HTML, CSS, and JS

I recently implemented Pure Pursuit on my robot using this very helpful guide by Sarah Xiang from VRC team 97963A and VEXU team iCTRL - Basic Pure Pursuit - BLRS Wiki (purduesigbots.com). In this guide, there was a colab linked ( Way Point Generator - copy.ipynb - Colaboratory (google.com)), which essentially uses Python to generate and smooth a path (from the original points given).

I decided to port this smoothing code (originally by FRC team 2168) to JavaScript so it could be more modular. Here’s the link: https://speedzappers.com/public/path-planning/.

It has graphing capabilities, and you are able to switch between a basic, non-smoothed path and a more realistic, smoothed path (created using the algorithm in the Colab above). It also generates a C++ 2D array of points (doubles) for you to use in your code.
You have to click “Generate Path” if you want the graph and code to update with your new points.

If you want to test it out, try putting in points [1, 1], [3, 4], and [1, 10] and switch between the smoothing modes. The graph on the right will automatically update with the new path.

The source code for this page is not organized on Git, but you can open up the JavaScript debug window and click “sources”, and all of the JavaScript used in the website will be shown (you can copy and use it locally).

Everything is calculated client-side, no server-side data is being sent and received.


I’ve updated the path planning page to have an upload and download button.

If you use the default points and press download, it should download a file called ‘file.json’ with contents like this:
[[1, 1], [3, 4], [10, 2]]

Next time you are planning a path, but want to keep the same points as last time, upload the file using the upload button.

1 Like

Hey its Jack Luna from 255D. I read what do you achieve working on the PID. Im started learning how to use PROS few weeks ago. But I’m struggling with some things, is there a way you can help me out?

Hello Jack, I notice that you have posted this in other places. In the future, please avoid posting multiple times, or posting off topic. This thread is about much higher level programming, and there are other threads about PID.

PID is a control scheme that allows for more precise and accurate movements. Essentially taking more past data, and predicted data to make sure you don’t over or undershoot your target.
This is a SIGBots wiki article that is a little out of date but has a solid start:
PID Controller - BLRS Wiki (purduesigbots.com)
I know teams that have also learned from this website:
PID Beginner’s Guide • Renegade Robotics
I learned PID in middle school by starting with this video:
Vex PID Control Loop Tutorial - YouTube
Finally, I liked this video too (isn’t about Vex but breaks down PID well):
PID Control - A brief introduction - YouTube