centos

[github]

four coloured squares in a star, scanned now and then

distros 56×28 30 fps in colour or one ink 7.2 kB

use it

html

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

<ascii-art piece="centos" options='{"scan":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="centos" mono>, for one ink.

react

// npm install github:bas3line/ascii
import { Ascii } from "ascii.rest/react";
import { centos } from "ascii.rest/pieces";

<Ascii piece={centos} options={{"scan":5}} />

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

astro

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

<Ascii piece="centos" options={{"scan":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 github:bas3line/ascii
import { mount } from "ascii.rest";
import { centos } from "ascii.rest/pieces";

const el = document.querySelector<HTMLCanvasElement>("canvas")!;
const stop = mount(el, centos, {"scan":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.

centos.ts

[js] [github]
/*
 * centos: the CentOS logo, four coloured squares in a star, with a scan line
 * running down it every few seconds that scrambles what it passes.
 *
 * Drawn from devicon's centos-original.svg (MIT): each cell holds the
 * character whose shape best matches the logo's edge through it, and 8 where
 * the logo is solid. On a canvas it takes the logo's colours, lifted on a dark
 * page where they would sink into it; in a <pre> it is one ink, from devicon's
 * centos-plain.svg (MIT). The logo is a trademark of its owner, shown here to
 * name the distribution.
 */
import type { Frame, Meta } from "../types.ts";

export interface CentosOptions {
  [key: string]: unknown;
  /** Seconds between scans; 0 keeps the logo still. */
  scan: number;
}

export const meta = {
  name: "centos",
  category: "distros",
  note: "four coloured squares in a star, scanned now and then",
  cols: 56,
  rows: 28,
  fps: 30,
  options: { scan: 5 },
  // The logo's 5 colours for a light page, then for a dark one; each as drawn, then twice lighter for the scan.
  palette: [
    "#fefefe", "#262577", "#9ccd2c", "#93237a", "#efa725", "#fefefe",
    "#7271a7", "#bfdf76", "#b970a9", "#f5c671", "#ffffff", "#bebed6",
    "#e1f0c0", "#dfbdd7", "#fae5be", "#fefefe", "#504ec8", "#9ccd2c",
    "#a8288b", "#efa725", "#fefefe", "#8d8cdb", "#bfdf76", "#c673b4",
    "#f5c671", "#ffffff", "#cbcaef", "#e1f0c0", "#e5bfdc", "#fae5be",
  ],
} satisfies Meta<CentosOptions>;

// In a <pre>, in the page's own colour.
const MONO = String.raw`

                          _pq_
                        _p8888q_
                      .d88888888b,
         \qqqqqqqqp-_pqqq.d888 qqqq_ __________
         d8888888P_p88888.d888 88888q_"88888888
         d88888P'q8888888.d888 8888888p."888888
         d888P88q_"888888.d888 888888P_p88P8888
         d8P_q,Y88q_"8888.d888 8888P_p88P_p_"88
         "_p888q,Y88q_"88.d888 88P'p88P'p888q_"
         q8888888q,Y88q_"'d888 P'p88P'p8888888p
      _p:d888888888q,Y88q."88P q88P'p8888888888 q_
    _p88:""""""""""""''""   '  """ """""""""""" 88q,
  _p8888888888888888888q,       q8888888888888888888q,
  '88888888888888888888P'       Y8888888888888888888P"
    '888:\qqqqqqqqqqp-._q. .,  qq,-qqqqqqqqqqqp 88P"
      'O:d888888888P'p88P q88p Y88q,Y8888888888 P"
         d8888888P'p88P'p.d888 q,Y88q,Y8888888P
         _'O888P'p88P'p88.d888 88q,Y88q,Y888P"_
         d8q'Y'p88P'p8888.d888 8888q,Y88q,Y"_88
         d888q88P'p888888.d888 888888q,Y88q8888
         d88888_'88888888.d888 8888888P'_888888
         d8888888_"888888.d888 88888P"_88888888
         "^^^^^^^^^ "^^^^'d888 "^^^" '"""""""""
                      "888888888P"
                        "88888P"
                          "8P"

`;

// On a canvas, and the colour of each cell: an index into the logo's colours.
const ART = String.raw`

                          _pq_
                        _p8888q_
                      _p88888888q_
         \qqqqqqqqqqqp888888888888qqqqqqqqqqqqp
         d8qqqqqqqqq88888888888888888________p8
         d8888888888888888888888888888888888888
         d8888888888888888888888888888888888888
         d8888888888888888888888888888888888888
         d8888888888888888888888888888888888888
        _d8888888888888888888888888888888888888_
      _p8888888888888888888888888888888888888888q_
    _p88888888888888888888P88P88888888888888888888q,
  _p888888888888888888888q, ' _888888888888888888888q,
  "8888888888888888888888P,   )888888888888888888888P"
    "888888888888888888888q88q88888888888888888888P"
      '88888888888888888888888888888888888888888P"
        '88888888888888888888888888888888888888"
         d888888888888888888888888888888888888b
         d888888888888888888888888888888888888b
         d888888888888888888888888888888888888b
         d888888888888888888888888888888888888b
         d888888888888888888888888888888888888b
         """"""""""""8888888888888P""""""""""""
                      "888888888P"
                        "88888P"
                          "8P"

`;
const INK = String.raw`

                          0000
                        00044000
                      000444444000
         00000000000000004444444000000000000000
         00222222220022220444404443000333333300
         00222222002222220444403333330033333330
         00222222022222220444403333333033333330
         00220002220222220444403333303333003330
         00002220022202220444403330033303330030
        0002222222002220204444030033303333333000
      00000222222222002220044400333033333333330000
    000330022222222200002000000330033333333330011000
  0003333333333333333333000 0 001111111111111111111000
  0003333333333333333333000   001111111111111111111000
    000330011111111110001000000440044444444440011000
      00000111111111001110022204444044444444440000
        0001111111001110102222040444404444444000
         00001110011101110222204440444404440000
         00110001110111110222204444404440004440
         00111111011111110222204444444044444440
         00111111001111110222204444440044444440
         00111111110011110222204444004444444440
         00000000000000022222222000000000000000
                      000222222000
                        00022000
                          0000

`;

const START = 0.5; // seconds before the first scan
const PASS = 2; // seconds a scan takes, top to bottom
const HEAD = 2; // rows the line scrambles
const TRAIL = 5; // rows of afterglow behind it
const NOISE = "#$%&*+<=>?@[]{}"; // what the line scrambles the logo into

const lines = (art: string) => art.slice(1, -1).split("\n").map((line) => line.padEnd(meta.cols));

function hash(x: number, y: number, k: number) {
  let h = Math.imul(x, 73856093) ^ Math.imul(y, 19349663) ^ Math.imul(k, 83492791);
  h = Math.imul(h ^ (h >>> 13), 1274126177);
  return (h ^ (h >>> 16)) >>> 0;
}

export default function centos({ scan = meta.options.scan }: Partial<CentosOptions> = {}): Frame {
  const { cols, rows, fps } = meta;
  const mono = lines(MONO), art = lines(ART), ink = lines(INK);
  const n = meta.palette.length / 6;
  const every = scan > 0 ? Math.max(scan, PASS + 0.5) : 0;
  // The line runs from the logo's first row to past its last, rather than the whole frame.
  let first = rows, last = -1;
  for (const pic of [mono, art])
    pic.forEach((line, y) => {
      if (line.trim()) (first = Math.min(first, y)), (last = Math.max(last, y));
    });
  const span = last - first + 1 + HEAD + TRAIL;

  return (t, { paper = false, color } = {}) => {
    const pic = color ? art : mono;
    const since = t - START;
    const at = every && since >= 0 ? first + (span * (since % every)) / PASS : -Infinity;
    const tick = Math.floor((t * fps) / 2); // the noise changes every other frame
    const out: string[] = [];
    for (let y = 0; y < rows; y++) {
      const d = at - y; // rows since the line reached this one
      const level = d >= 0 && d < HEAD ? 2 : d >= HEAD && d < HEAD + TRAIL ? 1 : 0;
      let line = "";
      for (let x = 0; x < cols; x++) {
        let ch = pic[y][x];
        if (ch !== " ") {
          if (level === 2) {
            const h = hash(x, y, tick);
            if (h % 4) ch = NOISE[(h >>> 2) % NOISE.length];
          }
          if (color) color[y * cols + x] = (paper ? 0 : 3 * n) + level * n + parseInt(ink[y][x], 36);
        }
        line += ch;
      }
      out.push(line);
    }
    return out.join("\n");
  };
}