The Girih Creation Tool is used to create designs using Girih tiles. It is inspired by the girih tiles invented in the 10th century or so. These tiles have been used in the architecture of many structures in the Middle East especially mosques and tombs.

This tool is a work in progress and has some rough edges. A commercial tool is available for Macintosh computers which is more polished and has some interesting features.

Usage

Tiles are placed by moving to the edge of an existing tile, seeing the edge highlighted, selecting the new tile and pressing or the key or clicking the mouse. The tile and orientation are selected with the following keys:

• 0 selects the decagon.
• 2 selects the lozenge (thin rhombus), multiple presses flips its orientation.
• 3 or B or b selects the bow tie, multiple presses flips its orientation.
• 4 or r or R selects the rhombus, multiple presses flips its orientation.
• 5 or p or P selects the pentagon.
• 6 or h or H selects the hexagon, multiple presses flips its orientation.
• or s or S selects the next shape or orientation.
• or a or A selects the previous shape or orientation.
• places the selected shape.

There is protection against selecting an edge that already has a tile attached, but there is no protection against overlapping a tile over existing tiles.

Tiles may be deleted by selecting the circle at the center of the tile with the mouse, see the circle highlighted, and pressing the or key.

The design may be navigated using the arrow buttons and zoom +/- buttons in the pane on the left side. Additionally the design can be rotated.

There are several drawing options available in the right hand pane that control the coloring of tiles, strapping or various polygons. The appearance of strapping can also be controlled.

To save the design as a .png file, name the file below the Save button and press the Save button. Likewise to save the design as a .svg file, name the file below the Save button and press the Save SVG button. More on the SVG file is here.

There are methods for reordering the tiles (e.g., to create an animation showing the construction of the design in a more ordered fashion). These mostly mean recentering the design, usually by drawing a circumscribed circle around the design and then recentering on the center of that circle. The design can be rotated to a landmark, usually on the top or right hand side. This can be assisted with drawing the coordinate axes and reseting the angle to the top or right as desired. Once that is done, the tiles can be renumbered radially (clockwise for tiles of similar radius) or tangentially, where tiles are renumbered perpendicular to the axis in a clockwise fashion. The order of the tiles can be made visible.

Girih Creation Tool Developers

This was orginally developed by: @author Ikaros Kappler @date 2013-12 @modified 2015-03-19 Ikaros Kappler (SVG export added). @version 0.1.2 @license GPLv2.0

Extensive modifications by Kirk Crlson

Differences from the Lu-Steinhardt-Tilesets

• Kirk added the narrow rhombus tile, which is part of the penrose set but not part of the original girih tile set!
• Ikaros added an octagon test but the angles do not match together. Kirk removed it.

Thanks to Cronholm144 for the gireh tile template image. @url http://commons.wikimedia.org/wiki/File:Girih_tiles.svg

Todo

• Use a proper drawing library (with zooming, panning, selecting, dragging, …).
• add other tile sets: (Penrose P1, P2, Rhombus, etc.), Collidescape, Fractiles…
• allow grouping of tiles to allow faster building
• make it much easier to use. Model after the commercial girih tool.
• give more control over color selection (by tile shape, individual tile, all straps, contiguous straps).

Changelog

[2018-12-16]

• Added the octagon tile just for testing.

[2015-10-26]

• Added the ’t’ key handling for toggling textures on/off.

[2013-12-17]

• Basic polygon- and circle-intersection, triangle datastructures for Point sets.

kirk changes

[2019-12-15]

• Added narrow Penrose rhombus tile (not part of girihs).
• dropped the octagon tile

[2019-12-29]

• Fixed SVG save function.
• made control pane narrower

[2020-04-??]

• changed coordinate driven approach to a turtle graphic-based vector approach
• added a Turtle object
• added fancy girih strapping

[2020-05-14]

• converted files to use ECMA6 classes
• allow direct selection of polygons from keyboard

Thanks to

• [FileSaver.js] Eli Grey