My Authors
Read all threads
It's Friday! Let's get wild 🙆‍♂️ and learn about finding intersections between line segments and boxes with rounded corners.
This is a lot like finding the points where a line segment intersects a rectangle—it's just that the rectangle has rounded corners, or a "corner radius".
Let's start with a regular rectangle. To find its intersections, we test each of its sides—or "segments"—separately. There are lots of ways to do that. Here's one: gist.github.com/steveruizok/9f…
Alright, back to our rounded rectangle. Each of its corners has a radius. Its segments are inset by this amount. In the space that's left, we draw a circle with that radius—or rather, a quarter segment of that circle. Put it all back together... and there we go.
So our first step in finding the intersection points is to test its segments. It's just like before, just with gaps at the corners.
Next, we check each of the corners for intersections. We might get false positives, though, because our function (or at least, the one I'm using) checks against the whole circle, not just the segment that matters: gist.github.com/steveruizok/c9…
So for each intersection, we need to get the angle from the circle's center to the intersection. We only keep the point if that angle is between its circle segment's start and end. Once we've tested every corner, we have our intersection points!
If you want just one point, then you'll need to measure the distance between both intersections and go with the shorter of the two.
And that's it! Lots of numbers, but hey—computers. You can play with the code in my messy experimentation sandbox here: codesandbox.io/s/geo-playgrou…
For posterity, here's the "getSegmentRoundedRectangleIntersection" function: gist.github.com/steveruizok/6d…
Missing some Tweet in this thread? You can try to force a refresh.

Keep Current with Steve Ruiz

Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

Twitter may remove this content at anytime, convert it as a PDF, save and print for later use!

Try unrolling a thread yourself!

how to unroll video

1) Follow Thread Reader App on Twitter so you can easily mention us!

2) Go to a Twitter thread (series of Tweets by the same owner) and mention us with a keyword "unroll" @threadreaderapp unroll

You can practice here first or read more on our help page!

Follow Us on Twitter!

Did Thread Reader help you today?

Support us! We are indie developers!


This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3.00/month or $30.00/year) and get exclusive features!

Become Premium

Too expensive? Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal Become our Patreon

Thank you for your support!