Sound is a vibration (e.g. of a string, of a drum, of a speaker …) which propagates through air, and can be detected e.g. by a human ear or by a microphone. It can not travel through the vacuum (in space), or through materials which absorb vibrations (like thick walls). The vibration gets weaker with the increasing distance from the source.

Vibration of the air means changes of the pressure of the air. These vibrations can be detected by a microphone and plotted on a chart. Zero value means silence, positive and negative values denote changes in pressure.

Tones and Noises

We distinguish tones (a spoon hitting a cup, a hammer hitting a metal rod) and noises (clapping hands, a hammer hitting a wall, sound of trees in the wind). The difference is, that when the sound is plotted on a chart, tones have a small part, a “pattern”, that is repeating in time. In other words, tones are periodic, while noises do not have any clear pattern which is repeating in time, the chart of the air pressure is more “random” for noises.

As we said, a tone is some sound pattern that is repeated in time. This pattern can be e.g. a single oscilation of a string. “A number of repetitions within a second” is called a frequency or a pitch, and is measured in Hertz. E.g. when a string makes 100 oscilations per second, we can hear a tone of 100 Hz.

Combining tones

When two or more tones sound at the same time, their pressure is “added” together, which corresponds to a chart of a sum of two mathematical functions. In music, we want two tones to sound “nice” when played together.

Two tones sound nice together, if they create a periodic sound

The goal of a musician is to find two or more tones, which, when combined, still create a tone (a periodic sound). The new sound may have a different repeating pattern, a different frequency, but it must be periodic. Let’s look at the properties of periodic functions.

Periodic functions

If $f(x)$ and $g(x)$ have a period of T, then, $f(x)+g(x)$ has a period of T

This is clear: if two instruments create a sound of the same pitch, it sounds nice, no matter what the intruments are, how loud they play, etc. From now on, it is clear, that we should not worry about a specific pattern of a tone, but only about its frequency.

If $f(x)$ has a period of T, then, $f(x+c)$ has a period of T

In other words, a “phase” is not important. We get that $f(x)+f(x+c)$ still has a period of T.

$sin(x)+sin(x+0.4)$

If $f(x)$ has a period of T, then, $f(nx)$ has a period of T for any integer $n$

We make $n$ repetitions of the function within a single repetition of the original function. We can combine any tone with a tone of double frequency, tripple frequency, etc.

$sin(x)+sin(2x)$

Now we see, that a frequency of 200 Hz sounds nice with a frequency of 100 Hz. The ratio of frequencies is 2:1. We let the new function repeat twice, while the original function repeats once.

This is a handy mechanism for finding new frequencies that “sound nice” together. Let one function repeat m-times within a period, while another function repeats n-times within a period.

If $f(x)$ has a period of T, then, $f(mx)+f(nx)$ has a period of T for any integers $m, n$

$sin(3x)+sin(2x)$

In the example above, the ratio of frequencies is 3:2 (1.5). When we have a tone at some frequency (e.g. 300 Hz), we can play a tone with a frequency 1.5 times higher (450 Hz) and be sure that they sound nice together. The first tone must repeat twice, while the second repeats three times, to create a whole period – a repeating pattern of their sum.

Do 200 Hz and 307.7 Hz sound nice together? The ratio is 1.5385, or about 20:13. It requires 13 repetitions of the 200 Hz tone and 20 repetitions of 307.7 Hz to get to the whole period. When the period is so long, tones do not sound as nice together anymore. The goal of music is to find ratios with a short period (small integers).

Let’s find some “nice” ratios between 1 and 2:

• 1:1 – 1.0
• 9:8 – 1.125
• 5:4 – 1.25
• 4:3 – 1.3333
• 3:2 – 1.5
• 5:3 – 1.6666
• 15:8 – 1.875
• 2:1 – 2.0

Which tones should be used in music

Let’s write down some requirements for the musical instrument

• some tone – it must play at least one tone
• nice ratios – if it plays a tone, it would be nice to play a higher tone with a nice ratio (2:1, 3:2, 4:3 …)
• flexibility – if it plays a melody (a sequence of tones), it would be nice to be able to play the same melody a bit lower or a bit higher (e.g. each tone with 10% lower or 10% higher frequency)

It is technically possible to make an instrument which plays any frequency (either when building it, or later, when cofiguring / tuning the instrument). We also want to be able to play several instruments at the same time. We must pick a set of tones (frequencies), which all instruments must be able play.

After centuries of evolution and new ideas, people came up with an incredibly elegant set of tones for the music. Here is how it is created:

• A tone of 27.5 Hz, which is called A₀
• From A₀, create a sequence A₁, A₂, A₃ …, where each next tone is 2x higher (55 Hz, 110 Hz, 220 Hz, …)
• As we have a geometric sequence of frequencies (55, 110, 220, …), split each step into 12 smaller, equal steps (which still form a geometirc sequence)

The last rule inserts 11 more tones in between $A_n$ and $A_{n+1}$. This sequence of tones has a beatiful property: each two consecutive tones have the same ratio: about 1.06 (precisely $2^\frac{1}{12}$).
If we start at any tone (frequency) $t$, and repeat this small step twelve times, we will double the frequency: $t\cdot1.06^{12} = t\cdot2$.

We can redefine musical tones: A frequency $t$ is a musical tone if and only if there is an integer $n$, such that $t = 27.5 \cdot 2^\frac{n}{12}$ Hz. We can denote such a tone as $t_n$.

• $t_0$ = 27.5 Hz = A₀
• $t_{24}$ = 110 Hz = A₂
• $t_{26} = t_{24} \cdot 1.06 \cdot 1.06 =$ 123.47 Hz
• …

A regular piano contains 88 keys, which play frequencies $t_0$ = A₀ = 27.5 Hz (left-most key) up to $t_{87}$ = 4186 Hz (right-most key). We can also see a pattern of 12 keys (7 white, 5 black), which repeats across the piano.

For historical reasons, musicans call this smallest step (a ratio of 1.06) a semitone, while the 12 semitones (a ratio of 2:1) is called an octave. A ratio between tones is called an interval.

Example: what is the difference between 150 Hz and 1200 Hz? A non-musician says it is 1050 Hz. A mathematician (after reading this article) can say, that it is a ratio of 8:1, or an interval of three octaves: $150\cdot2\cdot2\cdot2=1200$.

What is so elegant about this mechanism of choosing tones to be used in music? For every tone, it contains tones with nice ratios to the original tone!

Besides the same tone (1:1) and an octave (2:1), we could say that the ratio of 3:2 is the most beautiful: the integers are small (2 repetitions and 3 repetitions within a period)
and the musical tones can approximate it almost perfectly with 7 semitones: $\frac{t_{n+7}}{t_{n}} \doteq \frac{3}{2}$.

A (very simplified) history of note names

Thousands of years ago, there was an instrument, that could play 14 tones across two octaves. Centuries later, these tones were named A, B, C, D, E, F, G, a, b, c, d, e, f, g.

Centuries later, there was another instrument with 7 tones within an octave, ant the tones were named do, re, mi, fa, sol, la, si. The first tone do could have any frequency, but mi to do must be 5:4, fa to do must be 4:3, sol to do must be 3:2, and others “somewhere in between”. Since do was often tuned to the same frequency as C of the older instrument, these seven notes were also called C, D, E, F, G, A, B. A piano of that time contained seven keys within an octave.

Many years later, people noticed, that an octave can be separated into 12 equal steps. It would still contain “nice intervals” (5:4, 4:3, 3:2, 2:1, …), but it would offer flexibility – a music piece can be shifted: played several semitones higher or lower.
In this new model, “old notes” C, D, E, F, G, A, B, correspond to +0, +2, +4, +5, +7, +9 and +11 semitones. But we need to make five more notes (+1, +3, +6, +8, +10) availabe on the instrument – so the black keys were added on a piano. These new notes need some names. We could name them e.g. H, I, J, K and L. Since a symbol # is used to shift a tone one semitone higher, it makes sense to name them C#, D#, F#, G# and A#. Here we see these twelve notes on a modern piano keyboard.

As there used to be 7 notes within an octave, it lead to naming certain intervals (frequency ratios) in a specific way.

Now, we know the origin of a confusing word octave, which implies a number 8, but there is no 8 in a ratio of 2:1, or 12 semitones. Similarly, a word fifth (quinta) implies a number 5, but there is no 5 in a ratio of 3:2, or in 7 semitones.

All tones that exist

Let’s write down all musical tones (frequencies) that exist (that are ever used in music). Since frequencies below 20 Hz and above 10,000 Hz are almost impossile to hear, and there must be at least 6% difference between two frequencies, we can use only around 100 different tones in music.

As we can see, 1000 Hz is never used in music. We can either use B5 (987.77 Hz), or C6 (1046.5 Hz), but playing or singing a tone of 1000 Hz would be considered out of tune – it never sounds nice with any other musical tones.

Vector graphics usually consists of points, which are connected with straight or curved lines (Bézier curves, circular arcs). Together, they define a contour of some shape. There are commands, which have several arguments. They describe the movement of a virtual pen. E.g. moveTo (M:2), lineTo (L:2), curveTo (C:6), arcTo (A:7) and closePath (Z:0), which let us define points of the contour and connections between these points.

A path consists of any number of these commands in any order. If we take any path and shuffle the commands randomly, it still defines a valid path.

M 0 0  L 5 0  L 5 5  L 0 5  Z  -- drawing a square
L 5 5  L 5 0  Z  M 0 0  L 0 5  -- randomly shuffled, but still a valid path

Such sequence of commands can be stroked or filled with a color. The filling mechanism is the most misunderstood part. It is clear, that if we fill a circle or a square, we will get a circle or a square. But many cases are not clear at all.

• When one shape intersects another, will the intersection be filled or not?
• When a shape intersects itself, will the intersection be filled or not?
• When I make a small circle inside a big one, will it cut a hole or do nothing?
• Does it matter, if I draw a big circle first and a smaller after, or a small one first?
• Does it matter, if a contour is drawn in a clockwise or anti-clockwise direction, when making holes?
• What are the fill orders like “evenodd” and “nonzero”? Are they boolean operations?

The Example

These mechanisms of filling vector shapes were defined in 60s and 70s, and probably will be used for many centuries. They are used in many standards (pretty much everywhere where vector graphics is used):

• SVG
• HTML5 Canvas
• PostScript, EPS and PDF
• OpenType and TrueType fonts
• Flash Player and ActionScript programming
• Adobe Photoshop, Illustrator, XD, Sketch App, Figma

Let’s demonstrate our explanation on a specific example. For simplicity, let’s just use polygons (no curves).

SVG code: M 100 100 L 360 100 L 200 300 L 200 200 L 360 400 L 100 400 Z
M 50 50 L 150 50 L 150 150 L 50 150 Z  
M 50 200 L 50 300 L 150 300 L 150 200 Z
M 120 320 L 180 320 L 180 380 L 120 380 Z  
M 220 320 L 220 380 L 280 380 L 280 320 Z 
M 120 120 L 120 180 L 180 180 L 180 120 Z

Run SVG

First, we drew a shape, that looks like a letter “K” (a polygon with six points). Then, we drew two large squares.
And then, three small squares. The direction of drawing is visualized by red arrows.
Now, we tell the computer to fill this shape. Can you determine, which parts will be filled, and which will remain empty?

The Solution

At the beginning, there is a large infinite plane. Our drawing “cuts” the plane into multiple parts. There is a large infinite part on the outside, and many smaller, finite parts. It is not possible to get from one part to another without crossing a line (contour). In our example, there are 11 parts. Now, we have to give a number, a rank, to each part (and to all points inside that part).

At the beginning, the empty area has a rank 0. When a shape is drawn clockwise, all points inside that shape have a rank increased by 1. Similarly, when it is drawn anti-clockwise, all points inside it have a rank decreased by 1.

Imagine two intersecting circles, drawn clockwise (four parts). The outer area has a rank 0, their intersection has a rank 2, and the two remaining parts have a rank 1. If a second circle was drawn anti-clockwise, their intersection would have a rank 0, and the rest of the second circle would have a rank -1.

Alternative definition. Put your finger (or a pen) into a specific part, and set a counter to zero. Now, drag it outside (to the infinite part). Each time you cross a contour “going right”, increase the counter by 1, and each time you cross a contour “going left”, decrease the counter by 1. At the end, you will get the rank of that part, in which you started. Fun fact: it does not matter in which direction you go, or how many contours you cross, you will always get the same number.

Let’s determine ranks for our vector shape.

Now, the solution is very simple: if we fill a shape with the nonzero rule, only parts with non-zero rank will be filled(…-3, -2, -1, 1, 2, 3, ..). If we use the evenodd rule, only parts with odd rank will be filled (… -3, -1, 1, 3, 5, …).

Knowing this, we can deduce several properties:

• The order, in which we draw contours, is not important (as it does not change the final rank of each part).
• Reversing all contours (CW to ACW and ACW to CW) is not important (it will change every rank R to -R, but both fill rules will work identically)
• If we use the “evenodd” rule, the direction of drawing is not important (if we reverse any contour, it will add 2 or subtract 2 from all ranks inside it, but does not change the “oddness”)

An Important Note

We described our mechanism in a plane, where the X axis goes right, and the Y axis goes down. When Y goes up, the terms clockwise and anti-clockwise (and also left and right) are exchanged. Points (0,0), (100,0), (50,50) make a triangle going clockwise when Y goes down, or anti-clockwise when Y goes up. But this triangle always has a rank 1, so it is always filled the same way (i.e. only the coordinates define how a shape is filled, not where axes go).

Symmetry breaking

Several ways of symmetry breaking have been proposed for automated planning in the past. I decided to propose a new set of definitions, which may give a new look at the problem of symmetries in automated planning.

I focused at the relational representation of a planning problem, i.e. the representation, where the state is a set of atoms of specific predicates. Such state can be also viewed as a set of relations, when atoms are “grouped together” by their predicates. This is quite natural way of analyzing a planning problem, since it resembles the PDDL format.

It is shown, that symmetries can be generated by automorphisms of a relational state. Detecting such automorphisms is the key to pruning the state-space search. Instead of making a general automorphism detection, I present a simple algorithm for detecting a specific class T1 (subgroup of the group of automorphisms), which is very frequent in many planning domains. A simple state-space search algorithm can be extended by this method and improve the performance.

Orbit Search

At the end, I showed, that such symmetry breaking is less general than Orbit Search, i.e. every relational symmetry, that is generated by a relational automorphism, is also a symmetry of the “standard” SAS+ representation of the same problem and can be detected by algorithms based on the Orbit Search. In my experiments, the Metis planner (based on Orbit Search) always visits the smaller number of states than my experimental planner PLANR. Despite this, PLANR is sometimes faster than Metis.

Defining a problem

It is hard to understand something without knowing the exact purpose. Let’s sketch a specific problem and talk about possible solutions.

You are a doctor in a little town. There is a patient, who visited you for 3 days in a row. To simplify things a bit, the patient can be in one of 2 states: (Healthy, Fever) and he can tell you 3 feelings: (Normal, Cold, Dizzy). During these 3 days, he told you, that he feels Normal (1st day), Cold (2nd day), Dizzy (3rd day).

You also have some scientific results, which can help you guess the state of the patient:

• Start: in general, 60% of people are Healthy, 40% have Fever
• Transition:
  • when Healthy, there is 70% chance of remaining Healthy the next day (30% chance of Fever)
  • when Fever, there is 40% chance of becoming Healthy the next day (60% chance of Fever)
• Emission:
  • when Healthy, he reports: 50% Normal, 40% Cold, 10% Dizzy
  • when Fever, he reports: 10% Normal, 30% Cold, 60% Dizzy

Given the specific 3-day observation (Normal, Cold, Dizzy), we must find the most probable real state in each day. It could be (Fever,Fever,Fever), or (Healthy,Healthy,Fever) etc. For 3 days and 2 possible real states, there are $2^3=8$ possible triples. We can’t know the real state of the patient, all we can do is finding a good guess – most probable triple of states.

Naive approach

What is the chance, that the patient was (Healthy,Fever,Fever)? The chance of Healthy on the 1st day is 60% (Start probability), Fever on the 2nd day is 30% (transition Healthy->Fever) and Fever on the 3rd day is 60% (transition Fever->Fever). The total probability of (Healthy,Fever,Fever) is $0.6 \cdot 0.3 \cdot 0.6 = 0.108$. If we compute probabilities of all triples of states (which must sum up into 1), we will see, that the most probable is (Healthy,Healthy,Healthy), which has the probability $0.6 \cdot 0.7 \cdot 0.7 = 0.294$.

Such results hold for anybody in town, we completely ignore our observations. Let’s compute the new probability, while taking observations into account:

What is the chance, that patient was (Healthy,Fever,Fever), when reporting (Normal,Cold,Dizzy)? The chance of Healthy on the 1st day + reporting Normal when healthy is 60% x 50%. The chance of Fever on the 2nd day + reporting Cold is 30% x 30%. The chance of Fever on the 3rd day + reporting Dizzy is 60% x 60%. In total, the probability of (Healthy,Fever,Fever) is $ (0.6\cdot 0.5) \cdot (0.3 \cdot 0.3) \cdot (0.6 \cdot 0.6) = 0.00972 $.

If we compute probabilities of all triples of states, we will see, that the most probable is (Healthy,Healthy,Fever) with probability $ (0.6\cdot 0.5) \cdot (0.7 \cdot 0.4) \cdot (0.3 \cdot 0.6) = 0.01512 $. Why are the values so small? Will they sum up to 1? These are probabilities of a specific state AND a specific observation. They will sum up to the probability of that observation.

Our problem is very easy to solve. We just compute the probabilities of each possible real states and choose the most probable one. The problem is, that when we are observing the patient for 10 days, there are $2^{10}=1024$ possible tuples of states, that we must examine. And for 100 days, it seems almost impossible to solve.

Smart approach (Viterbi algorithm)

The smart solution of our problem is based on dynamic programming. For each day and each state (Healthy or Fever) we will compute the most probable paths (sequences of Healthy / Fever and probabilities) for geting into that state on that day (. Let’s calculate it for the first day.

Observation: (Normal, Cold, Dizzy)

The basic principle

The Viterbi algorithm is based on an observation, that the optimal path to each day (and each state) can be easily deduced from the optimal path to the previous day (and each state).

What is the “most probable scenario” to being Healthy on the 2nd day? We can deduce it from the previous day! If we were Healthy on the 1st day, we remain Healthy witht the probability:

(H before) * (H->H) * (H & Cold) = 0.3 * 0.7 * 0.4 = 0.084.

If we had Fever on the 1st day, we are Healthy with the probability:

(F before) * (F->H) * (H & Cold) =  0.04 * 0.4 * 0.4 = 0.0064. 

The bigger value is 0.084, so the most probable scenario to being Halthy on the 2nd day is being Healthy on the 1st day.

What about Fever on the 2nd day?

(H before) * (H->F) * (F & Cold) = 0.3 * 0.3 * 0.3 = 0.027.  
(F before) * (F->F) * (F & Cold) = 0.04 * 0.6 * 0.3 = 0.0072. 

The maximum is 0.027 (the patient was probably Healthy the day before). Let’s fill the whole table using that method.

In order to reconstruct the optimal path, we must remember the previous value, that was chosen for each day and each state (the one that yielded the maximum probability). The maximum value (the most probable state) for the third day is Fever, it was computed from Healthy on the 2nd day, which was computed from Healthy on the 1st day, so the optimal path is (Healthy,Healthy,Fever).

Generalization

How would the algorithm work, if there were more possible states (Healthy, Fever, Disease1, Disease2 …) or more possible observations (Normal, Cold, Dizzy, Shaking, Nausea, Headache)? The transition and emission tables would be much larger. We would have to go through more values when computing each column of our table. But the principle would be the same.

For T days and K possible states, algorithm computes T columns of the table, K cells in each column. For each cell, it analyzes K cells in the previous column to find the best one. The algorithm takes time $\Theta (T \cdot K^2)$. The final selection of the path in time T fits into our complexity.

Other examples

Let’s make an autocorrect program. When user types “toqer” into computer, we will offer him to change it into “tower”, because he probably misprinted the letter “Q”, which is near the letter “W” on the keyboard.

Instead of true health states and feelings, we will have the letters of the alphabet. Instead of guessing the true health state for 5 days, we will be guessing the true 5-letter word, that user had in his mind (unknown). The 5-day observation is the 5-letter word, which user actually typed on the keyboard (toqer).

• Start: the probability, that some letter is the first letter of some English word (26 values).
• Transiton: probabilities, e.g. that the letter O will be followed by letter Q, etc (26 x 26 values).
• Emission: probabilities, that user has typed what he wanted to type. E.g. when user wants to type F, he types F in 90%, G in 4% (because it is near F on the keyboard), etc (26 x 26 values).

The start and transition probability can be obtained by analyzing some large amount of English text, Emission table can be created manually.

When observing the word “toqer”, we can compute the most probable “true word” using Viterbi algorithm in the same way we used it earlier, and get the true word “tower”. Viterbi algorithm can be used for solving many classes of problems, which seem to be completely unrelated at the first sight.

Here is a description of a problem from Wikipedia:

Suppose you’re on a game show, and you’re given the choice of three doors: Behind one door is a car; behind the others, goats. You pick a door, say No. 1, and the host, who knows what’s behind the doors, opens another door, say No. 3, which has a goat. He then says to you, “Do you want to pick door No. 2?” Is it to your advantage to switch your choice?

Simulation

Let me start writing a Javascript code, each part will be previously explained. My simulation will start in a function go, which will call montyHall many times. montyHall has a mode parameter, which can control the decision strategy. montyHall returns 1 when player wins, and 0 when player loses.

function go()
{
    for(var m=0; m<4; m++)
    {
        var lim = 100000, sum = 0;
        for(var i=0; i<lim; i++)  sum += montyHall(m);
        console.log(sum/lim);
    }
}

Let's implement the montyHall function. Let's put the car behind a random door (0, 1, 2) and make a player pick a random door (0, 1, 2).

function montyHall(mode)
{
    var car = Math.floor(Math.random()*3);
    var me = Math.floor(Math.random()*3);
    //... revealing one goat
    //... maybe changing the value of "me"
    return car == me ? 1 : 0;
}

After placing the car randomly, let's put two goats (variables g0, g1) behind the remaining doors and reveal one of them.

var g0, g1;
if(car==0) { g0=1; g1=2; }
if(car==1) { g0=0; g1=2; }
if(car==2) { g0=0; g1=1; }

var open = Math.random()<0.5 ? g0 : g1;
var pme = me;

We also stored users previous decision into pme. Now, knowing an open door with a goat (open) and our former choice (pme), we have to make a new decision (a new value of me).

Mode 0

In this mode, we just keep our previous decision.

me = pme;

Mode 1

In this mode, we change our choice randomly to one of two "unchosen" doors. It is one of the ways how I used to understand a problem.

if(pme==0) me = Math.random()<0.5 ? 1 : 2;
if(pme==1) me = Math.random()<0.5 ? 0 : 2;
if(pme==2) me = Math.random()<0.5 ? 0 : 1;

Mode 2

In this mode, we change our choice randomly to one of two still closed doors. It is another way to understand a problem.

if(open==0) me = Math.random()<0.5 ? 1 : 2;
if(open==1) me = Math.random()<0.5 ? 0 : 2;
if(open==2) me = Math.random()<0.5 ? 0 : 1;

Mode 3

Previous methods were aware of either open door, or previously chosen doors, not both at the same time. Let's choose a door, that is still closed, but different from our previous choice.

if(pme!=0 && open!=0) me = 0;
if(pme!=1 && open!=1) me = 1;
if(pme!=2 && open!=2) me = 2;

Results

Run the simulation

As we can see, just changing our choice (Mode 1) does not change the probability (still 1/3). But if we choose different door, which is sitll closed, it is 1/2. But the correct answer is said to be 2/3, so did we prove the whole world wrong?

Correct simulation

Modes 1 and 2 in our previous simulation seem to be strange, since they ignore one of known facts. But Mode 3 should fix it. But according to "current science", changing our choice to another closed door should let us win 2/3 of the time. So is our decission procedure in Mode 4 still wrong? No. The way of revealing a goat is wrong.

By revealing one of goats, the host tells us much more, than just pointing out two possible positions of the car with 50:50 chance. There are 2 important rules, that are not pronounced directly and may not be obvious to everyone.

• The host must always open the door that was not picked by the contestant.
• The host must always open the door to reveal a goat and never the car.

Note, that in our previous implementation, the host could open the door chosen by the contestant (which violates the first rule). With these rules in mind, let's remake the way we open the door, while keeping all the code as it is. If we have chosen the car, the host will randomly open one of goats.

var open;
if(me==car) open = Math.random()<0.5 ? g0 : g1;

Otherwise, there is just one possible way to open the door (the host can not open the car or the door chosen by us, and since both these door are different, just one door with a goat remains).

else
{
    if(me!=0 && car!=0) open = 0;
    if(me!=1 && car!=1) open = 1;
    if(me!=2 && car!=2) open = 2;
}

When there is a car behind our door at the beginning (33% chance), the host reveals the goat, we choose another closed door (the goat) and we lose. But when we choose the door with a goat at the beginning (66% chance), the host reveals the second goat and the other closed door must contain the car - we win.

Results

Run the simulation

JS Code

Having a formal (precise) system for mathematical theories and proofs is useful in many ways. Formal proof can be mechanically verified, which eliminates the risk of errors. And if we want a computer to work with our theories and proofs, having an exact precise system is the only way to do it.

Core of Metamath

Metamath is a language for defining a formal grammar. We define terminal and nonterminal symbols, initial words and production rules. It is also possible to include a word and a sequence of rules, which generate that word, inside a Matamath file. For such word, we can mechanically verify, if it is really generated by our grammar (by processing a sequence of production rules, substituting symbols and comparing the final word with a claimed word). We do it using a $p statement (described below). Since Metamath is a language for defining grammars, there is no Math included. Metamath does not know what “+” or “=” or a bracket is.

Metamath for Math

Mathematicians use Metamath language to represent mathematics formally. We can define axioms and inference rules as production rules of a formal grammar. A language (a set of words), generated by this grammar, corresponds to a set of theorems, provable inside our theory (valid facts). And thanks to $p statements, we can include theorems and formal proofs of these theorems in our files. The grammar approach to proving may seem cumbersome, as proofs are usually quite long, but it elegantly deals with infinitely many axioms (e.g. induction in PA), many possible inference rules (Modus Ponens, resolution) etc.

Since Metamath was made to be used for Mathematics, the content of Metamath files is usually described in terms of predicate logic, instead of terms of the grammar theory.

Metamath syntax

Let’s describe a parsing algorithm. Only printable ASCII characters can be used in Metamath file. Metamath file is a sequence of tokens. A token consinsts of non-white-space characters, tokens are separated by one or more white-space characters (space, new line, tabulator). A following line contains 12 tokens:

  $c  hello  hi  bar 0  \phi  ->  $.  $( ( __  $)  

1 + 1 contains 3 tokens, while 1+1 contains just one token.

There are two types of tokens:

• tokens that start with $: Metamath tokens
• tokens that don’t start with $: user-defined tokens

The previous example contains four Metamath tokens and the rest are user-defined tokens. Let’s describe the meaning of Metamath tokens.
As we “grouped” characters into tokens, we can group tokens into statements. A statement usually starts and ends with a Metamath token.

$( statement

$( tok tok tok  $)

Starts with $(, ends with $). These statements are used to insert comments. They may occur anywhere in a Metamath file. Now, let’s suppose, that we have removed all comments from a Metamath file. Each of the remaining statements is one of the statements below.

$c statement

$c ->  +  -  (  )  $.

These statements are used to define terminal symbols of a grammar. Terminal symbols are called constants in Metamath community (don’t confuse with constants from logic). Constants don’t have to be defined all in one statement. You can define them at any part of a Metamath file.

$v statement

$v A B C a b c phi \psi $.

These statements are used to define nonterminal symbols of a grammar. Nonterminal symbols are called variables in Metamath community (don’t confuse with variables from logic). Variables don’t have to be defined all in one statement. You can define them at any part of a Metamath file.

A word is a sequence of constants and variables (i.e. terminals and nonterminals). In Metamath, we are interested in all words, generated by the grammar (i.e. not only words made out of terminals).

$d statement

$d vToken vToken ... vToken $.

Disjoint variable restrictions. vToken must be a previously defined variable. For any two variables A and B from $d statement, when A and B occur together in some word, then sub-words (that are derived from A and from B) should never have any variables in common.

These restrictions are used to introduce the concept of variable substitutability in a comfortable way. E.g. when we have a word A < B and we don't want both A and B to be replaced with C (results in C < C), we use $d A B $.. A grammar with $d restrictions can be converted into an equivalent grammar with no restrictions, but it would be much longer.

Following statements are identified with a label token. Label tokens can contain only letters, digits, a period, a hyphen or an underscore. Labeled statements must have unique labels.

Types and Hypotheses

In Metamath, each word has so-called type. When a variable is substituted by a word, they both must have the same type. Types allow us to have multiple variables with the same name (but different types). A grammar with types can be converted into an equivalent grammar without types (and without type restrictions), but it would be much longer.

Following two kinds of statements are called hypotheses.

$f statement

labelToken $f cToken vToken $.

Floating hypothesis. cToken must be a previously defined constant, vToken must be a previously defined variable. It is used just to define a type of variable.

$e statement

labelToken $e cToken token token ... token $.

Essential hypothesis. cToken must be a previously defined constant.

Assertions

$a statement

labelToken $a cToken token token ... token $.

Axiomatic assertion. cToken must be previously defined constant. It defines a word, that belongs to the language “for no reason” (like an axiom).

$p statement

labelToken $p cToken token token ... token $= labelToken labelToken ... labelToken $.

Provable assertion. cToken must be a previously defined constant. It defines a word, that belongs to the language “with a reason”. The reason (“proof”) is a sequence of rewriting rules (between $= and $.) needed to generate the assertion word (between $p and $=).

Each assertion contains a word (which has or has not to be “proved”). For each assertion, there is a sequence of mandatory hypotheses related to it. These are all $e statements that occur before the assertion, and all $f statements that occur before the assertion, if their variable occurs in the assertion word (or in any of mandatory $e hypotheses). Mandatory hypotheses must be “fulfilled” before the assertion word can be fulfilled (will be clarified in description of a proof syntax).

${ statement

${ statement statement ... statement $}

Scoping statement. These statements have a classic “bracket syntax”, they can be nested, but are usually used only to depth 1. Satements $c, $v, $d, $f, $e defined inside a scope become inactive after the end of a scope. Only assertions ($a, $p) remain active. We use them, when we want to quickly prove some statement (define new variables, disjoint restrictions, $e hypotehses), but we don’t want to “pollute” the environment (we don’t need these disjoint restrictions or $e hypotheses in the future). Non-assertion statements become forgotten, while assertions remain true even after the scope.

Example

Let’s write a grammar for the propositional logic

$c  wff  $.        $( we use this constant as a type of formula (well formed formula) $)
$c  ( ) ! ->  $.   $( brackets, negation, implication $)

$v  A B C  $.      $( variables to be used in formulas $)

wa  $f  wff A  $.  $( hypothesis "wa" which says, that A is a well-formed formula $)
wb  $f  wff B  $.
wc  $f  wff C  $.

$( Following assertions define the rules to create formulas $)
wng  $a wff ! A $.           $( mandatory hypotheses are (wa) $)
wim  $a wff ( A -> B ) $.    $( mandatory hypotheses are (wa, wb) $)

$c  |-  $.         $( this constant will be used as a type of provable formula  $)

$( Schemes of axioms of propositional logic $)
a1  $a |- ( A -> ( B -> A ) ) $.
a2  $a |- (    ( A -> ( B -> C ) )   ->    ( ( A -> B ) -> ( A -> C ) )    ) $.
a3  $a |- ( ( ! A -> ! B )  ->  ( B -> A ) ) $.  

$( new scope; otherwise mp1, mp2 will become mandatory for all upcoming assertions $)
${                               $( Modus Ponens rule of inference $)
    mp1 $e |- A $.                
    mp2 $e |- ( A -> B ) $.
    mp  $a |- B $.               $( mandatory hypotheses of "mp" are (wa, wb, mp1, mp2) $)
$}

Proof syntax

Proof is defined in $p statement as a sequence of labels. Labels may refer to previous labeled statements $f, $e, $a, $p. A sequence of labels corresponds to the generation of a proved word in Reverse Polish Notation. The substitution mechanism works as a stack. Operands are put on top of a stack. Operators take several operands from a stack and put a new operand (result) to the top.

Proof verification consists of going throug a sequence of labels and editing the stack accordingly.

When a hypothesis $f, $e occurs, we put its content as a new word on top of the stack.

 wa wa mp1  --->  [   wff A   ;   wff A   ;   |- A   ]

When an assertion $a, $p occurs, it works as an operator. It takes several items form the stack, substitutes them into an assertion word, and puts a new word on top of the stack. Let’s look at the details.

The assertion, that we ran into, has K mandatory hypotheses. We remove K top-most items from the stack. First, we check variable types. Fist constant of each word on the stack should be equal to first constant of corresponding mandatory hypothesis. $f mandatory hypotheses define variables to be substituted, corresponding words on stack are values, that will replace these variables. Now we check disjoint variable restriction. Then, substitution is performed on $e hypotheses (if there are any) and compared with stack values. If values are equal, substitution is performed on assertion word, and a result is put on top of stack. Proof is valid, if at the end, there remains just a single word on the stack, which is equal to proof word.

Let’s prove a syntactic thing, that (A -> (B -> C)) is a formula. We take proof labels one by one and eidt a stack accordingly.

formula1 $p  wff ( A -> ( B -> C ) )  $= wa wb wc wim wim $.
1)  [ wff A ]
2)  [ wff A  ;  wff B ]
3)  [ wff A  ;  wff B  ;  wff C ]
4)  [ wff A  ;  wff ( B -> C ) ]   // wim has mandatory hypotheses (wa, wb). 
// their types (wff, wff) correspond with types of last two items on the stack. 
// Substitution is B for A, C for B. We substitute into wim = wff ( A -> B ) , 
// put a result  wff ( B -> C ) on stack. Note that type (first token) 
// is omitted during substitution, there is no wff ( wff B -> wff C ).
5)  [ wff ( A -> ( B -> C ) ) ]    // same thing. Types correspond. 
// We substitute A for A, ( B -> C ) for B. We have processed all labels, 
// stack word is equal to proof word, proof is correct.

Let’s prove a more interesting statement: ((A->A)->(A->A)).

formula2 $p  |- ( ( A -> A ) -> ( A -> A ) )  $= wa wa wa wim wim    
                                                 wa wa wim wa wa wim  wim  
                                                 wa wa a1    
                                                 wa wa wa a2    
                                                 mp  $.
5 )  [ wff ( A -> ( A -> A ) )  ]   // processing wa wa wa wim wim

12)  [ wff ( A -> ( A -> A ) )    
       wff ( ( A -> A ) -> ( A -> A ) )  ]  // next 7 labels

15)  [ wff ( A -> ( A -> A ) )   
       wff ( ( A -> A ) -> ( A -> A ) )     
       |-  ( A -> ( A -> A ) )  ]   // next 3 labels

19)  [ wff ( A -> ( A -> A ) )  
       wff ( ( A -> A ) -> ( A -> A ) )   
       |-  ( A -> ( A -> A ) ) 
       |-  (  ( A -> ( A -> A ) )   ->   ( ( A -> A ) -> ( A -> A ) )  ) ]  // next 4

20)  [ |- ( ( A -> A ) -> ( A -> A ) )  ]  // "mp" has 4 mand. hypotheses (wa,wb,mp1,mp2) 
// with types (wff, wff, |-, |-),  which correspond to types of stack items. 
// Substitution is ( A -> ( A -> A ) ) for A, ( ( A -> A ) -> ( A -> A ) ) for B.
// We substitute into mp1, mp2, results are equal to stack item 3 and 4. We substitute  
// into mp word, result is equal to proof word, proof is correct.

Note, that $p assertions are used in proofs just like $a assertions. We use them as rewriting rules and don’t care about actual proof. Long proofs can be broken into smaller proofs of sub-theorems, e.g. for previous theorem:

th1  $p  wff ( A -> ( A -> A ) )  $=  wa wa wa wim wim  $.
th2  $p  wff ( ( A -> A ) -> ( A -> A ) )  $=  wa wa wim wa wa wim  wim  $.
th3  $p  |-  ( A -> ( A -> A ) )  $=  wa wa a1  $.
th4  $p  |-  (  ( A -> ( A -> A ) )  ->  ( ( A -> A ) -> ( A -> A ) ) )  $=  wa wa wa a2  $.
formula2 $p  |- ( ( A -> A ) -> ( A -> A ) )  $=  wa th1   wa th2   wa th3   wa th4   mp  $.

$a assertions are used to define math syntax (recursive definition of formula), axioms of theory (a1, a2, a3) and inference rules (modus ponens), but also to define new objects and symbols, that are abbreviations of more complex statements. Let’s define disjuction $A \vee B$, which is an abbreviation for $\neg A \rightarrow B$.

$c \/  $.                          $( a constant for disjunction (\vee) $)
wor $a wff ( A \/ B )  $.          $( syntax of usage, infix notation   $)
${                                 $( one way rewrite   $)
    hy-Vee1 $e |- ( ! A -> B ) $.  
    df-Vee1 $a |- ( A \/ B ) $.
$}
${                                 $( opposite way rewrite   $)
    hy-Vee2 $e |- ( A \/ B ) $.    
    df-Vee2 $a |- ( ! A -> B ) $.
$}

Writing formal proofs requires a lot of practice. Most of the work of Metamath community is focused on developing set.mm, which is an enormous library of proofs, that starts with logic and ZF axioms and builds the rest of common mathematics. It is also available in MM Tool.

Prerequisities

Before you start to read, you must know, what is complex number, trigonometric functions (sine, cosine) and integral.

Introduction

I assume, that you have already heard about Fourier transform. It is usually shown, how the sum of sinusoids having different period creates “square” or some other function. Then cosines come out, complex numbers and deadly expression $e^i$ (you know, that $e^3 = e \cdot e \cdot e$, but what the hell is $e^i$?). In this article, we will look at things differently.

Imagine a wheel, which has a radius $r_0$, it has a red dot on the right side from center, it has an initial angle $\alpha_0$ and rotates with speed (angular velocity) $s_0$. This red dot draws an image of a circle.

Imagine, that at the red dot of that wheel, there is another wheel with a radius $r_1$, angle $\alpha_1$, that rotates with a speed $s_1$. This system of two wheels draws more interesting curve.

Imagine, that there may be another wheel at the dot of the last wheel, and another wheel on top of that wheel … There may be infinitely many wheels. Which curves can be drawn by such systems of wheels?

Theorem: We can draw any curve using a system of wheels.

We can draw not only a circle, but also a square, triangle or a line. Here is a system of wheels, which draws Homer Simpson. We can notice, that each wheell just “adds a shift” to previous wheel. So we can interchange wheels with each other, the order of wheels is not important (because addition is commutative).

Theorem: If two wheels have the same speed, they can be “merged” into a single wheel (with the same speed, but different radius and angle).

Let’s talk about different problem. We have a curve (continuous function $f: \mathbb{R} \rightarrow \mathbb{R}^2$), that for each parameter $t$ returns a position (x,y) – point of curve. We want to find a system of wheels, which draws that curve. System of wheels can be represented also as a function $g$, for each speed $s$ it returns a pair (r,$\alpha$) – radius and initial angle of a wheel with speed $s$ in that system (e.g. when we don’t need some wheel, $g$ gives it a radius 0). Take a deep breath and get ready for the most shocking discovery of your life. Operation, that finds a wheel system $g$ for a curve $f$, is called Fourier transform.

Examples

Let’s have a curve, that has a single point (0,0), i.e. $f(t) = (0,0)$. What is the Fourierova transform of it? We simply set all radii and angles to 0, i.e. $g(s) = (0,0)$.

Let’s have a curve, a circle, that has a radius 0.6 and center at the point (4,3), i.e. $f(t) = (4+0.6\cdot \cos(t), 3+0.6\cdot \sin(t))$. What is the Fourier transform of taht curve? We can shift the whole curve using wheel with a speed 0, we can draw a circle using some other wheel. For example:

• $g(0) = (5, 37.64°)$
• $g(1) = (0.6, 0)$
• $g(s) = (0,0)$ otherwise

Complex numbers

We already know, what Fourier transform is. It looks for a function “related” to some other function. The input function works with coordinates x and y, whilst the output function works with radii and angles. It would be great to “unify” them. Moreover, the system of wheels is not unique for a curve, e.g. if we add 360° to initial angle of some wheel, it would still draw the same curve.

Instead of 2D coordinates for curve, let’s work with complex numbers. So instead of $(x,y)$ let’s have $(x+y\cdot i)$. Our curve is $f: \mathbb{R} \rightarrow \mathbb{C}$. That was quite easy. The second part will be slightly more complicated.

We have wheels at the output (pairs radius + angle). We would like to use complex numbers here too. Let that number be the initial position of red dot in a complex plane (due to the center of wheel). So, instead of $(r,\alpha)$ we have a complex number $r \cdot (\cos(\alpha)+\sin(\alpha)\cdot i) = (a + b\cdot i)$. But how do we rotate such number e.g. by 30 degrees? In our first representation, we just added a rotation to previous angle and received a new angle (radius remained the same). But how to rotate a complex number? Read carefully! To rotate a complex number, one just multiplies it by another complex number. Namely, $(\cos(30°) + \sin(30°)\cdot i)$. Our system of wheels also has a form $g: \mathbb{R} \rightarrow \mathbb{C}$. now

What is the advantage of using complex numbers instead of classic $\mathbb{R}^2$ and wheel systems? It makes everything more complicated. Complex numbers are hard to multiply and nobody likes them. It is not that easy to see wheels behind the complex numbers, but wheels are still there! We actually have few benefits. Two things (curves and wheel systems) have the form of $\mathbb{R} \rightarrow \mathbb{C}$. Also, Fourier thransform between them is unique – there is only one set of wheels for a curve (when both represented by complex numbers). It can be shown, that FT is injective and surjective. So there should be an inverse FT, that finds a curve for a system of wheels.

Let’s define FT once again. It is still an operation, that finds a set of wheels for parametric curve, but both things are represented by complex numbers (using functions $\mathbb{R} \rightarrow \mathbb{C}$).

Let’s clarify, how wheel system works, so it is clear what FT does. A red dot of the whole system should draw our curve, so for parameter $t$ red dot should be at the position $f(t)$. For $t=0$ each wheel should be at its initial position. When $t$ is increased by 1, the wheel with a speed 1 should rotate once (by $2 \pi$) and generally, a wheel with speed $s$ should rotate “$s$ times” (by $s \cdot 2 \pi$).

Properties of Fourier transform

Let’s say, we have a parametric curve $f$ and we have found a wheel system $g$ for it. Now we “zoom in” the curve with parameter $k$, $f_2(t) = k\cdot (x + y\cdot i)$. How would the system of wheels look like for this new curve? We just multiply a radius of each wheel by $k$! In our representation, we multiply complex numbers. So:

$FT(f)=g \Rightarrow FT(f_2) = k \cdot g$.

A little shocking detail: it works even for $k\in \mathbb{C}$ (as you can see from Moivre’s formula).

Now we have curves $f_1, f_2$. Let’s create a new curve by “adding” them together, so $f_3(t) = (x_1+y_1\cdot i) + (x_2+y_2\cdot i)$. Each curve has its own system of wheels $g_1, g_2$. How does the system looks like for $f_3$? We just connect one set to the red dot of another set. We would have two wheels for each speed, and, as mentioned above, we can merge them into one wheel. How exactly does it look like? We just add complex numbers! so:

$FT(f_1)=g_1, FT(f_2)=g_2 \Rightarrow FT(f_3) = g_1 + g_2$.

These properties are often called Linearity of Fourier transform.

Computing the Fourier transform

Computing inverse FT

We want to know, how to transform between curves and wheel systems. First, let’s talk about inverse FT, because it is easier. We know a set of wheels $g(s)$ and we are interested in a motion of red dot – its position at parameter $t$, i.e. $f(t)$.

Let the system have just one wheel with non-zero radius. It has a speed $s$, radius and initial angle are represented by a complex number $g(s) = a+b\cdot i$. Where is the point of curve at $t$? We just rotate the wheel to an angle $t*s$ and compute the position of red dot. We already know how to rotate complex numbers.

$ f(t) = (\cos(t\cdot s\cdot 2 \pi) + \sin(t\cdot s\cdot 2 \pi) i) \cdot g(s) $

What if we have $n$ wheels (with non-zero radii)? Each wheel has its speed $s_j$ and complex number representing radius and angle. Each wheel determines a shift from a red dot of previous wheel, so we just add these shifts.

$ f(t) = \sum\limits_{j=1}^n (\cos(t \cdot s_j \cdot 2 \pi) + \sin(t \cdot s_j\cdot 2 \pi) i) \cdot g(s_j) $

What if we have infinitely many wheels? The sum becomes an integral.

$ f(t) = \int\limits_{s\in\mathbb{R}} (\cos(t\cdot s\cdot 2 \pi) + \sin(t \cdot s \cdot 2 \pi) i) \cdot g(s) \mathrm{d} s$

Since we know, how wheels work and how to rotate complex numbers, we don’t have to remember this equation. We can “invent” it when we need it.

Computing FT

FT is more complicated. We have a curve $f$ a we want to find a system of wheels $g$. We want to know a complex number (radius + angle) for a wheel with a speed $s$. Here is an equation:

$g(s) = \int\limits_{t\in\mathbb{R}} (\cos(- t\cdot s\cdot 2 \pi) + \sin(- t \cdot s \cdot 2 \pi) i) \cdot f(t) \mathrm{d} t$

I don’t fully understand an idea behind that equation. You may notice, that when $s=0$, the value inside brackets is 1 and the result is an “integral over the whole curve” (= “average point”), which then corresponds to shift of the whole curve away from center.

When $s$ is not zero, expression inside brackets generates a circular motion, but in different direction, than IFT. The result may mean an average point, multiplied by circular motion.

Fourier series

Theorem: When a curve $f$ is periodic, it can be expressed by system of wheels with integer speeds.

We noticed it in circle, where we needed just one wheel with a speed 1. We will need much more wheels to draw a square, but thanks to the theorem we know, that we will only need wheels having speeds 0, 1, 2, 3, … The FT for periodic curve $f$ is system of wheels $g$ in form $\mathbb{N}\rightarrow\mathbb{C}$. Inverse FT does not have to be integral, but just infinite sum (series):

$ f(t) = \sum\limits_{j\in\mathbb{N}} (\cos(t \cdot j \cdot 2 \pi) + \sin(t \cdot j\cdot 2 \pi) i) \cdot g(j) $

Complex exponential

As we have shown in an article about Taylor polynomial, function $e^x, x \in \mathbb{R}$ has Taylor polynomial:

$e^x = \frac{x^0 }{ 0! } + \frac{x^1 }{ 1! } + \frac{x^2 }{ 2! }+ \frac{x^3 }{ 3! } + …$

Inspired by that, let’s define a complex exponentiation:

$e^{a+bi} = \frac{ (a+bi)^0 }{ 0! } + \frac{ (a+bi)^1 }{ 1! } + \frac{(a+bi)^2 }{ 2! }+ \frac{(a+bi)^3 }{ 3! } + …$

Now let’s put $ix$ into exponent:

$e^{ix} = \frac{{(ix)}^0}{0!} + \frac{{(ix)}^1}{1!} + \frac{{(ix)}^2}{2!} + \frac{{(ix)}^3}{3!} + …$

Let’s slightly reorder summands:

$e^{ix} = \left(\frac{{(ix)}^0}{0!} + \frac{{(ix)}^2}{2!} + …\right) + \left(\frac{{(ix)}^1}{1!} + \frac{{(ix)}^3}{3!} + …\right)$

Let’s get i in front of bracket:

$e^{ix} = \left(\frac{{(ix)}^0}{0!} + \frac{{(ix)}^2}{2!} + … \right) + i\left(\frac{x^1}{1!} + \frac{i^2x^3}{3!} + …\right)$

$i$ is always powered to even power, so it will just multiply the number by 1 or -1:

$e^{ix} = \left(\frac{x^0}{0!} – \frac{x^2}{2!} + … \right) + i\left(\frac{x^1}{1!} – \frac{x^3}{3!} + …\right)$

From the previous article we know, that the first bracket is Taylor series for cosine, second bracket for sine (also called Euler’s formula):

$e^{ix} = \cos(x) + i \sin(x)$

Now we can write $e^{ix}$ everywhere instead of sines and cosines, e.g. for FT:

$g(s) = \int\limits_{t\in\mathbb{R}} (\cos(- t\cdot s\cdot 2 \pi) + \sin(- t \cdot s \cdot 2 \pi) i) \cdot f(t) \mathrm{d} t =

\int\limits_{t\in\mathbb{R}} e^{-t\cdot s \cdot 2 \pi \cdot i} \cdot f(t) \mathrm{d} t$

Notice, that it is not possible to understand Euler’s formula (or FT written using Euler’s formula) without a proper knowledge of differential calculus, integrals and Taylor series.

There are 3 reasons to write FT with $e^{ix}$:

• to make equations shorter
• to make person looks smarter
• to make it even harder for a student to understand FT

Prerequisities

Before you start to read, you must know, what is polynomial, derivative and factorial, and be able to differentiate and integrate polynomials.

Polynomial is a function, in which we put some real value x and receive an output value at point x using addition, subtraction, multiplication and division.

Derivative of a function is a number. When y grows as fast as x, derivative is $=1$. When y grows faster than x, derivative is $>1$, when slower, derivative is $<1$. When y grows, but x stays at the same place, derivative is $=0$.

Motivation

In an everyday life, one often needs to compute sine, cosine, tangent or logarithm. We don’t have to go that far. We run into problem, even when we need to compute a square root of a number. The problem is, that we (humans) know only how to add, subtract, multiply and divide. Most of us don’t know how to compute sines, logarithms or square roots. Sadly, computers can not help us. Their circuits usually can add (or add a negative value) and multiply (or multiply by inverted value) only.

But hundreds of yers ago, there existed mathematical tables with values of these functions. Also, when you pres SIN on your calculator, you usually receive a pretty exact answer. How do these people and machines do that?

The solution is in the approximation of our function (which we don’t know how to compute) with some different function (which we do know how to compute).

Example

Let’s say, we want to compute $\sin(1)$, i.e. sine of one radian, which has a value around 0.841470984. From calculus, we can discover these 3 properties of sine:

• sine of zero is zero … $\sin(0) = 0$
• derivative of sine in zero is one … $\sin’(0) = 1$
• sine is periodic … $\sin(x) = \sin(x + 2\pi)$

The nice property of polynomials

“For each N points in a plane there exists a polynomial of degree at most N-1, which intersects them.”

Which means, that:

• for each point there is a horizontal line, which intersects it
• for each two points there is a line, which intersects them
• for each three points there is parabola, which intersects them
• …

It looks like polynomials can have many different shapes and “resemble” many different functions.

The basic principle of Taylor polynomial

Taylor polynomial is based on a simple principle:

“The more similar (high order) derivatives of two functions are at point X, the more similar these functions are around point X.”

The process of reaching this idea could look like this: functions should be similar to each other (around point X). They probably should have the same value in X (obvious). They probably should enter the point X going at the same angle (we don’t want one to decrease at X and another to grow). One function should be as “curvy” as the other (we don’t want one to be convex and another to be concave). And now we may notice, that we have just mentioned derivatives of order 0, 1 and 2. It probably works like that:

• functions should have the same derivation of oreder 0, i.e. a function value at our point
• when they have the same derivative of order 1 (same slope of tangent), they are more similar
• when they have the same derivative of order 2, they are even more similar
• …

Aapproximation with polynomials

We try to approximate unknown function with polynomial, because we know how to compute it (we only add, subtract, multiply and divide).

Our example: $\sin(x)$ has the zeroth derivative 0 at $x=0$, first derivative 1, second derivative 0, third derivative -1 and it keeps repeating. If we find a polynomial, which has the same derivatives at $x=0$ up to some order, we can compute the value of that polynomial instead of sine and believe, that it is almost equal to sine.

Example: finding polynomial for sine

Let’s try to find a polynomial $p$, which is similar to sine around point zero. First, we want it to have the same derivative of order 0, then 1, 2, 3 … and gradually increase our demands. Simultaneously, let’s see, how the graph becomes more and more similar to sine, and the value at point 1, $p(1)$, gets more and more closer to $\sin(1)$.

The polynomial of degree 0, which has the same value at 0, as sine, is $p(x) = 0$ (same 0. derivative), p(1)= 0

1. Sine has a first derivative equal to 1, it corresponds to polynomial $p(x) = x$ (same 0. and 1. derivative), p(1)= 1
   
   
2. Function $p(x) = x$ has the second derivation at 0 equal to 0, we don’t have to change it.
3. Third derivative of our polynomial at 0 must be -1, let’s try to integrate it and add a constant, if needed.
   • $p”’(x) = -1$ – at zero it should be -1 (third derivative)
   • $p”(x) = -x$ – at zero should be 0 (second derivative), which is OK
   • $p’(x) = 1 – \frac{x^2}{2}$ , at zero should be 1 (first derivative), thus + 1
   • $p(x) = x – \frac{x^3}{6}$ at zero should be 0 (zeroth derivative), which is OK

   Indeed, polynomial $p(x) = x – \frac{x^3}{6}$ is more similar to sine (same 0. to 3. derivative), p(1)= 0.833333
   
   

4. Fourth derivative of our polynomial should be 0, but it is satisfied in previous polynomial.
5. Fifth derivative of our polynomial should be 1, so:
   • $p””(x) = x$ – at zero should be 0 (fourth derivative), which is OK
   • $p”’(x) = -1 + \frac{x^2}{2}$ , at zero should be -1 (third derivative), thus – 1
   • $p”(x) = -x + \frac{x^3}{6}$ at zero should be 0 (second derivative), which is OK
   • $p’(x) = 1 – \frac{x^2}{2} + \frac{x^4}{24} $ at zero should be 1 (first derivative), thus + 1
   • $p(x) = x – \frac{x^3}{6} + \frac{x^5}{120}$ at zero should be 0 (zeroth derivative), which is OK

   Indeed, polynomial $p(x) = x – \frac{x^3}{6} + \frac{x^5}{120}$ is even more similar to sine (same 0. to 5. derivative), p(1)= 0.841666
   
   

6. Sixth derivative of our polynomial should be 0, but it is satisfied by previous polynomial.
7. In the same way, or by guessing, we can come up with the next, more precise polynomial $p(x) = x – \frac{x^3}{6} + \frac{x^5}{120} – \frac{x^7}{5040}$. (same 0. to 7. derivative), p(1)= 0.841468
   
   

We reached the function $p(x) = x – \frac{x^3}{6} + \frac{x^5}{120} – \frac{x^7}{5040}$, which is very similar to $\sin(x)$ around 0.

As you have probably noticed, $sin(x)$ has the derivatives of even order always equal to 0 at point 0. Taylor polynomial changes only when computing with precission to odd order of derivative. Now you see, where the term “odd function” came from (symmetry with respect to the origin).

Taylor polynomial for any function

For a general function f we want to find a Taylor polynomial p, which is very similar to f around some point a. We know several derivatives of f at point a. Polynomial p must have the same derivatives, as f, at point a, i. e. $p^{(i)}(a) = f^{(i)}(a)$. That is our only requirement on p.

When p is differentiated $i$ times and we substitute a into it, all summands should become 0 and only the value $f^{(i)}(a)$ should remain. Thus, polynomial p must contain the values of these derivatives. Summands should also contain (x-a), so they become 0 after substituting a. Summands should have a denominator, which is cancelled with exponents, which are decremented by 1 during differentiation. Denominator should be a product of these exponents, thus factorial.

The following expression satisfies our requirements:

$p(x) = f(a) + \frac{f’(a) * (x-a) }{ 1! } + \frac{f”(a) * (x-a)^2 }{ 2! }+ \frac{f”’(a) * (x-a)^3 }{ 3! } + …$

After substituting a, the polynomial equals $f(a)$ (other summands are 0). Let’s try to differentiate it.

$p’(x) = 0 + f’(a) + \frac{f”(a) * (x-a)^1 }{ 1! }+ \frac{f”’(a) * (x-a)^2 }{ 2! } + …$

After substituting a, the polynomial equals $f’(a)$ (other summands are 0). It works in the same way for higher orders of derivative.

Our polynomial for sine (a=0, zeroth derivative 0, first 1, second 0, third -1, fourth 0, …) is:

$p(x) = 0 + \frac{1 * (x-0) }{ 1! } + \frac{0 * (x-0)^2 }{ 2! }+ \frac{-1 * (x-0)^3 }{ 3! } + \frac{0* (x-0)^4 }{ 4! } + \frac{1 * (x-0)^5 }{ 5! } +… $

Taylor series

If we know all derivatives of some function, up to infinity, (e.g. for sine, where they repeat), we can express that function with an infinite Taylor polynomial. The value of such function can be expressed as a sum of series (infinitely many numbers).

Example:

For a function $y=e^x$ we know, that it has a value 1 at point 0, first and all higher derivatives are also 1. Let’s write a Taylor polynomial for this function:

$p(x) = 1 + \frac{1 * (x-0) }{ 1! } + \frac{1* (x-0)^2 }{ 2! }+ \frac{1* (x-0)^3 }{ 3! } + …$

Now we can compute the value of Euler’s number $e$ (i.e. $e^1$) up to any precission. It is:

$e = 1 + 1 + \frac{1}{2}+ \frac{1}{6} + \frac{1}{24} + \frac{1}{120} + …$

After loading 3D models, the random color is attached to each part of the model. It can be rendered using Path Tracing as a diffuse material. The light is provided by environment map.

You can simply dran and drop a model into browser window, it will be parsed, HDR tree will be built (it may take a while …) and model will be added to the list. You can add environment maps (in .HDR format) in the same way.

Used JS libraries

• IvanK.js – my library for accelerated graphics in the browser
• K3D.js – my library for parsing and editing 3D meshes
• RT.js – my library with very fast KD trees (not public)

The purpose of this project

I can not see any purpose of this project right now. Some people may use it as a simple model viewer, if they don’t have any better software on their current PC (or mac, or phone, or tablet). It can be extended into a 3D model editor (but there already exist many good web-based editors) or into professional 3D renderer (but currently JS is slow, so I will wait until WebCL becomes supported in browsers).

Rendered images

The images below were rendered in a browser on my laptop in about 5 minutes.

Beginning

My solution is based on Fast image convolutions by Wojciech Jarosz.
Presented ideas are very simple and I don’t know who is the original author. I am going to describe it a little better and add some mathematics.
To get motivated, take a glance at the results. I have implemented this code into Photopea under Filter – Blur – Gaussian Blur.

Definition

The convolution of two 2D functions $f$ and $g$ is defined as the volume of product of $f$ and “shifted” $g$. The second function $g$ is sometimes called “weight”, since it determines, how much of $f$ will get into the result

The Gaussian blur of a 2D function can be defined as a convolution of that function with 2D Gaussian function. Our gaussian function has an integral 1 (volume under surface) and is uniquely defined by one parameter $\sigma$ called standard deviation. We will also call it “radius” in the text below.

In our discrete finite case, we represent our 2D functions as matrices of values. We compute the volume (integral) as a sum. Gaussian function has near to zero values behind some radius, so we will use only the values $-r \leq x \leq r, -r \leq y \leq r$. This “useful” part of weight is also called the kernel.The value of convolution at [i, j] is the weighted average, i. e. sum of function values around [i, j] multiplied by weight.

Algorithm 1

For a general discrete convolution of $f$ and weight function $w$, we can compute the result $b$ as:

$b[i,j] = \sum\limits_{y=i-r}^{i+r} \sum\limits_{x=j-r}^{j+r} f[y,x] * w[y,x]$

For gaussian weight, we can compute only weights around [i, j] (area of $4 \cdot r^2$). When our matrix has $n$ values, the time complexity is $O(n \cdot r^2)$. For large radii, e. g. $r = 10$, we have to do $n * 400$ operations, which correspond to 400 loops over the whole matrix and that is ugly.

// source channel, target channel, width, height, radius
function gaussBlur_1 (scl, tcl, w, h, r) {
    var rs = Math.ceil(r * 2.57);     // significant radius
    for(var i=0; i<h; i++)
        for(var j=0; j<w; j++) {
            var val = 0, wsum = 0;
            for(var iy = i-rs; iy<i+rs+1; iy++)
                for(var ix = j-rs; ix<j+rs+1; ix++) {
                    var x = Math.min(w-1, Math.max(0, ix));
                    var y = Math.min(h-1, Math.max(0, iy));
                    var dsq = (ix-j)*(ix-j)+(iy-i)*(iy-i);
                    var wght = Math.exp( -dsq / (2*r*r) ) / (Math.PI*2*r*r);
                    val += scl[y*w+x] * wght;  wsum += wght;
                }
            tcl[i*w+j] = Math.round(val/wsum);            
        }
}

Algorithm 2

Let’s introduce the box blur. It is the convolution of function $f$ and weight $w$, but weight is constant and lies within a square (box). The nice property of the box blur is, that several passes (convolutions) with a box blur approximate one pass with a gaussian blur.

In this algorithm, we will simulate the gaussian blur with 3 passes of box blur. Let’s denote the half of size of square as $br$ (“box radius”). The constant value of weight is $1 / (2 \cdot br)^2$ (so the sum over the whole weight is 1). We can define box blur as:

$bb[i,j] = \sum\limits_{y=i-br}^{i+br} \sum\limits_{x=j-br}^{j+br} f[y,x] / (2 \cdot br)^2 $

We have to convert the standard deviation of gaussian blur $r$ into dimensions of boxes for box blur. I am not very good at calculus, but fortunatelly I have found this website and used their implementation.

function boxesForGauss(sigma, n)  // standard deviation, number of boxes
{
    var wIdeal = Math.sqrt((12*sigma*sigma/n)+1);  // Ideal averaging filter width 
    var wl = Math.floor(wIdeal);  if(wl%2==0) wl--;
    var wu = wl+2;
				
    var mIdeal = (12*sigma*sigma - n*wl*wl - 4*n*wl - 3*n)/(-4*wl - 4);
    var m = Math.round(mIdeal);
    // var sigmaActual = Math.sqrt( (m*wl*wl + (n-m)*wu*wu - n)/12 );
				
    var sizes = [];  for(var i=0; i<n; i++) sizes.push(i<m?wl:wu);
    return sizes;
}

Our algorithm has still the same complexity $O(n \cdot r^2)$, but it has two advantages: first, the area is much smaller ($br$ is almost equal to $\sigma$, while significant radius for gaussian is much larger). The second advantage is, that the weight is constant. Even though we have to do it 3 times, it performs faster.

function gaussBlur_2 (scl, tcl, w, h, r) {
    var bxs = boxesForGauss(r, 3);
    boxBlur_2 (scl, tcl, w, h, (bxs[0]-1)/2);
    boxBlur_2 (tcl, scl, w, h, (bxs[1]-1)/2);
    boxBlur_2 (scl, tcl, w, h, (bxs[2]-1)/2);
}
function boxBlur_2 (scl, tcl, w, h, r) {
    for(var i=0; i<h; i++)
        for(var j=0; j<w; j++) {
            var val = 0;
            for(var iy=i-r; iy<i+r+1; iy++)
                for(var ix=j-r; ix<j+r+1; ix++) {
                    var x = Math.min(w-1, Math.max(0, ix));
                    var y = Math.min(h-1, Math.max(0, iy));
                    val += scl[y*w+x];
                }
            tcl[i*w+j] = val/((r+r+1)*(r+r+1));
        }
}

Algorithm 3

We have already simplified gaussian blur into 3 passes of box blur. Let’s do a little experiment. Let’s define a horizontal blur and total blur:

$ b_h[i,j] = \sum\limits_{x=j-br}^{j+br} f[i,x] / (2 \cdot br) \\
b_t[i,j] = \sum\limits_{y=j-br}^{j+br} b_h[y,j] / (2 \cdot br) $

Those two functions are “looping” in a line, producing “one-dimensional blur”. Let’s see, what total blur corresponds to:

$b_t[i,j] = \sum\limits_{y=i-br}^{i+br} b_h[y,j] / (2 \cdot br)
= \sum\limits_{y=j-br}^{j+br} \left( \sum\limits_{x=j-br}^{j+br} f[y,x] / (2 \cdot br) \right) / (2 \cdot br) \\
= \sum\limits_{y=i-br}^{i+br} \sum\limits_{x=j-br}^{j+br} f[y,x] / (2 \cdot br)^2 $

We just discovered, that our total blur is a box blur! Both total blur and horizontal blur have a complexity $O(n \cdot r)$, so the whole box blur has $O(n \cdot r)$.

function gaussBlur_3 (scl, tcl, w, h, r) {
    var bxs = boxesForGauss(r, 3);
    boxBlur_3 (scl, tcl, w, h, (bxs[0]-1)/2);
    boxBlur_3 (tcl, scl, w, h, (bxs[1]-1)/2);
    boxBlur_3 (scl, tcl, w, h, (bxs[2]-1)/2);
}
function boxBlur_3 (scl, tcl, w, h, r) {
    for(var i=0; i<scl.length; i++) tcl[i] = scl[i];
    boxBlurH_3(tcl, scl, w, h, r);
    boxBlurT_3(scl, tcl, w, h, r);
}
function boxBlurH_3 (scl, tcl, w, h, r) {
    for(var i=0; i<h; i++)
        for(var j=0; j<w; j++)  {
            var val = 0;
            for(var ix=j-r; ix<j+r+1; ix++) {
                var x = Math.min(w-1, Math.max(0, ix));
                val += scl[i*w+x];
            }
            tcl[i*w+j] = val/(r+r+1);
        }
}   
function boxBlurT_3 (scl, tcl, w, h, r) {
    for(var i=0; i<h; i++)
        for(var j=0; j<w; j++) {
            var val = 0;
            for(var iy=i-r; iy<i+r+1; iy++) {
                var y = Math.min(h-1, Math.max(0, iy));
                val += scl[y*w+j];
            }
            tcl[i*w+j] = val/(r+r+1);
        }
}

Algorithm 4

One-dimensional blur can be computed even faster. E. g. we want to compute horizontal blur. We compute $b_h[i,j], b_h[i,j+1], b_h[i,j+2], …$. But the neighboring values $b_h[i,j]$ and $b_h[i,j+1]$ are almost the same. The only difference is in one left-most value and one right-most value. So
$b_h[i,j+1] = b_h[i,j] + f[i,j+r+1] – f[i,j-r]$.

In our new algorithm, we will compute the one-dimensional blur by creating the accumulator. First, we put the value of left-most cell into it. Then we will compute next values just by editing the previous value in constant time. This 1D blur has the complexity $O(n)$ (independent on $r$). But it is performed twice to get box blur, which is performed 3 times to get gaussian blur. So the complexity of this gaussian blur is 6 * $O(n)$.

function gaussBlur_4 (scl, tcl, w, h, r) {
    var bxs = boxesForGauss(r, 3);
    boxBlur_4 (scl, tcl, w, h, (bxs[0]-1)/2);
    boxBlur_4 (tcl, scl, w, h, (bxs[1]-1)/2);
    boxBlur_4 (scl, tcl, w, h, (bxs[2]-1)/2);
}
function boxBlur_4 (scl, tcl, w, h, r) {
    for(var i=0; i<scl.length; i++) tcl[i] = scl[i];
    boxBlurH_4(tcl, scl, w, h, r);
    boxBlurT_4(scl, tcl, w, h, r);
}
function boxBlurH_4 (scl, tcl, w, h, r) {
    var iarr = 1 / (r+r+1);
    for(var i=0; i<h; i++) {
        var ti = i*w, li = ti, ri = ti+r;
        var fv = scl[ti], lv = scl[ti+w-1], val = (r+1)*fv;
        for(var j=0; j<r; j++) val += scl[ti+j];
        for(var j=0  ; j<=r ; j++) { val += scl[ri++] - fv       ;   tcl[ti++] = Math.round(val*iarr); }
        for(var j=r+1; j<w-r; j++) { val += scl[ri++] - scl[li++];   tcl[ti++] = Math.round(val*iarr); }
        for(var j=w-r; j<w  ; j++) { val += lv        - scl[li++];   tcl[ti++] = Math.round(val*iarr); }
    }
}
function boxBlurT_4 (scl, tcl, w, h, r) {
    var iarr = 1 / (r+r+1);
    for(var i=0; i<w; i++) {
        var ti = i, li = ti, ri = ti+r*w;
        var fv = scl[ti], lv = scl[ti+w*(h-1)], val = (r+1)*fv;
        for(var j=0; j<r; j++) val += scl[ti+j*w];
        for(var j=0  ; j<=r ; j++) { val += scl[ri] - fv     ;  tcl[ti] = Math.round(val*iarr);  ri+=w; ti+=w; }
        for(var j=r+1; j<h-r; j++) { val += scl[ri] - scl[li];  tcl[ti] = Math.round(val*iarr);  li+=w; ri+=w; ti+=w; }
        for(var j=h-r; j<h  ; j++) { val += lv      - scl[li];  tcl[ti] = Math.round(val*iarr);  li+=w; ti+=w; }
    }
}

Results

I was testing all 4 algorithms on an image below (4 channels, 800×200 pixels). Here are the results:

Note, that Alg 1 is computing the true Gaussian blur using gaussian kernel, while Alg 2,3,4 are only approximating it with 3 passes of box blur. The difference between Alg 2,3,4 is in complexity of computing box blur, their outputs are the same.

Original image

Perfect Gaussian Blur (Algorithm 1)

Algorithm 2, 3, 4, average error per pixel: 0.04 %

Blur by Adobe Photoshop, average error per pixel: 0.09%

SmallPT

SmallPT is a photorealistic renderer. It uses Monte Carlo path tracing to render the scene. It contains 3 materials: diffuse material, mirror and glass, and one primitive: sphere. For more info, read the official Kevin Beason’s webpage.

Rewriting C++ to JS was pretty simple. I just had to remove type identifiers (“var” instead of “int”, “double”, “Vec”, …). I also had to rewrite classes into JS constructors. In Javascript, you can not overload operators, so I had to rewrite all expressions with vector operations into function calls.

Try it yourself

Below is the official 99-line JS version of SmallPT. You can pass it 3 comma-separated parameters: width, height and number of iterations. E.g.
smallpt.html#800,600,4
will produce a 800×600 image with 4 iterations of algorithm (more iterations = better image).

I also have written another version with explicit light sampling, also from Kevin Beason. I added several scenes and a simple UI with continuous updating of bitmap.

• Official 99-line Javascript version of SmallPT
• Interactive version of SmallPT
• Rendered images: Color Balls, Cornel Box,

Scene

The scene geometry is the same, as in raytraced version, with one difference – I made bigger sun. All materials are perfectly diffuse. There is a simple environment map with different color gradients on each hemisphere.

Algorithm

I have implemented the most primitive Pathtracing method. Rays are traced through the scene with cosine-importance-sampled random reflection direction. Path has non-zero color, when it hits the sun or environment map. Path is “killed” by russian roulette.

There is one thing I am worried about. I couldn’t make any propper random number generator in GLSL. It seems, that my current generator is not totally random, so resulting image is a little biased (there appear color artifacts on balls after some time of rendering).

So, here it is:

• Pathtraced online game
• Screenshots

About cubic splines

First, I must say, that we are going to interpolate a function of one real variable, not a curve in a 2D space.

Having several ($n$) “knots” – points in 2D space – pairs $(x, f(x))$, we would like to interpolate between them with a smooth curve. We can interpolate between them with a polynomial of the degree $n-1$, but it usually generates a curve, which is too “wavy”. The idea with splines is, that we compute a unique polynomial for each sub-interval between knots, and these polynomials should look good together – they should have the same first, second, third … derivatives at knots.

I recommend you to read about Splines on Wikipedia..

The algorithm for cubic interpolation is also described on Wikipedia, so I just copied it.

Implementation

In acubic splines interpolation, the input is the set of knots + first derivatives for each knot. I decided to represent it with three arrays: an array of X values (xs), an array of Y values (ys) and an array of derivative values (ks). Here is the function for evaluating a cubic spline for any point X:

CSPL.evalSpline = function(x, xs, ys, ks)
{
    var i = 1;
    while(xs[i]<x) i++;
		
    var t = (x - xs[i-1]) / (xs[i] - xs[i-1]);
		
    var a =  ks[i-1]*(xs[i]-xs[i-1]) - (ys[i]-ys[i-1]);
    var b = -ks[i  ]*(xs[i]-xs[i-1]) + (ys[i]-ys[i-1]);
		
    var q = (1-t)*ys[i-1] + t*ys[i] + t*(1-t)*(a*(1-t)+b*t);
    return q;
}

In a code above, we can give the function any first derivatives (ks). But we usually don’t have any specific derivatives, we just want the curve to be as smooth as possible.

From the spline definition, the first and the second derivative of a cubic spline should be continuous. Below is the function, which generates the array of “ks”, which have that property. It also sets the second derivative of the first and the last point to zero (Natural Spline).

CSPL.getNaturalKs = function(xs, ys, ks)    // in x values, in y values, out k values
{
    var n = xs.length-1;
    var A = CSPL._gaussJ.zerosMat(n+1, n+2);
        
    for(var i=1; i<n; i++)    // rows
    {
        A[i][i-1] = 1/(xs[i] - xs[i-1]);
        
        A[i][i  ] = 2 * (1/(xs[i] - xs[i-1]) + 1/(xs[i+1] - xs[i])) ;
        
        A[i][i+1] = 1/(xs[i+1] - xs[i]);
        
        A[i][n+1] = 3*   ( (ys[i]-ys[i-1])/ ((xs[i] - xs[i-1])*(xs[i] - xs[i-1])) 
                         +  (ys[i+1]-ys[i])/ ((xs[i+1] - xs[i])*(xs[i+1] - xs[i])) );
    }
    
    A[0][0  ] = 2/(xs[1] - xs[0]);
    A[0][1  ] = 1/(xs[1] - xs[0]);
    A[0][n+1] = 3 * (ys[1] - ys[0]) / ((xs[1]-xs[0])*(xs[1]-xs[0]));
    
    A[n][n-1] = 1/(xs[n] - xs[n-1]);
    A[n][n  ] = 2/(xs[n] - xs[n-1]);
    A[n][n+1] = 3 * (ys[n] - ys[n-1]) / ((xs[n]-xs[n-1])*(xs[n]-xs[n-1]));
        
    CSPL._gaussJ.solve(A, ks);        
}

Where A is $n \times (n+1)$ matrix and CSPL._gaussJ.solve solves the system of linear equations.

I put all my spline code into a small Javascript library named CSPL, which you can find here: CSPL – small Javascript library for cubic spline interpolation.

Open demo in a new window

What is the problem

The problem is, that we have an image (table of pixels) in format, which uses lots of colors (hundreds, thousands, millions …) and we want to display it with less colors, and we already have both palettes. There might be many reasons for doing that.

1. Compression: instead of 24 bits for pixel we can use only 16, 8, 2 or even 1 bit per pixel. E.g. GIF format uses 8 bits per pixel.
2. Displaying it on displays, which don’t have many colors (e-book readers, LED boards, …)
3. Printing an image on some special printers or plotters.
4. Embroiding an image on cloth using cross-stich.

What is the solution

The obvious solution is to round the color values from big palette to the “closest” values in the small palette. Let’s say we have a grayscale image with 100 possible pixel values (1, 2, … 100) and we want to “express” it using only 2 values (1 or 100). When we have an area in our image, where all the pixels have value 40 (let’s call it 40v), we round it and we get 0v. When it is 70v, we round it and we get 100v.

Dithering is a little different attitude. When we draw that 40v area, we want to draw 0v pixels and sometimes 100v pixels between them, so the whole area looks like 40v.

One way of doing dithering is error distribution. Now we also round the pixel values, but when we are making a pixel darker (40v to 0v), we also say the neighbouring pixels to be a little lighter. An “error” is a difference between real (input) color and rounded (output) color and we somehow “split” that difference to neighbours. Neighbours can split their errors to their neighbours, sometimes the errors accumulate and a pixel becomes 100v.

Floyd-Steinberg algorithm

Floyd-Steinberg algorithm says, that we should add 7/16 of error to the right neighbour, 3/16 to the bottom left, 5/16 to bottom and 1/16 to bottom right neithbour. You can read more about it in Wikipedia article about Floyd-Steinberg.

JavaScript implementation

// byte shift by 4 (x = x>>4;) corresponds to integer division by 16

/*
   function converts values from grayscale (0-255) to black and white (0 or 255)
*/

function floydSteinberg(sb, w, h)   // source buffer, width, height
{
   for(var i=0; i<h; i++)
      for(var j=0; j<w; j++)
      {
         var ci = i*w+j;               // current buffer index
         var cc = sb[ci];              // current color
         var rc = (cc<128?0:255);      // real (rounded) color
         var err = cc-rc;              // error amount
         sb[ci] = rc;                  // saving real color
         if(j+1<w) sb[ci  +1] += (err*7)>>4;  // if right neighbour exists
         if(i+1==h) continue;   // if we are in the last line
         if(j  >0) sb[ci+w-1] += (err*3)>>4;  // bottom left neighbour
                   sb[ci+w  ] += (err*5)>>4;  // bottom neighbour
         if(j+1<w) sb[ci+w+1] += (err*1)>>4;  // bottom right neighbour
      }
}

Inspiration

The first time when I heard about raytracing was about 3 years ago. I was fascinated, though, I had absolutely no idea how it works. It seemd to me like some kind of magic.

I was attending 2 courses of computer graphics and a course about hardware and rasterization during the past year, so now I know a little bit of this magic .I decided to write my own simple raytracer from the scratch.

I have seen several raytracers that run on CPU, some of them were even in JavaScript. I also have seen some raytracers that run on GPU, written in shading languages. I wanted to make a real-time raytracer that shows the animation, but to make it more interesting, I made a simple game from it .

First Raytraced Online Game

Description

There is a rectangular floor and two balls on it. When you click “Start”, balls start to move and try to roll over you. You have to run away using cursor keys (or jump over the ball using spacebar).

Technology

The drawing is coded in GLSL, in fragment shader. Game logic is written in JavaScript, passed to the GPU using “uniforms”. The whole thing can run in web browser using WebGL technology.

There is a static texture of outer environment. Balls and floor are shaded using Phong model.
There are two levels of ray “recursion” (just two calls of function, recursive functions are not allowed in GLSL).

Conclusion

I have an average 3 years old laptop and Windows OS. I could run the demo at 60 FPS at Medium size and 43 FPS at Large size.

I really wanted to add much more interesting objects and effects into the game. But unfortunatelly, it was starting to be really slow (30 and less FPS). There are some new technologies – OpenCL or CUDA – which allow us to use GPU more efficiently than through shaders. There even is a new standard called WebCL, but sadly, currently it is not implemented in any official release of any browser.