search

dragonman225 / dragonman225.github.io

This is a repo from which I deploy my blog. Posts are written on Notion and generated HTML with Notablog.
https://dragonman225.js.org/
4 stars 0 forks source link

curved-arrows #4

Open utterances-bot opened 2 years ago

utterances-bot commented 2 years ago

How to Draw S-Curved Arrows Between Boxes / Rectangles | Alexander's Garden

When I was building the spatial “tool for thought”, Jade, one frequently requested feature was drawing arrows between blocks, so we could make mind maps, flowcharts, etc. Here’s how I made it.

https://dragonman225.js.org/curved-arrows.html

stephan-buckmaster commented 2 years ago

Nice!

I wonder how much your analysis and implementation could benefit by using the symmetries. For example in your first diagram two flips take the box on the left to the box on the right. The curve should obey that same flipping flipping. I think you can see how your solutions have symmetries.

Also, what happens if the sides of one box are not parallel to any of the sides of the other box?

manyone commented 2 years ago

the algorithm seems to be the one at work in sankey diagrams when a flow stream is connected from one node (ie. category) to another - except that the thickness of the curve is an expression that represents the size of the flow and the flow direction is always left-right.

dragonman225 commented 2 years ago

Also, what happens if the sides of one box are not parallel to any of the sides of the other box?

I haven't considered that case, in my use case (this), all boxes are in parallel. But that's a good reminder!