Joinery: Joints for Laser Cut Assemblies

33,255

349

56

Published

Introduction: Joinery: Joints for Laser Cut Assemblies

Laser cutting is widely used by industrial designers and mechanical engineers as a rapid modeling tool. However, designing and fabricating laser cut assemblies can be a complex and tedious process, especially for novice designers. Joinery, the system described in the Instructable, was developed to facilitate the generation of customizable joints for laser cut assemblies.

Through Joinery, designers simply define connections between part edges in the assembly, while the system generates the joints. This system offers six different joint profiles for a variety of material and design needs.

Access Joinery here: clementzheng.github.io/joinery. At this moment, the system runs best on Chrome, Firefox, and Microsoft Edge. Safari users have reported numerous bugs during export which I have yet to address.

Since this is a fairly long Instructable, here is a table of contents if you know what you are looking for!

  1. Why use Joinery?
  2. Interface overview
  3. Preparing SVG files
  4. Defining joints
  5. Creating and applying joint profiles
  6. Modifying joints
  7. Modifying joint profiles
  8. Exporting joint profiles
  9. Exporting designs
  10. Joint profiles overview

Step 1: Why Use Joinery?

Joinery tackles the task of joint design and generation for laser cut assemblies. We understand that designers might want to rapidly evaluate their ideas with physical models, especially early on in the design process. However, we discovered that drawing joints for laser cut assemblies can be a tedious, trial-and-error process.

Joinery tackles joint design between different parts of an assembly. It takes a two-dimensional pattern (as a SVG file) and creates joints from connections which you define between edges. This two-dimensional pattern could be a digital drawing from Illustrator or Inkscape; or, it could be deconstructed parts from a 3D model via tools like 123D Make or Pepakura.

Joints generated by Joinery are customizable based on a set of parameters. They can be modified and updated efficiently in response to fabrication or design changes. This aims to mitigate the effort required to manually edit each joint to achieve a better fit, for example.

Step 2: Interface Overview

  1. System Options: menu for uploading and exporting designs, changing units from 'mm' to 'in', as well as toggling the display of drawing dimensions.
  2. Canvas Tools: tools for arranging parts on the canvas, removing parts from the canvas, as well as globally panning the workspace.
  3. Joint Tools: tools for defining joints, reversing paths, flipping paths and swapping male/female edges.
  4. Contextual Menu: right-clicking on a path brings up joint editing options.
  5. Joint Profiles: menu for managing joint profiles.
  6. Joint Parameters: displays a list of joint profile parameters which is used to modify joint profiles.
  7. Joint List: menu for managing user-defined joints.

Step 3: Preparing SVG Files

Designs are transferred in and out of Joinery as SVG files. We recommend using vector editing programs like Illustrator or Inkscape to prepare the SVG for Joinery.

  1. Ensure that you are only working in one layer.
  2. Ensure that connections between two edges are defined by two distinct paths. (Refer to the diagram above) Each edge in a connection should be a distinct, continuous path. You can use the 'cut' tool to separate a path into individual paths; conversely, you can join multiple paths together to form a single path. Color coding the edges of a connection is an optional step that you might find helpful.
  3. Ensure that edges in a connection have similar lengths. Since the edges in a connection will need to physically connect to each other, it is important to ensure that their lengths are similar. You can find the length of a path in Illustrator by selecting the path and viewing the 'document info' tab, with 'objects' checked in the dropdown menu.
  4. Ensure all edges in connections are not grouped. Joinery only works on ungrouped paths. You can use this to manage your document, grouping all details irrelevant to Joinery to ensure that they will not be affected.
  5. Ensure that you are working in 'mm' or 'in'. For dimensional accuracy during laser cutting, it is good practice to work in either 'mm' or 'in'. Joinery will perform an arbitrary conversion if it fails to detect the SVG's units.
  6. Export drawings to SVG, ensure that it is NOT responsive. When prompted by the system during export, make sure that the 'responsive' parameter is not checked.
  7. Use "export as" rather than export selection for Illustrator CC.
  8. Ensure that there is only one art board when using Illustrator CC, and that the files contains only vector objects. Unfortunately, images and other types of object conflicts with how Joinery reads SVG files.

Click on the 'import SVG' button in Joinery's system options to import your designs into Joinery. Multiple SVG files can be loaded into the same Joinery project. An example SVG file (2 inch big cube) has been provided for your reference, as well as an example Joinery file of the same SVG which you can import with "load project".

INKSCAPE USERS

It appears that different versions of Inkscape have different scaling conventions if pixels are used. Please check your file after export to ensure that your designs have not been scaled.

Step 4: Defining Joints

To define a joint connection between two edges ensure that the 'set joints' tool is selected from the joint tools menu on the left. As the cursor hovers over a valid edge, you will see the path highlighted in blue. Clicking on the first path defines the male joint, while clicking on the second path defines the female joint. These roles can be swapped at any time through the 'swap M/F' tool.

Once a joint has been defined, a new item will be added to the Joint List on the right. Hovering over an item in the joint list will highlight the connection on the uploaded pattern. In addition, paths in a joint are highlighted in green with their normal (a line perpendicular to the path) indicated. Dotted lines connect the pair of edges, indicating the connection between two paths.

Joinery will prompt you if you attempt to connect two paths with significantly different lengths. The joint will not be created in such a case.

Step 5: Creating and Applying Joint Profiles

Joinery offers six joint profiles for a variety of material and design needs. To add a joint profile to your project, select from the list of joint profiles via the drop down menu, and click add to include that profile in your project.

To apply a joint profile to a joint, simply shift+click the joint profile to copy, and shift+click the path to apply the profile. Alternatively, you can apply a joint profile by expanding a joint item, and selecting the joint profile from the drop down menu.

The same joint profile can be applied to multiple joint items; similarly, multiple joint profiles can be added to your project and they can be applied to different joint items.

Step 6: Modifying Joints

Joinery provides tools to help you fix a joint's orientation. These tools can be accessed by right clicking on a path in a joint, or by expanding a joint item in the joint list.

  1. Reverse path: reverses the direction of a path; switching the start of a path with its end.
  2. Flip joints: flips the normal of a path, hence flipping the direction which a joint profile extends from a path.
  3. Swap M/F: swaps the male and female roles in a joint.

Step 7: Modifying Joint Profiles

Each joint profile has a set of parameters which can be modified for customization. More details about the parameters for each joint profile type will be covered in later sections.

Modifications to a joint profile will immediately update all joints using that profile. To modify a joint profile, click on its title to expand and display the list of parameters. New values can be typed into each parameter. Hitting 'enter', or clicking on the 'set values' button, updates the joint profile. Values which have not been updated will be displayed in orange.

Step 8: Exporting Joint Profiles

Joint profiles can be exported by clicking on the 'save profile' button. This saves the parameter values of the particular joint profile. Saved profiles can be imported into other Joinery projects by clicking on the 'load' button in the joint profile menu.

With this feature, you can thus share a joint profile that has been optimized to a particular material and machine with other designers in your maker space. Or, keep it for your own reference.

Step 9: Exporting Designs

Joinery projects can be saved and loaded through the 'save project' and 'load project' buttons on the system menu at the left. Remember to save your work often!

Uploaded designs along with the generated joints can be exported for laser cutting by clicking on the 'export SVG' button on the system menu. Paths in the exported designs are color coded for convenience:

  1. #FF0000 Red = Original Paths: these are the base paths used to generate the joints.
  2. #0000FF Blue = Joints (Cutting): these are the cutting lines for joints generated by Joinery.
  3. #00FFFF Cyan = Joints (Folding): these are the folding lines for joints generated by Joinery.

Exported SVG files are automatically grouped. To continue editing the designs and joints in vector drawing programs like Illustrator, simply ungroup the paths in the drawing program. Programs like Illustrator also provide convenient selection tools to help you select objects by different attributes; e.g. you can select all cutting paths for joints by selecting all the paths with a blue stroke. Most laser cutters will also differentiate paths through stroke color; e.g. you can define different power and speed settings for cutting paths vs. folding paths.

Step 10: Joint Profile Overview

Joinery offers six joint profiles, the subsequent sections will elaborate on the different joint profiles and their parameters.

  1. Hem: to facilitate stitching, especially for thick fabrics.
  2. Interlocking: to connect two edges without adhesives or external fasteners, particularly for curved edges.
  3. Loop insert: to connect two pieces of fabric without stitching.
  4. Flap: to facilitate the connection between two straight edges with adhesives or external fasteners like zip-ties.
  5. Finger: for press-fit joints between thick rigid materials.
  6. Tab insert: to connect two straight edges without adhesives or external fasteners, particularly for paper-like materials.

Step 11: Hem (joint Profile)

The hem profile facilitates hand stitching—especially for thick fabrics like leather or felt which can be difficult to pierce with a needle. This profile consists of two parts, an offset from the original edge, and a series of holes to guide stitching.

Works on: Both curved and straight paths.

Ideal for: Fabrics, especially thick fabrics like leather and felt.

-

Parameters

  1. hem offset: the perpendicular distance between the original edge and the hem's edge.
  2. hole diameter: the diameter of the holes for stitching. A value of zero will simply generate the hem without any holes.
  3. hole spacing: the distance between holes.

Step 12: Interlocking (joint Profile)

The interlocking profile provides an inherent connection between two edges without the use of adhesives or fasteners. It is particularly useful for connecting curved surfaces—especially ruled surfaces.

Works on: Both curved and straight paths.

Ideal for: Thick, stiffer fabrics like felt and leather. Flexible paper and plastics, such as mylar drafting film and yupo paper.

-

Parameters:

  1. material thickness (M): thickness of the material for male joint. Depending on material compression, changing this parameter will affect the tightness of the joint's fit.
  2. material thickness (F): thickness of the material for female joint. Depending on material compression, changing this parameter will affect the tightness of the joint's fit.
  3. interlocking width: the width of each tab. This affects the density of joints and resolution of the edge after assembly.
  4. interlocking height: the height of each tab.
  5. flap angle: the slope angle of the tab's side.
  6. offset start: the distance from the start of the path before joints are generated.
  7. offset end: the distance from the end of the path where joints stop.
  8. grip: the width of the overlapping portion between each tab.
  9. tolerance: the gap between the stem of each tab. A negative value will overlap the tabs' stems, resulting in a tighter fit.

Step 13: Loop Insert (joint Profile)

The loop insert profile provides an inherent stitch-less connection between two fabric edges. This joint profile is useful if you do not have access to a sewing machine or are not experienced with hand stitching. Or, if you are looking to interface soft fabrics with hard materials. Furthermore, this joint profile can be disassembled, thus allowing you to recycle or switch out different parts of an assembly.

Works on: Both curved and straight paths.

Ideal for: Synthetic fabrics like nylon and polyester, as the laser will fuse the fabric's edge and prevent it from fraying. Fabric male inserts can connect to rigid female edges, e.g. acrylic or basswood.

-

Loop insert (overlap): Loop insert (overlap) is ideal for fabric-fabric connections. The overlapping hem covers the seam after assembly.

Loop insert: Loop insert is ideal for fabric-hard material connections. Unlike the loop insert (overlap), there is no offset from the original female edge.

Loop insert (surface): Rather than a pair of edges, loop insert (surface) connects a pair of surfaces. See the straps on the tote bag in the image above for an example.

-

Parameters

  1. material thickness (M): thickness of the material for male joint. Depending on material compression, changing this parameter will affect the tightness of the joint's fit.
  2. material thickness (F): thickness of the material for female joint. Depending on material compression, changing this parameter will affect the tightness of the joint's fit.
  3. hem offset: the perpendicular distance between the original edge and the slots for the inserts.
  4. insert width: the width of the insert's stem.
  5. hook width: the width of the insert's hook. A larger value will result in a more robust joint, but it will also make it more difficult to assemble.
  6. hook count: the number of hooks. A larger value will result in a more robust joint, but it will also make it more tedious to assemble.
  7. joint spacing: the distance between each insert.
  8. slack: the amount of slack between the two edges. A negative value might crumple the female edge.
  9. offset start: the distance from the start of the path before joints are generated.
  10. offset end: the distance from the end of the path where joints stop.

Step 14: Flap (joint Profile)

The flap profile is commonly used in flat-pack carton boxes and paper craft. Edges can be connected through the use of adhesives or external fasteners; e.g. zip-ties can make use of the registration holes to secure two edges together.

Works on: Straight paths only.

Ideal for: Foldable materials like corrugated cardboard or card stock.

-

Parameters

  1. height (M): height of the male flap. A value of zero will keep the original edge and not generate the flap on the male edge.
  2. height (F): height of the female flap. A value of zero will keep the original edge and not generate the flap on the female edge.
  3. flap angle: the slope angle for the sides of the flaps.
  4. hole diameter: the diameter of the registration holes. A value of zero will simply generate the flaps without any holes.
  5. hole spacing: the distance between registration holes.

Step 15: Finger (joint Profile)

The finger profile is typically used for press-fit, right-angle connections between rigid materials like basswood and acrylic sheets. Joinery extends this common profile by accommodating finger joints between two surfaces at angles other than 90 degrees (see image above).

Works on: Straight paths only.

Ideal for: Thick (>2mm / >0.1in), rigid materials like basswood and acrylic.

-

Finger joint (90deg): for right angle connections between two parts.

Parameters

  1. material thickness (M): thickness of the material for the male joint.
  2. material thickness (F): thickness of the material for the female joint.
  3. finger width: width of each 'finger'.
  4. finger radius: radius of the exterior corners of each 'finger'. Rounding the exterior corners may make it easier to press the edges together during assembly.
  5. offset start: the distance from the start of the path before joints are generated.
  6. offset end: the distance from the end of the path where joints stop.
  7. tolerance: the gap between each 'finger'. A negative value may result in an interference fit depending on the laser cutting kerf. This parameter is critical for achieving an optimal press-fit.

-

Finger joint (angle): for angled connections between two parts. Both edges should have the same material thickness.

Parameters

  1. material thickness: thickness of the material.
  2. finger width: width of each 'finger'.
  3. finger radius: radius of the exterior corners of each 'finger'. Rounding the exterior corners may make it easier to press the edges together during assembly.
  4. interior angle: the interior angle between two surfaces where the edges meet. In the case of an enclosure for electronics, this interior angle should be measured from the cavity for electronics.
  5. tolerance: the gap between each 'finger'. A negative value may result in an interference fit depending on the laser cutting kerf. This parameter is critical for achieving an optimal press-fit.

Step 16: Tab Insert (joint Profile)

The tab insert profile provides an inherent joint between two straight edges without the need for adhesives or external fasteners. Tab inserts can be entirely assembled from one side; closed forms are thus easily modeled with this profile (see image above).

Works on: Straight paths only.

Ideal for: Foldable paper and plastics like mylar drafting film or polyethylene sheets.

-

Parameters

  1. material thickness (M): thickness of the material for the male joint. This affects the size of the slots along the female edge.
  2. material thickness (F): thickness of the material for the female joint.
  3. insert width: width of the insert's stem and slots.
  4. insert height: height of the insert.
  5. flap height: height of the flap.
  6. flap angle: the slope angle for the sides of the flap.
  7. joint spacing: the distance between inserts.
  8. offset start: the distance from the start of the path before joints are generated.
  9. offset end: the distance from the end of the path where joints stop.
  10. grip: the interference between the insert and the slots. A larger value will result in a tighter connection, but it will also be harder to assemble.

Share

    Recommendations

    • Creative Misuse Contest

      Creative Misuse Contest
    • Oil Contest

      Oil Contest
    • Water Contest

      Water Contest

    56 Discussions

    Firstly, this tool is amazing! Thank you

    I am just having trouble with exporting my SVG file. It won't let me and goes to a blank screen.

    Please help

    Thank you

    3 replies

    Hi, I am using Safari. I tried on Chrome and that took me to a ‘save in’ window which works and Safari took me to a blank window

    Yes, unfortunately it does not work on safari. So far I've not been able to fix this issue and so the workaround is to use another browser. Sorry about that!

    Its always when you ask for help that you work it out.

    I had my pieces as different layers in ai. Made a test file to troubleshoot. If it mentions this in your instructions I missed it, if it doesnt maybe you should add it.

    Thanks, love your tool

    Thanks!

    This is not known to me and I have included it in the Instructable for others. Glad you figured it out!

    Hi Clement

    Thank you for sharing this superb tool. :)

    I have some troubles with creating hems: The hole dia is set to 0.1mm. When I compare it to the spacing which is 3mm, then there is something wrong (the hole dia is about 1.1mm).

    Do you have nice workaround for such a problem? Btw, I'm close to a working solution: I import the SVG back to Inkscape and then I edit the array of holes via width of the contour.

    Kind regards,
    Kurt

    joinv0.PNGjoinv1.PNG
    3 replies

    Hi Kurt,

    I just fired up Inkscape and tried to replicate your problem and it was as I suspected - Inkscape measures the bounds of the shape, including the stroke thickness! When I removed the stroke thickness/set it to a hairline (which is what you have to do typically for laser cutting) the shape is actually the right size (0.1mm).

    Hope this helps!

    Hi Clement

    Thank you for your prompt reply. Perfect, that solved the problem. :)

    When I'm done with my work I will send you some pictures.

    Kurt

    Hi Kurt,

    Thanks for using Joinery and send the pictures. I think it might be the other way around, where the spacing is not exactly 3mm, as the system will try to distribute the holes evenly along the path to get the spacing as close to 3mm as possible - but sometimes that is not possible.

    For the hole diameter, I'm wondering if Inkscape is measuring the holes with the stroke thickness as well. If you want to send me the actual SVG file, I can check it and see. I'm actually not the best at Inkscape but I will try :)

    Illustrator TIP... easiest way i've found to take a shape and break it down into edges for this AMAZING tool is the following:

    Select your object. Then go to Select > Object > Direction handles. Then cut (cmd-x). Delete what's left (all the anchor points). Then paste or paste in front.

    3 replies

    Angles Finger joints work great!

    IMG_4735.JPG

    Thank you so much for this! I was wondering if I could get some help though.

    I do no have any grouping set (as far as I can tell in InkScape) on my SVG. When I import into Joinery, I am unable to define the paths for joins. Its like it doesn't actual recognize the paths. Would you have any suggestions?

    3 replies

    Could you send me the SVG file or paste it here?

    Thank you for the response. I figured it out this morning. If you throw the SVG into InkScape and highlight the whole thing, there is a command called 'Break Apart', which actually separates it.

    Your tool works wonderfully.

    Awesome! I will keep that tip in mind. I use illustrator primarily but have started trying Inkscape too.

    Do post pictures of what you build if you don't mind! :)

    0
    user
    linmag

    1 year ago

    Hi, Awsome stuff.

    However I have a scaling issue. When importing a SVG with mm set in the document properties - the imported SVG gets about 3,54 times larger.

    If I import a SVG with px set in the document properties - the imported SVG gets almost the scale. (I gett warning about SVG units not found, converting to standard mm). The imported SVG gets about 1,25 times larger.

    Any Ideas what I'm doing wrong?

    I'm using Inkscape and like to work in mm. Also, I'm using Google Chrome.