Split icon rendering logic (#172)

* Split icon rendering logic * Test for icon circle generation
2026-06-13 23:51:01 +00:00 · 2019-08-01 11:56:03 +02:00
parent dc5eafda47
commit e760f2a21a
11 changed files with 405 additions and 120 deletions
@@ -0,0 +1,30 @@
+import generate from './polkadotIcon';
+
+describe('polkadotIcon', (): void => {
+  it('generates the correct points from known', (): void => {
+    expect(
+      generate('5Dqvi1p4C7EhPPFKCixpF3QiaJEaDwWrR9gfWR5eUsfC39TX')
+    ).toEqual([
+      { cx: 32, cy: 32, fill: '#eee', r: 32 },
+      { cx: 32, cy: 8, fill: 'hsl(196, 65%, 53%)', r: 5 },
+      { cx: 32, cy: 20, fill: 'hsl(320, 65%, 53%)', r: 5 },
+      { cx: 21.607695154586736, cy: 14, fill: 'transparent', r: 5 },
+      { cx: 11.215390309173472, cy: 20, fill: 'hsl(112, 65%, 15%)', r: 5 },
+      { cx: 21.607695154586736, cy: 26, fill: 'hsl(22, 65%, 15%)', r: 5 },
+      { cx: 11.215390309173472, cy: 32, fill: 'hsl(213, 65%, 15%)', r: 5 },
+      { cx: 11.215390309173472, cy: 44, fill: 'hsl(163, 65%, 53%)', r: 5 },
+      { cx: 21.607695154586736, cy: 38, fill: 'hsl(213, 65%, 53%)', r: 5 },
+      { cx: 21.607695154586736, cy: 50, fill: 'hsl(185, 65%, 75%)', r: 5 },
+      { cx: 32, cy: 56, fill: 'hsl(163, 65%, 53%)', r: 5 },
+      { cx: 32, cy: 44, fill: 'hsl(213, 65%, 53%)', r: 5 },
+      { cx: 42.392304845413264, cy: 50, fill: 'hsl(213, 65%, 15%)', r: 5 },
+      { cx: 52.78460969082653, cy: 44, fill: 'hsl(112, 65%, 15%)', r: 5 },
+      { cx: 42.392304845413264, cy: 38, fill: 'hsl(22, 65%, 15%)', r: 5 },
+      { cx: 52.78460969082653, cy: 32, fill: 'transparent', r: 5 },
+      { cx: 52.78460969082653, cy: 20, fill: 'hsl(196, 65%, 53%)', r: 5 },
+      { cx: 42.392304845413264, cy: 26, fill: 'hsl(320, 65%, 53%)', r: 5 },
+      { cx: 42.392304845413264, cy: 14, fill: 'hsl(11, 65%, 35%)', r: 5 },
+      { cx: 32, cy: 32, fill: 'hsl(309, 65%, 53%)', r: 5 }
+    ]);
+  });
+});
@@ -0,0 +1,142 @@
+// Copyright 2018 Paritytech via paritytech/oo7/polkadot-identicon
+// Copyright 2018 @polkadot/react-identicon authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+// This has been converted from the original version that can be found at
+//
+// https://github.com/paritytech/oo7/blob/251ba2b7c45503b68eab4320c270b5afa9bccb60/packages/polkadot-identicon/src/index.jsx
+
+import { blake2AsU8a, decodeAddress } from '@polkadot/util-crypto';
+
+export interface Circle {
+  cx: number;
+  cy: number;
+  fill: string;
+  r: number;
+}
+
+interface Scheme {
+  freq: number;
+  colors: number[];
+}
+
+const blake2 = (value: Uint8Array): Uint8Array =>
+  blake2AsU8a(value, 512);
+
+const S = 64;
+const C = S / 2;
+const Z = S / 64 * 5;
+const ZERO = blake2(new Uint8Array(32));
+
+const SCHEMA: { [index: string]: Scheme } = {
+  target: { freq: 1, colors: [0, 28, 0, 0, 28, 0, 0, 28, 0, 0, 28, 0, 0, 28, 0, 0, 28, 0, 1] },
+  cube: { freq: 20, colors: [0, 1, 3, 2, 4, 3, 0, 1, 3, 2, 4, 3, 0, 1, 3, 2, 4, 3, 5] },
+  quazar: { freq: 16, colors: [1, 2, 3, 1, 2, 4, 5, 5, 4, 1, 2, 3, 1, 2, 4, 5, 5, 4, 0] },
+  flower: { freq: 32, colors: [0, 1, 2, 0, 1, 2, 0, 1, 2, 0, 1, 2, 0, 1, 2, 0, 1, 2, 3] },
+  cyclic: { freq: 32, colors: [0, 1, 2, 3, 4, 5, 0, 1, 2, 3, 4, 5, 0, 1, 2, 3, 4, 5, 6] },
+  vmirror: { freq: 128, colors: [0, 1, 2, 3, 4, 5, 3, 4, 2, 0, 1, 6, 7, 8, 9, 7, 8, 6, 10] },
+  hmirror: { freq: 128, colors: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 8, 6, 7, 5, 3, 4, 2, 11] }
+};
+
+const OUTER_CIRCLE: Circle = {
+  cx: C,
+  cy: C,
+  r: C,
+  fill: '#eee'
+};
+
+function getRotation (isSixPoint: boolean): { r: number; ro2: number; r3o4: number; ro4: number; rroot3o2: number; rroot3o4: number } {
+  const r = isSixPoint
+    ? (C / 8 * 5)
+    : (C / 4 * 3);
+  const rroot3o2 = r * Math.sqrt(3) / 2;
+  const ro2 = r / 2;
+  const rroot3o4 = r * Math.sqrt(3) / 4;
+  const ro4 = r / 4;
+  const r3o4 = r * 3 / 4;
+
+  return { r, ro2, r3o4, ro4, rroot3o2, rroot3o4 };
+}
+
+function getCircleXY (isSixPoint: boolean): [number, number][] {
+  const { r, ro2, r3o4, ro4, rroot3o2, rroot3o4 } = getRotation(isSixPoint);
+
+  return [
+    [C, C - r],
+    [C, C - ro2],
+    [C - rroot3o4, C - r3o4],
+    [C - rroot3o2, C - ro2],
+    [C - rroot3o4, C - ro4],
+    [C - rroot3o2, C],
+    [C - rroot3o2, C + ro2],
+    [C - rroot3o4, C + ro4],
+    [C - rroot3o4, C + r3o4],
+    [C, C + r],
+    [C, C + ro2],
+    [C + rroot3o4, C + r3o4],
+    [C + rroot3o2, C + ro2],
+    [C + rroot3o4, C + ro4],
+    [C + rroot3o2, C],
+    [C + rroot3o2, C - ro2],
+    [C + rroot3o4, C - ro4],
+    [C + rroot3o4, C - r3o4],
+    [C, C]
+  ];
+}
+
+function findScheme (d: number): Scheme {
+  let cum = 0;
+  const schema = Object.values(SCHEMA).find((schema): boolean => {
+    cum += schema.freq;
+
+    return d < cum;
+  });
+
+  if (!schema) {
+    throw new Error('Unable to find schema');
+  }
+
+  return schema;
+}
+
+function addressToId (address: string): Uint8Array {
+  return blake2(decodeAddress(address)).map((x, i): number => (x + 256 - ZERO[i]) % 256);
+}
+
+function getColors (address: string): string[] {
+  const total = Object.values(SCHEMA).map((s): number => s.freq).reduce((a, b): number => a + b);
+  const id = addressToId(address);
+  const d = Math.floor((id[30] + id[31] * 256) % total);
+  const rot = (id[28] % 6) * 3;
+  const sat = (Math.floor(id[29] * 70 / 256 + 26) % 80) + 30;
+  const scheme = findScheme(d);
+  const palette = Array.from(id).map((x, i): string => {
+    const b = (x + i % 28 * 58) % 256;
+
+    if (b === 0) {
+      return '#444';
+    } else if (b === 255) {
+      return 'transparent';
+    }
+
+    const h = Math.floor(b % 64 * 360 / 64);
+    const l = [53, 15, 35, 75][Math.floor(b / 64)];
+
+    return `hsl(${h}, ${sat}%, ${l}%)`;
+  });
+
+  return scheme.colors.map((_, i): string =>
+    palette[scheme.colors[i < 18 ? (i + rot) % 18 : 18]]
+  );
+}
+
+export default function generate (address: string, isSixPoint: boolean = false): Circle[] {
+  const colors = getColors(address);
+
+  return [OUTER_CIRCLE].concat(
+    getCircleXY(isSixPoint).map(([cx, cy], index): Circle => ({
+      cx, cy, r: Z, fill: colors[index]
+    }))
+  );
+}