Draggable circle review

Hey people! I have this small patch that contains one draggable circle without making use of packing the whole thing into a custom object. Any ideas / suggestions on improvements? It works good, but it seems to me there could be better ways to program this. Feedback welcome!


DraggableCircle.vl (17.9 KB)

another version.
DraggableCircle.vl (12.7 KB)

Thanks! Almost the same… the mouse will “loose” the circle, when moved very quick, thats why in my example I also s+h the collision whenever the mouse goes up or down.

Here is a mash-up of both approaches.


another one
DraggableCircle.vl (14.1 KB)

1 Like

Gave it a go
DraggableCircle_Reactive.vl (31.6 KB)


@bjoern why do you need the mouseup and the 2 if regions in allow move? is this a kind s+h logic? i cant tell because it seems to work fine without (using just the ouptput from the big AND)

You are right, it’s not needed.
DraggableCircle_Reactive_simplified.vl (25.8 KB)

1 Like

in your example there is no circle on startup because the holdlatest is empty. any easy way to fix that?


1 Like

Also added velocity to the circle. Now I want to keep it within the bounds of the window, but struggling with this, where should I put the Mirror / MapMirror node? Tried it after the position pad, but of course this would reverse half of all cases the mouse values…

DraggableCircle.vl (17.8 KB)

1 Like

Ah btw, thanks for the reactive example. One fine day I will come back to this for sure.

Bjorn’s patch is the only correct one, as it doesn’t depend on the main loop FPS and it won’t do anything (and burn CPU cycles) when there is no mouse input event.

Doing everything in the main loop will run into the same problems you always had in vvvv beta.

the basics of this are explained in the first two examples in the reactive workshop from node20.


@sebescudie looking forward to your strategy pattern based approach ;P

EDIT: for those who don’t know the thread, referring to this: Community Coding : Design Patterns

1 Like

@tonfilm - “the only correct one” sounds a bit harsh :) maybe the most elegant or future-proof solution? I would argue that reactive programming is a rather advanced topic, and the other ways are totally fine for the fellow beginner patcher.

1 Like

sebes just mentioned to me that the first strategy pattern implementation in VL was done by @tonfilm

These days Elementa widgets internally also make use of this pattern with the idea: in Idle state no energy gets wasted… it’s a cool pattern.

It sounds overdone for such a simple scenario, but maybe we can build it in a way that we have a Dragger node, that works for more cases?

I thought that’s the idea behind VL.IO.Multitouch? It is/feels kind of broken though.

with respect on what @tonfilm said and with understanding what Framedifference might mean, this is how I was always doing till today (every single time) :/

more or less is the same approach as @chk , the only difference here is the FrameDifference in the if statement (this may cause issues in bigger patches) and the double togedge for a more consistent handling of the Circle.

1 Like

Ok ok. Didn’t work to trick somebody into doing this.
So here is the entry representing her highness: “the strategy pattern”.

DraggableCircle_Strategy_Pattern.vl (53.2 KB)

It’s quite some work. But once you do your first strategy pattern implementation: you will feel high :)


@gregsn i feel dizzy just by looking at it :)