Radial Number Code

Sorry, this little page may not work with Internet Explorer. Try a better one.

This little applet will draw a number numbers and phrases in a form similar to the crop circle recently found in Wiltshire, England. There are some differences, such as a consistent radial increment on this implementation but the theory shoudl be basically the same. To make up for that, you can encode your name, in addition to π and other interesting numbers.

If you are using Firefox, you should be able to right-click on the image and save it to your computer.

Parameters
px px ° px × px
px
Symbol
Serialized Data

How Does This Work

Without getting in to the math and scripting behind this, the concept is fairly simple. You enter a number or some letters in the input, and the program reads through each character and travels part way around the circle. The distance which is traveled is a percentage of the circle based upon which radix (numeric base) you are using and the number's value. When working in base-10, 1 becomes 10%, 2 ⇒ 20%, and so on up to 9, which becomes 90%. Before moving around the circle, the radius of the circle is increased, to add another ring on the graphic. This is performed even if no movement is to take place (the number's value is 0). Every time it comes across an important non-valued character (i.e. a space or decimal) the program will render a dot. This behaviour is defined differently in each radix.

Mathematically, the amount travled around in each arc is defined as θ = χ × (2 × π ÷ b) where χ ∈ [0, b) and b is the current radix. However, the bulk of the number crunching is handled by the Canvas API's CanvasRenderingContext2D::arc method. Most of what takes place in this script is simply translating, changing, & incrementing values which are then internally processed. Thanks to <canvas>, there is no need to mess around with any line or curve equations.

By Teague Sterling teaguesterling[/at/]yahoo.com. ©2008