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:
React - A JavaScript library for designing user interfaces, created by Facebook. This whole app is a user interface, and it is broken down into React Components. Thus React provides the structure of the project.
Create React App - a command-line build-environment for React websites. Accelerates getting started with React. It's built around Node JS and all sorts of open-souce modules can easily be pulled into projects using npm. Also compiles and bundles your JavaScript, as it uses Webpack, preconfigured, under-the-hood.
D3 - a powerful library for data visualisation and graphing. I'm using a tiny bit of it here, its ability to draw axes.
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.
react-animation-frame - when using JavaScript to generate individual frames of an animation, 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.
immutability-helper - using immutable data can work well with state updates to React components. Variables in JavaScript remain mutable, but with this library we treat them as immutable and shift programming style. A practical and value-adding step in the direction of functional programming.
math js - extensive maths library for JavaScript. Among other features it provides vectors & matrices (e.g. multiply a vector by a matrix) which will be useful for this app.
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.
Widgets with more basic function may be nothing more than native DOM elements with a lot of CSS applied to style them. Such widgets have no JavaScript customising their function, and it makes no difference whether React is used or not. They will provide less sophisticated interation:
Toggle Switch - some nice design went into this.