helmcode

[github]

the helmcode hexagon in its violet, glinting now and then

companies 53×30 30 fps in colour or one ink 4.0 kB [report a bug]

use it

html

<script type="module" src="https://ascii.rest/ascii.js"></script>

<ascii-art piece="helmcode" options='{"shine":5}'></ascii-art>

No install and no build step. ascii.js defines the <ascii-art> tag, loads the piece from ascii.rest, plays it while it is on screen, and holds the first frame for anyone who prefers reduced motion. Add mono, <ascii-art piece="helmcode" mono>, for one ink.

react

// npm install ascii.rest
import { Ascii } from "ascii.rest/react";
import { helmcode } from "ascii.rest/pieces";

<Ascii piece={helmcode} options={{"shine":5}} />

A client component, so it works in the Next.js app router as it is. Pass the name instead, piece="helmcode", to fetch the piece only when it mounts. Add mono for one ink.

astro

---
// npm install ascii.rest
import Ascii from "ascii.rest/astro";
---

<Ascii piece="helmcode" options={{"shine":5}} />

Renders the first frame on the server, so the page is whole before any script runs, then plays the piece once it loads. Add mono for one ink.

typescript

// npm install ascii.rest
import { mount } from "ascii.rest";
import { helmcode } from "ascii.rest/pieces";

const el = document.querySelector<HTMLCanvasElement>("canvas")!;
const stop = mount(el, helmcode, {"shine":5});

mount plays a piece in a <pre>, or on a <canvas> for the coloured ones, and returns a function that stops it. Every piece, option and frame is typed. Mount it in a <pre> for one ink.

terminal

npx ascii.rest helmcode

Plays it in your terminal, in colour, until you press a key. Add --mono for the terminal's own colour. Add --light for a light terminal. Add --seconds 5 to stop it on its own; npx ascii.rest list shows every piece. In a CLI of your own, play("helmcode", { seconds: 2 }) from ascii.rest/terminal shows it as a splash screen.

readme

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="https://ascii.rest/svg/helmcode.dark.svg">
  <img alt="helmcode" src="https://ascii.rest/svg/helmcode.svg" width="265">
</picture>
helmcode, as a light README shows it
light, helmcode.svg
helmcode, as a dark README shows it
dark, helmcode.dark.svg

An animated SVG that needs no script, so it plays in a GitHub README, which runs none. GitHub shows the dark one in its dark theme. It holds still for anyone who prefers reduced motion.

helmcode.ts

[js] [github] 
/*
 * helmcode: the Helmcode mark, a hexagon with a folded cut through it, in its
 * violet, with a glint crossing it every few seconds.
 *
 * Drawn from Helmcode's own mark, helmcode.com/brand: each cell holds the
 * character whose shape best matches the mark's edge through it, and 8 where
 * the mark is solid. On a canvas it takes the mark's colour, lifted on a dark
 * page where it would sink into it; in a <pre> it is one ink, from the same
 * drawing. The mark is a trademark of its owner, shown here to name the company.
 */
import type { Frame, Meta } from "../types.ts";

export interface HelmcodeOptions {
  [key: string]: unknown;
  /** Seconds between glints; 0 keeps the mark still. */
  shine: number;
}

export const meta = {
  name: "helmcode",
  category: "companies",
  note: "the helmcode hexagon in its violet, glinting now and then",
  cols: 53,
  rows: 30,
  fps: 30,
  options: { shine: 5 },
  // The mark's colour for a light page, then for a dark one; each as drawn, then twice lighter for the glint.
  palette: [
    "#4934e1", "#897beb", "#c8c2f6", "#8071ea", "#aca3f1", "#d9d4f9",
  ],
} satisfies Meta<HelmcodeOptions>;

const ART = String.raw`

                      _qq888pp_
                  _qq88888888888pp_
               _q8888888888888888888p_
           _qq8888888888888888888888888pp_
        _q888888888888888888888888888888888p_
    _qq8888888888888888PPP'PP88888888888888888pp_
   q8888888888888888PP'       ^PP8888888888888888p
  q8888888888888PP'              'PP88888888888888p
  8888888888PP^                      ^PP88888888888
  888888888p_                           'PP88888888
  888888888888p_                           q8888888
  888888888888888pp_                       q8888888
  8888888888888888888pp_                   q8888888
  8888888888888888888888pp_                q8888888
  888888888888888888888888b                q8888888
  888888888888888888888888b                q8888888
  888888888888888888888888b                q8888888
  888888888888888888888888b                q8888888
  888888888888888888888888b              _qq8888888
  888888888888888888888888b           _qq8888888888
  P88888888888888888888888b       _qq8888888888888P
   P8888888888888888888888b    _qq888888888888888P
    'PP8888888888888888888b_qq8888888888888888PP'
        ^P888888888888888888888888888888888P^
           'PP8888888888888888888888888PP'
               PP8888888888888888888PP
                  ^PP88888888888PP'
                      PPP888PPP

`;

const START = 0.5; // seconds before the first glint
const PASS = 2; // seconds a glint takes to cross
const HALF = 5; // half its width, in cells
const LEAN = 0.9; // cells it shifts left a row down, so it leans like a slash
const SOLID = "8dbqpPY"; // what the glint turns to slashes; thin edges keep their shape

export default function helmcode({ shine = meta.options.shine }: Partial<HelmcodeOptions> = {}): Frame {
  const { cols, rows } = meta;
  const art = ART.slice(1, -1).split("\n").map((line) => line.padEnd(cols));
  const every = shine > 0 ? Math.max(shine, PASS + 0.5) : 0;
  // The glint crosses the mark's ink, edge to edge, rather than the whole frame.
  let lo = Infinity, hi = -Infinity;
  art.forEach((line, y) => {
    for (let x = 0; x < cols; x++) if (line[x] !== " ") (lo = Math.min(lo, x + LEAN * y)), (hi = Math.max(hi, x + LEAN * y));
  });
  const span = hi - lo + 2 * HALF;

  return (t, { paper = false, color } = {}) => {
    const since = t - START;
    const at = every && since >= 0 ? lo - HALF + (span * (since % every)) / PASS : -Infinity;
    const out: string[] = [];
    for (let y = 0; y < rows; y++) {
      let line = "";
      for (let x = 0; x < cols; x++) {
        let ch = art[y][x];
        if (ch !== " ") {
          const d = Math.abs(x + LEAN * y - at);
          let k = d < HALF ? 1 - d / HALF : 0;
          k = k * k * (3 - 2 * k);
          if (k > 0.55 && SOLID.includes(ch)) ch = "/";
          if (color) color[y * cols + x] = (paper ? 0 : 3) + (k > 0.6 ? 2 : k > 0.25 ? 1 : 0);
        }
        line += ch;
      }
      out.push(line);
    }
    return out.join("\n");
  };
}