New viewers written in angular and react

A place, especially for newcomers, to ask questions and learn the basics.
Post Reply
bryan.pauquette
Posts: 6
Joined: February 17th, 2026, 9:55 am

New viewers written in angular and react

Post by bryan.pauquette »

# Conway’s Game of Life Project Update (React + Angular) - Community Testing Request

Hello Conway Life community,

My name is Bryan Pauquette, and I’ve been building and maintaining two live versions of my Conway’s Game of Life project:

- React version: https://gol-conway.hopto.org
- Angular version: https://gol-angular.hopto.org

I’m asking for community testing, feedback, and support as these projects continue to mature.

## What’s currently in the projects.

Both versions include a broad feature set focused on simulation quality, usability, and accessibility:

- Interactive simulation controls (run, pause, step, clear)
- Both are attached to the same backend that contains approximately 4200 known life shapes from the all database on the life wiki.
- Advanced editing tools for drawing and pattern placement
- Shape/pattern workflows including palette selection, recent shapes, and duplicate detection
- Save/load grid workflows
- Population tracking and stability detection workflows
- Hashlife-focused performance modes, presets, and large-generation leap workflows
- Script playground support (commands, control flow, and pattern automation)
- Accessibility-focused controls, including ADA-oriented safety options and photosensitivity tooling
- Global keyboard shortcuts and responsive/mobile-aware behavior
- Account/auth-related flows and personal shape management

The Angular app is a serious parity-focused port of the React app, and both are actively evolving.

## Community testing request

If you have time, please test both links and share feedback on:

- Simulation correctness and performance
- Hashlife behavior on large/complex patterns
- Script playground behavior and edge cases
- Shape catalog/save/load workflows
- Accessibility and UX issues
- Browser/device-specific issues

## Contact

Bryan Pauquette
Email: [email protected]

Thanks to everyone willing to test and help improve this project for the Game of Life community.
User avatar
I6_I6
Posts: 742
Joined: July 26th, 2025, 8:44 pm
Location: Here, there, somewhere, anywhere, everywhere.
Contact:

Re: New viewers written in angular and react

Post by I6_I6 »

This is pretty cool!
As far as I can see, there isn't anything wrong with the simulation, in both versions. Performance is also good.

However, while I was messing around with the React version, I had this glitch that made the simulation loop. (I honestly don't know if I accidentally pressed something that made it loop as an intentional feature). I don't know how to upload videos here though.

Overall, the websites are nice and feature-rich, but here are some suggestions of what to add:
  • Pattern selection: Add a selection tool that lets you select rectangular portions of the grid, which the user can then manipulate. (Rotate, flip, nudge, copy, save, etc.) (Side note: Something I've always wanted in Golly is polygonal selection, but that might be a stretch.)
  • Speed control: More precise simulation speed control, since the current one is a bit hard to understand. Might be useful to add more info at the top.
  • Reset: Add a 'reset' button which allows the user to return to generation 0.
  • Copy+paste RLE: Allow copying, cutting and pasting of patterns. Patterns can be stored as text using Run Length Encoded (RLE) format. This is very useful, and most other platforms support it, so the user would be able to copy and paste things across different simulators.
  • Import/download patterns: Import pattern files that are in RLE (.rle) (or macrocell, .mc) format and download patterns as files.
  • OCA support: Support OCAs (other cellular automata) and not just Conway's Game of Life. This could be done by adding a feature where the user could input a rulestring to specify the rule.
  • Help window: Add a 'help' popup that explains things about the simulator and how to use it and things like keyboard shortcuts.
Also, I'm not entirely sure why there are separate Hashlife and 'normal' algorithms when you can just use Hashlife. The patterns will still evolve the same, but Hashlife would be faster (assuming normal mode is just calculating the neighbors of live cells without hashing).

You might want to check out Golly or LifeViewer, which are the most widely use CA simulators. They might give you some ideas. (Golly is an app you can download here.)
:D

Code: Select all

#C [[ THEME Golly ]]
x = 27, y = 15, rule = LifeHistory
8.A$A6.A.A$3A4.BA2B.B2D$3.A4.2B.2B2DB$2.2A2.3B.6B2.3B$2.20B$4.19B$4.2B
C10BD4B$4.2B2C10BD4B$4.B2C11B2D3B$4.13B2D4B$5.12BD3B.B2A$6.13B3.BA.A$
6.3B.B3.B10.A$25.2A!
User:I6 I6/Elementary Emulators
hotdogPi
Moderator
Posts: 2203
Joined: August 12th, 2020, 8:22 pm

Re: New viewers written in angular and react

Post by hotdogPi »

I6_I6 wrote: February 17th, 2026, 5:11 pm Also, I'm not entirely sure why there are separate Hashlife and 'normal' algorithms when you can just use Hashlife. The patterns will still evolve the same, but Hashlife would be faster (assuming normal mode is just calculating the neighbors of live cells without hashing).
HashLife isn't always faster. It's slower when running my search program or my oscillator stamp collection, for example.
User:HotdogPi/My discoveries

Periods discovered:

All evens ≤128 except 52,58,78,82,92,94,98,104,118,122

5-15,㉕-㉛,㉟㊺,51,63,65,73,75
1㊳㊵㊹㊼㊽,54,56,72,74,80,90,92
217,240,300,486,576

Guns: 20,21,32,54,55,57,114,117,124,126
SKOPs: 32,74,76,102,196
User avatar
rowett
Moderator
Posts: 4570
Joined: January 31st, 2013, 2:34 am
Location: UK
Contact:

Re: New viewers written in angular and react

Post by rowett »

hotdogPi wrote: February 17th, 2026, 7:42 pm HashLife isn't always faster. It's slower when running my search program or my oscillator stamp collection, for example.
HashLife is excellent at patterns containing repeated sets of cells. It's very poor when there's little or no repetition as the pattern evolves:

Code: Select all

#N fireworks.rle
#O John Elliott
#C An admirably beautiful rule. Sample starting pattern.
#C
#C From Mirek Wojtowicz's 'MCell 4.20' pattern collection:
#C http://www.mirekw.com/ca/download.html
#C Original filename for MCell-format file:  Fireworks.mcl
#C Converted to Golly native RLE format as per discussion in
#C https://conwaylife.com/forums/viewtopic.php?p=139226#p139226
x = 108, y = 100, rule = 2/13/21:T400
88.A6$A58$61.A24$107.A11$37.A!
This is a good example of a HashLife-unfriendly pattern. On my machine Golly (using HashLife) manages 74 generations per second. LifeViewer (using a sequential iterator) manages 831 generations per second, and LifeViewer Pro (using a SIMD accelerated sequential iterator) can do 5880 generations per second.
User avatar
I6_I6
Posts: 742
Joined: July 26th, 2025, 8:44 pm
Location: Here, there, somewhere, anywhere, everywhere.
Contact:

Re: New viewers written in angular and react

Post by I6_I6 »

rowett wrote: February 18th, 2026, 3:34 pm
hotdogPi wrote: February 17th, 2026, 7:42 pm HashLife isn't always faster. It's slower when running my search program or my oscillator stamp collection, for example.
HashLife is excellent at patterns containing repeated sets of cells. It's very poor when there's little or no repetition as the pattern evolves:

Code: Select all

#N fireworks.rle
#O John Elliott
#C An admirably beautiful rule. Sample starting pattern.
#C
#C From Mirek Wojtowicz's 'MCell 4.20' pattern collection:
#C http://www.mirekw.com/ca/download.html
#C Original filename for MCell-format file:  Fireworks.mcl
#C Converted to Golly native RLE format as per discussion in
#C https://conwaylife.com/forums/viewtopic.php?p=139226#p139226
x = 108, y = 100, rule = 2/13/21:T400
88.A6$A58$61.A24$107.A11$37.A!
This is a good example of a HashLife-unfriendly pattern. On my machine Golly (using HashLife) manages 74 generations per second. LifeViewer (using a sequential iterator) manages 831 generations per second, and LifeViewer Pro (using a SIMD accelerated sequential iterator) can do 5880 generations per second.
How would I use an algorithm that iterates through the cells in Golly? Also, how can you check the generations per second in both Golly and LV?

Code: Select all

#C [[ THEME Golly ]]
x = 27, y = 15, rule = LifeHistory
8.A$A6.A.A$3A4.BA2B.B2D$3.A4.2B.2B2DB$2.2A2.3B.6B2.3B$2.20B$4.19B$4.2B
C10BD4B$4.2B2C10BD4B$4.B2C11B2D3B$4.13B2D4B$5.12BD3B.B2A$6.13B3.BA.A$
6.3B.B3.B10.A$25.2A!
User:I6 I6/Elementary Emulators
User avatar
rowett
Moderator
Posts: 4570
Joined: January 31st, 2013, 2:34 am
Location: UK
Contact:

Re: New viewers written in angular and react

Post by rowett »

I6_I6 wrote: February 19th, 2026, 1:17 am How would I use an algorithm that iterates through the cells in Golly?
For Generations patterns Golly only has a HashLife-based algo.
I6_I6 wrote: February 19th, 2026, 1:17 am Also, how can you check the generations per second in both Golly and LV?
LifeViewer has a built in benchmark mode. Use Settings>Playback>Go To Gen and then enter the generation number you want to go to followed by b (for example 1000b). LifeViewer will display the time taken and generations per second on arriving at the required generation.

For Golly I made a small modification to Scripts>Lua>goto.lua to add elapsed time and generations per second information:

Code: Select all

-- Go to a requested generation.  The given generation can be an
-- absolute number like 1,000,000 (commas are optional) or a number
-- relative to the current generation like +9 or -6.  If the target
-- generation is less than the current generation then we go back
-- to the starting generation (normally 0) and advance to the target.
-- Authors: Andrew Trevorrow and Dave Greene, Mar 2024.

local g = golly()
local gp = require "gplus"
local validint = gp.validint

--------------------------------------------------------------------------------

local function intbase(n, b)
    -- convert integer n >= 0 to a base b digit array (thanks to PM 2Ring)
    digits = {}
    while n > 0 do
        digits[#digits + 1] = n % b
        n = math.floor(n / b)
    end
    if #digits == 0 then digits = {0} end
    return digits
end

--------------------------------------------------------------------------------

-- math.maxinteger is a 19-digit number on a 64-bit system, but we have to
-- limit gen counts to 16-digit numbers to avoid overflow problems
local maxdigits = #tostring(math.maxinteger) - 3

local function check_number(numstr)
    if #numstr > maxdigits then
        g.exit("Number is too large for Lua -- use goto.py instead.")
    end
    return tonumber(numstr)
end

--------------------------------------------------------------------------------

local function go_to(gen)
    local currgen = check_number(g.getgen())
    local newgen
    if gen:sub(1,1) == '+' then
        newgen = currgen + check_number(gen:sub(2,-1))
    elseif gen:sub(1,1) == '-' then
        local n = check_number(gen:sub(2,-1))
        if currgen > n then
            newgen = currgen - n
        else
            newgen = 0
        end
    else
        newgen = check_number(gen)
    end
    
    if newgen < currgen then
        -- try to go back to starting gen (not necessarily 0) and
        -- then forwards to newgen; note that reset() also restores
        -- algorithm and/or rule, so too bad if user changed those
        -- after the starting info was saved;
        -- first save current location and scale
        local midx, midy = g.getpos()
        local mag = g.getmag()
        g.reset()
        -- restore location and scale
        g.setpos(midx, midy)
        g.setmag(mag)
        -- current gen might be > 0 if user loaded a pattern file
        -- that set the gen count
        currgen = check_number(g.getgen())
        if newgen < currgen then
            g.error("Can't go back any further; pattern was saved "..
                    "at generation "..currgen..".")
            return
        end
    end
    if newgen == currgen then return end
    
    g.show("Hit escape to abort...")
    local oldsecs = os.clock()
    local starttime = oldsecs

    -- before stepping we advance by 1 generation, for two reasons:
    -- 1. if we're at the starting gen then the *current* step size
    --    will be saved (and restored upon Reset/Undo) rather than a
    --    possibly very large step size
    -- 2. it increases the chances the user will see updates and so
    --    get some idea of how long the script will take to finish
    --    (otherwise if the base is 10 and a gen like 1,000,000,000
    --    is given then only a single step() of 10^9 would be done)
    g.run(1)
    currgen = currgen + 1

    -- use fast stepping (thanks to PM 2Ring)
    for i, d in ipairs(intbase(newgen - currgen, g.getbase())) do
        if d > 0 then
            g.setstep(i-1)
            for j = 1, d do
                if g.empty() then
                    g.show("Pattern is empty.")
                    return
                end
                g.step()
                local newsecs = os.clock()
                if newsecs - oldsecs >= 1.0 then
                    -- do an update every sec
                    oldsecs = newsecs
                    g.update()
                end
            end
        end
    end
    local endtime = os.clock() - starttime
    local totalgens = newgen - currgen + 1

    g.note(totalgens.." gens in "..(math.floor(10 * endtime)/10).."s = "..math.floor(totalgens / endtime).."gps")
    g.show("")
end

--------------------------------------------------------------------------------

local function savegen(filename, gen)
    local f = io.open(filename, "w")
    if f then
        f:write(gen)
        f:close()
    else
        g.warn("Can't save gen in filename:\n"..filename)
    end
end

--------------------------------------------------------------------------------

-- use same file name as in goto.py
local GotoINIFileName = g.getdir("data").."goto.ini"
local previousgen = ""
local f = io.open(GotoINIFileName, "r")
if f then
    previousgen = f:read("*l") or ""
    f:close()
end

local gen = g.getstring("Enter the desired generation number,\n"..
                        "or -n/+n to go back/forwards by n:",
                        previousgen, "Go to generation")
if gen == "" then
    g.exit()
elseif gen == '+' or gen == '-' then
    -- clear the default
    savegen(GotoINIFileName, "")
elseif not validint(gen) then
    g.exit("Sorry, but \""..gen.."\" is not a valid integer.")
else
    -- best to save given gen now in case user aborts script
    savegen(GotoINIFileName, gen)
    local oldstep = g.getstep()
    go_to(gen:gsub(",",""))
    g.setstep(oldstep)
end
User avatar
rowett
Moderator
Posts: 4570
Joined: January 31st, 2013, 2:34 am
Location: UK
Contact:

Re: New viewers written in angular and react

Post by rowett »

bryan.pauquette wrote: February 17th, 2026, 10:13 am If you have time, please test both links and share feedback
On my machine the play/stop button is greyed out when using the React version in ADA compliance mode. SPACE works to play/pause.

I was initially confused by the slow playback speed until I found ADA compliance mode in the settings. Even when disabled and FPS and GPS caps disabled the speed up and speed down hotkeys don't work:

Code: Select all

Uncaught TypeError: this.model.getSpeed is not a function
    at GameController.increaseSpeed (GameController.js:782:37)
    at GameController.handleKeyDown (GameController.js:741:14)
    at GameController.js:206:12
    at GameView.emit (GameView.js:53:11)
    at HTMLDocument.<anonymous> (GameView.js:404:12)
bryan.pauquette
Posts: 6
Joined: February 17th, 2026, 9:55 am

Re: New viewers written in angular and react

Post by bryan.pauquette »

Yes, it was a difficult balance between staying compliant with WCAG guidelines and making it fun. Most people who are not subject to flashing effects would like to turn it off but it can not be the default out of the box. I am not a lawyer nor do I wish to know any lawyers. ChatGpt was my lawyer judge. Maybe the dialog needs to be more "in your face" for first time users. Thank you also for the specific bug report.

Both repositories are public now. I am keeping the backend private for now.

https://github.com/bpauquette
User avatar
rowett
Moderator
Posts: 4570
Joined: January 31st, 2013, 2:34 am
Location: UK
Contact:

Re: New viewers written in angular and react

Post by rowett »

bryan.pauquette wrote: February 19th, 2026, 9:42 am Yes, it was a difficult balance between staying compliant with WCAG guidelines and making it fun. Most people who are not subject to flashing effects would like to turn it off but it can not be the default out of the box.
Agreed.

I've just added similar to LifeViewer and LifeViewer Pro.

The first time you open either a Photosensitivity warning appears with options to cap the screen update speed. Your choice is remembered for the browser (in localSettings) and so only comes up the first time. There's also a note to inform you that you can re-open the dialog any time via the settings menu or a keyboard shortcut.

I chose to just cap the cell grid rendering (rather than the generation rate) since with a low generation rate it's fairly useless. Also this just happens during playback.
User avatar
R2INT
Posts: 775
Joined: July 2nd, 2024, 7:42 pm

Re: New viewers written in angular and react

Post by R2INT »

rowett wrote: February 21st, 2026, 1:34 pm [...]
I chose to just cap the cell grid rendering (rather than the generation rate) since with a low generation rate it's fairly useless. Also this just happens during playback.
In my opinion, it would be less jarring if the screen was updated at 60fps but the pattern displayed updates every 350ms (like you stated earlier) so that you can drag smoothly while pattern playback is enabled. This would require an extra buffer to be added (so you would have buffers for the current pattern and the displayed pattern.)

When accessing the photosensitivity menu from Settings -> General, the photosensitivity menu displays behind the settings menu. I think that the best option is to close the settings menu once selecting Photosensitivity.
lifeviewer_bug.png
lifeviewer_bug.png (191.76 KiB) Viewed 1769 times
Range-2 INT
R2INT's Rule Collection

Currently missing OCA catalyst search software and OCA conduit search software (the one I have is hardcoded to B3/S23-a5)
bryan.pauquette
Posts: 6
Joined: February 17th, 2026, 9:55 am

Re: New viewers written in angular and react

Post by bryan.pauquette »

I just deployed a new versions where the ADA choice is more in your face and I also fixed many bugs.

I also changed the way it zooms so it zooms to wherever your mouse cursor is or middle of pinch on phone.

I also added the reset to generation zero button that was requested.

I moved the hashlife selection out of the main screen and into options since that is for advanced users. Most people won't care about that.

https://gol-conway.hopto.org and https://gol-angular.hopto.org.

No one has signed up for the extra features to save and share shapes yet. Need testers if anyone is interested.
User avatar
muzik
Posts: 6558
Joined: January 28th, 2016, 2:47 pm
Location: Scotland

Re: New viewers written in angular and react

Post by muzik »

Having difficulty with loading the site. Is it down or just under stress?
Parity Replicator Collection v1.6 is now live - please send all relevant discoveries here.
bryan.pauquette
Posts: 6
Joined: February 17th, 2026, 9:55 am

Re: New viewers written in angular and react

Post by bryan.pauquette »

muzik wrote: February 27th, 2026, 7:14 pm Having difficulty with loading the site. Is it down or just under stress?


You are correct sir. I did a windows update yesterday and it hosed up my 443 firewall inbound rules. Check again now.

https://www.youtube.com/watch?v=xDLvUqhwHZc

Sorry about that. I had to remove and readd the rules. The AI was convinced that my isp was blocking it but he was wrong wrong wrong.

Never believe the AI while troubleshooting. LOL
bryan.pauquette
Posts: 6
Joined: February 17th, 2026, 9:55 am

Re: New viewers written in angular and react

Post by bryan.pauquette »

I6_I6 wrote: February 17th, 2026, 5:11 pm This is pretty cool!
As far as I can see, there isn't anything wrong with the simulation, in both versions. Performance is also good.

However, while I was messing around with the React version, I had this glitch that made the simulation loop. (I honestly don't know if I accidentally pressed something that made it loop as an intentional feature). I don't know how to upload videos here though.

Overall, the websites are nice and feature-rich, but here are some suggestions of what to add:
  • Pattern selection: Add a selection tool that lets you select rectangular portions of the grid, which the user can then manipulate. (Rotate, flip, nudge, copy, save, etc.) (Side note: Something I've always wanted in Golly is polygonal selection, but that might be a stretch.)
  • Speed control: More precise simulation speed control, since the current one is a bit hard to understand. Might be useful to add more info at the top.
  • Reset: Add a 'reset' button which allows the user to return to generation 0.
  • Copy+paste RLE: Allow copying, cutting and pasting of patterns. Patterns can be stored as text using Run Length Encoded (RLE) format. This is very useful, and most other platforms support it, so the user would be able to copy and paste things across different simulators.
  • Import/download patterns: Import pattern files that are in RLE (.rle) (or macrocell, .mc) format and download patterns as files.
  • OCA support: Support OCAs (other cellular automata) and not just Conway's Game of Life. This could be done by adding a feature where the user could input a rulestring to specify the rule.
  • Help window: Add a 'help' popup that explains things about the simulator and how to use it and things like keyboard shortcuts.
Also, I'm not entirely sure why there are separate Hashlife and 'normal' algorithms when you can just use Hashlife. The patterns will still evolve the same, but Hashlife would be faster (assuming normal mode is just calculating the neighbors of live cells without hashing).

You might want to check out Golly or LifeViewer, which are the most widely use CA simulators. They might give you some ideas. (Golly is an app you can download here.)
:D
I didn't want to be accused of copying. I am sure Golly is great. I have played with it once or twice a few years ago.
User avatar
muzik
Posts: 6558
Joined: January 28th, 2016, 2:47 pm
Location: Scotland

Re: New viewers written in angular and react

Post by muzik »

Most image editors allow for one colour to be drawn via left click, and another colour (often the "erase" colour) to be drawn via right click. I wonder if this functionality could be implemented such that left click draws alive cells on dead areas and right click draws dead cells on alive areas.
Parity Replicator Collection v1.6 is now live - please send all relevant discoveries here.
bryan.pauquette
Posts: 6
Joined: February 17th, 2026, 9:55 am

Re: New viewers written in angular and react

Post by bryan.pauquette »

I suppose I could. Right now it just toggles with the mouse looking tool on left click.

3/12/2026
I pushed a new release with work for the left most tool (toggle) in the toolbar. It now works as described. Left click makes the cell alive and Right click makes the cell dead. The default tool is still the draw tool and it just works with a lineto between mouse points. I also pushed some mobile responsive layout work with this so the viewers are easier to use on Iphones and android.

Let me know if there is anything else I can work on. I was thinking I need to incorporate copy paste from other viewers so it is easier to move shapes back and forth between these viewers and LifeViewer. Ctrl-C Ctrl-V. The import tool needs work. Maybe just get rid of that entirely and use copy-paste instead. I am trying to plan that feature now but it is not high priority yet because the entire all.zip file is imported into the life backend database. There already is a pattern selection tool but you have to be signed in to use it. I am not sure if anyone has registered or signed in yet.
In this day and age that is completely understandable. Why would anyone trust that their data is not going to leak?

That is another reason I don't want to make the backend public. If there are any security experts out there I would not mind sharing the backend code but I have already analyzed it multiple times for security flaws. Even so I don't think it is a good idea to walk around with your fly open. Not sure that the mantra "All bugs are shallow with enough eyes" is actually true. https://en.wikipedia.org/wiki/Linus%27s_law aka horseshit. Try explaining why you didn't catch the log4j bug to the Army. (Because I don't read all the code that I use!) It is not an easy sell.

I am also planning the feature to allow different OCA rules but that is going to be a breaking change. So I need to be careful with that one. I am using these projects as a mental distraction while I am searching for work. I also have another project I am working on that classifies photos into category folders using a local LLM. That project would be more lucrative than this one. In case you can't read between the lines I am looking for any developer job right now and the market is terrible.

Don't forget to hit ctrl-shift-R before testing so the new code is loaded.
Last edited by bryan.pauquette on March 12th, 2026, 5:39 pm, edited 5 times in total.
User avatar
muzik
Posts: 6558
Joined: January 28th, 2016, 2:47 pm
Location: Scotland

Re: New viewers written in angular and react

Post by muzik »

Perhaps the "pattern saving" feature could have an option to export and import rle format text, rather than only using the account system?
Parity Replicator Collection v1.6 is now live - please send all relevant discoveries here.
Post Reply