Drawing Interesting Meshes with the Mouse

Looking for advice, wisdom, resources, ideas, the usual.

Step one, I got the parabox node Make Mesh with Values to work drawing a mesh with the mouse. Cool. Now I want to make some mesh “brushes”, and any other wild thing that comes up, geometric/parametric or otherwise.

The way I see it, elegant solutions have been around for a long time (at least a couple decades), and folks have done tons of interesting stuff in other software (Processing, Jitter, openFrameworks, javascript, etc.). At present I’m coming up a bit slow and short slogging through the interwebs.

Any ideas are welcome. Are there any tools I’m missing in Vuo at present?

I’m just getting started, here are some notes for some rudimentary triangle math (middle school level is about where I’m at right now) to try and get some geometry working, hope it makes sense.

Triangle ABC    
A = ax,ay (previous mouse point) 
B = bx,by (current mouse point)
C = cx,cy (the third point in the triangle, stroke width/2)

Lengths of triangle sides (line segments)
AC = .1 (stroke width)
AB = sqrt((ax-bx)*(ax-bx)+(ay-by)*(ay-by))
BC = sqrt(AB*AB + AC*AC)

Find coordinates for C (cx,cy)

cy = (AB*AB + AC*AC - BC*BC) / (2*AB)
cx = sqrt(AC*AC - cy*cy)

To orient point C, maybe calculate direction of point B relative to point A (imagining an input selector with formulas for 4 possible orientations). I guess some vector math could come in about now (direction, momentum, et al.)
bx<=ax&&by>=ay??1:     -cx,cy (TL)
bx<=ax&&by<=ay??2:     -cx,-cy (BL)
bx>=ax&&by<=ay??3:     cx,-cy (TR)
bx>=ax&&by>=ay??4      cx,cy (BR)

Draw Mesh with Mouse.vuo (15.2 KB)

1 Like

You may get something useful from this: https://community.vuo.org/t/-/6229
Scroll down and have a look at: Triangle Snake Kinect.vuo
It creates a triangular prism with quaternion rotations, works well with Kinect or Leap motion input but also set-up to run from Waves.

I have done more to this such as adding UV coordinates and more vertices so it creates cylinders.
I got stuck trying to fathom how to create Normals so not yet shared.


Wow, yeah, that’s where I want to be right now. Thank you, I’ll dig in!  

1 Like

…and here’s the most recent with some fixes, UV’s, Lighting Normals created by Facetize, : https://community.vuo.org/t/-/6287
I like your Enqueue and make points method @jersmi, I am interested in trying to combine it with this cylinder.

1 Like

Thanks again, very cool stuff. I’ll be getting back to this in a bit.

By the way, regarding Enqueue, my final destination is to add mesh “brushes” to this comp: https://community.vuo.org/t/-/6136

Ok, made some progress with help from @Scratchpole and the quaternions, but now I’m stumped. Currently the attached layout is hooked up to see Line Mesh. Looks promising, now I want a triangle mesh. Readouts from the positions and elements outputs on Get Mesh Values make it appear that Get Mesh with Values cannot unpack the elements created with Enqueue and Combine 3D Objects. @smokris Reinterpret 3D Object also appears to not work, maybe for the same reasons? Help?

Then jumping ahead of myself, this Open Frameworks page is pretty cool. I’d like to approach some of these – to start with, the image from the Polyline Brushes: Points, Normals and Tangents section showing getNormalAtIndex (the image below). Any help is hugely appreciated. Would it be a feature request to have a Make Normals (or whatever) node?


Draw Mesh with Mouse v0.1.vuo (8.77 KB)

1 Like

I won’t be of much help here, and sometimes due to limited mesh understanding I don’t know either why I get or don’t get info from the Get Mesh Values but from your comp, maybe it cannot retrieve child objects, so using a Flatten 3D Object allows Get Mesh Values to retrieve stuff.

However, using a “triangles trip” the enqueue list looses its last values smoothly, but using “individual triangles” it adds a jumpy flickering effect to the mesh / list.

Also, what I don’t understand is that even with the mouse node output set to “Enqueue Events” instead of “Drop Events”, moving the mouse quickly one gets gaps between the triangle strip. Would need more time digging.


Draw Mesh with Mouse v0.2 - TriangleStrip.vuo (8.37 KB)

Draw Mesh with Mouse v0.2 - IndivTriangles.vuo (8.37 KB)

1 Like

Look more at the Cylinder Snake comp I shared.
Currently you are creating individual line vertex not triangle strip vertex.
They need to be in the expected order to be interpreted correctly.

You need to create vertices for either side of the strip making up triangles which build the ‘ribbon’.

See how I used: get item from, and interleave lists.
You could delete parts of that comp to just leave one side of the cylinder remaining, and then repurpose that part.


Awesome. Thanks, guys.

1 Like

I just hooked up a Leap motion to your Draw Mesh with Mouse v0.2 - TriangleStrip.vuo comp @Bodysoulspirit no gaps when using that…!?

sorry @Scratchpole, typo, I meant when moving the mouse quickly, not slowly.

I get the screenshot below kind of gaps, I thought enqueue would enqueue them all even if it means slowing down the comp, and connect the triangles, but surely it has to do with mouse & screen refresh rate and stuff I guess, was just a quick test composition, will check more when more time


Yes I get the same gaps with mouse input.
Here’s a screenshot using Leap Motion input, no gaps:

Sorry to say this comp does not make vertices which make for tidy faces.
Try adding a flat colour shader instead of wireframe and you will see the issue.
Adding a facetize does something to rid of the error.

1 Like

Could be what Joe mentioned about the order of vertices, need to hack at that.

Also want to wrap my head around texture coordinates. How do you properly texture a real time growing ribbon? Speaking of which and maybe off topic, I’m trying to rework @smokris’s Metallic Scribbler comp with Make Mesh With Values. (I mean, look how awesome Zach Lieberman’s shaders are. Then again, he helped create openFrameworks. Love his work). Right now I’m at that point where I need to understand how the texture coordinates work – how do I get @smokris’ cool 1D texture to behave like it does in the metallic scribbler?

Work in progress attached.  

MetallicScribbler_MakeMesh.vuo (16.4 KB)

And I just found Joe’s other post here: How to generate UV/Texture coordinates?

1 Like

Here’s a ribbon with UV’s.

Scratchpole Leap Ribbon UV.zip (28.9 KB)

Yeah, I was just looking at your setup in the Cylinder Snake comp. @Scratchpole, your comps are really helpful, thanks a ton for sharing, I can feel the amount of work you put in to get it this far.

I still need to catch up on some mesh 101 groundwork to learn the rules, why I need that order for UV coords, et al. That’s why I think @smokris`s metallic scribbler is a useful test – how can I map UV coords to a randomly generating mesh, and in the case of the metallic shader a 1D randomly changing shader?

Also getting that parabox GLSL node on my radar.