Photo: aftermat(c)h by ankaatje – CC

This nifty little puzzle comes from an excercise sheet of our algorithms and data structures course at the university. Our task was to find a winning formula for a game and prove it.

Imagine 100 matches laying on the table. Alice and Bob take at most 10 matches from the table in turn. They can choose how many matches they want to take, but they have to take at least one match. Whoever gets the last match, wins the game. Suppose Alice starts, how should she play to win the game every time?

You should really try to solve this puzzle on your own before reading my explanation after the jump.

The explanation

Instead of reasoning from the very beginning, you should rather ask yourself how Alice can win in the end. Suppose there’s only one match left from the game and it’s Bob’s turn. He can snatch the last match and therefore wins the game, which is not what we want. The same is also true if there’s two to ten matches left.

The interesting part comes when there’s 11 matches left for Bob. Bob can’t snatch up the last match, because he can only remove ten matches at most. Then Alice can take all of the remaining matches, including the last one, which makes her the winner, because Bob has to remove at least one match, leaving at most ten matches behind.

If Alice can leave 11 matches to Bob, she’ll win. Now we can reduce the problem to the following: How can she ensure that Bob gets the last 11 matches?

Inception

Now, mathematicians are lazy people. Really! If they’ve already proven something, they would want to reduce other more complex problems to the already proven ones. Believe it or not, we’ve already shown the core of this puzzle.

Now back to our problem at hand. How does Alice ensure that Bob gets the last 11 matches? It’s very simple: She has to take the 12th match from last. How is that simple? Because we’ve already solved that problem.

Let’s imagine our 100 matches laying on our table. If we put 11 matches aside¹, we get 89 matches. How to get the last one of those 89 matches? Well, that’s solved: Alice has to leave 11 matches (of those 89) for Bob behind. If we put the 11 matches back on the table, we can see that Alice can snatch up the 12th match from last (and therefore win), if she can leave 22 matches for Bob.

This implies that she has to take the 23rd match from last. She does that by leaving 33 matches for Bob, etc…

If we do that over and over again, this becomes: Alice can win, if she can leave matches for Bob behind at the beginning. Since Alice starts the game, she just have to take one match, leaving for Bob behind. And if she plays according to our strategy, she can also win.

More excercises

1. Suppose there are matches on the table at the beginning and the players can remove at most matches. Can Alice still win?
2. Consider the “inverted” game: Whoever gets the last match, loses. How can Alice win?

Just remember to reduce the problems to the ones we’ve already solved… Happy thinking!

The usage is quite straight forward… just try it out. Originally it’s apparently used for iGoogle’s weather widget, so it’s not very detailed. However it’s still very handy for a quick look at the weather.

Today we’re gonna calculate pi. You might say, it doesn’t seem too interesting; it’s an old hat. You may be true, but we’re going to calculate pi using a method, other than approximating a circle with a polygon. So here’s what we do:

1. We draw the unit circle on our cartesian coordinate system.
2. We randomly drop points on the square, which contains our unit circle.
3. The probability of the point dropping on the circle is

Explanation

Why? The explanation is easy. The area of the unit circle is and the area of the square is . As the points are randomly chosen, the probability of a point dropping on the circle is

This gives us an interesting computational method for “calculating” pi using random numbers… Such algorithms are called Monte Carlo methods, by the way. A highly inefficient way perhaps, but nevertheless interesting. I don’t want to implement this example, in fact I wanted to blog about another Monte Carlo method for calculating pi originally, which is easy on the outside, but more difficult to grasp in its entirety.

Another Monte Carlo

1. Randomly pick two positive natural numbers.

2. The probability of these two numbers being coprime is

   

This gives us a formula for pi:

Wait, you don’t believe me? With a quick demonstration, you could easily verify it’s true. Here’s a quick implementation in C#:

static Random r = new Random();

static int getGcd(int a, int b) {
    // Euclid's algorithm
    return b == 0 ? a : getGcd(b, a % b);
}

static bool doExperiment() {
    // Pick two random numbers
    int a = r.Next();
    int b = r.Next();

    // Calculate greatest common divisor
    int gcd = getGcd(a, b);

    // two numbers are coprime iff their greatest common divisor is 1
    return gcd == 1;
}

static void Main(string[] args) {
    while (true) {
        Console.Write("Count: ");

        int count = int.Parse(Console.ReadLine());
        int successes = 0;

        if (count == 0) break; // End application

        for (int i = 0; i < count; i++) {
            if (doExperiment()) successes++;
        }

        // Calculate probability
        double p = (double)successes / count;

        // Calculate pi
        Console.WriteLine("Probability: {0}%", p * 100);
        Console.WriteLine("Calculated pi: {0}", Math.Sqrt(6 / p));
        Console.WriteLine();
    }
}

You can also download the source code.

Test run

Count: 100
Probability: 59%
Calculated pi: 3.1889640207164

Count: 1000
Probability: 59.8%
Calculated pi: 3.16756133579975

Count: 10000
Probability: 60.91%
Calculated pi: 3.1385664314759

Count: 100000
Probability: 60.819%
Calculated pi: 3.14091358277565

Count: 1000000
Probability: 60.8672%
Calculated pi: 3.13966971072351

Count: 10000000
Probability: 60.78924%
Calculated pi: 3.14168232203594

Count: 100000000
Probability: 60.796216%
Calculated pi: 3.14150207229303

Count: 1000000000
Probability: 60.7912067%
Calculated pi: 3.14163150221403

As you can see, the approximation of pi is very bad and highly inefficient. The last iteration took me more than a minute to calculate, but it shows an interesting result.

Also the probability is not an approximation of , it is indeed exactly . Is that logical? Yes, it’s been proven¹. Is that intuitive? Hell fucking no!

Hi there, how’s it going? It has been a while… again… I know. Even though it was summer vacation, I’ve been very busy. Applying for universities, searching for a place to live, get used to new cities… with success. I’ll be a mathematics student of Heidelberg University starting this semester.

Remember Homework 3? Yeah, I know some of you believed this project was dead… (The last blog post update was ages ago.) However, I’m happy to inform you that it is not.

I’ve added a major feature and made some minor changes to the settings panel and the edit panel.

See for yourself…

Colored, more joyful & productivity

Yeah, my clarinet playing skills has to be improved…

First of all, I thought about adding colors to tasks… For compensating the lack of categories. Color is a nice way to group tasks together. It gives us visual representation of what belongs together and is absolutely beautiful to look at. The color has to be shown unobtrusively and the assignment should be quick and easy.

There are nine colors in total… one for each digit on the keyboard. Select a task and press Ctrl+[digit] to assign the corresponding color to the task. Naturally, you can change the color in the edit task panel as shown below.

I’ve also added the ability to change the names of colors in the settings panel. For example, I’ve changed “Purple” (Ctrl+2) into “Blog”, so that all tasks with purple color represent tasks I need to do for my blog.

All colors are official Windows Phone 7 accent colors, with the lack of red, which still denotes an “important” task and shown on the right of a task.

Metro, modern & clean

As you can see (or not) I’ve redesigned the edit task and settings panel. Now simpler and more elegant. With the recent release of Windows 8 Developer Preview, I was able to experience the official Metro myself.

Release?

I’m still not sure when to release Homework 3 to the public. I wanted to complete this piece of software before this semester started, so that everyone can plan their homework efficiently in this year, but I fear it’s not possible now.

I’m determined to complete the synchronization feature first. And maybe develop a Windows Phone 7.5 App… But that’s just speculation. I’m not sure how to make the synchronization work yet, but I’ll sure find a way.

Hello everybody… I know it’s been a long, long time. But, look at the bright side: exams are finally over, I can write more again, I got my Abitur… and a lot of free time. So I went through old projects to see if I can find anything interesting. And I found something very interesting indeed and thought of sharing it with you guys.

Hello FTPUploader

So let me explain why this little app is genius. As you can see, you can specify a local directory and a remote directory lying on a FTP server. Once you’re done, click on “Save settings”. Your infos will be stored in a specific .xml file on your computer, so you don’t need to retype it again next time.

FTPUploader creates a FileSystemWatcher to monitor your local directory and applies all local change to the FTP server with a click on the tray icon. If you change a file, it just uploads the new file to the FTP server. If you remove a file, it removes the corresponding file on the server. If you rename a file, it removes the old file on the server and uploads the renamed file.

Great for someone who doesn’t use an IDE or an editor with an integrated FTP client to code his web projects. Someone like me.

This app is still experimental, so please don’t blame me if something goes wrong… (not that something will go wrong, of course.) Only works with .NET Framework 4.0.

Download FTPUploader v0.1β

Sorry for the lack of posts lately, but I have lots of work to do, as exams are drawing nearer and nearer! I’ll post more articles after my written Abitur exams, I promise.

However, I want to concentrate on the other two pseudo elements which were introduced in CSS2. They were quite underused, mainly because Internet Explorer 6 just refused to understand them. With the upcoming death of IE6, they have regained popularity among web designers. I’m talking about :before and :after.

Get started

With :before and :after you can literally insert content before or after an element. Example: You want to insert text before an a element.

<!-- HTML code -->
<a href="#" class="mark">I'm a link</a>

/* CSS code */
.mark:before {
    content: "This is a link: ";
}

We might think that a browser is going to interpret the code like this:

<span class="before">This is a link: </span><a href="#">I'm a link</a>

We might think that the text is literally inserted before the element. But it’s not. The browser will rather create a code like this:

<a href="#" class="mark"><span class="before">This is a link: </span> I'm a link</a>

It creates an element with the text “This is a link: ” within the a element and applies the .mark:before rules on it. You can specify any rules you want; there are no restrictions. The browser applies the rules on an imagined element which isn’t really there, thus a pseudo element.

There’s a reason why I chose the <span> element for these pseudo elements. It’s because the pseudo elements are inline elements from begin with. Of course you can change their display property, but more on that topic later.

Now that we know a browser would insert the pseudo element within the given element, a question arises: What about pseudo elements on elements which has no content? For example the <img /> element or the separator <hr />? Several experiments with :before and :after have shown that these pseudo elements does not work on non-content elements (which is a shame btw).

It’s also possible to insert images with the content property:

/* CSS code */
.mark:before {
    content: url('linkmark.png');
}

Again the interpreted code:

<a href="#" class="mark"><span class="before"><img src="linkmark.png" /></span>I'm a link</a>

Combining both text and images is no problem, either. It’s done by separating the arguments with a space:

/* CSS code */
.mark:before {
    content: url('linkmark.png') " This is a link: ";
}

Get creative

Now think outside the box. Think of all the possibilities with pseudo elements! You can create extra elements without polluting your HTML markup. You can use these elements as decoration. Or overlays. Or simple graphical objects. Nicolas Gallagher has some nice pseudo element experiments on his blog including pure CSS folded corner effects, pure CSS speech bubbles and pure CSS icons. Yeah, icons. Check it out, it’s very intriguing!

Most of these techniques require you to change the pseudo element property display to block, so you can make use of the full potential of CSS3. But if you do, you have to remember to set the content property, otherwise the element won’t show. If you don’t want any content inside your pseudo element (because you’ve set a background image or something) you can set content to an empty string as shown in the code snippet below.

/* CSS code */
.mark:before {
    background-image: url('linkmark.png');
    content: " ";
    display: block;
    float: left;
    height: 16px;
    width: 16px;
}

I hope you’ve gained more insight of the inner workings of pseudo elements. Or as a wise man would say: “Understanding is the first step to change”. Or something similar.

While designing some new site, I’ve decided to use some text reflections on the header in my designs… I’ve already created the header using @font-face and I didn’t want to create an header image, so I thought… hey, just try to imitate the reflection with CSS only.

• Demo page »

The HTML code is very straight forward and semantic:

<!-- HTML code -->
<h1 class="reflected">Reflected Text!</h1>

Flipping the text vertically

I used the :after and :before pseudo-elements to insert the reflection. The tricky part is where you have to flip the reflection-text vertically. This can be done with a CSS 2D transformation. One could write a transformation matrix which does the flipping. However this requires knowledge of Linear Algebra and too difficult for us to handle. The trick is simply using a negative value for scaleY.

For the mathematically challenged who are reading my blog: Here’s an excellent article how those transformation matrices work → and how to create them.

/* CSS code */

.reflected {
    position: relative;
}
.reflected:after {
    content: 'Reflected Text!';
    display: block;
    position: absolute;
    bottom: -.55em; /* You should change this value to fit your font */
    left: 0;
    right: 0;
    opacity: .5;

    /* This is how the text is flipped vertically */
    -webkit-transform: scaleY(-1);
    -moz-transform: scaleY(-1);
    -o-transform: scaleY(-1);
}

Fading reflection…

Now we have to fade the reflection out. One could use a fade-out png image with alpha transparency, but what’s the fun in that? I researched on cross-browser CSS gradients and found an interesting article at WebDesignerWall →.

/* CSS code */

.reflected:after {
    /* Fading using CSS gradient */
    /* Don't forget to change the colors to your background color */
    background: -webkit-gradient(linear, left top, left center, from(rgba(255,255,255,0)), to(rgb(255,255,255)));
    background: -moz-linear-gradient(top, rgba(255,255,255,0), rgb(255,255,255));
    /* I left out the `filter` property,
       because IE doesn't know `:before` and `:after` pseudo-elements anyway */

    content: ' ';
    display: block;
    height: 1em;
    position: absolute;
    bottom: -.8em;
    left: 0;
    right: 0;
}

And finally you can simplify the whole CSS by grouping common properties together:

/* CSS code */

.reflected {
    position: relative;
}
.reflected:before, .reflected:after {
    display: block;
    position: absolute;
    bottom: -.8em; /* You should change this value to fit your font */
    left: 0;
    right: 0;
}
.reflected:before {
    content: 'Reflected Text!';
    opacity: .3;
    /* This is how the text is flipped vertically */
    -webkit-transform: scaleY(-1);
    -moz-transform: scaleY(-1);
    -o-transform: scaleY(-1);
}
.reflected:after {
    /* Fading using CSS gradient */
    /* Don't forget to change the colors to your background color */
    background: -webkit-gradient(linear, left top, left center, from(rgba(255,255,255,0)), to(rgb(255,255,255)));
    background: -moz-linear-gradient(top, rgba(255,255,255,0), rgb(255,255,255));
    /* I left out the `filter` property,
       because IE doesn't know `:before` and `:after` pseudo-elements anyway */
    content: ' ';
    height: 1em;
}

Some inconveniences

As you can see, one can actually make a text reflection with CSS3 only. It just comes with some inflexibleness.

• It only works on a non-changing plain-color background.
• The reflection text is generated using CSS. Which means you have to change the CSS file if you change the corresponding text in the HTML file.
• It doesn’t work on all browsers (e.g. Opera)
• It looks differently on different browsers (see figure below)

Try it out

• Demo page »

Last week, when I took a peek at some examples of Google’s Font API on Windows, I got goose bumps. The font rendering was too bad. Typefaces aren’t smooth at all. It looks like crap. You can’t make the web beautiful like that.

To smooth the text I have come up with a fairly simple solution. I’ll just use text-shadow, apply some blur on it and the text will be as smooth as butter. Well at least in theory.

Firstly, here’s what I’m talking about:

The solution

For those, who are not familiar with the syntax of text-shadow; this is how you use it:

We’re just going to blur the text, so we leave the offset to 0 0.

/* CSS code */
text-shadow: 0 0 1px black;

The difference is clear:

We have achieved our desired effect, but it is a bit of an overkill. The blur is too strong, making it look bolder than it actually is. We can’t make the blur radius any smaller as 1px is the smallest value it can get. To make the blur less strong, we can play around with the color opacity.

/* CSS code */
text-shadow: 0 0 1px rgba(0, 0, 0, .5); /* 50% opacity black */

Overview of all versions:

This already looks really usable, although still nothing compared to Mac’s font rendering. You can play around with the opacity value of the color to see what value fits best.

So next time you design a website you can use this little trick to smoothen your logo and headers on Windows to make it look at least bearable.

Keep in mind that this technique will not work on Mac. Why would you, anyway? Also don’t apply blur on small text. It’ll render your text unreadable and that’s equally bad and annoying.

Remember that the ‘text shadow’ should be in the same color as the text. Otherwise, there will be no smoothing effect and the blur shadow will appear as a glow.