ConwayLife.com

Hi,
I've just released a beta of a Life simulation written in Javascript/HTML5. Features include:

• High performance calculation and rendering (toggle fps display with 'f' key)
• Support for many rule sets
• Wrap the world on/off/X/Y
• Camera zoom (mouse wheel), pan and rotate
• Editor to allow you to create your own Life worlds
• Draw, erase or invert cells or copy patterns onto the world
• Local load and save of up to 8 worlds
• Extensive pattern library which can be filtered by rule
• Colour themes showing Life history and time alive
• Touch support for tablets
• Benchmark mode to test device performance
• 3D layered view
• Automatic camera to fly around scenes
• Configurable generation rate
• Music (toggle with 'm' key)

You can find LifeView at https://lazyslug.com/lifeview/.

I've tested LifeView on:

• Windows - Chrome 24, Firefox 18, IE 10, Opera 12
• Ubuntu - Chrome 23
• Android - Chrome Beta, Dolphin Beta (fairly slow!)

LifeView will not work on IE 9 or earlier due to lack of support for HTML5 capabilities.

Below are some screenshots of LifeView in action:

Splash screen


View mode


Editor


Library


Benchmark showing layers


Benchmark result


Maze rule


I'd welcome any feedback, suggestions and bug reports!

Many thanks,
Chris

rowett wrote:I've just released a beta of a Life simulation written in Javascript/HTML5.

Wow! This is an impressive effort -- I've looked at quite a few starter HTML5 Life projects over the last few years, but this is far and away the most interesting. Don't think I've ever seen an implementation of CA layering, rotation and smooth zooming that's anywhere near this much fun to watch.

For anyone that hasn't had a look yet, click the "Start" button on the splash screen, then the "Speed" button on the View page -- and be prepared for a few surprises! Or try clicking the Fly button (the one with the airplane), also on the View page.

... I can't even find any bugs in the first five minutes of playing around with it. Now _that_ is unusual.

I haven't spent very much time with the editor interface yet, but so far I've found myself wishing for a few things that I can't seem to find. After editing a pattern, I can switch to the View screen and run it, and replay it by hitting the Play button again. But is there a way to step forward and backward through time in the editor, or is that only in View mode? Is there a way to save, say, the 200th generation of a pattern after running it, and/or get it back into the editor?

LifeView's appearance is particularly well-timed for me. Oddly enough, just in the last few days I've been trying to help out with a multimedia presentation that includes Conway's Life, and have been thinking a lot about smooth zooming and other visual effects. Really I'd love to be able to load a particular pattern, then write a little script to tell the camera exactly how to follow the action. I'm visualizing pop-up text to explain whatever needs to be explained, but of course the sequence could be converted to video with text added later... Any hope for this kind of functionality in a future release?

Thanks again for posting this. I feel as if I should end this message as I began: Wow!

Hi,
Thanks for your positive feedback. I originally wrote a layered life simulation about 20 years ago on a Sun Workstation in C. To get the performance back then I had to write directly to the frame buffer on the graphics card (such as it was in those days). Even with a much smaller grid (256x256) I was only getting 5-6fps with 6 layers.

I got interested in the project again about 2 years ago and built a working version in Microsoft Excel (no, really). It was as slow as my C implementation 18 years earlier - which to be honest is fairly stunning given it was running in Excel.

Then about six months ago I thought I'd take a look at HTML5 and specifically Canvas support and see if it was a viable platform. I've been pretty impressed with it so far. Finally you can build something fairly performant that runs in a browser. You do have to write some heavily optimized Javascript to do so - and making it run in different browsers is never as easy as you'd hope. I guess that's why we have "standards". So we can be disappointed when they aren't.

To address your specific comments:
You read my mind... the end goal (probably for version 2) was to allow the user to create custom fly-throughs of specific patterns. At the moment you only have the automatic camera (the "fly" button). In the future you'll be able to define a set of waypoints over time with each waypoint defining a position, zoom, rotation and layer depth. I like your idea of adding text popups at specific waypoints. It would be pretty easy to do since I already built the controls library that LifeView uses and there is a text box (used in Pattern mode for the pattern description). All controls can be fully styled with different foreground, background, highlight and border colours (and alpha blending too).

There is an overhaul coming of the play controls. At the moment they are only available in View mode with the "play" button that does Play/Replay and "pause" button that does Pause/Single Step. There will probably be a set also available in Edit mode specifically to support the waypoint scheme discussed above.

What I may do as an interim measure (to support the requirement to step to the 200th generation in View mode and then use that in the Editor) is add a "save" button on View mode that takes the current displayed generation and makes it the baseline for the Editor (watch out for build 106)

Some other things that you may find useful (given I haven't documented anything yet):

Drag and drop of patterns

• You can drag and drop pattern files onto the LifeView window and it will add them to the library
• Supports Life 1.05, Life 1.06, RLE and Cells format
• Note currently they won't stay in the library beyond your current browser session but this is coming soon...
• Drag and drop does not currently work in IE 10... I'm not yet sure if it's me or them I guess it's one of those "standards" things

Zoom and Pan

• You can use the mouse wheel (if you have one) to zoom both in View and Editor.
• Click and drag the background in View mode to pan
• Click the ^ button (bottom right in view mode) to display the navigation controls.

Thanks again for your feedback,
Chris

Another minor item on my personal wish-list is a flyover with the camera at an angle, not looking straight down. Not sure but what you'd be mostly looking off the edge of the universe, though, at least in this implementation. It might work if there was some way to limit visibility to some maximum distance.

-- Really I have no particular evidence that this would actually look good, but I've been thinking about it off and on for several years, especially in relation to doing a flyover of Heinrich Koenig's Object Database. I don't know how many hundreds of thousands of objects are in his full catalog these days, but it's certainly over 150,000.

Just picking and displaying objects at random gives a good feel for the incredible variety of Life forms out there -- it would be great to have a better way to view the whole menagerie... At one point I tried writing a Golly script to pan over a region while continually adding new random Object Database at the front and delete them at the back, with promising but mixed results. [The latest version I can locate seems to have succumbed to Internet bit-rot, so the script doesn't quite work, though a good random subset of patterns is still there in a subfolder; I'll update the archive when I get a chance.]

I just had another quick look at the multi-layer view. I was thinking that it would show N generations back, and thus would only be a simple stack for stable patterns. But it seems to be multiple copies of the same pattern, even for moving objects like gliders.

I suppose a multi-generation layer view would be significantly slower to display? I don't really know how this magical HTML5 stuff works in any detail, but it's certainly quite impressive. When I wrote my first (and only) machine-language program to implement Conway's Life, maybe around 1983, it seemed pretty blazingly fast at about one frame per second on a 64x48 grid, on a TRS-80 Model 1... but color and rotation and multiple layers were definitely not on my feature list!

So the multi-layer view was designed to be used with the colour Themes. Select "Theme 1" from the slider on View mode. It works like this:

The colours define how long a cell has been dead or alive. Each of the Themes defines a different colour set. There are 128 colours in each theme.

Colour 0 is always black and used to differentiate between cells that are dead and cells that have never been alive.
Colours 1 to 63 are for dead cells. In Theme 1 colour 1 is dark blue fading up to colour 63 which is blue.
Colours 64 to 127 are for alive cells. In Theme 1 colour 64 is cyan fading up to colour 127 which is white.

Cells that have just died become colour 63 (blue) and then for every generation the cell stays dead they go down a colour until they reach (and stay at) colour 1 (which is dark blue). This way you see history where a cell that has died fades away over time (to be specific: over the next 63 generations).

Cells that have just been born become colour 64 (cyan) and then for every generation the cell stays alive they go up a colour until they reach (and stay at) colour 127 (white). This way you can see cells that have been alive longer are brighter than brand new cells.

The different colour Themes were designed to show off different things:

Theme 0 - all dead colours are black, all alive colours are white (which means no colour history)
Theme 1 - black->blue, cyan->white (dead cells fade away, alive cells become brighter)
Theme 2 - black->red, orange->yellow (looks like fire on some patterns)
Theme 3 - black->green, cyan->white
Theme 4 - back->dark grey, grey->white
Theme 5 - all dead and alive cells are white (which means you can see where life has ever been in white, and never been in black)
Theme 6 - all dead cells are red, all alive cells white (which means you can see where life has been in red, and current population in white)

At some stage I might write a Theme editor so you can provide your own colour maps.

As the layers are drawn I make more colours transparent. So in the bottom layer you get all colours and as more layers are drawn I don't draw pixels in the lower colours. The effect of this is that only cells that have been alive for a long time (and thus have a high colour number) will appear in the top layers. So if you see a still life born and watch it over generations it will appear to grow up through the layers. And if it gets killed you'll see it tumble down through the layers.

If you watch a glider with Theme 1 on you'll see it has a blue trail tumbling through the layers behind it.

Hope that makes sense!

I could build a multi-generation layer view but I'm not sure it would look as good as the history already displayed with the colour shading. I'll add it to the list of potential things to try

Chris

Hi,
I've released a new build of LifeView:

Build 106

Enhancements:

• Editor now starts from last generation displayed in View mode
• Editor saves state when returning to View mode
• Reset button reloads last Editor saved state
• Hovering over the 8 save/load slot buttons displays saved pattern

Fixes:

• Fixed a rare crash when switching audio track
• View mode shows "gps" for generations-per-second and not "fps"

With this build you'll be able to View a pattern up to a certain generation and then Edit from there.

Next on the roadmap are:

• Ability to define / load / save a scripted fly through
• Separation of grid size and display size (currently both are fixed to 1024x512 cells)
• Smarter automatic fly through that won't fly to blank areas of the grid

Please let me know if you find any issues with the new build.

Many thanks,
Chris

Hi,
Another new build released:

Build 107

Enhancements:

• compute statistics for each generation: cells alive, births and deaths
• toggle display of statistics in View mode by clicking on the "Gen" button or hotkey "g"
• menu library now supports text alignment on controls (left, center, right)

Fixes:

• hotkey items that toggled menus were not correctly showing/hiding dependent controls

Thanks,
Chris

Hi,
A nice image from Build 108 showing the navigation controls and the new generation statistics...



Build 108

Enhancements:

• switched from using setTimeout API to postMessage API for benchmark since it provides immediate callback and saves 3-4ms per frame
• generation counter can now display six digits and displays larger values as thousands (1400K) or millions (23M)

Fixes:

• entering Edit mode would only be accurate to every other generation due to the double buffering
• exiting the Editor would not reset the population, birth and death counts for the initial generation only (which would be displayed incorrectly if Life was paused)

Chris

Hi,
Build 109 adds the ability to manually define a fly through over the life world by setting a series of waypoints for the camera to follow.

Here is a screenshot of the waypoint editor in action.



Build 109

Enhancements:

• improved play controls
  • reset (goes to generation 0)
  • play
  • pause (click again to single step)
  • fast forward (play x 4 speed, click again to pause)
• added waypoint editor to allow manual camera fly-through to be defined (however in the current release there is no way to save fly-throughs)
  • waypoint controls are in the extended menu (click the bottom right button to display)
    • add/update waypoint
    • delete waypoint
    • previous and next waypoint
    • waypoint slider
  • viewpoint (pan, zoom, angle etc) can only be changed when playback is paused
  • exiting the editor will cause the waypoints to be reprocessed for the current world which can take some time when there are waypoints after many generations
• added vsync toggle on hotkey "v"
• improved performance of loading screen
• improved performance of copying grid
• add pan control toggle to View menu (this setting is saved across sessions)
• started implementation of pattern type (still life, spaceship etc) however pattern types are not populated in the library yet

Fixes:

• vsync toggle now works for platforms that do not support requestAnimationFrame (e.g. Opera 12)
• selected controls with icon images were being rendered incorrectly
• improved music handling so missing tracks are handled gracefully
• icon images had a border that was overwriting the rendered border which could cause locked controls not to appear grey

Chris

rowett wrote:Build 109 adds the ability to manually define a fly through over the life world by setting a series of waypoints for the camera to follow.

I tried out the waypoint editor, and everything seems to work as advertised -- combinations of zooming, panning, and angle changes between waypoints, defining and replaying them. The only not-quite-intuitive detail is that you can't seem to set a new waypoint without a change in the generation number.

That is, you can't freeze time, pan and zoom to a different spot, and start things up again. Is that right? I was trying to do this for an initial flyby overview of a pattern before the action started. Of course I was visualizing floating labels on various structures as the viewpoint flew past them...!

Sometimes I get the number of generations too small for the distance I'm panning/zooming/turning, and then the sense of a smooth zoom isn't there. But there's no way to directly adjust the number of ticks between adjacent waypoints. (Is there?) I'm guessing these flyby waypoints will be easier to deal with when they can be saved and loaded -- this is the kind of adjustment I would tend to do by editing a script file.

Hi,
This first waypoint build just uses the generation number as the waypoint marker. This is why you're seeing choppy flights at low generation-per-second settings. So although the screen updates at up to 60 frames per second (depending on the power of your machine) the camera only updates position at the rate that generations are updating.

The next build relaxes this restriction and makes a waypoint time-based (rather than generation-based) which will give you the smooth flights you're after. It will also allow you to specify a pause in the flight. You could fly to a particular location on the grid and get there at 10 seconds after the start of the animation. You could then have another waypoint at the same location at 15 seconds - which effectively would pause the camera for 5 seconds.

Also coming in future builds is:

• ability to define text messages at various locations and times on the grid
• ability to load and save fly-throughs
• ability do drag and drop scripts onto LifeView that define fly-throughs

If there's anything else you think would be helpful please let me know.

Thanks, as ever, for the feedback!

Chris

Hi,
Build 110 includes the following new features and fixes:

Enhancements:

• slightly improved performance of generating next life generation
• renamed to "LifeViewer"
• added ability to choose random grid density (0 to 100%) in Edit mode
• added a button to invert the whole grid in Edit mode
• new version of the Speed music
• new version of the main music
• improved the performance calculation in Speed mode to provide a better benchmark result

Fixes:

• last character of pattern descriptions was being cut off
• benchmark would switch on vsync if benchmark button was clicked during benchmark run
• toggling vsync with hotkey "v" would not update vsync button status
• icons on buttons were displayed at low brightness
• mouse wheel zoom was not working in Edit mode on Firefox
• starfield movement on Start screen is now independent of frame rate achieved

I've been rewriting the Waypoint mode to make flythrough smoother. Coming in a build soon...

Best regards,
Chris

Hi,
Build 111 was mostly fixing Technical Debt in preparation for the new Waypoint player (which has not yet surfaced). Additionally it contains the following enhancement and fixes:

Enhancements:

• added elapsed time display to statistics (can be toggled by clicking on the Gen button)
• significantly improved performance of computing next life generation
• population statistics (number alive, births and deaths) are not computed unless displayed
• colour theme in View mode is restored on returning to View mode from Speed mode
• Waypoint controls now only display if Waypoint mode is active
• added a couple of new colour themes

Fixes:

• toggling music on the Start screen would throw a (harmless) exception when attempting to update the volume bar
• changing the Pattern in Edit mode and then entering the Library via the Edit mode Library button would not update the Pattern information on the Library screen (width, height and rule)

Quite a lot of work was done on improving performance of the Life engine. In this build the time to compute the next generation was halved. However this only relates to an overall 5% to 12% improvement in frame rate (depending on the rendering mode chosen) since there are more expensive operations (such as updating pixel colours and transformation of the image).

Best regards,
Chris

Hi,
The headline feature for Build 112 is the addition of Carousel mode which cycles through all of the patterns in the library. Switch it on with the glider icon button at the bottom right. Looks especially good when combined with Fly mode (the button with the airplane on it).



Enhancements:

• added the ability to switch history shading on or off
• added pattern Carousel mode which displays each pattern from the library for a short time in a loop
  • you can manually go to the previous or next pattern by clicking on "-" or "+" buttons
  • the Reset button restarts the current pattern
  • you can control the speed at which the carousel advances to the next pattern with the slider at the top right: Slow, Medium, Fast or Manual
    • Manual stays on the current pattern until you click "-" or "+"
  • switching off Carousel mode returns to the previous life world at the generation where Carousel mode was started

Fixes:

• patterns now get copied to cell boundaries rather than byte boundaries
• during Fly mode the zoom control is updated which prevents zoom "jumping" if you use the mouse wheel to zoom
• range controls would not display non-numeric values

Comments, suggestions and feedback welcome.

Thanks,
Chris

rowett wrote:The headline feature for Build 112 is the addition of Carousel mode which cycles through all of the patterns in the library. Switch it on with the glider icon button at the bottom right. Looks especially good when combined with Fly mode (the button with the airplane on it).

Very nice! I didn't read your instructions very carefully, so it took me a while to find Carousel mode -- I looked at the new "hacker emblem" in the corner a few times in passing, and for some reason thought, "no, that can't be it". Maybe a tooltip or something would have helped.

There's also an odd little new-user problem with the way the View mode interacts with the library and the editor. The basic problem is that the View button that changes the mode is not the same as the View button on the Library pane. Here's a walkthrough:

1. Let's say I'm in the Library, looking at 10cellinfinitegrowth.
2. I click the + sign to get to the next item in the library, 10enginecordership.
3. No change in the editor -- still looking at the 10-cell pattern. Fine -- I'll try clicking the Library button.
4. Good, now I see the 10-engine Cordership. I want to edit it, so I click Editor.
5. No luck -- I'm back to the 10-cell pattern. Back to the Library and see what I missed.
6. There's the Cordership again. I'll try the View button in the lower left.
7. Nope, still the 10-cell pattern in View mode. Back to the Library.
8. [push + and - some more, switch to Editor and back, scratch head in puzzlement]
9. I'll try the other View button. Aha! When there are multiple Library or Editor buttons, they seem to do the same thing. But the View button at the top of Library mode actually loads the selected pattern, where the one in the lower left just switches modes without changing the pattern.

Maybe rename that top View button to "Show" or "Edit" or "Display" or some such?

EDIT: just noticed that the Library pattern info pane tends to split lines in the middle of words -- very old-fashioned... Also, the links to ConwayLife wiki pages in the info pane (a) can't be clicked on, and (b) can't be selected and copied either -- makes them a little awkward to use.

Hi Dave,
I enjoyed your walkthrough

It's probably worth me spending a couple of minutes describing the intention behind the current UI. There was (some) method in my madness.

In the Editor you can modify the world by selecting one of four drawing modes and then drawing on the grid.

• Draw - sets cells
• Erase - clears cells
• Invert - inverts cells
• Pattern - draws the named pattern in the centre of the grid

If you click again on a drawing mode that is already selected it will do the following:

• Draw - set all cells in the grid
• Erase - clear all cells in the grid
• Invert - invert all cells in the grid
• Pattern - clears the whole world and puts the named pattern in the centre of the grid

The "Library" button next to the pattern name in Editor mode, and the "Editor" button next to the pattern name in Library mode are just shortcuts. They are entirely equivalent to clicking "Editor" or "Library" in the bottom tab. They are just there for convenience. If they are confusing I can remove them.

Changing the pattern with the "-" or "+" buttons changes it on both the Editor and Library screens (they are synchronised), but note (as you discovered), nothing will change in the editor until you ask the editor to draw the pattern on the grid. The quickest way to do this in the editor is simply to click twice on the "Pattern" button (hacker logo).

The top "View" button in Library mode is going to change in the next build. Currently it just replaces the current world with the pattern and jumps into View mode. That's destructive and kills any current world you are working on. What it will do instead is jump into View mode but with the pattern Carousel starting on the current pattern.
The Carousel saves the current world before it starts (and restores it when you end Carousel mode) so it preserves your world.

So your walkthrough should be:

A) You want to edit a library pattern:

1. You're in the Library, looking at 10cellinfinitegrowth.
2. You click on the "+" sign to get to the next item in the library, 10enginecordership.
3. You click on either "Editor" button to go to the Editor
4. You either:
a) click on the "Pattern" button (hacker logo) and then click in the grid to place the pattern at the centre of the grid
or
b) click on the "Pattern" button twice to clear the grid and place the pattern at the centre.

B) You want to view a library pattern live:

1. You're in the Library, looking at 10cellinfinitegrowth.
2. You click on the "+" sign to get to the next item in the library, 10enginecordership.
3) You either:
a) Click the top "View" button to see the pattern live in View mode
or
b) wait for the next build and click on the top "View" button (which probably needs renaming to "Carousel") to go into View mode with the Carousel starting at the current pattern.

Happy days.

Regarding the Library pattern info pane you're absolutely right. It's very basic at the moment. I wrote all of the UI from scratch and that's one control that hasn't had much attention. It's on a fairly long list of things to improve...

Hope that helps and thanks again for the feedback.

Best regards,
Chris

Hi,
Build 113 includes the following enhancements and fixes:

Enhancements:

• changed the "View" button at the top of the Library screen to "Carousel"
  • clicking it starts the Carousel in View mode at the current pattern
• the pattern description now has word-wrap
• if the pattern description contains a URL a "Web" button appears in the bottom right which will open the URL when clicked
  • note that most browsers will see this as a "pop-up" attempt so you'll need to allow pop-ups in your browser for this to work

Fixes:

• when patterns are drawn only set cells are modified (this was not true on byte boundaries)

Things I'm working on that may appear in a future build:

• completing the Waypoint editor rewrite
• enhancing the Fly mode camera so it follows patterns (it has a habit of zooming to a blank part of the world)
• a Colour Theme editor
• an improved Load and Save screen

As always, comments and suggestions are welcome.

Best regards,
Chris

Hi,
Build 114 contains some UI enhancements and the foundations for camera following. The intention is that the camera will identify areas on the world grid that have life and prefer them over empty areas. This initial version includes the routines that detect areas (boxes) on the world grid that contain life. To preview this switch Projection off and enable Carousel mode. You'll see orange boxes around areas of interest. Note the camera following is not implemented yet.



Enhancements:

• added the life rule name to the statistics displayed when you click on the Gen button
• switching from View to Editor or Library will set the pattern to the pattern displayed in the Carousel
  • the Carousel pattern is only updated when using the "Carousel" button from the Library screen
• opening links from the Library pattern description now reuses the same window
• reordered and updated life playback controls:
  • "Reset" resets life to the first generation and then reverts to "Play", "Pause" or "Fast-Forward" depending on which was active before the reset
  • "Pause" pauses life at the current generation and if already paused then steps forward one generation
  • "Play" runs life at the speed dictated by the "gps" slider (generations per second) and each generation will be displayed
  • "Fast-Forward" runs life at 4x the maximum "gps" speed and displays every 4th generation

Fixes:

• the zoom control was not being updated on exit from Carousel mode
• moved the position of the View mode zoom, pan, angle, depth and layer controls so they don't clash with the Carousel controls
• increased the font size for the Library pattern descriptions and changed to a web-safe font
• switching to View mode while the Carousel is playing would not work if the carousel speed was Manual
• elapsed time was not resetting in Carousel mode
• elapsed time was not displaying as zero following reset if paused

Comments and suggestions welcome.

Chris

Build 115 improves the area detection that will be used by the camera following algorithm. You can see it in action by switching to "Flat" view while in "View" mode:



It also incorporates the new world save/load UI:




Enhancements:

• there are now 9 save slots for saving the world grid in Edit mode
  • click "Save" to save the current world and then select one of the 9 thumbnails
    • if the slot is occupied then it will display "Save?" and click again to overwrite
  • click "Load" and then select one of the 9 thumbnails to load
    • empty slots are not clickable and display "Empty"
  • click "Delete" and then select on of the 9 thumbnails to clear a save slot
    • the slot will display "Delete?" and click again to clear
• you can now toggle the bounding box display showing where there are populated areas with hotkey "b" (only displays in "Flat" mode)
• the Edit grid display setting, View bounding box display setting and View statistics display setting are now saved across sessions

Fixes:

• some UI controls were not centered correctly
• failing to load the music could leave the music control disabled but on (rather than off)

Comments and suggestions welcome.

Chris

is the source code available?

bedorlan wrote: April 10th, 2021, 2:59 pm is the source code available?

The short answer is "no". The medium-length answer is that LifeViewer was written as an exercise in learning Javascript, so it would have to be rewritten from the ground up before it would be ready to share. Just the minified-with-Closure-Compiler version of the source code is available, so you can easily use LifeViewer in your own HTML pages.

Rather than move this post to the currently active thread, I think I'll just link over to the relevant post in that thread. This thread really has better keywords for searching than the other one, so people are likely to find it again. (But please post further questions on the other thread anyway.)