Auto generate tile edge matching

[pierrebai]

Split the code into more but smaller files. I find it easier to find functions and switch between them when files are smaller and more focused.

Add UI to select the tiles to generate, restart the generation and show tile neighbors options. The UI also gives access to debugging features.

Add capacity to load any image.

• Add button to load an image from disk and used it as single-image, auto-split tiling.
• Make loader selection and file loading work together.
• Add tile size and step UI to edit loaded or existing single-image tiles.
• When creating tiles from an image, allow wrapping around, to mimick the overlapped tile algorithm.
• Allow to optionally flip tiles.
• Allow to optionally rotate tiles.
• Rotations and flips be off by default because for some tilings, rotations and flips would generate too many tiles and be slow.

When loading separate tiles, automatically detect which tile can be adjacent to which other tiles by analyzing their edges. This avoids having to specify which edges match which others by hand. This also enable the capability to load a single image and divide it in tiles.

• Extract the four edges of each tile and fuzzily match it with other edges.
• Make edges size calculation dependent on largest width of tiles.
• Allow edges to match deeper within the tile, which more exactly mimick the overlapped tile algorithm.
• Allow applying a filter to the edge images to ignore some differences, for example a backgropund that should be ignored.
• Compare edges then fuzzy image compare to find identical tiles.
• Choose the edge size to be compatible with the small tiles generated from a single-image.
• Limit the comparison range to zero when the edge size is small.
• Make tile rotations be optional.
• Optionally use tile frequencies to choose among the tile options of a cell.

Optimize the wave-function-collapse by using a new Bitmap class.

• Use bitmap unions and intersections to update the grid.
• This is much faster when there are a lots of tiles.
• Change the cell options to be bitmaps to use optimized unions and intersections.
• Replaced the tile up/down/left/right tile options with bitmaps.
• Limit the change propagation to a given radius to speed-up the algorithm.
• But take into account the case where we choose to collapse a cell that was not updated recently, which could lead to chosing a tile that should have been disallowed. We always update the cell options before collapsing it to make sure it has updated options.

Use change propagation instead of updating all cells.

• Each cell keeps track if it has been updated
• The bitmap intersection function tells if the bitmap changed.
• Make the updateGrid keep track of which cells need to be updated.
• It starts with the collapsed cell and propagate to other cells.
• The updateCell function keeps track if updating the cell changed it and add its neighbors to the list of cells needing an update only if the cell changed.
• Only draw updated cells.
• Move drawing in a draw function of the cell.
• Redraw cells even if not collapsed when their options change.
• Draw non-collapsed cell with the average of the option centers.

Add grid history and rewind to avoid restarting from scratch. This is in the history.js file. Increase and decrease the rewind distance to get rid of contradictions. That is, by increasing the rewind distance, we can go back far enough to remove the state that invariably lead to a contradiction.

Move the loading of tiles to its own file named tileLoader.js. This allows different methods of loading tiles and allow switching between which tiles are used on the fly.

Split the draw and update functions into smaller functions.

Add debug function to help diagnose problems. The debugging code is in the debug.js file.

• Add a function to log a cell tile index and the options of its neighbor, to help debug when there seems to be a contradiction.
• Add a function to show tile edges and cell tile options.
• Add a function to show each tile possible neighbors.
• Report cell options when collapse fails.
• Draw cells in red when a contradiction is found in those cells.

Added a GIF image of the hybrid algorithm.

[pierrebai]

@shiffman I did end-up writing a readme to document my change, it is part of this new PR. You can read it here: https://github.com/pierrebai/Wave-Function-Collapse/blob/main/p5js/hybrid-model/README.md

[shiffman]

This is wonderful, excited to include it in the repo!