A playground for the other kind of number

Julia Evans has built a new interactive tool to accompany her upcoming zine on how integers and floating point numbers work. Following the model of her earlier playgrounds—like the DNS one or the SQL one—this one is a simple, focused utility rather than an elaborate system. It's called integer.exposed.

Paying it forward from the float side

The direct inspiration is Bartosz Ciechanowski's float.exposed, a site Evans found herself repeatedly pointing to while giving talks on floating point arithmetic. That tool makes visible the internal layout of IEEE 754 floats: the sign bit, exponent, and significand, and how successive floats differ in distance depending on magnitude.

During those talks, Evans used it to demonstrate several non-obvious things about floats:

  • Incrementing the significand shows how tightly packed adjacent floats are at small magnitudes.
  • Special values like NaN and infinity are easy to show, as is the fact that flipping bits in a NaN often leaves it a NaN.
  • At the other end of the scale, you can land on a large integer value and see how floats sit far apart.
  • Comparing one million as a 32-bit float versus as a 64-bit float makes the precision gap between the two formats tangible.

What integer.exposed adds

While integers are less internally complex than floats, there are still concepts worth poking at: signed and unsigned representations, endianness, and shift operations. So Evans built a counterpart site at integer.exposed, with Ciechanowski's permission.

The interface drops the field-level breakdown—integers don't need it—in favor of a single row of buttons for common operations on the value. Like float.exposed, it uses a big-endian byte ordering because that's easier to read at a glance, even though the actual bytes on most machines will be stored in the reverse order.

Things worth trying

The tool is meant to be fiddled with. Suggested experiments include:

  1. Signed integers: Look at -1 or -128 and watch how signed and unsigned readings diverge as you increment or decrement. Also note what -1 looks like at 16-, 32-, and 64-bit widths.
  2. Arithmetic vs. logical shift: Integer.exposed does not just shift bits; the user can choose between signed right shift (arithmetic) and unsigned right shift (logical). Starting at -1, the difference in behavior is immediately visible.
  3. Counting in binary: From 0, each increment advances the binary pattern in a way that makes the carry behavior obvious.
  4. The NOT operation: Applying NOT to a value like 123 makes clear why bitwise negation is one step short of arithmetic negation.
  5. Byte-order swaps: Turning 12345678 into a different byte order produces a number that looks completely unrelated.
  6. Powers of two: A value like 2048 shows the single-bit pattern cleanly.

Under the hood

The implementation is appropriately minimal: two files, index.html and script.js—viewable directly from the page source—built on Evans' usual Vue.js foundation. Some CSS was borrowed from float.exposed.

Evans is open to bug reports and may add features in the future, but the aim is to keep the tool intentionally simple. She has another, more involved playground in the works as well.