2d:null 2e:["$","title",null,{"children":"Integers in Single-Precision Floating-Point | Ricky Reusser | Observable"}] 33:Tb19,viewof value = { var canvas = document.createElement('canvas'); var w = 32; var h = height / verticalScale; canvas.width = w; canvas.height = h; canvas.style.width = `${w * 16}px`; canvas.style.height = `${h * verticalScale}px`; canvas.style.imageRendering = 'crisp-edges'; canvas.style.imageRendering = 'pixelated'; const ctx = canvas.getContext('2d'); let offset = 0; // The bottom: // offset = Math.pow(2, 24) - h; // The top: // offset = -Math.pow(2, 24); const imageData = ctx.createImageData(w, h); var highlight = NaN; var mouseOffset = NaN; function update() { var value = new Float32Array(1); var bytes = new Uint8Array(value.buffer); for (var i = 0; i < h; i++) { var scaledOffset = Math.floor(offset / verticalScale); value[0] = scaledOffset + i; for (var byte = bytes.length - 1; byte >= 0; byte--) { for (var bit = 7; bit >= 0; bit--) { var pixel = (bytes[byte] & (0x1 << bit)) >> bit ? 255 : 0; var bytenum = (bytes.length - 1 - byte) * 8 + (7 - bit); var index = (i * w + bytenum) * 4; if (scaledOffset + i === highlight) { // Why is this yellow??? imageData.data[index + 0] = imageData.data[index + 1] = imageData[ index + 2 ] = 255; } else { if (bytenum === 0) { imageData.data[index + 0] = (pixel * 3) / 4; imageData.data[index + 1] = (pixel * 3) / 4; imageData.data[index + 2] = 127 + pixel / 2; } else if (bytenum < 9) { imageData.data[index + 0] = (pixel * 3) / 4; imageData.data[index + 1] = 127 + pixel / 2; imageData.data[index + 2] = (pixel * 3) / 4; } else { imageData.data[index + 0] = 127 + pixel / 2; imageData.data[index + 1] = (pixel * 3) / 4; imageData.data[index + 2] = (pixel * 3) / 4; } } imageData.data[index + 3] = 255; } } } ctx.putImageData(imageData, 0, 0); } canvas.addEventListener('wheel', function(event) { event.preventDefault(); // Let's not clamp it. You can scroll right off the end of what's nicely representable :) offset = offset + event.deltaY; canvas.value = highlight = Math.floor(offset / verticalScale) + Math.floor(mouseOffset / verticalScale); update(); canvas.dispatchEvent(new CustomEvent('input')); }); canvas.addEventListener('mousemove', function(event) { mouseOffset = event.offsetY; canvas.value = highlight = Math.floor(offset / verticalScale) + Math.floor(mouseOffset / verticalScale); update(); canvas.dispatchEvent(new CustomEvent('input')); }); update(); canvas.value = 0; return canvas; }34:[] 31:{"id":"e82c48cb00556b0e","slug":"integers-in-single-precision-floating-point","title":"Integers in Single-Precision Floating-Point","thumbnail":"27225a5af218bd8db3cb5d2449349fbf692d0020137e6af49c4351a09a37f7a0","access_level":"public","create_time":"$D2020-02-09T21:12:07.240Z","update_time":"$D2026-01-13T17:24:50.354Z","view_time":null,"first_public_time":"$D2020-02-10T05:07:41.946Z","has_unpublished_edits":null,"fork":false,"stars":25,"starred":false,"owner":{"type":"team","id":"f1b8352b963a77b4","login":"rreusser","name":"Ricky Reusser","avatar_url":"https://avatars-next.observableusercontent.com/49c18a2ac0092176d4ea8348a1dd538e0b460b086b89d602b8d21ffe0821d92e","tier":"starter_2024"},"version":295,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"908c4be2279a714e","login":"rreusser","name":"Ricky Reusser","avatar_url":"https://avatars-next.observableusercontent.com/fa41989f47bb986723af5b9c22176cb503748426f56e565000ea93acd9eab86c","tier":null}],"members":[{"type":"individual","id":"908c4be2279a714e","login":"rreusser","name":"Ricky Reusser","avatar_url":"https://avatars-next.observableusercontent.com/fa41989f47bb986723af5b9c22176cb503748426f56e565000ea93acd9eab86c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"dcd095ad05c2b722","slug":"writeups","title":"Fun Notebooks","owner":{"id":"f1b8352b963a77b4","login":"rreusser","name":"Ricky Reusser"}},"type":"notebook","body":{"title":"Integers in Single-Precision Floating-Point","cells":[{"id":289,"value":"# Integers in Single-Precision Floating-Point","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":294,"value":"*[Read this notebook ➡️](https://rreusser.github.io/notebooks/integers-in-single-precision-floating-point/) on my personal website via [Observable Notebook Kit](https://observablehq.com/notebook-kit/kit).*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":279,"value":"Floating-point numbers are quite good at representing integers. In particular, each integer up to some finite limit has a unique, exact floating point representation (except for `-0`, of course). I know this isn't an interesting observation, but when you actaully step through the math, it just doesn’t seem like really had to be the case.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":281,"value":"One nice consequence is that JavaScript handles loops alright even though it only has a double-precision `Number` type for integers and non-integers alike. (Given a choice though, please don't take this to mean you should start using `float` or `double` for all of your loop indices.)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":283,"value":"For fun, the diagram below shows the bits of integers represented in 32-bit IEEE-754 floating-point, starting at zero. Integers from ${tex`-2^{24}\\;(${(-Math.pow(\n 2,\n 24\n)).toLocaleString()})`} to ${tex`2^{24}\\;(${Math.pow(\n 2,\n 24\n).toLocaleString()})`} can be represented exactly. Colors represent the sign, exponent, and significand.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":287,"value":"Scroll to browse, mouse-over to inspect. It doesn’t currently work well on mobile, sorry.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":132,"value":"binaryInput({\n value: value,\n type: 'float32',\n displayParts: true,\n fractionalSignificand: true\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":241,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":240,"value":"verticalScale = 2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"import { binaryInput } from '@rreusser/binary-input'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"