Jigsaw puzzle generator

Interesting process.

They mention sintra backing, which you definitely don’t want to cut (PVC-based).

Dry-tac Facemount is an optically clear adhesive.

Now to find a non-PVC backer…

6 Likes

Ironically I found them online first and discovered they were five blocks away during checkout. :slight_smile:

7 Likes

Dan, I have to ask and realize you may be reluctant to answer but…
What thickness acrylic did you go with? 1/8"? I just ordered an 1/8" acrylic print to make a going away present for a coworker. I don’t suppose you’d care to share the settings you used as a starting point for me…

That puzzle was 1/8th inch acrylic, and I’m afraid I don’t remember the settings.

Thanks anyway, I’m sure I can dial it in without to much struggle.

This jigsaw puzzle generator saved the day. I started to print an existing puzzle when it started to cut 2 and 3 times over each piece/adjacent lines. So I came here and used the generator to make my own set of puzzle pieces. Worked like a charm! Thanks for creating it and offering it to us for free.

i think this is still one of the most unsung utilities created around here.

3 Likes

I like this generator but it feels like all the pieces of the same “shape” are identical. Am I right? if so, could there be a more “random” setting, I want to do a clear acrylic puzzle for a friend and if there are repeats, it will dull the fun :evil:

1 Like

That is what the “Jitter” setting is for.

There are dozens of free jigsaw puzzle generators online, many with some very interesting options.

If all the pieces are the same it makes it a WAY harder puzzle, but yes, even will full jitter there will be pieces that repeat-ish (maybe not exactly the same, but same layout certainly) but that’s pretty standard for puzzles

It’s how my family sorts, by shape (after colour)

1 Like

What @eflyguy said. Also, you can do fun things editing the svg manually!

1 Like

Those are really evil pieces. They look like they should fit, look like the right size and shape and yet are a bit off and no matter how you twist or mash they don’t go together :crazy_face:

4 Likes

your jigsaw puzzle generator is fantastic.! Thank you. It is the best one I have ever used!

1 Like

Thumbs Up!!! very useful tool thanks.

1 Like

I’ve done several puzzles with this. :+1:

I like to put rounded corners on mine, so I bring the svg into Vectornator or Affinity, delete the outer box, and replace it with one that has a corner radius. (Can’t just apply a corner radius to the box, because it isn’t a “closed”, so the open corner where the start and end points are remains sharp.)

Just “join nodes” on the start and end first, they become one and the box is now closed.

I love seeing all the puzzles in tis thread, makes me happy.

Rounded corners seem to be popular, so they are now supported directly.

I am unable to change the content of the original link, so I left it for reference and added the new version to the top post.

12 Likes

thanks for making it. i’ve used it quite a bit. and thanks for updating.

This is AMAZING!!!

I just got asked via private message how this all works, and I thought, this might be interesting for some of you as well. So here is a “short” overview of whats happening:

It’s written in javascript and executed client-side (in your browser, no work for the server). If you save the html file it will even work offline. You can see the whole code here: https://gist.github.com/Draradech/35d36347312ca6d0887aa7d55f366e30

As for the SVG part, it’s bezier curves (and lines and arcs for the outer perimeter). SVG has single-letter identifiers for its path segments. In the function gen_d() you can see those where the string is built (str += “something here”). M is move to point, C is bezier curve, L is line and A is arc.

Each side of each puzzle piece is 3 bezier curves. Each curve has 4 (x,y) control points, but the first one is always omitted (SVG uses the “current position” for that, which is either the end of the last path segment or the result of the “move to” “M” command). Those control points are what the functions p0l, p0w, … ,p9w are for. They are called l and w for length and width rather than x and y, because for the horizontal edges x and y need to switch places.

The update() function updates the html-embedded SVG that is showing the current puzzle in the browser and the generate() function builds the svg file that can be saved. (They differ in dimensions, the preview SVG is in pixels, while the exported one is in mm).

As for javascript guides, I don’t have anything to recommend, sorry. I usually just work from a minimal example and build my way up from there. I keep an eye on the developer console (F12, console) in chrome to catch any warnings and errors, and I google specific warnings and errors, if they are not obvious. The console is also useful for “print debugging” (console.log()). If I need to look for a specific functionality I again just google it, but the resource that comes up most often is https://www.w3schools.com/js/default.asp

15 Likes