This is LifeViewer, a scriptable pattern editor and viewer for Life-like cellular automata. Designed to be easy to embed in your own web site.
Currently used on:
Written in plain Javascript/HTML5 without any external libraries.
- What does it do?
- How do I use it own my own web page?
- How do I build the plugin?
- What's in each folder?
- What's each source file?
- How do I run the test cases?
LifeViewer simulates and animates cellular automata in the web browser.
LifeViewer features:
- Smooth non-integer zoom and rotation.
- Colour themes with cell history and longevity.
- Square, hexagonal and triangular grid displays.
- Pseudo 3D layers and stars.
- Multiple ways to automatically track patterns with the camera as they evolve.
- Script language that allows many features to be customized including Waypoint animations.
- Support for multiple embedded LifeViewers and/or a single popup LifeViewer.
- Ability to step back to earlier generations for all patterns and reverse playback for reversible Margolus patterns.
- Pattern annotation with Labels, Arrows, Lines and Polygons.
- Ability to fetch RuleTable rules from a Repository
- Programatically pasting cells onto the grid at defined intervals (for example: glider injection).
- Editor with unlimitied undo/redo and multiple clipboards.
LifeViewer supports several different pattern formats, rules and neighbourhoods, as well as bounded grids.
| Topic | Supported |
|---|---|
| Pattern formats | RLE, Life 1.06, Life 1.05, Cells |
| Rules | Wolfram, Totalistic, Generations, Isotropic Non-Totalistic, MAP, Larger than Life, HROT, Alternate, Margolus, PCA, RuleTable (@TABLE, @TREE and @COLORS), Weighted |
| Bounded Grid | Plane, Torus, Klein, Cross-Surface, Sphere |
| States | 2 to 256 states, [R]History, Niemiec, Generations |
| Neighbourhoods | Moore, Hexagonal, Von Neumann, Triangular, 1D, Circular, Cross, L2, Saltire, Star, Checkerboard, Hash, Tripod, Asterisk, Custom |
- Build the plugin file lv-plugin.js.
- In the
<head>section of your web page:- Add a
<script src="lv-plugin.js">tag pointing to where you installed the plugin. - Add a
<meta name="LifeViewer" content="viewer textarea">tag.
- Add a
- In the
<body>section of your web page for each LifeViewer you want displayed add<div class="viewer">containing:- A
<textarea>element containing the pattern definition. - A
<canvas width="560" height="560"></canvas>element on which LifeViewer can draw the pattern.
- A
<!DOCTYPE html>
<html>
<head>
<meta name="LifeViewer" content="viewer textarea 30 hide limit">
<script src="js/lv-plugin.js"></script>
</head>
<body>
<h1>This is LifeViewer</h1>
<div class="viewer">
<textarea>3o$bbo$bo!</textarea>
<br>
<canvas width="560" height="560"><canvas>
</div>
</body>
</html>
- The content part of the tag must contain two mandatory items:
- The class name of the
<div>element that contains an element containing the pattern definition and the<canvas>element. - The name of the element in that
<div>that contains the pattern definition. In the example above the<div>class name is viewer and the pattern definition element is textarea.
- The class name of the
- The content part of the
<meta>tag may also contain up to five optional items:- an integer (example: "30") - if specified then sets the height in pixels of the element containing the pattern definition.
- "hide" - if specified then hide the
<canvas>element on browsers that don't support LifeViewer. - "limit" - if specified then limit the width of LifeViewer to the width of the element containing the pattern.
- a path beginning with / - if specified then defines the path to a local Repository containing RuleTable rules
- a string beginning with . - if specified then defines a rule name postfix to add to rule requests to the Repository
You can put multiple LifeViewers on a single page. Each time you want one just specify an enclosing <div> containing both the <textarea> with the pattern definition and a <canvas>.
<div class="viewer">
<textarea>bo$2bo$3!</textarea>
<canvas width="560" height="560"></canvas>
</div>
If you omit the <meta> tag then it defaults to the following settings (which are used on the ConwayLife Forums):
<meta name="LifeViewer" content="rle code 37 hide limit">
In addition to having one or more LifeViewers embedded in a web page a single popup LifeViewer is also allowed which can be launched in a moveable window above the current page.
In this case create an anchor <a> element within the LifeViewer <div> as follows:
<div class="viewer">
<a href="" onclick="updateViewer(this); return false;">Show in Viewer</a><br>
<textarea>bo$2bo$3!</textarea>
</div>
Note there is no need for the <canvas> element in this case since the pattern will be drawn on the popup window.
Once you have built the plugin you can see both embedded and popup LifeViewers in action in this example.
The build folder contains scripts to create the single minified plugin file lv-plugin.js from the source files in the js folder.
On Windows: From the build folder run compile.bat. This requires Java and the included Google Closure compiler compiler.jar. The path to Java is hard coded in compile.bat and will need to be updated to wherever Java is installed on your machine.
On MacOS or Linux: From the build folder run ./compile.sh. This requires Java and the included Google Closure compiler compiler.jar.
| Folder | Description |
|---|---|
| build | build script and Google Closure compiler |
| images | icons for UI and keyboard map |
| js | Javascript source files |
| tests | HTML test cases |
| File | Description |
|---|---|
| alias | common alias names for rules |
| allocator | typed array allocation and tracking |
| box | bounding box |
| canvasmenu | UI library |
| colours | default colour sets for common rules and colour names |
| compatibility | some cross-browser compatibility functions |
| help | help information |
| hrot | LtL/HROT algorithm |
| keys | keyboard processing |
| keywords | script command keywords |
| life | algorithms to compute the next generation |
| lifeview | main program |
| parser | script command parser |
| patterns | pattern reader and decoder |
| random | pseudo-random number generator |
| script | converts input into token stream |
| snapshot | snapshot manager for going back to earlier generations |
| stars | starfield |
| waypoint | waypoint, POI and label management |
| window | popup window management |
The tests are simple HTML files which run against the uncompiled source files in the js folder. Just open them in your browser.