Guess what? You can make a game inside a PDF!

rez1dev — Sun, 12 Jan 2025 06:17:28 +0000

I just discovered you can play a full game of Tetris right inside a PDF document. The PDF is plaintext and works in most desktop browsers that support PDF.js or PDFium.

Use the arrow keys to move and rotate the Tetris blocks.
WASD acts as arrow keys in the input box
When the game is over, you can save your score by printing the PDF page.

Game creator: Thomas Rinsma

GitHub repo: pdftris

You can play directly with this link.

Why 1% - 1% Isn't Zero in Your Calculator (And What It Really Means)

rez1dev — Sat, 30 Nov 2024 05:12:41 +0000

Percentages are a core feature of calculators, but their operation can differ based on the implementation. Behind the simplicity, there’s a bit of math magic at work.

Let’s look at how calculators process percentages and the math that powers them!

Basic Percentage Calculation (X%)

When you enter a number followed by the percentage symbol (%), the calculator treats it as a fraction of 100.

For example, entering 200 × 50% in a calculator gives you 100

Why?

50% is equivalent to 0.5 (since 50 ÷ 100 = 0.5). So, the calculator is calculating: 200 × 0.5 = 100

This is useful for quickly finding a percentage of a number.

Percentage Increase or Decrease (± X%)

Calculators can help you quickly determine percentage increases or decreases.

New\,Value = Original\,Value ± (Percentage × Original\,Value)

Increase: Add the percentage to the original value. 20% increase on 150 is calculated as: 150 + (150 × 0.20) = 180

Decrease: Subtract the percentage from the original value. 20% decrease on 150 is: 150 - (150 × 0.20) = 120

In some calculators, instead of typing + 20%, you may need to multiply the original number by 1.2 for an increase (or 0.8 for a decrease).

How Percentages Are Handled in Advanced Calculators

Like many advanced calculators, GNOME Calculator handles percentages with a system of "tokens" (like pieces of a puzzle). It employs a "parser" and "evaluator" to process the math operations. Here’s a closer look at how this works:

Lexer and Parser

These components break down and organize the expression you enter:

The lexer turns your input (e.g. 3 + 5 * 2) into individual tokens like numbers, operators, and symbols.
The parser processes these tokens into a structure that respects operator precedence (which operation should be performed first) and associativity (how operations are grouped).

Percentage Handling

In the code for GNOME Calculator, we can see how the percentage operation is parsed and evaluated.

Standalone Percentage Operator: When a percentage is used by itself, the lexer identifies the % symbol and treats it as a fraction. For example, if you input 50%, the parser transforms it into the value 0.5. The evaluator then calculates the result.

50\%\ \rightarrow \ \frac{50}{100} \ \rightarrow \ 0.5

public class PercentNode : RNode {
    public PercentNode(Parser parser, LexerToken? token, uint precedence, Associativity associativity) {
        base(parser, token, precedence, associativity);
    }

    public override Number? solve_r(Number r) {
        return r.divide_integer(100);  // Divide the number by 100 to convert it to a percentage
    }
}

Percentage in Addition/Subtraction: When a percentage appears with an addition or subtraction operator, the parser checks if the percentage should be applied directly to the preceding number or if it should be calculated separately.

100\ +\ 50\%\ \rightarrow \ 100\ +\ \left(\frac{100\ \times \ 50}{100}\right) \ \rightarrow \ 100\ +\ 50\ \rightarrow \ 150

public class AddNode : LRNode {
    public bool do_percentage = false;

    public AddNode(Parser parser, LexerToken? token, uint precedence, Associativity associativity) {
        base(parser, token, precedence, associativity);
    }

    public override Number solve_lr(Number l, Number r) {
        if (do_percentage) {
            var per = r.add(new Number.integer(100));  // Add 100 to the percentage part
            per = per.divide_integer(100);  // Divide by 100 to get the fraction
            return l.multiply(per);  // Multiply the left operand by the percentage value
        } else {
            return l.add(r);  // Normal addition if no percentage is involved
        }
    }
}

Back To Main Problem

Most calculators generate results based on the implementation of precedence (which operation should be performed first) and associativity (how operations are grouped).

Let’s say you want to subtract a percentage from another percentage:

a\% \ -\ x\%\ =\ \frac{a}{100} \ -\ \left(\frac{\frac{a}{100} \times \ x}{100}\right)

Calculation:

1\%\ -\ 1\%\ =\ \frac{1}{100} \ -\ \left(\frac{0.01\ \times \ 1}{100}\right) \ =\ 0.01\ -\ 0.0001\ =\ 0.0099

What It Really Means

Here, x% gets interpreted as percentage of percentage and then subtracted.

a\%\ -\ x\%=a\%\ -\ \left(\frac{a\%\ \times \ x}{100}\right)

To prevent confusion, there are specific rules for notation. Proper use of parentheses in these operations ensures clear interpretation.

a\%\ -\ ( x\%) \ \rightarrow \ 1\%\ -\ (1\%)\ =\ \frac{1}{100} \ -\ \frac{1}{100} \ =0\

Instead of functioning with a subtraction operator, (x%) now functions as a Standalone percentage.

This shows the importance of the calculator’s internal rules when handling percentages, especially when combining them with other operations.

Endnote

Calculators simplify percentages for basic tasks, but understanding the math is key for more complex situations, like increases followed by discounts (where a price is first raised and then reduced). Knowing these patterns helps you use percentages effectively in daily calculations!

DEV Community: rez1dev