31: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; }32:[] 2f:{"title":"Integers in Single-Precision Floating-Point","cells":[{"id":289,"value":"# Integers in Single-Precision Floating-Point","pinned":false,"hidden":false,"mode":"md"},{"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"},{"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"},{"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"},{"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"},{"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"},{"id":132,"value":"binaryInput({\n value: value,\n type: 'float32',\n displayParts: true,\n fractionalSignificand: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":241,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs"},{"id":240,"value":"verticalScale = 2","pinned":false,"hidden":false,"mode":"ojs"},{"id":97,"value":"import { binaryInput } from '@rreusser/binary-input'","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}