代表SHA-256作为头像
他们的挑战是我给自己的挑战，通常没有太多的水赌，并且足够小的范围，这样我就可以在一两天内运送它，同时保持备用家庭时间。
本周末＆＃39; S项目是为集中式泛价构建一个事务资源管理器。像一个区间的探险家一样，但没有加密的开销。
系统中的每个节点由哈希表示。因为人类在阅读和快速识别大量时（除了通过它们的漏斗或最后几位）时，所以需要进行视觉表示。
我想要一个仍然看起来摘要（不像怪物或机器人那样自思索），并且在圆形的化身UI组件中播放很好。
如果您对数学和三角术过敏，请随时在此处与Moredetailed互动示例一起玩。否则，让＆＃39;潜水进入它＆＃39所做的。
许多现有的解决方案产生正方形图像，但是头像作为圆形。当圆形时，它们会在角落里丢失信息，所以而不是笛卡尔（x-y）方法，我们＆＃39;重新使用极性（角度半径）坐标。
SHA-256哈希有256位，我们需要代表。 Dividinga Circle到256个部分将使每个部分太小才能视觉上有用，只会留下1位＆＃34;价值＆＃34;在每个部分（0或1，黑色或白色）表示。
生成的这样的网格的SVG代码看起来像这样（在反应组件中）： 导出const =（）=＆gt; {//等于的RADII const R1 = 1 const r2 = r1 * 0.75 const r3 = r1 * 0.5 const r4 = r1 * 0.25 return（）} 每天真地做这个，每个同心环＆＃39; s radius是1/4的一个/最大的一个/最大的环，给我们这个： 如果我们计算了半径，以便每个部分都有一个相同的区域，我们得到以下结果： 通过求解方程式来计算等区域。 每个部分区域是整个圆面积的1/32。 假设外圆的半径为1，即π/ 32的区域。 要计算环的相关半径，我们将饼图区域与外半径r表示，并将饼图区域与内半径R：Pi R ^ 2 - Pi R ^ 2一起减去，然后我们从外部迭代。 更多细节
我不知道你，但是0.42在美学和书呆子的满意度下都会击中球场，所以让＆＃39;去吧。
现在我们在我们的圈子上有32个漂亮的段，我们可以将每个部分映射到哈希中的8位值。
我们可以将其拆分为8位（2个十六进制数字），并将其组织为8个8个块以映射到圆环：
12 O＆＃39;时钟 - ＆gt; ClockWise31 5F 5B DB 76 D0 78 C4外圈3B 8A C0 06 4E 4A 01 64中间外环61 2B 1F CE 77 C8 69 34中内圈15B FC 94 C7 58 94 ED D3内圈
31 5F 5B DB 76 D0 78 C4 3B 8A CO 06 4E 4A 01 64 61 2B 1F CE 77 C8 69 34 5B FC 94 C7 58 94 ED D3以填充具有不同颜色的每个部分，我们产生SVG＆lt;路径＆gt ; Polygon.each部分类似于馅饼/比萨饼切片，从圆圈的中心到给定的半径，并覆盖圆圈的1/8。
我们可以通过前往中心的所有部分逃脱的原因是因为我们的映射顺序：通过从外部铺设，内部部分将覆盖在Z索引中的外部部分。
由于SVG使用笛卡尔坐标，我们＆＃39; LL必须转换我们的Polar LogicInto Cartesian SVG Path命令：
接口{x：number y：number}函数polar点（半径：数字，角度：数字）：{//角度表示为[0,1 [//注意：我们减去PI / 2开始在中午开始，顺时针/ /三角旋转+倒y轴=顺时针旋转，漂亮！返回{x：RADIUS *。 COS（2 *。PI *角度 - 。PI / 2），Y：RADIUS *。 sin（2 *。pi *角度 - pi / 2）}}函数moveto（{x，y} :) {return`m $ {x} $ {y}`}函数lineto（{x，y} :) {return` l $ {x} $ {y }`}函数arcto（{x，y}：，半径：数字）{return` $ {Radius} $ {RADIUS} 0 0 0 $ {x} $ {Y }`} const =（{index，Radius}）=＆gt; {const anglea = index / 8 const angleb =（索引+ 1）/ 8 return}
为此，我们有很多选择。 8位可以直接映射到256种颜色，如窗口Windows系统，但这需要查找表。相反，我们可以使用HSL（）CSS函数来获得颜色。
HUE是具有最大影响的组件，而饱和度和闪光可用于为每个部分添加很少的变型。
要将8位值映射到3个组件，我们可以将字节划分为：
函数mapvalueTocolor（值）{const colorh =值＆gt;＆gt; 4 const颜色=（值＆gt;＆gt; 2）＆amp; 0x03 const colorl = value＆amp; 0x03 const ranalizedh = colorh / 16 const归一化=颜色/ 4 const normalizedl = colorl / 4 const h = 360 *标准化hcons s = 50 + 50 *归一化//饱和度为50和100％const l = 40 + 30 *标准化/ 40％至70％之间的亮度返回`hsl（$ {h}，$ {s}％，$ {l}％）`}
颜色映射函数可以使用聚焦在亮度信道而不是色调上的高对比度版本。
我们的颜色编码遭受了缺陷：两个哈希可以看起来非常相似，但在这里和那里有几个差异。它们可以在色调/饱和度/亮度分量的LSB中出现差异来忽略差异。
如果哈希有一些模式，这会很好，这使得Itrandom足够区分但在其自身之内足够一致。秩序与混乱之间的平衡。
为了解决这个问题，我们使用XOR操作来计算哈希的灵魂。
对于每个戒指，我们XOR形成这个环的字节＆＃39; s部分来计算环＆＃39;灵魂。 （魂器？）
//每个灵魂都在-1和1函数计算汇位（字节：String []）{const ringlength =。圆形（字节长度/ 4）const rings = [字节。切片（0，铃声），字节。切片（1 *铃声，2 *铃声），字节。切片（2 *铃声，3 *铃声），字节。切片（3 *铃声，4 *铃声）] const xorreducer =（xor：number，byte：string）=＆gt; xor ^ parseint（字节，16）返回{hashsoul :( bytes。减少（xorreducer，0）/ 0xff）* 2 - 1，ringsouls：圆环。地图（环=＆gt;（环。减少（Xorreducer，0）/ 0xff）* 2 - 1）}}} //示例我们的演示散列：// hashsoul：0.2313725490196079 // ringsoul 0：0.09137254901960785 // Ringsoul 1： - 0.8274509803921568 // ringsoul 2：-0.050980392156862786 // ringsoul 3：-0.9529411764705882
值得注意的是，我们可以＆＃34;种子＆＃34;随着哈希灵魂的色调，并用每个环灵介绍色调的变形戒指，并具有价值本身。
导出函数mapvalueTocolor（{value，hashsoul，ringsoul}）{const colorh = value＆gt;＆gt; 4 const颜色=（值＆gt;＆gt; 2）＆amp; 0x03 const colorl = value＆amp; 0x03 const rancorizeh = colorh / 16 const randalizeds = colors / 4 const rancorizedl = colorl / 4 const s = 50 + 50 *归一化const l = 40 + 30 * rancorimedl返回`hsl（$ {h}，$ {s}％， $ {l}％）`}
我们还可以通过根据环形灵魂改变每个环和＃39;突出的凸起来介绍结构变化，以产生惊人的效果：
这不仅有助于对头像提供更多的唯一性，它还可以帮助最佳色盲人物的可访问性 如果我们改变截面路径的弧形部分的半径和标志，每个环＆＃39;开始角度，我们可以获得有趣的变化： 在彩色映射值中有一点调整，我们可以轻松地将ThisteChnique延伸到任意哈希长度（只要所述长度可被32即）即可。 它恰好发生在我开始这个项目时，集中硬币使用SHA-256，但后来在切换到SHA-384，每个部分给出12位。 您可以在集中式硬币资源管理器中看到哈希托尔（谢谢@Wzulfikar的名称），或在操场上使用viniants。 我将在稍后将代码发布为NPM包，同时在GitHub上的此课程以及组件本身的源代码。
