This article is an example on how to use simple mathematical functions to model the real world, not a tutorial to create a suggestion board.  Figures 1. Simple suggestion board. Not too bad.
Although that'd work, it really doesn't look like a real suggestion board. Take a look:
 Figure 2. Real suggestion board. Kinda messy, but cute.
It turns out that we can use basic HTML markup and CSS (even CSS1) to get a more realistic look and feel simply by making the notes float randomly to the left and right sides of the page. This is how that'd look like:
 Figure 3. A more random approach. We are getting there.
Please realise I have made the height of the notes variable depending on the length of the suggestion. That isn't realistic (or is it?), but it's very convenient when you have a thoughtful suggestion (I'm sure you didn't like the scroll bars of the first figure). Besides, it contributes to the randomness of the approach.
Of course, it's been a long time since CSS1 was released, and we can now take advantage of more advanced effects like 2D Transforms. They allow us to rotate the notes, and this was the origin of the article: how can we model that in an elegant way? Sure we need to retrieve random values and use them as the degree (of arc) for the rotation, but immediately we face the problem of what should be the function that describes the probability of the arc degree of the rotation taking certain values.
  Figure 4. Random values for the rotation with equal probability.
In the pictures above, I have simply taken random values between 0 and 3 (first picture) and 0 and 5 (second picture). The latest examples don't even cover a 10-degree rotation, and if they did, it'd look pretty bad. Although this approach adds randomness to the board, it doesn't model the real situation yet, in which most suggestions are pretty much straight and the more rotated ones appear less often, but do appear.
One could now write a whole set of conditional statements, let's say, to make half of the suggestions straight, a third with a 1-degree rotation (I'm going to use absolute values and will only consider the direction of the rotation afterwards), 10% with a 2-degree rotation, and the rest up to, like... 32 (because we all love powers of two, and someone who can't bother putting up a note with a rotation lower than that, also couldn't bother make a suggestion at all) in a way higher rotations are less and less likely. Such a pattern sounds verbose to code, but what if I told you that the next function does just that:  Figure 5. A simple but powerful function. where x ∈ ℝ and 1 < x <1025. The plot of the function is as follows:  Figure 6. A whole set of rules in a single plot. So in PHP (and similarly in every other language), everything would be as simple as writing
(For simplicity, we aren't taking real numbers, but only random natural numbers.)
However, the best thing about this method in contrast with a whole set of conditional statements is that there is no reason we should not make the distribution continuous (vs. discrete) other than helping the possible limitations of browsers handling rotations by making most of our notes straight. If we forget about rounding towards zero, we get the following beautiful distribution and an even simpler way to code it:  Figure 7. A distribution to model them all. How cool is that? But wait, how does that look after all? Well, most of the time it looks normal... random but normal:
 Figure 8. The final result (using the discrete approach) most of the time.
What is neat is that, from time to time, you also get that one crazy suggestion out of bounds, even though it responds to the same model as the rest:
 Figure 9. A fairly uncommon but realistic result. |