Creating a source image for the WFC ‐ overlapping model
We will be using Piskel to create our source image. Piskel is a free application that you can use in the browser. It is available on Google but not Safari.
We will set the grid size at 8 x 8 pixels. You can adjust by clicking on RESIZE.
We will set the grid size to 1 pixel.
You can edit the color palette by clicking on the pen icon.
After choosing a new color to add to the palette, click save.
Click on a color to choose it. Notice that the chosen color (tangerine) has a yellow triangle in the bottom left corner. Add the color to the grid by clicking on an individual square in the grid. You can also add the color to more than one square at a time by dragging your mouse. It is probably best to stick to 2 - 3 colors when designing your image, as source images with many different colors are more likely to lead to conflicts in the overlapping model.
You can also fill the entire grid with a single color by clicking on the pitcher icon.
Once you are happy with your source image, you can save it by clicking on the export button. (I have just altered the colors of the city.png for illustrative purposes.)
Piskel is designed to created sprite animations. Since we only want one image, we will click on the option to save a single frame.
Once you have your source image, you can look at it and the extracted tiles here.
Use your image in the WFC - Overlapping model
Now it is time to try your image in the WFC - overlapping model! Here is the result of the source image I created:
