Blake Bowen's Node Editor - Is There a Tutorial on this Noodle/Node Technique?

[Sackadoo]

I came across

See the Pen 4c3752574267b3a986cb8eee7ccb8c81 by osublake (@osublake) on CodePen

on CodePen last week and I've been digging around to better understand it ever since. Not getting very far very fast.

 

I'm new to GSAP and SVG (which may be 90% of the problem) and what I'm trying to figure out is what's going on behind the drawable connections. If not a tutorial, just a quick pseudo-code summary of how this is implemented might be enough.

 

 

[Carl]

Hi and welcome to the GreenSock forums,

 

That CodePen demo was related to this post:

 

 

As you can probably tell from the source code it isn't really a "beginner-friendly" type of project

If you have a specific question, I'd suggest asking @OSUblake in that thread. 

 

[Sackadoo]

Thanks, Carl. That gives me a place to start.

[OSUblake]

On 11/13/2017 at 12:35 PM, Sackadoo said:

I came across

See the Pen 4c3752574267b3a986cb8eee7ccb8c81 by osublake (@osublake) on CodePen

on CodePen last week and I've been digging around to better understand it ever since. Not getting very far very fast.

 

I'm new to GSAP and SVG (which may be 90% of the problem) and what I'm trying to figure out is what's going on behind the drawable connections. If not a tutorial, just a quick pseudo-code summary of how this is implemented might be enough.

 

 

 

How did you find that demo as it's set to private? Not that I care, just curious if it was posted somewhere else. 

 

As I stated in the beginning of that thread, it requires some advanced JS skills, and will be hard to break down into some pseudo code. Is there anything specific you want to know about it?

[Sackadoo]

Thanks for replying, Blake.

 

If memory serves, I followed a link in a forum thread, maybe even here on this forum. The guy you did the demo for, I remember him being impatient. Hope that helps narrow things down.

 

I'd like to know which part(s) of your code deal with these three areas:

• drawing the bezier curves,
• maintaining/updating those curves while the nodes are moving, and
• moving the nodes themselves.

I did notice that you seem to be drawing the connectors on a layer separate from the nodes (Processes)... or did I misinterpret that?

 

For all I know, all these things may be handled by GSAP. I'm assuming API calls are easy to spot in your code via naming conventions, but it might be helpful to know what prep work you did prior to making the calls.

 

The end goal as far as these mechanisms are concerned is to be able to add/delete nodes as well as connections under user control.

 

In case you're interested in what I'm up to...

 

It's a story-planning app, index cards on a multi-level corkboard, a simulation of that. The input and output sockets would be to make connections between threads and across corkboard levels.

 

To be developed in Typescript/Electron.

 

[Carl]

95% of Blake's demo is custom code.  Although the code is incredibly clean with clear names for everything I don't think it was written as an API that anyone could tap into to have connectors on things. 

 

The only thing the GreenSock API handles is making the objects Draggable.

You can read about Draggable here: https://greensock.com/draggable

The path's are updated via the code in the updatePath(), but there's a lot more going on than just that.

 

 

[Sackadoo]

On 11/24/2017 at 11:32 AM, Carl said:

The only thing the GreenSock API handles is making the objects Draggable.

Thanks for pointing that out. It might have taken me quite some time to realize that.

On 11/24/2017 at 11:32 AM, Carl said:

The path's are updated via the code in the updatePath(), but there's a lot more going on than just that.

Yup.

[OSUblake]

The way I made that demo is designed to really only work in its current form. It would probably serve you better to not even go by why I did, as a real node editor is very dynamic, and usually has some sort of rules associated with the all the ports, like what can connect to what.

 

For a real node editor, I would start over from scratch. Make the nodes as simple as possible, and get some basic functionality working without any dragging. Then start adding simple line connections. Once you get that down, it will be easier to add in draggable functionality and other UI effects.

 

The connections are drawn on a separate layer, and requires managing where every point for a connection is located in the global space. It's a pretty involved process, and I'm not aware of any library that does that out of the box.

[Sackadoo]

Thanks, Blake. That sounds like very reasonable advice.