Puzzlefy

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

Website	Twitter

Usage

https://puzzlefy.netlify.app/?image=<url>&cols=<number>&rows=<number>

• image: link to an image url .jpg, .png... and also certain .gifs!
• cols: width of puzzle in pieces
• rows: 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

• Abstract processing sketch capture
• Obama prism

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)