A web-app built around the maths problem:
There are 2n points in the XY plane, with no 3 points collinear.
Can n lines be drawn between pairs of points so that all points are paired with no lines crossing?
Demo: here (Project incomplete. It's not doing much at the moment.)
Tools & libraries used:
Fabric JS - provides an interactive HTML 5 canvas on which 2D shapes can be moved, dragged, resized and more (its "interactive object model"). The library lets you drop in an interface that resembles MS PowerPoint's way of laying out slides.
requestAnimationFrame() allows the programmer to take advantage of the browser's way of dealing with animation. This includes choosing the frame rate (e.g. matching it this to the refresh rate of the devices's screen) and turning off animation when the page is not in view, which saves energy. The purpose of this library is to integrate
requestAnimationFrame() with React. It's a higher-order component which (effectively) adds an extra lifecycle method to component for animation to which it is applied.
React Component libraries
A supply of ready made user-interface components - or "widgets" - is useful when building a user interface:
rc-slider - sliders provide a quick, easy way for the user to enter or adjust a numeric input in a range. A slider is a 'pointer' overlayed on a 1D scale. The pointer is dragged using the mouse to change the value.
react-select - A dropdown menu that lists clickable choices. Whilst there is a native DOM element for this, I decided to use someone's React library-component instead. This one allows you to type text whilst options are auto-suggested - useful for when there are many pre-defined options, though I don't really need this feature in my app.
Toggle Switch - some nice design went into this.