https://editor.p5js.org/sh7361/sketches/c69MolOAZ
Inspired by some graphic design and typographic works, my goal is to create a “path” typeface using the example from The Nature of Code: Exercise 5.13.
Poster by Han Gao
Korean Art from 1953
Recursive Radical Packing Language by Lindong Huang
The Nature of Code: Exercise 5.13.
I first tried using textToPoints() to draw the path. The font I chose is Metaballs by Maxitype. However, I realized that using the point data directly to create paths resulted in unwanted connections between the outside and inside contours.
I wanted to use p5.js 2.0's textToContours(), but it gave errors that I couldn’t figure out once i replace the JSDelivr link in index.html. So, I decided to use the older version of p5.js, and manually retrieved the index of textToPoint()'s points to draw two separate paths.
With the two paths defined, another problem I needed to solve was ensuring that each vehicle could determine the closest path and follow it. With ChatGPT’s help, I implemented a getDistanceToPath(path) and getClosestPath(paths) function in the Vehicle class. They calculate the distance between this.position and normalPoint on different paths, and compares these distances to determine the closest path for each vehicle to follow.
Before
after
However, a new issue arose: the debugging view showed that the calculation of the closest path was sometimes incorrect, especially when two paths were very close to each other. The vehicle would frequently switch between the two paths, causing it to get stuck in the middle.
p5.js Web Editor _ Exercise 5.13_ CrowdPathFollowing 1.0 - Google Chrome 2025-03-12 20-37-44.mp4
To fix this, I modified getDistanceToPath(path) to calculate the distance between this.position and target instead of this.position and normalPoint. This adjustment worked, but I still don’t fully understand why normalPoint didn’t work as expected.