Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

How to draw S-curved arrows between boxes

dragonman225.js.org

Post reply on HN
Print view View original

21–30 of 59 posts

Re: How to draw S-curved arrows between boxes

#21

Post by allenu »

nescioquid wrote: post #2

I enjoyed reading this because it reminded me of a moment of hubris as junior developer. I was working with a complicated data structure I wanted to visualize, so I decided to write some quick code to basically read the data structure and output a graph as rectangles and lines connecting them. I was chastened by the complexity of just drawing the lines between boxes so that they didn't overlap (as much as possible) a…

I've had similar experiences on many projects. You start out thinking something is going to be super simple and you provide estimates that match your naive design and later find it'll take 2.5x-5x longer than you wanted. It's definitely humbling.

Nowadays when I have new work that has a lot of unknowns, I try to jump in and create a proof of concept as quickly as I can, even if it requires a ton of hacks. I want to know right off the bat if there's something obvious that's going to make the task take much longer than I wanted.

Re: How to draw S-curved arrows between boxes

#22

Post by kevin_thibedeau »

anonymous532 wrote: post #10
quickthrower2 wrote: post #9

Earlier quoted context omitted.

In that case the tool would need to lay out everything holistically but while it might do great arrow wise it could be useless for the user if they wanted the diagram a certain way for a reason.

Yes, that is what I've noticed too. On medium/big projects macro-level(holistic) arrow functionality is far more important than having beautifully curved arrows from node A to node B. Solving that problem strangely resembles routing on a circuit board with buses, labels, colors, layers etc.

There is a section in Graphics Gems 3 that describes a layout system for an Atari ST DAW app.

Re: How to draw S-curved arrows between boxes

#23

Post by runeb »

vjeux wrote: post #19
emmanueloga_ wrote: post #16

GUI algorithms like these are not well documented anywhere (except, of course, all over the web and in source code! :-) ... Would be nice to have a site, maybe a wiki, dedicated to this kind of thing. Other interesting problems in this area: * Layout algorithms * Automatic assignment of keys for navigation (for nav w/o using a mouse) * Popup menu prediction [1] * Text breaking / paragraph layout [2] * Etc, etc, etc .…

Back in 2012 I made a series of blog posts about all the unique image algorithms I could find: - Facebook (that I designed): https://blog.vjeux.com/2012/image/image-layout-algorithm-fac... - Google Plus: https://blog.vjeux.com/2012/javascript/image-layout-algorith... - Google Plus, finding best breaks, which also explains fancy text layout algorithm: https://blog.vjeux.com/2014/image/google-plus-layout-find-be... - L…

Very interesting, thank you for this! Just a note that your demos do not seem to load images.

Re: How to draw S-curved arrows between boxes

#24

Post by jedberg »

We recently redid our landscaping, which included making the edge of the driveway and S curve. I thought my landscaper was pretty clever.

He took a flimsy pvc pipe, nailed it down at the beginning and end of the curve, and it bent into a perfect S curve that he then spray painted down to follow.

It’s amazing how physics and nature can solve these problems for you!

Re: How to draw S-curved arrows between boxes

#25

Post by TacticalCoder »

emmanueloga_ wrote: post #16

GUI algorithms like these are not well documented anywhere (except, of course, all over the web and in source code! :-) ... Would be nice to have a site, maybe a wiki, dedicated to this kind of thing. Other interesting problems in this area: * Layout algorithms * Automatic assignment of keys for navigation (for nav w/o using a mouse) * Popup menu prediction [1] * Text breaking / paragraph layout [2] * Etc, etc, etc .…

That line-breaking link is really great, I enjoyed it a lot! However it barely scratches the surface: there's no good line-breaking without hyphenation. And then even once you have a great H & J algorithm (Hyphenation and Justification), you have the visual problem of "rivers" (be it text or print): a "river" behind when on one line you have the space between two words nearly matching another space between two words on the next line, then third line, etc.

I don't know if modern typesetting software like InDesign do solve this automatically or not. The web certainly don't (although with CSS and the "shy" Unicode char you at least get some control on the 'H' part of "H & J"). Back in my typesetting days QuarkXPress had nothing to help with rivers: you had to detect them visually and then "fudge" the paragraph a bit (by forcing a line-break or an hyphenation).

I always wondered: certainly if you start with a good H & J algorithm, it must be possible to try a few candidates and determine, programatically, which one has the least obvious rivers? Fascinating stuff IMHO.

P.S: I also wonder if it's because algorithms for layout out paragraphs are so bad on the web that justification is typically frowned upon on the Web? (it certainly rules king in printed books)

Re: How to draw S-curved arrows between boxes

#26

Post by throw10920 »

emmanueloga_ wrote: post #16

GUI algorithms like these are not well documented anywhere (except, of course, all over the web and in source code! :-) ... Would be nice to have a site, maybe a wiki, dedicated to this kind of thing. Other interesting problems in this area: * Layout algorithms * Automatic assignment of keys for navigation (for nav w/o using a mouse) * Popup menu prediction [1] * Text breaking / paragraph layout [2] * Etc, etc, etc .…

Yes! Please! Every one of these problems are interesting ones that have been solved before...but the solutions are packaged up into massive systems (good luck finding the code for actually executing element layout in Chromium) and then it seems like are never discussed again on places like Reddit, HN, Stack Exchange, or even among other programmers I know IRL.

In particular, I'm incredibly interested in layout algorithms - I'm working on building a GUI toolkit, for which I need layout algorithms to lay out widgets, but can't find anything other than descriptions of how to use existing systems...

Re: How to draw S-curved arrows between boxes

#27

Post by amelius »

This looks like a nice result that can be useful in some cases, but it is limited to a single arrow. When you have more than one arrow, you get constraints like "minimize the number of crossings" and then "minimize total arrow line length". At this point, it becomes way more complicated.

Re: How to draw S-curved arrows between boxes

#28

Post by alejohausner »

jedberg wrote: post #24

We recently redid our landscaping, which included making the edge of the driveway and S curve. I thought my landscaper was pretty clever. He took a flimsy pvc pipe, nailed it down at the beginning and end of the curve, and it bent into a perfect S curve that he then spray painted down to follow. It’s amazing how physics and nature can solve these problems for you!

This is a mechanical spline [1]: a thin strip of wood constrained at one or more points, or "knots". They were used by ship builders and draftsmen before mathematicians and programmers invented cubic curves for computer aided design. IIRC, bending a beam with a single point force and no bending moments at the ends gives you a quadratic curve shape, and other, and adding bending moments gives you cubic curves.

1: https://en.m.wikipedia.org/wiki/Flat_spline

Re: How to draw S-curved arrows between boxes

#29

Post by alejohausner »

The graphviz system [1], originally from at&t labs, has a program called "dot" that does this kind of thing very well, including routing the arrows around other boxes that may be in the way. It's been open sourced. It's also been ported to the web [2]

1: https://graphviz.org/

2: http://www.webgraphviz.com/?tab=map

Re: How to draw S-curved arrows between boxes

#30

Post by matsemann »

jedberg wrote: post #24

We recently redid our landscaping, which included making the edge of the driveway and S curve. I thought my landscaper was pretty clever. He took a flimsy pvc pipe, nailed it down at the beginning and end of the curve, and it bent into a perfect S curve that he then spray painted down to follow. It’s amazing how physics and nature can solve these problems for you!

Reminds me of a video I saw of someone using bendable woods to draw curves in the old days. Managed to find the concept again https://en.m.wikipedia.org/wiki/Flat_spline
Post reply on HN