30:T858,Endianness_floatingpoint = md` That means that any byte stored into \`u8\` will also affect \`u32\`, and vice-versa (it's one way to fake a [union](https://en.wikipedia.org/wiki/Union_type) in JavaScript, or extract the raw bits out of a [floating point value](#floatingPoint)). Now imagine we store the following values into our \`u8\` array: \`\`\` u8[0] = 0x0A; u8[1] = 0x0B; u8[2] = 0x0C; u8[3] = 0x0D; // u32[0] === ??? \`\`\` These are the same four bytes that form the value at \`u32[0]\`. If the computer is Big Endian, that value will be \`0x0A0B0C0D\`. If it is Little Endian, it will be \`0x0D0C0B0A\`. So with the following snippet you can test if the environment JavaScript is running in is big or little endian: \`\`\`js const isLittleEndian = (function () { let t32 = new Uint32Array(1); let t8 = new Uint8Array(t32.buffer); t8[0] = 0x0A; t8[1] = 0x0B; t8[2] = 0x0C; t8[3] = 0x0D; return t32[0] === 0x0D0C0B0A; })(); const isBigEndian = !isLittleEndian; \`\`\` You are viewing this on a system that is ${isLittleEndian ? "little" : "big"} endian, by the way. Compare the byes of a \`Uint8Array\` that has all values between 0 and 255, ascending, and the (byte separated) 32-bit values of a \`Uint32Array\` made from the same backing buffer: ${contexts.contextU8.canvas} *\`Uint8Array\`* ${contexts.contextU32.canvas} *\`Uint32Array\`* On your ${isLittleEndian ? "little" : "big"} endian environment this should look ${isLittleEndian ? "like every set of four bytes is reversed" : "as if all bytes are in the same order"}. How often is this relevant when writing JavaScript? Very, very rarely. However, if you start fiddling around with \`TypedArrays\`, and \`WASM\`, sooner or later you might bump into this. There are a few rare cases where it may help with performance, because the overhead of looking up four 8-bit values can be bigger than manually packing/unpacking them into a 32 bit value with bit shifting. Remember though: always do proper benchmarking and profiling first before wasting time on writing complex code, because premature optimizations are the root of all evil! `31:Ta80,contexts = { const bufferU8 = new Uint8Array(256); const bufferU32 = new Uint32Array(bufferU8.buffer); for(let i = 0; i < bufferU8.length; i++){ bufferU8[i] = i; } // draw buffer values as 24x24 pixels const columns8 = (width-4)/24 | 0; const columns32 = ((width-4)/(24*4) | 0)*4; const rowsU8 = Math.ceil(bufferU8.length / columns8); const rowsU32 = Math.ceil(bufferU8.length / columns32); const cHeightU8 = rowsU8 * 26 + 2; const cHeightU32 = rowsU32 * 26 + 2; const colorTable = cividis.RGBA32; const barCode = new Uint32Array(8); const contextU8 = DOM.context2d(width, cHeightU8, 1); const contextU32 = DOM.context2d(width, cHeightU32, 1); const imageDataU8 = contextU8.createImageData(width, cHeightU8); const imageDataU32 = contextU32.createImageData(width, cHeightU32); const pixels32U8 = new Uint32Array(imageDataU8.data.buffer); const pixels32U32 = new Uint32Array(imageDataU32.data.buffer); pixels32U8.fill(isLittleEndian ? 0xFF000000 : 0xFF); pixels32U32.fill(isLittleEndian ? 0xFF000000 : 0xFF); for(let i = 0; i < bufferU8.length; i++){ const ywU8 = (2 + ((i / columns8) | 0) * 26) * width; const xU8 = 1 + ((i % columns8) * 24); const idxU8 = xU8 + ywU8; const ywU32 = (2 + ((i / columns32) | 0) * 26) * width; const ixU32 = i % columns32; const xU32 = 1 + (ixU32 * 23) + ((ixU32 >>> 2) << 2); const idxU32 = xU32 + ywU32; const val8 = bufferU8[i]; const val32 = (bufferU32[i>>>2] >>> ((3 - (i&3))*8)) & 0xFF; let color = colorTable[val8]; for (let cx = 1; cx < 23; cx++){ for (let cy = 1; cy < 23; cy++){ pixels32U8[idxU8 + cx + cy * width] = color; } } for(let j = 0; j < 8; j++){ barCode[j] = colorTable[((val8 >> (7 - j)) & 1) * 0xD0 + 0x18]; } for (let cx = 4; cx < 20; cx++){ color = barCode[(cx - 4)>>1]; pixels32U8[idxU8 + cx + 18 * width] = color; pixels32U8[idxU8 + cx + 19 * width] = color; pixels32U8[idxU8 + cx + 20 * width] = color; } color = colorTable[val32]; for (let cx = 1; cx < 23; cx++){ for (let cy = 1; cy < 23; cy++){ pixels32U32[idxU32 + cx + cy * width] = color; } } for(let j = 0; j < 8; j++){ barCode[j] = colorTable[((val32 >> (7 - j)) & 1) * 0xD0 + 0x18]; } for (let cx = 4; cx < 20; cx++){ color = barCode[(cx - 4)>>1]; pixels32U32[idxU32 + cx + 18 * width] = color; pixels32U32[idxU32 + cx + 19 * width] = color; pixels32U32[idxU32 + cx + 20 * width] = color; } } contextU8.putImageData(imageDataU8, 0, 0); contextU32.putImageData(imageDataU32, 0, 0); return { contextU8, contextU32 }; }32:Tb13,Uint32Array.from([4283179008,4283310080,4283441408,4283507200,4283638528,4283769600,4283835392,4283966720,4284098048,4284163584,4284294912,4284426240,4284557312,4284688640,4284754432,4284885504,4285016832,4285148160,4285279488,4285345024,4285410816,4285476352,4285476608,4285476608,4285476864,4285477120,4285477120,4285411840,4285412096,4285412352,4285412352,4285412609,4285412870,4285347594,4285347598,4285347858,4285348117,4285348119,4285282842,4285283100,4285283358,4285283360,4285283618,4285283876,4285283878,4285284135,4285218857,4285219115,4285219116,4285219374,4285219631,4285219889,4285219890,4285220147,4285220405,4285220406,4285220663,4285220920,4285221178,4285221179,4285221436,4285221693,4285221694,4285221952,4285222209,4285222466,4285222467,4285222724,4285222981,4285222982,4285223239,4285223496,4285223753,4285223754,4285224011,4285224268,4285224269,4285224526,4285290319,4285290576,4285290577,4285290834,4285291091,4285291092,4285291349,4285291606,4285357399,4285357400,4285357657,4285357914,4285357915,4285358172,4285423965,4285424222,4285424223,4285424479,4285424736,4285490529,4285490530,4285490787,4285491044,4285491045,4285556838,4285557095,4285557352,4285557352,4285623145,4285623402,4285623659,4285689196,4285689453,4285689710,4285689711,4285755503,4285755760,4285756017,4285821554,4285821811,4285887604,4285887861,4285887861,4285953654,4285953911,4285954168,4286019705,4286019962,4286020219,4286086011,4286086012,4286086269,4286086526,4286086783,4286086784,4286087041,4286087298,4286087555,4286087556,4286087813,4286088070,4286088327,4286088584,4286088585,4286088842,4286089099,4286089356,4286089357,4286089614,4286089871,4286090128,4286090385,4286090386,4286090643,4286090900,4286091157,4286025622,4286025879,4286026136,4286026393,4286026650,4286026651,4286026908,4286027165,4285961886,4285962143,4285962400,4285962401,4285962658,4285897379,4285897636,4285897893,4285897894,4285898151,4285832872,4285833129,4285833386,4285833643,4285768108,4285768365,4285768622,4285768879,4285703600,4285703857,4285703858,4285638580,4285638837,4285639094,4285573815,4285574072,4285574073,4285508794,4285509051,4285443772,4285444029,4285444286,4285379007,4285379008,4285313729,4285313986,4285314243,4285248965,4285249222,4285183943,4285184200,4285118665,4285118922,4285053643,4285053900,4284988621,4284988878,4284923600,4284923857,4284858578,4284858579,4284793300,4284728021,4284728278,4284662999,4284597720,4284597977,4284532699,4284532956,4284467677,4284402398,4284337119,4284337120,4284271841,4284206563,4284206820,4284141541,4284076262,4284010983,4283945704,4283880425,4283880683,4283815404,4283750125,4283684846,4283619567,4283554288,4283489009,4283423731,4283358452,4283293173,4283227894,4283162615,4283031801,4282966266,4282900987,4282835708,4282770429,4282639615,4282574335,4282574591,4282640383,4282706175,4282771967])33:Tf8b,// used in the visualisation of the buffer cividis = { const RGBA8 = Uint8Array.from([0,32,76,255,0,32,78,255,0,33,80,255,0,34,81,255,0,35,83,255,0,35,85,255,0,36,86,255,0,37,88,255,0,38,90,255,0,38,91,255,0,39,93,255,0,40,95,255,0,40,97,255,0,41,99,255,0,42,100,255,0,42,102,255,0,43,104,255,0,44,106,255,0,45,108,255,0,45,109,255,0,46,110,255,0,46,111,255,0,47,111,255,0,47,111,255,0,48,111,255,0,49,111,255,0,49,111,255,0,50,110,255,0,51,110,255,0,52,110,255,0,52,110,255,1,53,110,255,6,54,110,255,10,55,109,255,14,55,109,255,18,56,109,255,21,57,109,255,23,57,109,255,26,58,108,255,28,59,108,255,30,60,108,255,32,60,108,255,34,61,108,255,36,62,108,255,38,62,108,255,39,63,108,255,41,64,107,255,43,65,107,255,44,65,107,255,46,66,107,255,47,67,107,255,49,68,107,255,50,68,107,255,51,69,107,255,53,70,107,255,54,70,107,255,55,71,107,255,56,72,107,255,58,73,107,255,59,73,107,255,60,74,107,255,61,75,107,255,62,75,107,255,64,76,107,255,65,77,107,255,66,78,107,255,67,78,107,255,68,79,107,255,69,80,107,255,70,80,107,255,71,81,107,255,72,82,107,255,73,83,107,255,74,83,107,255,75,84,107,255,76,85,107,255,77,85,107,255,78,86,107,255,79,87,108,255,80,88,108,255,81,88,108,255,82,89,108,255,83,90,108,255,84,90,108,255,85,91,108,255,86,92,108,255,87,93,109,255,88,93,109,255,89,94,109,255,90,95,109,255,91,95,109,255,92,96,109,255,93,97,110,255,94,98,110,255,95,98,110,255,95,99,110,255,96,100,110,255,97,101,111,255,98,101,111,255,99,102,111,255,100,103,111,255,101,103,111,255,102,104,112,255,103,105,112,255,104,106,112,255,104,106,112,255,105,107,113,255,106,108,113,255,107,109,113,255,108,109,114,255,109,110,114,255,110,111,114,255,111,111,114,255,111,112,115,255,112,113,115,255,113,114,115,255,114,114,116,255,115,115,116,255,116,116,117,255,117,117,117,255,117,117,117,255,118,118,118,255,119,119,118,255,120,120,118,255,121,120,119,255,122,121,119,255,123,122,119,255,123,123,120,255,124,123,120,255,125,124,120,255,126,125,120,255,127,126,120,255,128,126,120,255,129,127,120,255,130,128,120,255,131,129,120,255,132,129,120,255,133,130,120,255,134,131,120,255,135,132,120,255,136,133,120,255,137,133,120,255,138,134,120,255,139,135,120,255,140,136,120,255,141,136,120,255,142,137,120,255,143,138,120,255,144,139,120,255,145,140,120,255,146,140,120,255,147,141,120,255,148,142,120,255,149,143,120,255,150,143,119,255,151,144,119,255,152,145,119,255,153,146,119,255,154,147,119,255,155,147,119,255,156,148,119,255,157,149,119,255,158,150,118,255,159,151,118,255,160,152,118,255,161,152,118,255,162,153,118,255,163,154,117,255,164,155,117,255,165,156,117,255,166,156,117,255,167,157,117,255,168,158,116,255,169,159,116,255,170,160,116,255,171,161,116,255,172,161,115,255,173,162,115,255,174,163,115,255,175,164,115,255,176,165,114,255,177,166,114,255,178,166,114,255,180,167,113,255,181,168,113,255,182,169,113,255,183,170,112,255,184,171,112,255,185,171,112,255,186,172,111,255,187,173,111,255,188,174,110,255,189,175,110,255,190,176,110,255,191,177,109,255,192,177,109,255,193,178,108,255,194,179,108,255,195,180,108,255,197,181,107,255,198,182,107,255,199,183,106,255,200,184,106,255,201,184,105,255,202,185,105,255,203,186,104,255,204,187,104,255,205,188,103,255,206,189,103,255,208,190,102,255,209,191,102,255,210,192,101,255,211,192,101,255,212,193,100,255,213,194,99,255,214,195,99,255,215,196,98,255,216,197,97,255,217,198,97,255,219,199,96,255,220,200,96,255,221,201,95,255,222,202,94,255,223,203,93,255,224,203,93,255,225,204,92,255,227,205,91,255,228,206,91,255,229,207,90,255,230,208,89,255,231,209,88,255,232,210,87,255,233,211,86,255,235,212,86,255,236,213,85,255,237,214,84,255,238,215,83,255,239,216,82,255,240,217,81,255,241,218,80,255,243,219,79,255,244,220,78,255,245,221,77,255,246,222,76,255,247,223,75,255,249,224,73,255,250,224,72,255,251,225,71,255,252,226,70,255,253,227,69,255,255,228,67,255,255,229,66,255,255,230,66,255,255,231,67,255,255,232,68,255,255,233,69,255]); const RGBA32 = new Uint32Array(RGBA8.buffer) return {RGBA32, RGBA8}; }34:[] 2e:{"title":"Endianness","cells":[{"id":0,"value":"Endianness = md`# Endianness\n\n[Endianness](https://en.wikipedia.org/wiki/Endianness) is how bytes will be ordered when looking at the same section of memory as if it is a sequence of 8 bit values, 16 bit values, 32 bit values, etc. We typically say a computer is big or little endian:\n\n![](https://blindedcyclops.neocities.org/Big-Endian-cleaned.svg) ![](https://blindedcyclops.neocities.org/Little-Endian-cleaned.svg)\n\n*Illustrations by [R.S. Shaw](https://en.wikipedia.org/wiki/User:R._S._Shaw) for WikiMedia, public domain*\n\nConfused? Let's try making sense of it through JavaScript (I assume you know JavaScript given that this is an Observable notebook). If we start with a \\`Uint32Array\\`, we can build another \\`Uint8Array\\` that uses the same backing [\\`ArrayBuffer\\`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer), like so:\n\n\\`\\`\\`js\n let u32 = new Uint32Array(1);\n let u8 = new Uint8Array(t32.buffer);\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":98,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":72,"value":"floatingPoint = md`\n---\n## Bonus: Raw Floating Point Bits\n\nHere's how to access the raw bits of a 32 bit floating point number in JavaScript:\n\n\\`\\`\\`js\n// Remember that JavaScript normally uses doubles, not floats\n// Extracting the bits of doubles is also possible, but trickier\nconst f32 = new Float32Array(1);\nconst u32 = new Uint32Array(f32.buffer);\n\n// Example:\nf32[0] = Math.PI;\nconst PI_bits = u32[0]; // ${PI_bits} (on your ${isLittleEndian ? \"little\" : \"big\"} endian system)\n\\`\\`\\`\n\nWhere can you use this? Well, there are cases when you might need access to the significand or exponent parts of a floating point number. Other examples where you can use this are [a fast inverse square root approximation](https://en.wikipedia.org/wiki/Fast_inverse_square_root) or [when implementing a radix sort for floating point values](http://www.codercorner.com/RadixSortRevisited.htm).\n\n[↩back](#Endianness_floatingpoint)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"\"[\"+cividis.RGBA8.toString()+\"]\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"isLittleEndian = (function () {\n let t32 = new Uint32Array(1);\n let t8 = new Uint8Array(t32.buffer);\n t8[0] = 0x0A;\n t8[1] = 0x0B;\n t8[2] = 0x0C;\n t8[3] = 0x0D;\n return t32[0] === 0x0D0C0B0A;\n})()","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"isBigEndian = !isLittleEndian","pinned":false,"hidden":false,"mode":"ojs"},{"id":131,"value":"PI_bits = {\n // Remember that JavaScript normally uses doubles, not floats\n // Extracting the bits of doubles is also possible, but trickier\n const f32 = new Float32Array(1);\n const u32 = new Uint32Array(f32.buffer);\n f32[0] = Math.PI;\n return \"0x\" + (u32[0]).toString(16).toUpperCase(); // 0x40490FDB\n}","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}