# Convert any image to a puzzle

**URL:** <https://discourse.processing.org/t/convert-any-image-to-a-puzzle/33149>\
**Category:** Gallery\
**Created:** [October 29, 2021, 12:47am UTC](https://discourse.processing.org/t/convert-any-image-to-a-puzzle/33149 "2021-10-29T00:47:56Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Stephcraft](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/stephcraft/32/22024_2.png) [@Stephcraft](https://discourse.processing.org/u/Stephcraft)\
**Post date:** [October 29, 2021, 12:47am UTC](https://discourse.processing.org/t/convert-any-image-to-a-puzzle/33149/1 "2021-10-29T00:47:56Z")

</div>

Made with p5.js

[![](https://github.com/Stephcraft/Puzzlefy/raw/main/demo.gif)](https://github.com/Stephcraft/Puzzlefy/blob/main/demo.gif)

### Usage

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

- **image** : link to an image url `.jpg` , `.png` … and also certain `.gif` s!
- **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](https://puzzlefy.netlify.app/?image=https://media.discordapp.net/attachments/216616558301151232/902992543376101386/sdfgh3453634.png&cols=5&rows=4)
- [Obama prism](https://puzzlefy.netlify.app/?image=https://c.tenor.com/1g50P-G_JicAAAAC/obama-triangle.gif&cols=4&rows=4)

### Links

- [Live demo](https://puzzlefy.netlify.app)
- [@Puzzle\_fy Twitter](https://twitter.com/Puzzle_fy)
- [GitHub](https://github.com/Stephcraft/Puzzlefy)

---

<div class="post-metadata">

**Author:** ![JoseMY](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josemy/32/2016_2.png) [@JoseMY](https://discourse.processing.org/u/JoseMY)\
**Post date:** [October 31, 2021, 6:22pm UTC](https://discourse.processing.org/t/convert-any-image-to-a-puzzle/33149/2 "2021-10-31T18:22:15Z")

</div>

Nice job!

If you want to make a jigsaw puzzle that doesn’t need a background clip area, take a look at the logic at:

> **[Making a jigsaw puzzle - Part one: concept. ★★★★★](https://www.construct.net/en/tutorials/making-jigsaw-puzzle-part-one-428)**
>
> The purpose of this tutorial is to teach how to make a Jigsaw Puzzle using Scirra Construc2. This tutorial is part one, "The concept." In this first part, I wil...

That page was made for Scirra’s Construct2, but the logic part can be used by processing. I’m planning to transform my jigsawpuzzle C2 app into a processing or p5js app, indeed.

Yours,  
Jose Moya (“arcalaus” at Construct forum)

---

<div class="post-metadata">

**Author:** ![Stephcraft](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/stephcraft/32/22024_2.png) [@Stephcraft](https://discourse.processing.org/u/Stephcraft)\
**Post date:** [November 2, 2021, 7:24pm UTC](https://discourse.processing.org/t/convert-any-image-to-a-puzzle/33149/3 "2021-11-02T19:24:50Z")

</div>

Great resource, thank you!

I added it to the idea section in the GitHub repository 🙂

---

<div class="post-metadata">

**Author:** ![Stephcraft](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/stephcraft/32/22024_2.png) [@Stephcraft](https://discourse.processing.org/u/Stephcraft)\
**Post date:** [November 8, 2021, 4:27am UTC](https://discourse.processing.org/t/convert-any-image-to-a-puzzle/33149/4 "2021-11-08T04:27:01Z")

</div>

Opened issues on GitHub if anyone is interested in contributing to this open source p5.js project: [Issues · Stephcraft/Puzzlefy · GitHub](https://github.com/Stephcraft/Puzzlefy/issues)

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/0/0420913d87db5683113167122b0b66cff82cd010.png)