Puzzlefy

Generate a puzzle from any image. Made with p5.js.

🕹️ Play in browser

🧩 Make your own puzzle

https://puzzlefy.netlify.app/?image={url}&cols={number}&rows={number}

• image url: link to an image url .jpg, .png... and also certain .gifs!
• cols number: width of puzzle in pieces
• rows number: height of puzzle in pieces

If the cols and rows parameters are not specified, the aspect ratio of the image will be used instead

Examples

• Obama prism
• Processing

⌨️ Edit the code

Feature ideas

• .gif cors origin fix ― Issue
• .gif load time improvement ― Issue
• Dynamic loading screen ― Issue
• Draw placed pieces in separate graphics for performance ― Issue
• Random image if image= url parameter is not set ― Issue
• Auto solve functionality ― Issue
• Reset functionality ― Issue
• Large puzzles do not fully utilize the screen space ― Issue
• Puzzles with the same exact visuals can be interchanged (usually solid colors) ― Issue
• Background clip area vs free pieces clip setting
• Customize puzzle pattern (jigsaw shapes and in/out directions)
• Customize settings (feedback when invalid placed, allow preview, ...)
• Zoom and moving around camera controls. Useful for large puzzles and mobile devices (pinch to zoom)