kamo-soupbato/projects/chaotic-evil-puzzles/documentation.md

---
title: Chaotic evil puzzles
description: Jigsaw puzzle as a form of encryption of our SI17
date: 18/02/2022
cover: 91AC-jbMPsL._AC_SL1500_.jpg
cover_alt: white japanes jigsaw puzzle
git: https://git.xpub.nl/kamo/chaospuzzles
categories:
  - Proposal
  - SI17
  - Games
---

## There are 100 lot boxes with 100 different jigsaw puzzles of 100 pieces.*  
![100 boxes compose the face of aymeric if seen from a precise point of view](https://hub.xpub.nl/soupboat/~kamo/static/img/100-boxes.jpg)
_\* (exact quantities to be defined)_

## The picture on each puzzles is a content related to our experiments, games and researches for the SI17
![sample of contents for the puzzles](https://hub.xpub.nl/soupboat/~kamo/static/img/catchy-puzzles.jpg)

Each puzzle is an A2 sized image displaying the works we did during this trimester, designed in a way that can be interesting for the players to buy it, even for the sake of doing a jigsaw puzzle itself.

_f.e. A puzzle could be the rules for an RPG; or the map of a bitsy game with some critical texts about gamification; a generated maze, a fan fiction, the glossary, the list of one sentence games, etc._

In other words, the collection of puzzles will be a sort of inventory of our research framed in the form of jigsaw. 

## The pieces are scattered through all the loot boxes, in a way that each one contains parts of multiple puzzles.
![shuffle of the jiigsaw pieces](https://hub.xpub.nl/soupboat/~grgr/static/img/jigmix.png)

This could be done in a meaningful way: the idea is not to have total random pieces, but legible fragments from each content.

## When players buy the loot box they can compose the puzzle, but the result is a patchwork of different images. 
![in each loot box there is a patchwork of different puzzles](https://hub.xpub.nl/soupboat/~grgr/static/img/patchworks.png)

If the puzzles have different images but the same pieces pattern, each loot box can have a complete puzzle, but with mixed pieces. In this way we can avoid the frustration that having an  incomplete jigsaw puzzle could cause.  

## On the website of SI17 the players can upload their fragments, and compose together an online version to complete all the jigsaw puzzles. 
![demo web interface](https://hub.xpub.nl/soupboat/~kamo/static/img/puzzle-web.jpg)

We can numerate or identify each piece of the puzzles with a code. This could be done when we generate the pattern of the puzzle with Python 👀. To upload a fragment of puzzle, the player is required to insert the code of the pieces, and maybe take a picture. In this way we can be sure that only who has the fragment can insert it online. 


## Optional feature: users can upload pictures of their fragments and we could have a collective documentation of the work. 
![demo upload pictures](https://hub.xpub.nl/soupboat/~kamo/static/img/share-puzzle.jpg)
_This is not unpaid work, it's participation_

Nice feature for the website could be that you can see the digital version of the puzzle, but on mouse :hover we could show the pictures from the public. A puzzle of photos of puzzles. This could be challenging but funny to develop. 

## On the website of SI17 there is a community section for exchanging the fragments and complete the puzzle
![demo xchange puzzle fragments](https://hub.xpub.nl/soupboat/~kamo/static/img/xchange-puzzle.jpg)

The community section with users and exchange etc could be tricky, but we can stay as simple as possible and do it with Flask. The exchange section should exclude by design the speculation on the pieces or money. A fragment for a fragment. 

## On the website of SI17 the public can access to the experiments, games and researches as well
![demo other contents on the website](https://hub.xpub.nl/soupboat/~grgr/static/img/lootbweb.png)

In this way we can provide access to the contents such as the bitsy games, the karaoke video, the ruleset of our games, the reading list, etc. 

### Risk / Benefit assessment

PROS
+ simple to make
+ accessible because it's a well known game
+ a lot of design
+ not to much code
+ use what we already have
+ interesting interaction with the public 
+ performative element ready for the launch 
+ multiple temporalities (individual puzzle, contents, shared puzzles)
+ world building 

CONS:
- not an API  👀
- i don't like puzzles
- people mught not appreciate the fact of missing parts of their puzzle, but we're here to subvert it, and contents will be available online anyways

### Bonus: summary workflow

![production](https://hub.xpub.nl/soupboat/~kamo/static/img/puzzle-production.jpg)
The process to make the puzzles could be easy as design - print - cut - shuffle - package, nothing more (+ website)

![box](https://hub.xpub.nl/soupboat/~grgr/static/img/puzzle-box.jpg)
The loot box could provide a context and the instruction of the game, as well as the link to the website. 


## Scenario

Mapping the chaotic evil puzzles in the through the different scenari

### of the form

_scenario 1: The lootbox is a physical box that contains something_ 

Fragments of several puzzles.

### of the feature

_scenario 7: The items in the loot-box are complementary and it is necessary to connect with other loot-box owners in order to assemble the pieces together._ 

There is a single player aspect and there is a collaborative aspect. These two components could be mediated by an online platform, such as the online shared puzzles, but could also work offline if people just combine the pieces of their loot boxes.

### of the contents

_scenario 2: The loot box is a collection of the prototyped games (and researches!) we did so far curated in some kind of form_

The jigsaw puzzle is just a form of encryption of our contents. A shared surface in which we can publish really different things such as a fan fiction, a board game, a link to a video karaoke or a videogame, an essay, the characters of a roleplaying game, etc. 

_scenario 3: The loot box is a collection of mini-games + an ultimate game that has to be performed with other players that purcahsed the LB_

There are several layers of playability and access: 

1. to solve the fragments (single player jigsaw)
2. to access the contents (games, texts, etc. )
3. to combine the fragments (ultimate multiplayer game, re-distribuition of the loot boxes contents)


_scenario 6: The lootbox contains a series of jigsaw puzzles but their pieces are scattered through all the boxes and there is a platform online where you can see the missing tiles._

Nothing to declare.


## Prototype (look at git!)

This is a rough prototype for generating ready-to-print jigsaw puzzles as well as a way to track their completion in a shared platform.
The idea is to have several puzzles and mix their pieces, in a way that invites the players to collaborate in order to solve them.

This prototype covers two aspects of the process: the first is to split an image into pieces, tracking every piece with an ID and store the relation between adjacent tiles. The second concerns the online platform, and it is a Flask application that permits to upload cluster of pieces in order to share them with the other players and unlocking the full puzzle.

### To install the project:

1. Clone the repo
2. Create a virtual environment
    ```
    $ python3 -m venv venv
    ```
3. Activate the virtual environment
    ```
    $ . venv/bin/activate
    ```
4. Install the dependencies
    ```
    $ pip install -e .
    ```
5. Set the environmental variables for flask
    ```
    $ export FLASK_APP=flaskr
    $ export FLASK_ENV=development
    $ flask run
    ```
6. The Flask application will be accessible on your browser at `localhost:5000`. If you try to navigate there you will see a blank page. This is because we need to generate some puzzles to display.

### Generating the contents

The first thing to do then is to run the `split.py` script:

```
python3 chaospuzzles/split.py
```

This will take the Katamari demo picture from `static/img` and will split it in tiles. The tiles will be used to compose the clusters when a player upload it online. In this way we can be super flexible in the randomization / distribuition of the pieces.

You can tweak the parameters at the end of the split.py file. This is temporary, later on it would be nice to have an interface to prepare the puzzle.

### Completing the puzzles

If you reload the website, you will see a link pointing to the Katamari page. Here we will find an empty frame, and a form to insert new pieces.

Try it! You can find the IDs for the pieces in the `chaospuzzles/puzzles/katamari/katamari_retro.png` image. This is the picture generated in order to be printed behind the puzzle and let every piece to have a unique ID.

By design an valid cluster is a group of adjacent pieces.

Keep in mind that this is a wip and rough prototype so everything need to be polished a lot. We count on your imagination to fill the lack of design, UI and UX here. Imagination is the best modern feature of 2022!

Thanks and see you sun ☀️





## memos

- play with quantities and distribuition of pieces (1 piece only, large groups, variations, etc)
- play with puzzle pattern: alternative to the mainstream shape of the tiles
- pieces naming system
- And then the aim is to exchange pieces or something and rebuild the original puzzles? (can this be a critical approach?) (does this make sense only if there are as many puzzles as loot boxes?)
- short term puzzles (link to multimedia contents, puzzle shards)
- long term puzzles (hidden messages, 1 word in each puzzles and a secret sentence)
- size and quantity
- The jigsaw puzzles results should be secret? There would be much more mistery. Can we reveal only during the launch, but not on the loot boxes? Maybe is a compromise, but maybe is not necessary. Should we reveal them only in the website meanwhile they are completed? Could be.  
- [Generate Jigsaw Puzzle with python](https://github.com/jkenlooper/piecemaker)
- [How To Laser Cut a Jigsaw Puzzle](https://www.youtube.com/watch?v=xqhOrY8unn4)
- [Jigsaw puzzle generator](https://draradech.github.io/jigsaw/index.html)
- [Fractlal Jigsaw](https://proceduraljigsaw.github.io/Fractalpuzzlejs/)