The deprecated note below was previously too narrow in what it was discussing, and not very useful. I think this note will be broken into a few other notes:
This is an interactive note about a relationship-based API for making visual interactive stuff. By relationship-based I mean that the API is made for building relationships between visual things. By API I mean JavaScript / TypeScript library.
In a property-based API for visual stuff, you might create a square like this:
const mySquare = square({ radius: 20, center: [35,35]})
See how we initialized the square with a size (radius) and position (center)? In the API we will be discussing in this note, nothing has a size nor position nor any layout property. So let's make a square without any layout properties:
const mySquare = square();
Things like squares don't have layout properties, they instead have layout relationships with other things.
const a = square();
const b = square();
besideLeftToRight(a, b);
There are
multiple ways to express the same relationships; the line
below is equivalent to the last line above (note that it is "RightToLeft"
instead of "LeftToRight" and a and b are swapped).
besideRightToLeft(square1, square2);
besideLeftToRight and besideRightToLeft place two
shapes horizontally next to eachother. Given the position of one of the
shapes, we can compute the position of the other; in other words, these
particular relationships determine the positions of the
shapes they relate. For short, I'll say that these relationships determine
position.
Math warning (feel free to ignore): Formally, these relationships are position isomorphisms. Scroll further in this note to see a more formal description of all of this.
Here's a relationship that determines rotation:
const a = square();
const b = square();
rotate(Math.PI/8)(a, b);
To say the same thing again in another situation:
rotate(Math.PI/8) determines the rotations of the shapes it
relates.
There are more intense relationships that determine all layout properties of the things they relate. The most basic example is:
const a = square();
const b = square();
equal(a, b);
equal completely determines layout of both squares... But it
might not be the most interesting relationship. Here's another relationship
that completely determines layout:
const a = square();
const b = square();
equalExceptBesideLeftToRight(a, b);
If you have three things, you can relate them all by specifying only two relationships.
const a = square();
const b = square();
const c = square();
besideLeftToRight(a, b);
besideLeftToRight(b, c);
The above is equivalent to the below:
const a = square();
const b = square();
const c = square();
besideLeftToRight(a, b);
besideLeftToRightWithSomethingInBetween(b)(a, c);
THIS NEEDS DIAGRAMS NOT CODE!