Question

There is this interesting game, that has numbers in a grid, where each number has progressively smaller font. The player’s task is to click on the numbers in succession.

I’m interested in the algorithm that creates the boxes for the numbers, I cannot think of a way it works.

Apparently the grid has N numbers (apart from the 1.88 in the picture), number 1 has the biggest font and succesively the font size decreases. Then the numbers are somehow placed on the grid and boxes grow around them. But it doesn’t seem totally random, as there are some horizotal lines that go across the whole grid.

Do you have an idea on how this might work?

Answer 1

It looks to me as though the boxes have been generated by successive division. That is, starting with the full rectangle, a dividing line (horizontal or vertical) was placed, and then the two resulting rectangles were subdivided in turn, until there were enough rectangles for the game.

Here’s a sketch of the first algorithm I would try. N is the number of rectangles I want to divide the original rectangle into, and A is a critical aspect ratio used to stop the small rectangles getting too narrow. (Perhaps A = 1.5 would be a good start.)

1. Create an empty priority queue and add the full rectangle to it.

2. If the length of the priority queue is greater than or equal to N, stop.

3. Remove the largest rectangle, R, from the priority queue.

4. Choose whether to divide it horizontally or vertically: if its aspect ratio (width/height) is greater than A, divide it vertically; if less than 1/A, divide it horizontally, otherwise choose at random.

5. Decide where to put the dividing line. (Perhaps randomly between 40% and 60% along the chosen dimension.)

6. This divides R into two smaller rectangles. Add both of them to the priority queue. Go to step 2.

When this algorithm completes, there are N rectangles in the queue. Put the number 1 in the largest of them, the number 2 in the second largest, and so on.

It turns out that putting the numbers into the boxes is not quite as straightforward as I assumed in my first attempt. The area metric works well for subdividing the rectangles nicely, but it doesn’t work for putting the numbers into the boxes, because for fitting text into a box, the height and width both have to be taken into account (the area is not so useful).

Instead of explaining the algorithm for putting numbers into the boxes, I will just give you some sample code in Python and let you reverse-engineer it!

import heapq, itertools, random 
import Image, ImageDraw, ImageFont

# ALGORITHM PARAMETERS
aspect_max = 1.5                # Above this ratio, always divide vertically
aspect_min = 1.0                # Below this ratio, always divide horizontally
div_min = 0.4                   # Minimum position for dividing line
div_max = 0.6                   # Maximum position for dividing line
digit_ratio = 0.7               # Aspect ratio of widest digit in font
label_margin = 2                # Margin around label (pixels)

class Rectangle(object):
    def __init__(self, x, y, w, h):
        self.x = x
        self.y = y
        self.w = w
        self.h = h
        self.area = self.w * self.h
        self.aspect = float(self.w) / self.h

    def __le__(self, other):
        # The sense of this comparison is inverted so we can put
        # Rectangles into a min-heap and be able to pop the largest.
        return other.area <= self.area

    def __repr__(self):
        return 'Rectangle({0.x}, {0.y}, {0.w}, {0.h})'.format(self)

    def divide(self, n):
        """
        Divide this rectangle into `n` smaller rectangles and yield
        them in order by area (largest first).
        """
        def division(l):
            return random.randrange(int(l * div_min), int(l * div_max))
        queue = [self]
        while len(queue) < n:
            r = heapq.heappop(queue)
            if (r.aspect > aspect_max 
                or r.aspect > aspect_min
                and random.random() < 0.5):
                # Vertical division
                w = division(r.w)
                heapq.heappush(queue, Rectangle(r.x, r.y, w, r.h))
                heapq.heappush(queue, Rectangle(r.x + w, r.y, r.w - w, r.h))
            else:
                # Horizontal division
                h = division(r.h)
                heapq.heappush(queue, Rectangle(r.x, r.y, r.w, h))
                heapq.heappush(queue, Rectangle(r.x, r.y + h, r.w, r.h - h))
        while queue:
            yield heapq.heappop(queue)

    def font_height(self, n):
        """
        Return the largest font height such that we can draw `n`
        digits in this rectangle.
        """
        return min(int((self.w - label_margin * 2) / (digit_ratio * n)),
                   self.h - label_margin * 2)

def draw_rectangles(rectangles, fontfile):
    """
    Create and return an Image containing `rectangles`. Label each
    rectangle with a number using the TrueType font in `fontfile`.
    """
    rectangles = list(rectangles)
    im = Image.new('RGBA', (1 + max(r.x + r.w for r in rectangles),
                            1 + max(r.y + r.h for r in rectangles)))
    draw = ImageDraw.Draw(im)
    for digits in itertools.count(1):
        rectangles = sorted(rectangles,
                            key = lambda r: r.font_height(digits),
                            reverse = True)
        i_min = 10 ** (digits - 1)
        i_max = 10 ** digits
        i_range = i_max - i_min
        for i in xrange(i_range):
            if i >= len(rectangles): return im
            r = rectangles[i]
            draw.line((r.x, r.y, r.x + r.w, r.y, r.x + r.w, r.y + r.h,
                       r.x, r.y + r.h, r.x, r.y),
                      fill = 'black', width = 1)
            label = str(i + i_min)
            font = ImageFont.truetype(fontfile, r.font_height(digits))
            lw, lh = font.getsize(label)
            draw.text((r.x + (r.w - lw) // 2, r.y + (r.h - lh) // 2),
                      label, fill = 'black', font = font)
        rectangles = rectangles[i_range:]

Here’s a sample run:

>>> R = Rectangle(0, 0, 400, 400)
>>> draw_rectangles(R.divide(30), '/Library/Fonts/Verdana.ttf').save('q10009528.png')