James Marchment

Graphic and Web Design

The I Ching

PHP/JavaScript Fortune Teller

template

Like a Fortune Cookie without the Cookie

The I Ching, also known as the Book of Changes, is an ancient Chinese text dating back over two and a half millennia. It is a divination manual, containing an index of sixty-four symbols called hexagrams, and an explanation of the significance of each one. An individual contemplating an important decision may consult the book, and after performing an appropriate ritual, receive a verse to ponder and patiently meditate upon until the necessary wisdom is achieved. Alternatively, for the modern ponderer on the go, this divination process can be quickly performed online from a computer or mobile phone, using my cloud-based distribution of the I Ching.

Enlightenment Without the Effort

The creation of an online I Ching began with a public domain edition of the translation of the text by Richard Wilhelm. Using regex to convert the text into a series of associative arrays, it was then transformed into a database that could be parsed by PHP. A random function simulates repeated coin tosses, following the direction of the original divination method. The statistical distribution of results using this method is not the same as simply selecting a fortune at random, and so the additional steps are necessary to ensure an authentic result.

With destiny thus determined, it must be displayed in an engaging fashion. The image of the hexagram is generated through PHP and CSS, re-using lightweight 1-bit images to save on load time. Extensive CSS styling gives the page an aged, faded appearance, evocative of the ink on an ancient scroll. Animations were created in JavaScript to gradually reveal the fortune, in much the same way as fate itself unfolds slowly before the attentive student of zen. Also, the entire site is less than one megabyte, with the code for the animations making up only twelve kilobytes.

Social Media Meditation

To allow users of the site to share their fate, the I Ching includes a ubiquitous social media button featuring Twitter and Facebook. However, on inspecting the typical embed code provided by these sites, it was noted that the included cookies, scripts, and other clutter created an additional page load burden that was larger than the rest of the page combined. For this reason, new share code was written and the icons recreated as SVGs, reducing the load to a negligible amount.

For each possible fortune, custom metadata is generated to provide an accurate preview when shared. Because each of the sixty-four hexagrams is capable of changing to any other, there are 4096 potential outcomes to each reading. When shared, every fortune is named in the preview text, and the first hexagram of the reading is displayed in the preview image for both Twitter and Facebook.


Accuracy Not Guaranteed

The contents of the I Ching are delightfully idiomatic, and require a generous interpretation to be construed as anything resembling advice. It is recommended to avoid asking the oracle questions with a direct answer, but instead to take the approach of receiving wisdom in the form of a metaphor that may not make sense until the appropriate time has been reached, or perhaps later still. Ultimately, the only way to find out what the future holds is to see for yourself.

Visit the I-Ching