Introducing Vector Networks: Generalized path editing for graphics | Hacker News Reader

Introducing Vector Networks: Generalized path editing for graphics

medium.com

198 pointsdankohn130 comments

I've always felt like I was slightly fighting against the Pen tool in most vector drawing apps, especially when drawing Bezier splines. The direct manipulation looks like a massive improvement, and would also be more intuitive with a touch or stylus interface.

Secondly, this is one of the best examples I've seen of genuine UX and HCI research put into a tool that everyone else thought was "good enough".

I got some vague VPRI-ish/Bret Victor-ish vibe when reading the article. Direct manipulation and constraint solving definitely fits the bill here.

Looks like a very intuitive way of connecting paths together in a more powerful way than just having lines. I like the way you can draw part of a segment and then go back and add more line segments afterwards: the line cap for three meeting points is a lot more impressive than it looks.

The ability to fill sections and then punch out holes makes it really easy to see what's happening as well.

The post has a number of animated gifs which show how these work: it's worth reading to see them.

The only thing that sucks is the name. Essentially it's a tool that has more impressive path editing functionality than I have seen in other vector editors. The name of this post doesn't do it justice.

I Googled "Vector Networks" and it also seems to be a term that they invented. Figma (their product) is sadly a UI mocking tool and not a vector graphics editor. "Pathfinder" (the tool in Adobe products that calculates fills based on winding order) is notoriously unusable. I'm sure that graphics designers would gobble up tool that had sane path finding.

I'd love to see some literature on how these vector networks work.

I'm not sure why you see a strict delineation. One of the few reasons most designers prefer purpose made graphic design tools is for the pen tooling. The other big one is color management. If Figma can nail both in a UI design tool there's no reason it can't be used for graphic design.

People already use Sketch for some graphic design despite its reeaaallly unimpressive path tooling, typography tooling, and color tooling.

Speeding up the 90% usecase goes a long way.

That said, I haven't actually seen Figma so maybe it really is more purpose built than I'm imagining.

Figma is not just a UI mocking tool. It's a full general-purpose vector graphics editor. Vector networks work similar to meshes in 3D.

I'll have to wait for my beta invite to put this to the test, but color me intrigued.

That was my first thought. The way he describes vector networks sounds exactly like how creating models in something like Sketchup works.

Agreed. And the fact that it's only in use in a UI mocking tool is a shame, I'd kill to have this tool in Sketch or something similar!

Have you tried VPaint?

[0] https://www.youtube.com/watch?v=Xk1_CugdytI

[1] http://www.vpaint.org/

Hopefully they don't have a patent on it so we can get it in an actual work tool not a mockup tool

Figma is not just a UI mocking tool. It's a general-purpose drawing tool and is feature-equivalent with Sketch.

Well that is good news! From what I saw on the website it seemed more aimed at UI mocking, but if it's going to be taking on Sketch well I'm definitely convinced!

Nice advert. Shame it's just more SaaS. Not sure if it's just because I'm in .au and have laggier connections to all the fancy tools in the US, but I just don't find web tools that fulfilling.

I've been having a great time with Serif's Affinity Designer lately. Same sort of bezier tools as everyone else, but feels a lot nicer to use than say, Illustrator.

Edit: downvote for calling it an advert? Or is disliking SaaS the unpopular point of view? ;)

Agreed, absolutely no interest in turning even more of my design tools into a subscription cost.

If you hold the command key, you can also move those curves around without modifying the Bezier curves.

I agree, I'm also not at all a fan of in-browser apps. The benefits all seem to accrue on the maker's side: faster deployment & distribution, single codebase for multiple platforms, assurance of common versions across the user base, and not least easier and more complete monetization. The drawbacks are all for us users to suffer: idiosyncratic UX, unpredictable performance, poor interoperability with other apps, limited offline use, everything's gone if the company fails.

Reminds me a lot of Ivan Sutherland's Sketchpad (https://en.wikipedia.org/wiki/Sketchpad), which had a similar interface and an iterative constraint solver.

> Vector Networks

You mean "graphs".

This was my initial reaction too! I wonder how is this different from graphs.

Graphs have a set of vertices and a set of edges, but vector networks also have a set of faces.

Meshes then?

Meshes are closer but vector networks also attach specific attributes to edges which is not usually the case with meshes. Examples: control handles (for curves), stroke weight, dash pattern.

Not uncommon in mesh editors either. Off the top of my head, blender stores edge splits, crease strength, and line styles for the freestyle renderer.

Seems like a superset of graphs. On a graph, you only care about what's connected to what. This takes the empty space between into account, as well (fills). I would say it's a separate concept that happens to build on graph theory.

Also isn't it really a segment network? I always think of vectors as having direction and unless I misunderstand, it sounds like this is directionless.

Some of it seems to be transplanted from 3D software (multiple nodes connecting to a single node), e.g. SketchUp: https://youtu.be/ejIIvrQk2tw

omg Please let this make it to Adobe Illustrator!

Sorry for that question: What is that different to Affinity Designer?

You can do pretty much the same in Affinity Designer. Even things like moving curves around without the need to modify the handles of the curves.

I don't see anything innovative here.

I don't think Affinity Designer supports things like a path with, for example, three or more edges connecting to the same node.

Reply on news.ycombinator.com