cluster generation, readme and basic template
parent
408a27b05e
commit
57d347d3f7
@ -0,0 +1,49 @@
|
||||
# Prototype for a chaotic evil jigsaw puzzles system
|
||||
|
||||
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.
|
||||
|
||||
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.
|
||||
|
||||
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 ☀️
|
||||
@ -0,0 +1,63 @@
|
||||
from wand.image import Image
|
||||
|
||||
|
||||
def is_valid(adjacents, cluster):
|
||||
valid = True
|
||||
for p0 in cluster:
|
||||
connection = []
|
||||
for p1 in cluster:
|
||||
if p0 == p1:
|
||||
continue
|
||||
connected = p0 in adjacents[p1]
|
||||
connection.append(connected)
|
||||
if not True in connection:
|
||||
valid = False
|
||||
print(f"Not valid fragment, piece {p0} is not connected")
|
||||
break
|
||||
print("The fragment is valid!")
|
||||
return valid
|
||||
|
||||
|
||||
def index2d(list2d, value):
|
||||
return next(
|
||||
(i, j) for i, lst in enumerate(list2d) for j, x in enumerate(lst) if x == value
|
||||
)
|
||||
|
||||
|
||||
def create(pieces, cluster, name, side):
|
||||
schema = []
|
||||
for ID in cluster:
|
||||
piece = {"ID": ID, "coords": index2d(pieces, ID)}
|
||||
schema.append(piece)
|
||||
|
||||
left = min(schema, key=lambda piece: piece["coords"][0])["coords"][0]
|
||||
right = max(schema, key=lambda piece: piece["coords"][0])["coords"][0]
|
||||
top = min(schema, key=lambda piece: piece["coords"][1])["coords"][1]
|
||||
bottom = max(schema, key=lambda piece: piece["coords"][1])["coords"][1]
|
||||
|
||||
width = (right - left + 1) * side
|
||||
height = (bottom - top + 1) * side
|
||||
print(f"Final cluster will be {width} x {height} px")
|
||||
|
||||
with Image(width=width, height=height) as img:
|
||||
cluster_name = "cluster"
|
||||
for piece in schema:
|
||||
cluster_name = f"{cluster_name}-{piece['ID']}"
|
||||
coords = piece["coords"]
|
||||
with Image(
|
||||
width=side,
|
||||
height=side,
|
||||
filename=f"chaospuzzles/puzzles/{name}/pieces/{name}-{coords[0]}-{coords[1]}.jpg",
|
||||
) as tile:
|
||||
l = (piece["coords"][0] - left) * side
|
||||
t = (piece["coords"][1] - top) * side
|
||||
img.composite(tile, left=l, top=t)
|
||||
print(f"Composed with tile {piece['ID']}, at ({l}, {t})")
|
||||
# img.save(filename=f"chaospuzzles/puzzles/{name}/clusters/{cluster_name}.png")
|
||||
img.save(filename=f"chaospuzzles/static/img/{name}-{cluster_name}.png")
|
||||
print("Done!")
|
||||
return {
|
||||
"name": f"{cluster_name}.png",
|
||||
"origin": (left, top),
|
||||
"size": (right - left + 1, bottom - top + 1),
|
||||
}
|
||||
@ -0,0 +1,17 @@
|
||||
const listElements = document.getElementsByClassName("list-input");
|
||||
|
||||
function insertAfter(referenceNode, newNode) {
|
||||
referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
|
||||
}
|
||||
|
||||
Array.from(listElements).forEach((input) => {
|
||||
let add = document.createElement("button");
|
||||
console.log(input);
|
||||
add.innerHTML = "+";
|
||||
add.addEventListener("click", (e) => {
|
||||
e.preventDefault();
|
||||
cloneInput = input.cloneNode(true);
|
||||
insertAfter(input, cloneInput);
|
||||
});
|
||||
insertAfter(input, add);
|
||||
});
|
||||
Loading…
Reference in New Issue