Pick points in viewport instead using sliders

Let’s say you had this polyline, how difficult is it to implement direct point manipulation in stead of using sliders?


At the moment, you won’t be able to do that without using the API. I will prepare a more complete tutorial in the near future, but here is a quick overview of how you would implement this in ShapeDiver at the moment:

  1. Grasshopper definition
    a. Inputting the positions of the points
    If you don’t want to use three different sliders for each point input, and especially if you are going to use a variable number of points, you will need a more compact and flexible way to input point positions. I would recommend to use a JSON string containing a list of points as input, with a list that can have a variable number of points. This can be sent from the website to the ShapeDiver model using the ShapeDiverTextInput component. Use the ShapeDiver JSON components to parse and extract the points from the input:

    b. Create the geometry and display it.
    Use the points to create your Polyline, and then of course display the polyline, as well as the point handlers from your sketch. Note that if you want to select the points individually, you need to send them in separate tree branches to the ShapeDiverDisplayGeometry component. Also note that at the moment, curves are not draggable in the viewer (this is a small problem, we will fix soon), so you should rather represent the points with small meshes.

Find below the complete Grasshopper definition from this example.

edit_polyline.gh (22.8 KB)

  1. Online point picker
    After you upload the model to ShapeDiver and embed it somewhere, you can use the API to create the behaviour you need. Without going in too much detail, here are the steps you need. You’ll find a link to the full working code of the example that you web developer should be able to work with.
    a. Define a group of hoverable an draggable objects in the viewer, specifying which effects happen when you hover or drag the objects of the group. In my example, I turn the objects dark red whey they are hovered, and then bright red when they are dragged.
    b. Add the points coming from the ShapeDiver model to this interaction group. Now the points can be hovered and dragged around in the scene.
    c. Whenever a point is released (when dragging ends), send the list of points locations to the ShapeDiver model, in order to update the shape of the polyline.

Find the code and try the example here: https://codepen.io/ShapeDiver/pen/pojdQKR?editors=0010

You will probably agree that a potential flaw of this approach is that the polyline does not update in real time, but only after the Grasshopper definition is updated through the servers. In general, this will make sense if you are updating not only a polyline but also some more complex geometry that will need to go through Rhino and Grasshopper. If this is only meant as an input, I would recommend to implement a separate point picker with a native front-end method, for example in a canvas. See for example this configurator. Then you just have to connect this canvas to the inputs of the model (the logic above is still valid in this case).


Wow thanks for a really comprehensive answer Mathieu! It’s awesome that you can do this kind of stuff so seemingly “easily”. For me that option could work, as there is actually a whole lot of updating that will happen after the points are moved anyways.

The only thing that would be necessary for me is a grid snap so that the points would be on exact 100mm x and y coordinates after moving.

Best regards

As a matter of fact, we just added a snapping feature to the API.

I created a second version of the example above, with three added functionalities:

  • The Grasshopper model includes a simple grid. It also generates some more complex geometry (nothing to fancy, a good old Voronoi pattern, it’s just to make a point).
  • The code adds a snapping module for the dragged points on to the background grid.
  • I also made a fancier version of the polyline update which is now happening in real time. This requires the manual creation and updating of a THREE.JS object.

As a warning, I would consider the last two points (and especially the last one) as advanced API tasks. It will definitely make sense in the future to expose some of these features to the Grasshopper plugin, in order to avoid the API learning curve.

Full example: https://codepen.io/ShapeDiver/pen/ZEbvmQQ


Hi Mathieu

Sorry for late answer, i have been too busy lately…
That was very impressive! It would be exactly what i need for the configurator i am currently working on! Unfortunately it is confidential at the moment so i can not show it. It involves moving points in simple polyline shapes though, and the direct moving of points like above is way more intuitive for the users than a bunch of sliders.

Best regards!

Best regards