Experiment with adjustable arrows. The whole point of my arrows library was to avoid this kind of thing—and let the algorithm "guess" the best arc for an arrow, based on its distance—but this is useful too. 🏹🧵
For comparison, here's the same arrangements (almost) with the guessing algorithm in action.
The library has always supported two options: "bow" defines the minimum arc and "stretch" adds more arc to short arrows. The first GIF is essentially a UI to set the bow of arrows with no stretch. The second GIF is a set of arrows that all have the same non-zero bow and stretch.
It's not exactly that easy, though. In the user-driven example, the handle is determining the arc's direction.
When the arrows flex automatically, the arc direction is based on the relative position of the box centers, among other things.
I'll need to explore more... but it might make sense to split the function into a user-driven vs. automatic version, given that there's a lot less to do when the user is in control of arc and arc direction.
Anyway, that's my arrow tweet thread 😎
Oh yeah links:

Manual version: 6jpek.csb.app
Auto version: 2vu07.csb.app

• • •

Missing some Tweet in this thread? You can try to force a refresh
 

Keep Current with Steve Ruiz

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!

PDF

Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @steveruizok

29 Nov
How to cheat at complex hit-testing. 🧵
Hit testing against our axis-aligned rectangles is easy. Is the point left of the left edge? Right of the right edge, above the top, or below the bottom? If you answered yes to any of these questions then it's a miss; otherwise, it's a hit.
Our lines are more difficult. We want to score hits within a certain distance of the line so we need to turn the line into a box. If the line is straight then we test against a polygon (a potentially rotated rectangle). Trickier but not bad. Curved lines? Those are hard.
Read 10 tweets
3 Nov
pro level docs for @createwithplay featuring theme-aware embedded videos 👀
This is of course a png / mp4 hamburger, with device frames laid over the video. We can record videos from our device and slap them into a Screenshot component.
I like how responsive it is, even to device height. (There's some liberal use of CSS functions.)
Read 5 tweets
1 Nov
Added a layers list and more design functions (align, stretch, distribute). The layers list is using a virtual list (react window via @brian_d_vaughn) so it can keep up with the high number of nodes, too.
Another little feature I would love to see in more design tools: stretch to fill bounding box. The need doesn't come up too often, but it's tedious to set when it does.
(Link here: next-playground-blush.vercel.app/pixi/1000,
. Change that 1000 to however many boxes you want to try)
Read 4 tweets
13 Oct
Today I found a ten year old micro-app by @evanwallace with a great arrow-drawing algorithm. I worked through the code and adapted it for perfect-arrows. Really beautiful arrows! Playground here: 2vu07.csb.app
And here's the original source: madebyevan.com/fsm/ . In this app, you can adjust the arc of an arrow by clicking and dragging. I like that! But the goal with perfect is to calculate that automatically, too. Points can also be padded out here.
These arrows are using arc segments rather than quadratic curves, which is how I've been doing things so far. I really this might just be the better way. Intersection points are much easier with circles, though I imagine the algorithm will hold up with other shapes too.
Read 4 tweets
11 Oct
Pinch zooming to the pointer on an infinite canvas. We're having to offset the camera as we change the zoom, and that offset amount was... not intuitive.
With this kind of thing, it's useful to think in terms of separate "screen space" and "document space" coordinates. These are usually very different: a pointer at x=100 y=100 on the screen could be anywhere in the document, depending on how the document is scrolled or zoomed.
The goal here is to *preserve* that document coordinate as the user zooms in or out. So as we zoom, we need to scoot the document over so that the user's pointer is still pointing at the same place in the document.
Read 5 tweets
24 Jul
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…
Read 10 tweets

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/month or $30/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!

Follow Us on Twitter!