Effective Jigsaw design is simple and works like this:

The linked code already shows you how to efficiently assemble one of your puzzles by reusing a single design.

The piece on the right side of the illustration is traditional (or "Japanese style"). This means that its sides are uniform in length and completely blocked. The Japanese style pieces are the easiest to design because one piece of design code can be reused in a puzzle.

Ironically, while Japanese style puzzles are the easiest to code, they find it harder to solve the problem as many pieces will physically fit together without solving the puzzle correctly.

How to create a Japanese style puzzle

• Create one side (no more!) Of the puzzle by combining multiple cubic Bézier curves.

• Use transforms to apply this one jigsaw to the top, right, bottom, or left sides as needed. (or code functions that automatically manipulate the original Bézier control points to apply a single puzzle construction to 4 sides). Mirror original side design to give your pieces a variety of "inny" and "outy" sides.

• Assemble the puzzle from the pieces, reflecting the design of each adjacent side:

  • Give the top left (0,0) a random right side (either inny or outy).
  • Suppose piece (0,0) was assigned the right-hand side. Then the next piece to the right (1,0) should have an inner left side.
  • Now give chunk (1,0) a random right side (either inny or outy) and chunk (2,0) should get the mirrored side type. Etc...
  • So, in general, complete the puzzle by assigning random right-hand pieces to all pieces and mirroring the assigned side to the left-hand side of the next piece.
  • Do the same vertically. complete the puzzle by assigning random bottom sides to all pieces and mirroring the assigned side on the top side of the next piece.

Designing 2 examples you illustrated

I am assuming the linked code is not your code, because it already shows how to create this snippet to the right of the illustration (!).

// Given the center point of the piece (cx,cy) and the side length (s)
// The single side "outy" design is below
// Use this single design (with transforms/mirroring) to make all pieces
ctx.lineTo(cx + s * .34, cy);
ctx.bezierCurveTo(cx + s * .5, cy, cx + s * .4, cy + s * -.15, cx + s * .4, cy + s * -.15);
ctx.bezierCurveTo(cx + s * .3, cy + s * -.3, cx + s * .5, cy + s * -.3, cx + s * .5, cy + s * -.3);
ctx.bezierCurveTo(cx + s * .7, cy + s * -.3, cx + s * .6, cy + s * -.15, cx + s * .6, cy + s * -.15);
ctx.bezierCurveTo(cx + s * .5, cy, cx + s * .65, cy, cx + s * .65, cy);
ctx.lineTo(cx + s, cy);

      

        
        
        
      

    

You can then reuse that one set of Bezier curves along with transformations to create your entire puzzle. Transformations == moving, rotating and reflecting one single structure to make up any side of any puzzle piece.

The piece to the left of your illustration is probably from a Freeform Style puzzle piece. It is more difficult because it uses 3 different side designs. I am assuming there are additional side structures that you did not show, because the three-sided design you show will not allow all the pieces to be blocked to complete the puzzle.

You have several options when creating a Freeform Style jigsaw puzzle.

Freeform non-blocking style

In this style, you basically make an image and draw lines that cut it into uneven shapes that can be positioned to form an image. Think of it like a pizza that has been sliced ​​at random. You can put the pieces together to reform the pizza, even if the pieces are not blocking. Mmmmm, pizza! :-)

Freeform style lock

In this style, you create two sides and create a puzzle just like a traditional style puzzle. Typically, you create one design that you will use for all left and right sides, and a second design that you will use for all the top sides. The tricky part is that the 2 types of sides have to match where they meet. This means that side-type-1 must share a mirrored pattern where it intersects side-type-2.

So, to create the drawing on the left side of the illustration, you must decide whether you want it to be a free-form-lock or no-free-form lock function.

Unbound Freeform is easier. Just spread the three types of sides apart and use them with your mirror partners to slice the image.

Interlocking-Freeform requires more design work on your part. You have to create additional side structures that will block with the 3 projects you have already created.

This is a quick overview of the puzzles ... Good luck with your project!

[Additional Information]

For the part on the right side of the illustration, the usual "outer" looks like a "head and shoulders silhouette".

The Bezier set for creating shoulders and head breaks down as follows:

• Bezier for "left shoulder"
• Bezier for the "left neck"
• Bezier for the "left head"
• Bezier for the "right head"
• Bezier for the "right neck"
• Bezier for "right shoulder"

The shoulder and Bezier head might look like this:

Here's one specific example of breakpoints for creating the outer side with a "shoulders and head" shape:

var ShouldersAndHeadCubicBezierControlPoints=[
    {cx1:0,  cy1:0,  cx2:35,cy2:15, ex:37, ey:5},   // left shoulder
    {cx1:37, cy1:5,  cx2:40,cy2:0,  ex:38, ey:-5},  // left neck
    {cx1:38, cy1:-5, cx2:20,cy2:-20,ex:50, ey:-20}, // left head
    {cx1:50, cy1:-20,cx2:80,cy2:-20,ex:62, ey:-5},  // right head
    {cx1:62, cy1:-5, cx2:60,cy2:0,  ex:63, ey:5},   // right neck
    {cx1:63, cy1:5,  cx2:65,cy2:15, ex:100,ey:0},   // right shoulder
];

      

        
        
        
      

    

Once you have an "outer" set of curves, you can use canvas context transforms to flip the "outer" into its mirrored "inside". Alternatively, you can manually undo the "outer" curve control point array.

Illustrations: top tab and top slot (top slot is mirrored).

An example of displaying the top tab and top slot:

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
function reOffset(){
  var BB=canvas.getBoundingClientRect();
  offsetX=BB.left;
  offsetY=BB.top;        
}
var offsetX,offsetY;
reOffset();
window.onscroll=function(e){ reOffset(); }

ctx.lineWidth=3;
var colors=['red','green','blue','gold','purple','cyan'];

var bSet=makeBeziers();

draw(bSet,50,100);

var bSetMirrored=mirror(bSet,1,-1,0,0);

draw(bSetMirrored,50,200);

function draw(bSet,transX,transY){
  ctx.translate(transX,transY);
  ctx.scale(2,2);
  for(var i=0;i<bSet.length;i++){
    var b=bSet[i];
    ctx.beginPath();
    ctx.bezierCurveTo(b.cx1,b.cy1,b.cx2,b.cy2,b.ex,b.ey);
    ctx.strokeStyle=colors[i];
    ctx.stroke();
  }
  ctx.setTransform(1,0,0,1,0,0);
}


function makeBeziers(){
  return([
    {cx1:0,  cy1:0,  cx2:35,cy2:15, ex:37, ey:5},   // left shoulder
    {cx1:37, cy1:5,  cx2:40,cy2:0,  ex:38, ey:-5},  // left neck
    {cx1:38, cy1:-5, cx2:20,cy2:-20,ex:50, ey:-20}, // left head
    {cx1:50, cy1:-20,cx2:80,cy2:-20,ex:62, ey:-5},  // right head
    {cx1:62, cy1:-5, cx2:60,cy2:0,  ex:63, ey:5},   // right neck
    {cx1:63, cy1:5,  cx2:65,cy2:15, ex:100,ey:0},   // right shoulder
  ]);
    }

    function mirror(b,signX,signY,x,y){
    var a=[];
         for(var i=0;i<b.length;i++){
    var bb=b[i];
    a.push({
      cx1: bb.cx1*signX+x,
      cy1: bb.cy1*signY+y,
      cx2: bb.cx2*signX+x,
      cy2: bb.cy2*signY+y,
      ex:  bb.ex*signX+x,
      ey:  bb.ey*signY+y
    });
  }
  return(a);
}
      

        
        
        
      

    

body{ background-color: ivory; }
#canvas{border:1px solid red; margin:0 auto; }
      

        
        
        
      

    

<canvas id="canvas" width=300 height=300></canvas>