Creating a tiled floor pattern

In the house I was staying in while in Bellevue/WA, there was a floor pattern that looks like the image below. It's easy to figure out how to create such a pattern using a combination of small and big tiles. I tried to create that pattern in a graphics program just for fun.

I used Inkscape to create the image below but it turned out to be a tedious job. It's really boring to clone figures and align them in that shape. The right way to do it is to use patterns. It's not trivial, however, to figure out the pattern that repeats. Note that a repeating pattern should be a rectangular area. Two squares of different sizes do not form a valid pattern to use.

The easy way is to find a large rectangular area that repeats. This repeating pattern can be easily found and highlighted as shown below. However, it doesn't really seem nice to have such a complicated pattern. Moreover, according to the sizes of the two squares, the repeating pattern could become arbitrarily and extremely large. An alternative way to make it is described in this post.

The trick to find the repeating pattern is to tilt your head a little bit. The pattern really repeats along a line with a small angle. If we align small squares on a horizontal line, the pattern would contain one small square. All we need to do is to tilt the whole view with the correct angle. In the shown pattern, square sizes are 10 and 40. Therefore, the right angle is atan(10/40) ≅ 14°. Rotating the view brings the following image.

Rotate all drawn figures

How it looks after rotation

Once the view is tilted as shown above, any square of the correct size would form a valid repeating pattern. The correct size is a square enclosing the complete repeating pattern. Simply, the borders of this repeated pattern would span from any point, to its counterpart in the adjacent tile. Let's take the corners of the small black square as our pivot point. The repeating pattern will be similar to the one below.

A sample part of the image that can be used as a pattern. Note: I changed the black squares into holes just for presentation and clearance.

You can easily use triangle geometry to calculate the size of the repeating tile (it's a square by the way). From the figure below, the length of the edge of this square is sqrt(10²+40²).

How to calculate the size of the pattern square

Once we find the size of the repeating pattern, cropping any square of this size from the figure we created forms a repeating pattern. Note that, by definition, the pattern repeats and logically it has no begin or end. We create a (pattern) square of the calculated size above. Then, we union all the repeating (rotated) figure we created earlier. Finally we place the (pattern) square any place on the figure and find the intersection of both. All these steps are shown in figures below.

Create a square to be used as the pattern

Union the figure we created earlier. Note that we need this figure to contain only one black square.

Intersection the pattern square with the figure we drew

This leaves us with the pattern shown in the figure below. Using this a tiled pattern would produce the same (rotated) pattern we drew earlier. You can then rotate the object that contains the pattern to produce the original figure we wanted to draw.

The resulting pattern

The final view will look similar to the one below.

Final view drawn using the pattern

Note that the final view has some glitches. The reason is that I used Inkscape which limits all numbers I use (for rotation degrees, lengths ... etc.) to three digits after the decimal point. This means that the accuracy is limited to this precision and I couldn't create a very accurate figure. I guess that another program may overcome this problem but the main idea is still valid.

TouchDevelop: Develop with passion

During the last weekend, I've been playing around with TouchDevelop, a development environment for Windows Phone that runs completely on the phone. It's still in the labs of MSR but you can use it if you have a device that runs Windows Phone.

TouchDevelop is easy to learn and use and it makes coding more fun with its innovative interface. It was my first time to use a Windows Phone in my life and I was able to learn the language, the interface, system capabilities and develop a complete game over one weekend. I like the new development environment because it's designed for a touch screen. It's not about writing code on the phone, it's a complete new experience that uses the capabilities of your device to its best.
This isn't a tutorial for TouchDevelop, but I'll try to highlight its main features.

• The whole development cycle can be done on the phone. From writing code to publishing your app to the store. You can use your spare time in any place to be more productive.
• The environment is so easy to learn. I started from knowing nothing to make a complete game over one weekend
• The language is very powerful and has control over most phone capabilities including touch events, camera, contacts, calendar, GPS and other mobile sensors. Also it comes with built-in libraries form most common stuff like gamed board with sprites, collision detection and built-in physics engine.
• Unlike traditional coding, you write the code token by token rather than character by character. With a small touch screen, it's desirable to minimize number of touches to complete the job.
• TouchDevelop makes good use of Unicode characters to make the code concise and readable on the small screen. e.g. π, →, ≠, ≤
• The main input method is IntelliTouch, which guesses your next input token and shows you best guesses in the limited screen. I used to find my next token in the first or second page.
• With strongly typed variables, you hardly make errors while typing. Once you make a mistake, it's detected and signaled right away.
• The editor shows inline help for functions and can be accessed with one tap on the screen.
• At any point, you can open a search box to look up a function by name.

You can install TouchDevelop now and start playing with it. The bazaar contains lots of sample apps you can browse. You can also see scripts written by other users including my "mini Wars".