# Alternating color-dashed lines

What I learned: Using Standard Form for lines can handle verticals smoothly. A step function (floor) and some geometry can produce dashed lines of constant dash length.
current: Voronoi Diagrams | Desmos

When I strip out all but the basics, Voronoi Diagrams take 3 lines of code: points, colors, and regions.

======================================
Nathan Highstein wrote this fantastic Voronoi Diagram activity which I’ll never beat, but I’m after more abstract code: 11.5.8-Introducing Voronoi Diagrams • Activity Builder by Desmos

I’ve been learning by writing my own code, and I’ve implemented alternating color dashed lines to separate colored regions. Is there a better way to have 2 color lines? 2 color dots? There are only about 15 lines of core code for the whole project.

Very cool! I would never have thought of alternating color dashed lines.

I suppose it all comes down to personal preference. For me, especially when there are lots of colored regions to separate, I think I prefer just having plain black lines. More creative line options have the potential to be visually distracting in a graph that’s already full of colors and information. If your preference is alternating color dashes or dots, great. I could also imagine a version with double lines, as in this minimal example.

Just saw your note, cool. I had thought about double lines but didn’t solve it. You’ve inspired me to work more. getting double colors working with the right orientation will greatly improve this code. I suspect a bit of geometry will fix it. Then I’ll have to move the two-colored midpoints.

I simplified the dashed bisector code to 3 LOC: slopes, color 1, and color 2. I got the dashes to be uniform length along the line with a wee bit of geometry.

Thanks!

I think I’ve got it working (uniform gaps). double lines with each color closer to its dot. This is far superior for Voronoi as the lines of one color visually define the region. Thanks for the inspiration!

Now I think I’ve really got it, and it’s pretty simple. I just had to normalize the components of the slope vector. Thoughts?

Yep, the gaps look nice and uniform to my eye! Very nice geometry.

Depending on how this graph is used, I have one small suggestion: if the graph might be viewed at different sizes (on different devices, or even on the same device while resizing the expression bar), the gap could resize to accommodate these differences. A way to accomplish this is to use the built-in width command; I think the gap is perfect when the width is right around 590 pixels, so I added a factor of 590/width to line 17:

Try it out, fine tune it, and see if you like it - I hope that helps!

Thanks! looks good. I baked a constant in. :-/

I’ve factored and refactored and simplified. Your double-line solution and the alternating dashes each take a single (similar) line.

Always good to have multiple strategies!
Last note - I ought to have mentioned that, while the factor I added to ‘gap’ was an estimation, you can calculate an exact value based on the pixel thickness of the lines. I think that you probably already have most of that work done from normalizing the components of the slope vector.

thanks again and again