Discussion in 'ShapeJS' started by AlanHudson, Apr 11, 2017.

  1. AlanHudson
    AlanHudson Shapeways Employee Dev Team is a community site for sharing customized 3D printed products created from ShapeJS scripts.
    ShapeJS is a Javascript based language for creating products and fully interactive creator applications.

    Our goal is to lower the bar for creating custom products. 3D printing enables mass customization where each product is unique.
    We've seen some great examples of creators made by talented teams. ShapeJS is designed to make it much easier to
    create and deploy creators so small teams of one or two passoniate people can succeed.

    This site allows you to share scripts at several levels depending on your goals.
    You can share script source code with others, allow them to download your creations as a 3d printable model,
    or allow them to purchase through Shapeways. When printing at Shapeways, you can add markup to the price and sell your creations.

    This is just the beginning for In the coming months we plan on releasing the following features:

    Picture Sketching - Create images on the page and see the results immediately in the 3D view
    Color ShapeJS Documentation - Document how to use the color functions in ShapeJS to make color models
    Real time printability viz/fixes - Quickly show wall thickness and disconnected parts visualization to help with printability
    Real time pricing - Display Shapeways price changes as you change the parameters
    Embeddable ShapeJS Widget - Display your creator on your own website with a custom user interface

    We are just getting started on this journey and we'd love feedback. The best place to discuss the site
    is on the Shapeways ShapeJS forums
    pendarestan likes this.
  2. stonysmith
    stonysmith Well-Known Member Moderator
    Just signed up. <grin>
    I need to do a bit more with ShapeJS ... my default is to run to OpenSCAD even if ShapeJS can do the job.
  3. AlanHudson
    AlanHudson Shapeways Employee Dev Team

    OpenSCAD is still better at complex cad things. ShapeJS is really trying to target real time Creators. That said I did my last art project using ShapeJS as a cad language and it worked well. Where ShapeJS really shines is its image handling and the symmetry functions. We'll be posting some new content soon to show some really cool ways to use the symmetry engine to make patterns.

    shawn_halayka likes this.
  4. MrNib
    MrNib Well-Known Member
    Has ShapeJS changed bigly since 2014? I plopped some old code into the system and of course it doesn't seem to be doing anything. I think the old code used numeric input boxes (is that even a thing?) and I see some lines holding default input variables. Guess I'll try to find some more recent code and compare it to what I have. Ugh, debugging!

    Looks like I can use one of the product examples as model code to whip my old attempts into shape (no pun intended). It's been a pleasurable 3 years not fiddling around with javascript.
    Last edited: Apr 11, 2017
  5. AlanHudson
    AlanHudson Shapeways Employee Dev Team
    The main things that have changed are around the parameter passing. They are now passed in an args structure to main. You define the params in uiParams and then reference their values via args.paramName such as args.period.

    The other place that might have changed since then is the final way to return. You need to return a Scene object as in: return new Scene(intersect, new Bounds(-s,s,-s,s,-s,s));

    If you have problems converting a script post in this forum and we'll help out. The only major feature not in ShapeJS V2 is custom datasources.

    var uiParams = [
    name: "period",
    desc: "Period",
    type: "double",
    rangeMin: 1,
    rangeMax: 21,
    step: 1,
    defaultVal: 18
    name: "thickness",
    desc: "Thickness",
    type: "double",
    rangeMin: 1,
    rangeMax: 5,
    step: 0.5,
    defaultVal: 2

    function main(args) {
    var radius = 25 * MM;
    var sphere = new Sphere(radius);
    var gyroid = new VolumePatterns.Gyroid(args.period*MM, args.thickness*MM);
    var intersect = new Intersection();
    intersect.setBlend(2 * MM);
    var s = 26 * MM;
    return new Scene(intersect, new Bounds(-s,s,-s,s,-s,s));
  6. MrNib
    MrNib Well-Known Member
    Thanks. And I see you can have multiple parameter tabs. Nice. I should have some of that ancient code up and running soon.

    BTW, how does one log off of I couldn't find that anywhere.
  7. AlanHudson
    AlanHudson Shapeways Employee Dev Team
    We'll be adding a hidden flag soon so you can hide params. Ie at least in my flow I create a really complicated creator with lots of bells and whistles and then widdle it down to the interesting ones for others.

    I didn't think logout was of much use. I needed something similar during testing but didn't think users would need it. What are you hoping it accomplishes? Just a way to check what something would look like to other users? For that I use a incognito window. That said if you need it I can figure out how to add it.
  8. MrNib
    MrNib Well-Known Member
    I don't know the intricacies of the web world with regards to staying logged onto sites. It seems like something that could cause problems with relogging on after Windows updates or from a different computer, cookie clearing, etc. Maybe a security issue on a shared computer. Just seems like it's asking for problems, but I could be wrong.
  9. drloris
    drloris Well-Known Member
    Is there any chance of being able to use shapeJS creators in my shapeways shop?
    Sending people off to some other website seems decidedly odd.
  10. MrNib
    MrNib Well-Known Member
    Oh, I think this is my problem. Are custom datasources the same thing as custom volume patterns? I had created a custom generator, basically to create cylindrical patterned surfaces, radially and/or axially using math functions, as we discussed in 2014 in the Volume Patterns thread. So I guess I'm skunked unless there is a standard element for this type of thing in V2. Time to put everything back to bed?


    I finally got something working. There are minimal changes to the code. Mostly just argument passing corrections but I had to disable the routine I was using for the tubular patterning. The ShapeJS editor completely barfs on that for some reason. Again I'm not sure if that can be reworked or if I need an entirely different way of generating surface patterns mathematically on a plain/tapered/bowed cylinder. Basically, as far as I can tell, I had hacked the sphere generator to generate patterned cylinders using a lot of trigonometry. (I must have been smarter in 2014.)

    Other than that I have some sliver plains of voxels which weren't there before. Kind of strange. Maybe the old shapeJS ignored small artifacts using a threshold, but this shouldn't be a big problem to troubleshoot. It's mostly the pattern stuff that needs serious attention.

    sample output:
    test01redo first pass conversion.jpg
    Last edited: Apr 13, 2017
  11. AlanHudson
    AlanHudson Shapeways Employee Dev Team
    Cool! What is it :)

    Are the planes part of the 3d printable design? They are really thin.

    Also you see the red at the top, red indicates your design is outside the bounds of the Scene. Try enlarging the scene bounds to contain the whole object. I'd love it if we could calculate it automatically but we have some primitives which are unbounded in space which complicates matters.
  12. MrNib
    MrNib Well-Known Member
    The planes are not supposed to be there. I think they are artifacts created by trying to trim the ends of the empty pattern cylinder variable. If I disable the subtraction in the code those things go away. But that's all little stuff that can be modified and debugged later. The big problem is the pattern section that I guess must now be generated differently.

    What is it? The original ShapeJS code (6 pages of pain!) I generated in 2014 could generate a multitude of pen kit tubes and bodies/caps with patterned surfaces using 24 input variables, not that all would be enabled for different creators or types of pens. The idea was to generate some generic makers that could eventually be in a store and generate parts for most of the hundreds of pen kits that are on the market. Instead of me generating a bunch of pen body patterns for each pen model it would make more sense to have customers create a custom patterned part for the pen kit of their choice. So instead of having 1000 models in the store there might be a few creators that customers could use to parametrically generate what they needed. I was hoping this new development in integrating ShapeJS into stores would finally allow me to utilize that code. This first version was completely math based although in the future I planned to expand into image input options, etc.

    When people use pen kits they generally use wood or acrylic plastics, drill them out, glue in a brass tube (from the kit), and then turn the pieces on a lathe to size and polish them. In this case it's the patterns in the materials that add interest such as wood grain. For 3D printed materials the interest would lie in the surface pattern since many of the materials are rather boring in the sense of being uniform and not having a grain pattern. But they still look good after being assembled! I particularly like using the metallic plastic material for several reasons but even SF colored plastics are cool. For some commercial kits look here:

    Here's an example assembled pen although the pen body was not generated using ShapeJS, but you get the general idea. Many surface pattern options and tweaks could be available in a creator.

    pen example.jpg

    I'll continue with some more specifics in the dynamic pattern volume thread which is a better place for the technical problems regarding conversion to v2.
  13. MrNib
    MrNib Well-Known Member
    Quick question with regards to the input parameter boxes/sliders...

    There are times that a user entered variable can fall out of a recommended range based on other entered values. It's not that it's necessarily a matter of creating a printing error such as a thin wall, but instead things can fall out of a usability range in the end application. For example there might be three input variables than can fall between a range of 1 to 10, but the third variable is best kept in a range that is greater than variable1 + variable2. While the variable could be limited in the program with checks I don't think that keeps the slider from displaying any number within the original range that is set at the top of the program. Or would it?

    So if not is there any way to flag an error on the screen that a entered variable has popped out of a recommended range on the fly? For example by highlighting the entered numeric value in red, or perhaps displaying a warning such as variable3 should be greater than variable1 + variable2? Obviously this can be stated in the product description but that's not always as effective as a real time warning.
  14. AlanHudson
    AlanHudson Shapeways Employee Dev Team
    We've discussed a few ways to handle this but haven't picked an answer yet.

    The Cadillac option is a constraint system that allows the developer to specify relationships between params. ie c <= a + b. The second thought was letting the program return errors and reassign ui values. The final option I see is the more programmatic way of letting the developer code the user interface completely.

    I think the second approach is the likely route we'll go with an eventual goal of exposing the complete user interface level.

    Thanks for the suggestion, we'll add it.
  15. MrNib
    MrNib Well-Known Member
    I just tore the guts out of my old code and created a simpler 2017 version. It only has 1 pattern option. I'll need to select a pen kit and have some tubes made for it using the algorithm.

    The parameters tabs are showing the names of the variables and not the variable descriptions. And the description area formatting needs some work but everything seems functional.

    In this particular case the potential parameter selection error mentioned above could be highlighted if various parts of the tube assembly could be displayed in different colors. At the core of the tube is a "safe tube" and if it could be visualized in a color like orange it would give a hint a potential problem. No orange no problems. Some orange maybe a problem. It's definitely not a universal solution to this problem but it might be helpful in some cases.
  16. Oliver_Krangle
    Oliver_Krangle Well-Known Member
    Did I do this correctly?

    I now have two new stores, one in Shapeways proper and one in ShapeJS. I kept them separate from my PrintWrite shop to avoid any cyber-space conflicts.

    If I understand correctly models purchased by other users get sent to the Shapeways account where they are archived for possible re-purchase. That means I don't need to load any products into the Shapeways account unless I want to highlight some sample fixed designs that were generated by the custom creators in the ShapeJS account.

    It's not clear how people would ever find the store and creator offerings at ShapeJS unless a search capability eventually gets added to to cross link the domains. In the meantime I put a link to the ShapeJS shop in the header of the Shapeways shop.

    Although I set my solitary product as public and for sale it doesn't seem to appear in the ShapeJS marketplace. I guess all those details are still being worked on?
  17. AlanHudson
    AlanHudson Shapeways Employee Dev Team
    I approved them for the marketplace. It's manual right now so I can avoid spam. I would add some pictures to help display it in the marketplace better. Make a 625x465 image. I'll add a save to image from the shapejs IDE soon.

    Link from right now. I'll start adding more crosslinks as we settle the patterns.

    In terms of people finding these that's a good question. Half the battle is making the geometry, the other is selling it. We'll of course highlight the interesting creators but shop owners are going need to do their own marketing as well.
  18. AlanHudson
    AlanHudson Shapeways Employee Dev Team
    Actually it doesn't look like they have been set for sale? Check the edit page make sure you set it public and for sale. Approve wth your shapeways account to add markup. If this isn't clear tell me and I'll make more detailed instructions as its a bit ackward right now.
  19. Oliver_Krangle
    Oliver_Krangle Well-Known Member
    I see that things are still being worked on the display pages so I assume many things are still up in the air.

    What's the character limit for labels next to the sliders? Yesterday it was about 17 characters but the latest page rearrangement seems to be reducing the number. On the other hand the new arrangement seems promising for long lists of variables. Speaking of which, will there be any way to upload vectors or matrices from a file instead of using the sliders?

    And another thing I noticed was that the Z-axis is perpendicular to the screen. So I think that means some objects should be built along the X or Y axes to look good right off the bat. Alternately maybe the system could use a parameter that lets you set the initial render directions similar to regular shop product pages. Of course objects can also be rotated prior to generating the scene view. :confused:
  20. Oliver_Krangle
    Oliver_Krangle Well-Known Member
    I had done the acount linking and set mark-ups but that was gone this morning and the structure of the edit page seemed to have changed? Anyway I had set things as not for sale earlier today since I wasn't sure what was going on. I suppose I can retry the account linking thing and reactivate things for sale. I also updated scripts so when that's done does it require re-approval?