Processing-like 2D primitives

I’m looking for a way to draw 2D primitives in a Processing-like way.

Most importantly Processing allows setting a size-independent strokeWeight(). No matter what dimensions primitives like rectangle or ellipses have the stroke weight will always be the same. This approach feels very intuitive to me.

Furthermore, Processing allows you to set:


This feels very much like designing in Photoshop, Illustrator etc. I would really like to use similar workflow in vvvv/DX11 as well. I was surprised when I couldn’t figure out a way of doing this easily in vvvv as it seems so basic.

What’s the best way to achieve this in vvvv?

Thanks a lot!

definitely with skia:

Thanks, @tonfilm. I followed the instructions but after drag’n’dropping one of the examples into VL I get this error:


ah, skia needs the latest vvvv release beta37…

Ah, thanks. Beautiful.

So I can composite my 3D parts with 2D parts after rendering them separately which might be an option for what I’m going to do this time.

What’s the easiest way of achieving this in in the same DX11 renderer though?

the thing is that the underlying Skia library just comes with those primitives, while DX11 doesn’t. so in DX11 someone would have to do that work manually. i guess there’d be different strategies as of how to go about this. so i’m afraid i don’t see an “easy” way there other than sitting down and patching some primitives to your needs.

Thanks, @joreg. Good to know. I’m going to look into it some time.

On another note: Skia is nice, but it’s also quite expensive on the CPU.

I need to render in 4320 x 1920. Seems Skia is to slow for that unfortunately.

Well there is no build in stroke in dx11, basically to make stroke more then 1px wide you have to build it from quads…

I guess you can provide some pictures of what you want to achive…

it highly depends on what you do and how you output the pixels to the screen… skia is hardware accelerated, so this resolution shouldn’t be a problem. if you could describe in more detail what you are doing we might find the bottleneck.

Thanks, @antokhio and @tonfilm.

This is kind of what I want to do:

skia rendering (25.3 KB)

… a HUD with dashed line, rectangles, circles and text. With 4 objects it runs at 40 to 50 fps on my machine. System Monitor tells me the CPU is the bottleneck.

I went ahead and started working on a DX11 version. I’m using Segment (DX11.Geometry) to create rectangles and circles since I couldn’t find anything else that allowed to create loops. For dashed lines, I’m using Line (DX11). It kind of works. I can easily do 100 objects at least at 60fps.

Only the dashes of the lines vary depending on the angle of the line whereas I would like them to be constant. I think it has to do with AspectRatio(DX11.Layer). Maybe I need to change the coordinate system in the shader to work in screen space?

have you alt f9’d the skia, is the bottle neck in the VL node or in the as image output from VL? I’m not keen on getting image data into and out of VL, seems like making nodes for vvvv is heavy, I wonder if they should be inside the threaded VL environment. As image with an image size that large is going to be slow (thinking from )

I know there is CTRL F9 in vvvv which gives me this:


Is there something similar in VL?

What exactly do you mean?

Sorry got my f’s mixed up, yeah f9
3000 seems a fair wack to me, but 11,000 is even worse!

Not totally unrelated, but a little off topic

At the LINK camp we had a discussion going on about how to make vl more friendly for complete beginners, and in the discourse the idea dropped that a starter vl kit should be as minimal and concise as 2d proce55ing - öh p5.

Just remembered, when reading this thread, and I believe it’s one of those ideas worth spreading, even though there is no particular thread about random LINK ideas. I guess it could already be done functionality-wise (Forward)

open the vl settings file from quad menu and set “TooltipShowTimings” to true. this adds the timings to the tooltip when you hover a vl node that is running.

there are a few dx11 line modules around, have a look at mp.dx by @microdee and do a search… otherwise you would need a custom shader to do that.

I realised Renderer is a lot faster than Renderer (Offline) and then spotted Renderer (Offline Accelerated). Unfortunately the latter outputs just a white image for me.

@tonfilm. Thanks I will check it out.


in regards to the screen shot you posted, should those UI elements be always the same sitze but correlate to 3d positions?

because if yes then you would want to do it differently. you can unproject the 3d position into 2d viewspace ( by doing 3d transform * ViewProjection ) … and then use a quad that renders your ui element with alpha transparency and with pixelbillboard, so that you have it crisp and nicely fitting exact on your output pixels.

and then create the ui element with a vector program like adobe illustrator or inkscape

3D_viewspace_billboards.v4p (29.8 KB)