Incremental Loading (#51)

* Auto generate tile edge matching

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.

(We could also update its neighbors, etc... but we don't need to: if
they are already collapsed then they are valid. If they're not
collapsed, they will update themselves later on and if this leads to a
contradiction, then we will rewind.)

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.

* Made tile loading be incremental with user feedback.
Made loading and generation be cancellable.

* Make loading faster by doing more work per redraw

* Convert WFC to a multi-step algorithm

Add a multi-steps algorithm base class which allows running an algorithm as a generator of progress reports. This allows running multiple steps of an algorithm during each draw call instead of just one step. It also allows converting more code to this mode, allowing speeding up more things than just tile loading.

Make the cell collapse be a multi-step algorithm. This allows running multiple steps per redraw, greatly accelerating the algorithm. Move the grid update in the collapse file since they go together.

Make the tile loader be a multi-step algorithm. It was already doing the equivalent, but now with the base class, the code is cleaner. Simplified some progress reports to make progress easier to follow. Fixed what seemed like a bug in the similar-tile elimination.

Allow full redraw when toggling debug modes.

* Draw background in debug and redraw when toggling smooth drawing on and off.

* Fix how the frame rate is read.

* Fix drawing tile options: use real tile center pixel.

Author: pierrebai

p5js/hybrid-model/cell.js

@@ -48,18 +48,18 @@ class Cell {
         let g = 0
         let b = 0
         let count = 0
-        for (let tileIndex in this.options.bits) {
+        for (let tileIndex of this.options) {
           const tile = tiles[tileIndex]
           if (tile != undefined) {
-            const center = tile.img.pixels.length / 2
+            const center = (Math.floor((tile.img.height) / 2) * tile.img.width + Math.floor((tile.img.width) / 2)) * 4
             r += tile.img.pixels[center + 0] * tile.frequency
             g += tile.img.pixels[center + 1] * tile.frequency
             b += tile.img.pixels[center + 2] * tile.frequency
             count += tile.frequency
           }
         }
         if (count > 0)
-          fill(r/count | 0, g/count | 0, b/count | 0, 48)
+          fill(r/count | 0, g/count | 0, b/count | 0, 80)
         else
           fill(51)
         rect(x + 1, y + 1, w-2, h-2)

p5js/hybrid-model/collapse.js

@@ -1,55 +1,159 @@
 
-function collapseLowestEntropy() {
-  // Build an array of all cells with the lowest entropy
-  let lowestEntropy = 10000000;
-  let lowestIndexes= [];
-
-  for (let i = 0; i < grid.length; i++) {
-    let cell = grid[i];
-    if (cell.collapsed)
-      continue
-    let entropy = cell.options.size()
-    if (entropy < lowestEntropy) {
-      lowestIndexes = [i]
-      lowestEntropy = entropy
+class HybridWFC extends MultiStepsAlgo {
+  constructor() {
+    super()
+  }
+
+  *run() {
+    while (true) {
+      // Build an array of all cells with the lowest entropy
+      let lowestEntropy = 10000000;
+      let lowestIndexes= [];
+
+      for (let i = 0; i < grid.length; i++) {
+        let cell = grid[i];
+        if (cell.collapsed)
+          continue
+        let entropy = cell.options.size()
+        if (entropy < lowestEntropy) {
+          lowestIndexes = [i]
+          lowestEntropy = entropy
+        }
+        else if (entropy == lowestEntropy) {
+          lowestIndexes.push(i)
+        }
+      }
+
+      // No lowest entropy means all cells are collapsed
+      // we are done with the WFC
+      if (lowestIndexes.length == 0) {
+        clearContradictions()
+        drawGrid()
+        return this.finished()
+      }
+
+      // If the lowest entropy is zero, it means there is a cell
+      // without any option left, we reached a contraction, so
+      // rewind history and try again.
+      if (lowestEntropy <= 0) {
+        rewindHistory()
+        yield 'Found zero-entropy contradiction' 
+      }
+
+      // Pick a random cell with lowest entropy.
+      let chosenCellIndex = random(lowestIndexes)
+
+      if (!grid[chosenCellIndex].collapse()) {
+        contradictions[chosenCellIndex] = 200
+        rewindHistory()
+        yield 'Cannot collapse cell'
+      }
+
+      _updateGrid(chosenCellIndex)
+      decreaseRewind()
+
+      const cellX = chosenCellIndex % DIM
+      const cellY = chosenCellIndex / DIM | 0
+      yield `Collapsed cell at ${cellX} / ${cellY}`
     }
-    else if (entropy == lowestEntropy) {
-      lowestIndexes.push(i)
+  }
+}
+
+function _updateCell(cellIndex, indexesNeedingUpdate, forceAdd) {
+  let cell = grid[cellIndex]
+  let newCell
+  if (cell.collapsed) {
+    newCell = cell
+  }
+  else {
+    newCell = new Cell(cell.options)
+  }
+
+  const updatedIndexes = []
+  let cellChanged = forceAdd
+
+  {
+    if (cellIndex >= DIM) {
+      let upIndex = cellIndex - DIM;
+      const upCell = grid[upIndex]
+      updatedIndexes.push(upIndex)
+      if (!newCell.collapsed) {
+        updateOtherOptions.clear()
+        for (let option of upCell.options) {
+          updateOtherOptions.in_place_union(tiles[option].down)
+        }
+        cellChanged |= newCell.options.in_place_intersection(updateOtherOptions)
+      }
     }
   }
 
-  // No lowest entropy means all cells are collapsed
-  // we are done with the WFC
-  if (lowestIndexes.length == 0) {
-    clearContradictions()
-    drawGrid()
-    noLoop()
-    return false
+  {
+    if (cellIndex < grid.length - DIM) {
+      let downIndex = cellIndex + DIM;
+      const downCell = grid[downIndex]
+      updatedIndexes.push(downIndex)
+      if (!newCell.collapsed) {
+        updateOtherOptions.clear()
+        for (let option of downCell.options) {
+          updateOtherOptions.in_place_union(tiles[option].up)
+        }
+        cellChanged |= newCell.options.in_place_intersection(updateOtherOptions)
+      }
+    }
   }
 
-  // If the lowest entropy is zero, it means there is a cell
-  // wihtout any option left, we reached a contraction, so
-  // rewind history and try again.
-  if (lowestEntropy <= 0) {
-    for (let cellIndex of lowestIndexes) {
-      contradictions[cellIndex] = 200
-      logCellOptions(cellIndex, 'lowest entropy is zero')
+  {
+    if (cellIndex % DIM != 0) {
+      let leftIndex = cellIndex - 1;
+      const leftCell = grid[leftIndex]
+      updatedIndexes.push(leftIndex)
+      if (!newCell.collapsed) {
+        updateOtherOptions.clear()
+        for (let option of leftCell.options) {
+          updateOtherOptions.in_place_union(tiles[option].right)
+        }
+        cellChanged |= newCell.options.in_place_intersection(updateOtherOptions)
+      }
     }
-    rewindHistory()
-    return false
   }
 
-  // Pick a random cell with lowest entropy.
-  let chosenCellIndex = random(lowestIndexes)
+  {
+    let rightIndex = cellIndex + 1;
+    if (rightIndex % DIM != 0) {
+      const rightCell = grid[rightIndex]
+      updatedIndexes.push(rightIndex)
+      if (!newCell.collapsed) {
+        updateOtherOptions.clear()
+        for (let option of rightCell.options) {
+          updateOtherOptions.in_place_union(tiles[option].left)
+        }
+        cellChanged |= newCell.options.in_place_intersection(updateOtherOptions)
+      }
+    }
+  }
 
-  if (!grid[chosenCellIndex].collapse()) {
-    contradictions[chosenCellIndex] = 200
-    logCellOptions(chosenCellIndex, 'cannot collapse cell')
-    rewindHistory()
-    return false
+  if (cellChanged) {
+    if (!cell.collapsed)
+      cell.updated = true
+    for (let index of updatedIndexes) {
+      indexesNeedingUpdate.push(index)
+    }
   }
 
-  updateGrid(chosenCellIndex)
+  return newCell
+}
 
-  return true
+function _updateGrid(pickedCellIndex) {
+  gridHistory.push(grid)
+  grid = grid.slice();
+
+  // let updateCount = 0
+  let indexesNeedingUpdate = []
+  _updateCell(pickedCellIndex, indexesNeedingUpdate, true)
+  while (indexesNeedingUpdate.length > 0) {
+    // updateCount++
+    const index = indexesNeedingUpdate.pop()
+    grid[index] = _updateCell(index, indexesNeedingUpdate, false)
+  }
+  // console.log(`Updated ${updateCount} cells`)
 }

p5js/hybrid-model/debug.js

@@ -18,6 +18,8 @@ function drawEdges() {
   else
     noSmooth()
 
+  background(0)
+
   let spacing = 10
 
   let sizes = edges.map(function(edge) {
@@ -77,6 +79,8 @@ function drawTileOptions() {
   else
     noSmooth()
 
+  background(0)
+
   drawnTileIndex = (drawnTileIndex + tiles.length) % tiles.length
 
   const w = width / DIM

p5js/hybrid-model/draw.js

@@ -3,6 +3,11 @@ function enableDrawSmooth(enabled) {
   isSmoothDrawingEnabled = enabled
 }
 
+let isFullRedrawTriggered = false
+function triggerFullRedraw() {
+  isFullRedrawTriggered = true
+}
+
 function drawGrid() {
   if (isSmoothDrawingEnabled)
     smooth()
@@ -19,12 +24,14 @@ function drawGrid() {
       let cell = grid[i + j * DIM]
       if (cell == undefined)
         continue
-      if (!cell.updated)
+      if (!cell.updated && !isFullRedrawTriggered)
         continue
       cell.updated = false
       cell.draw(i, j, w, h)
     }
   }
+
+  isFullRedrawTriggered = false
 
   smooth()
 }

p5js/hybrid-model/index.html

@@ -6,14 +6,15 @@
     <title>Wave Function Collapse</title>
     <style>
       body {
-        background-color: #555;
+        background-color: #565;
       }
     </style>
   </head>
 
   <body>
     <main></main>
     <script src="bitmap.js"></script>
+    <script src="multi-steps.js"></script>
     <script src="edge.js"></script>
     <script src="tile.js"></script>
     <script src="cell.js"></script>
@@ -22,7 +23,6 @@
     <script src="history.js"></script>
     <script src="ui.js"></script>
     <script src="draw.js"></script>
-    <script src="update.js"></script>
     <script src="collapse.js"></script>
     <script src="sketch.js"></script>
   </body>