I have completed step one of a new web site project. This image is a prototype that illustrates how the US map can be constructed from custom photos provided by a user. The image was programmatically created by combining a photo of my wonderful daughter and black-and-white state images.
Each black-and-white source image centers the state (in black) on a square canvas with standardized dimensions (4096x4096 for forward compatibility). Black on whiteh forms an image mask, although I used an alternate version to simplify the imagemagick command. The photo is then cropped to a square, and the image mask is applied. Each new square state image is resized and placed onto the US canvas using state-specific coordinates and sizes. Correctly configuring the coordinates and sizes took some time. On future projects, I will demand more during the image mask prep to avoid the reverse engineering. Inaccuracies in the placement were partially overcome by using a halo effect on each state to effectively create borders between the states (borders are slightly more forgiving).
This prototype image did not strategically crop the photo. Instead, it used the same square for each state. You can see in the image how some states have to be resized down more than others (e.g., the TX image is much larger than the OK image right above it).
Lessons learned from the prototype development:
- I have the appropriate imagemagick code and a better understanding of the syntax in general.
- I have a better appreciation of the processing power that will be required to launch this project.
- The project is feasible.
- The map is in fact pretty cool.