New playground: integer.uncovered

2023-05-05 02:07:10

Hey! For the previous couple of months we’ve been engaged on a zine about how integers
and floating level numbers work. Each time I make a zine I prefer to launch a
playground to go together with it, like mess with dns for the DNS zine or the sql playground.

For this one, I made a easy playground referred to as integer.exposed, impressed by
Bartosz Ciechanowski’s float.exposed.

It’s rather a lot much less elaborate than Mess With DNS, so I’ll hold this weblog publish quick.

the inspiration: float.uncovered

I did a few talks about how integers and floating level work final month,
and within the speak about floating level I discovered myself CONSTANTLY referring to
this web site referred to as Float Exposed by Bartosz Ciechanowski to reveal varied issues. (Apart: For those who haven’t seen
Ciechanowski’s unbelievable interactive explainers on bicycles, mechanical watches,
lenses, the interior combustion engine, and extra, it is best to verify them out!)

Right here’s what it it seems like:

Issues I’ve carried out with it:

Increment the significand of a float (to point out folks how shut collectively successive floats are)
Present particular values like NaN and infinity, and present how if you happen to change the bits in NaN, it’s nonetheless NaN
Go to a large integer value and present how the gap between floats may be very giant
Present the way you get drastically totally different precision for one million as a 32-bit float and as a 64-bit float (attempt incrementing the significand for every one!)

and much extra! It’s an unbelievable approach to get arms on with floats and enhance your instinct round how they work.

float.uncovered, however for integers

Integers aren’t as sophisticated as floats, however there are some nonobvious issues
about them: you have got signed integers and unsigned integers, you have got
endianness, and there are some bizarre operations like proper/left shift. So when
I used to be speaking about integers, I discovered myself wanting an identical web site to
float.exposed to reveal issues.

So with permission, I put one collectively at integer.exposed. Right here’s a screenshot:

The UI is a bit totally different: integers don’t have many various components the way in which
floating level numbers do, so there’s a single row of buttons that you need to use
to do varied operations on the integer.

A word on byte order: Like float.uncovered, it makes use of a giant endian byte order,
as a result of I believe it’s extra intuitive to learn. However you do have to bear in mind
that on most computer systems the bytes will truly be within the reverse order.

some attention-grabbing issues to attempt

Listed below are some issues I believe are enjoyable to attempt:

signed integers: Take a look at how -1 is
represented. Increment and decrement it just a few instances and see how the signed
and unsigned values change. Do the identical with
-128. Additionally take a look at how -1 is represented as
a 16/32/64-bit integer.
signed/unsigned proper shift: Equally with -1: check out signed proper shift (also referred to as “arithmetic proper shift”) and see how the result’s totally different from unsigned proper shift (aka “logical proper shift”).
counting in binary: Begin at 0 and increment a bunch of instances and watch the binary worth depend up.
not: Take any quantity (like 123) and NOT it. See how NOT is sort of precisely the identical as negation, however not fairly.
swap the byte order. Take a quantity like 12345678 and see how if you happen to swap the byte order, the result’s an unrecognizably totally different quantity.
take a look at how powers of 2 are represented

the tech stack

As typical for me it makes use of Vue.js. If you wish to see the way it works you possibly can simply
view supply – it’s solely two information, index.html and script.js.

I took a bunch of the CSS from float.exposed.