Tile Patch Example

Tile Patch

Tile Patch Example

Drop Tiles


What and Why Tile Patch

original idea Some years back, on a cold crisp December day, I shot some sunset pictures with an iPhone 5. I'm by no means a photographer, but I do enjoy trying to be creative. For whatever reason, I took some angle shots of the horizon. Later that night while scrolling through the Camera Roll, I was pleasantly surprised by not only the sunset pictures but the design that took shape from all of them together.

From that point forward, I was motivated in trying to create designs within the iPhone 5 Cameral Roll. This proved challenging for me and ultimately fruitless. Not only is the Cameral RollTile Patch Example not designed for such things, but I found it difficult in visuallizing what I wanted to see, and then snapping pics with the correct angle and in the correct order.

Fast forward to today... with a desire to learn web development and a goal of organizing photos into a mosaic of sorts... Tile Patch! All of the photos are from the same five mile stretch of coastline in the Pacific Northwest. If you want to view the photo at a larger size, right click on the image and select 'View Image.' I hope you find it to be an enjoyable use of your time...


Notes

To some degree, the titles say it all... Drag Tiles, Drop Tiles. Considering the various controls, buttons, and trash can icon - hover the cursor over them and a tool tip will appear.

One thing to note, when changing either the square size or the overall size of the Tile Patch, any images that have been dropped will disappear. On the first use of either the '+' or 'x2' button, an alert message will alert you to this.

The 'Save Tile Patch' control was put in place for those who endeavor to create a larger Tile Patch. Currently, the largest Tile Patch available is 40x40 if using the small squares; that's 1600 squares! It can only save one Tile Patch. In other words, every time you save a Tile Patch, it replaces the previously saved Tile Patch. This function uses the local storage of the browser. Therefore, if you have set the browser's security to not allow local storage, the Tile Patch will not save. Also, if you clear your browser history, the saved Tile Patch will be deleted.

In order to permanently save your creation, use your computer's screen capture software. In a Mac the current screen capture software is 'Screenshot' and if using an older Mac 'Grab.' If you are using Windows, the screen capture software is called 'Snipping Tool' from Windows 7 onward.

The maximum size of a Tile Patch is based on the browser's current width. Currently, the maximum size possible is 20x20 or 40x40 if using the smaller square size. If you've saved a larger Tile Patch and open it in a smaller browser window, it will look distorted. In this case, expand the width of the browser and the Tile Patch will normalize.

All of the photos in the Drag Tiles carousel are from a small stretch of Pacific Northwest coastline. Most, but not all, are pictures of the horizon with the only distinction being the weather and time of day. If you want to actually be able to see them, right click and 'View Image' is available in most browsers. In most cases, the top two images of a '4-pack' are originals and the other two are rotated. Considering straight horizon pictures, the one that seems like a normal sunset picture is the original and the other three are rotated.