Parameter Dragging

 from Red Blob Games
1 Oct 2024

In 2428-map-typography I wanted to have drag handles that let you change the text size and spacing. But it didn't work well. So I'm creating this project to experiment with it. The goal is to make these drag handles smoothly adjust the parameters.

LABEL
size:
curvature:
spacing:
rotation:

I implemented gradient descent but had a hard time getting it working on the left drag handle. Try it and you'll see in the visualization, the white "good" area is much larger than with the other two handles. It was unstable in these traces:

Traces in parameter space when dragging the left handle

I had been making the step size depend on the inverse slope, and the slope was shallow where the white "good" area is large. That made the steps large. I ended up limiting the step size to some small fraction of the output parameter space, and that made it more stable. This project taught me that gradient descent is harder than I expected, and that I need to study it more before trying again.

Source: parameter-dragging.js

Email me , or tweet @redblobgames, or comment: