Building Website
Spent an hour wrestling Github Actions to build the GBA file AND publish it to Github Pages.
The game is available to test on https://rayzchen.github.io/snake-gba/
Cursor for placement
Much of this logged time was actually spent hunting for RLE files and testing them…
Rewrote a large portion of the loading code to render a ‘cursor’ which indicates where the placed cells will be. The actual placing hasn’t been implemented yet…
RLE bank can be found at https://rayzchen.github.io/algol/patterns/
Ship
MechSim
MechSim is a mechanical system simulator that uses Lagrangian mechanics and Runge-Kutta methods to simulate various constrained systems. From expressions of energy it is capable of deriving equations of motion using symbolic differentiation and then stepping through them in time to simulate the motion of the system.
How to use
The homepage has links to each of the system simulator pages. Each page has an energy label and diagram, playback buttons and sometimes system equations. The Rolling Disk Pendulum has equations of motion too complex to display on the screen. There is also a button to view the Python system file that creates the solver. The page runs best on a landscape desktop orientation.
Code structure
The project is written in both Python and JavaScript: the main Lagrangian system solver uses Python for its polymorphism and flexible OOP, while the renderer uses JS to efficiently draw the system and update the GUI. Minimal external dependencies are used, so almost all of the code has been written from scratch. Neither component uses nor requires the internals of the other: the system solver simply outputs a few numbers representing the phase state of the system, and the renderer uses those numbers to calculate the positions of objects to draw.
Challenges
One of the first major issues encountered was how to simplify expressions. Many of the basic rules in algebra are rather complicated to systematically apply, such as collecting like terms or using index laws. In fact, since the expressions obtained from the Euler-Lagrange equations are of a specific format, this symbolic differentiation engine is not fully-featured.
Another detail that required significant attention was how to embed Python into a JavaScript powered webpage. The library used for this, PyScript, has two different Python interpreters: Pyodide and MicroPython, the latter of which is 37x smaller in size. The symbolic differentiation engine does not require any external dependencies, but the RK4 time stepper does use NumPy, which is not available on MicroPython. This meant that much of the code needed to be rewritten using ulab, the MicroPython equivalent. In addition to this, many of the CPython-specific implementation details were different, such as dictionary key order and hash function limitations, had varying behaviour on MicroPython and had to be taken account of.
One of the techniques I used was dynamically creating each simulation webpage entirely using JavaScript without any frameworks such as jQuery. This meant that each simulation would have almost identical HTML and simply differing diagram drawing JS, which made adding new simulations a matter of copying the template code and editing the rendering script.
Merits
The system code is extremely intuitive to the point where even non-programmers should be capable of understanding how the system is set up. The most complex system, the Rolling Disk Pendulum, has no less than 7 components exerting classical forces on each other, but the Euler-Lagrange equations convert this simply to a set of simultaneous equations that can be solved instantly for individual accelerations. This results in fluid motion appearing on the screen, no matter how chaotic the system is.
Final fixes
Changed the behaviour of the playback button icons to keep sync with the simulation. Also fixed a layering issue in the CSS. The project should now be ready to ship!
Temporary deployments can be found at https://rayzchen.github.io/mechsim/
Loading RLE strings
Added a modal to input any RLE string (many can be found at https://conwaylife.com/wiki/!). Spent a while trying to debug an extra generation simulated when loading, only to realise my RLE loading was too fast and outpaced the simulator…
The RLE can also be inputted through Ctrl+Enter. RLE banks to be created soon…
Temporary deployments can be found at https://rayzchen.github.io/algol/
Playback Controls
Added reset, play/pause and step buttons!
Temporary deployments can be found at https://rayzchen.github.io/mechsim/
Energy Bar
Added a bar on the left to graphically show the ratio between kinetic and potential energies (the faster things are moving, the more light grey there is).
Temporary deployments can be found at https://rayzchen.github.io/mechsim/
Homepage!
Finally able to navigate through the six simulation systems from one place 🔥🔥 Had to wrestle with CSS flexbox and transitions to make nice animations!
Temporary deployments can be found at https://rayzchen.github.io/mechsim/
Cart + Pendulum
Added a simple cart and pendulum system, and realised the internal rotation angles were COMPLETELY opposite… Spent half an hour of unlogged time just to find out that all of the systems were symmetric in angles except ONE which had a wrong sign in the rendering code, making it LOOK symmetric… Fixed that without too much of a headache once found :D
System file viewer
Added a button to view the Python code that sets up the physical system.
Temporary deployments can be found at https://rayzchen.github.io/mechsim/
More simulations
New simulations added:
- Swinging Atwood Machine
- Ball on Slope
- Simple Pendulum
Temporary deployments can be found at https://rayzchen.github.io/mechsim/
Website structure rewrite
To make adding new simulations easier, I restructured the file layout and added more dynamic code to the shared JS to create the elements required rather than copy pasting everything in every file. Also added labels to the tab title and bottom right corner. Also rewrote the drawing code for the rolling disk to add more details.
Temporary deployments can be found at https://rayzchen.github.io/mechsim/disk/
Complex System Demo
This system contains a semicircular anulus rocking on a rough plane, with a circular disk inside attached to a compound pendulum, and constrained with three springs. Adjusting the parameters took an awfully long time…
Temporary deployments can be found at https://rayzchen.github.io/mechsim/disk.html
Circular Disks
After much headache, two new constraints have been implemented: disk rolling on a plane and disk rolling in a circle. There were also lots of bugs in the LaTeX output, which I just kept encountering one by one, but hopefully they should now all be fixed.
Temporary deployments can be found at https://rayzchen.github.io/mechsim/disk.html
GitHub deployment
Temporary deployments can be found at https://rayzchen.github.io/mechsim/pend.html
Loading more…