Astroids

Astroid Drawer

Did you ever draw one of these as a kid?

By drawing a bunch of straight lines, you can generate a 3D looking surface that has curved edges.

Sprint uses a stylized version of this process for their logo.

Another way to generate this shape is to trace a point on a small circle as it rolls inside a larger circle.

These shapes are called Astroids and are a class of curves that can be represented several ways mathematically. y can be given as a function of x, or x and y can be parametric functions. There are several other specialized equations describing the shape as well.

I saw a programmatic way to draw the lines in the form of a pen on CodePen.io. With that starting point, I made it easy to interactively modify how many lines are drawn, the delay, and added some ways of shading the lines as they are drawn. I used dat.GUI for the user interface. There are three options to shade the lines. The “Line” option gives each line a constant color. The color of the first lines, middle lines, and last lines are determined by the gradient colors that you can pick. I used Chroma.js to interpolate between the user given colors. The “Line Gradient” option gives each line the same gradient. The last option, “Radial Gradient”, colors each line so that the entire shape has a consistent circular gradient centered on the middle. I used the native Canvas functions for those two gradients.

To try the Astroid Drawer, click the button at the top. Below are some of the images that can be generated.

This slideshow requires JavaScript.

Leave a Reply

Your email address will not be published. Required fields are marked *