Let’s say you had this polyline, how difficult is it to implement direct point manipulation in stead of using sliders?
K
1 Like
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:
-
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)
-
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).
2 Likes
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
Kris
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
4 Likes
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!
K
Best regards
Hi @mathieu1 !
Would you know if there is any function that uses these same points to create a spline?
// create the live polyline
polylineAsset = polylineAsset(positions.points);
api.scene.updateAsync([polylineAsset]);
I was about to say no but I found that three.js has a builtin spline function from a series of points:
So it should be straightforward to adapt the above example to a spline envelope. If you manage to create a codepen from it, it would be great to share it here! Otherwise I will have try and create an example when I have a moment.
I already came up with a new version:
Along with the new definition:
211210_EditSpline.gh (19.5 KB)
Note that the three js splines only have uniform knot spacing apparently, so the knot style has to be set to uniform in the definition.
1 Like
thank you very much Mathieu!
this will help me a lot.
Hello @mathieu1! This is slightly off topic but point input, i.e., creation not manipulation, on the canvas has been promised for sometime. I was under the impression that this feature was available in the new beta. Is this the case? If yes, is it only available through the API?
Best,
It has always been possible to define point inputs using the API, with the following steps:
- Make the relevant objects in your scene selectable using the API, and bind them with the SELECT_ON event which catches any click on the selectable objects of the scene.
- In the callback to this event, find the event property containing the location of the point that was clicked on the object, and send the coordinates to the grasshopper definition, using a text input with a JSON object for example.
- Use the location in Grasshopper for your purpose, optionally displaying a sphere or other visual element at the selected location.
We have an old tutorial regarding this process, check it out here: https://support.shapediver.com/hc/en-us/articles/360030890392-Tutorial-Pick-and-Drag-Points-on-an-Object (make sure to adapt it to the latest version of the viewer)
There is nothing new regarding point inputs in the beta version yet. We do plan to add a “Point input” component that wraps all these API steps without having to write any code, but it is not available yet.
Thanks @mathieu1, I missed your reply. I’m aware of that workflow but that is not what I was looking for. I want users to create points that are not on the Grasshopper definition. Like in this JavaScript app were they click on the canvas to draw a polygon.
Hi @mathieu1
Is the snapping feature available in API v3?
Hello @manojdotwork,
snapping has now been fully integrated into our interactions. You can have a look here
Cheers, Michael
2 Likes