zorin os

the z in blue stripes, scanned now and then

distros 64×28 30 fps in colour or one ink 6.7 kB

Yours? The readme snippet puts it in your README, moving, in GitHub's light and dark themes. A post with the video or GIF from the downloads moves too; a link alone shows its card, which holds still.

use it

[docs][copy it in]

html

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

<ascii-art piece="zorin-os" 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="zorin-os" mono>, for one ink.

react

// git clone https://github.com/jamesnavinhill/ascii
import { Ascii } from "ascii.rest/react";
import { zorinOs } from "ascii.rest/pieces";

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

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

astro

---
// git clone https://github.com/jamesnavinhill/ascii
import Ascii from "ascii.rest/astro";
---

<Ascii piece="zorin-os" 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

// git clone https://github.com/jamesnavinhill/ascii
import { mount } from "ascii.rest";
import { zorinOs } from "ascii.rest/pieces";

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

terminal

npx ascii.rest zorin-os

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("zorin-os", { seconds: 2 }) from ascii.rest/terminal shows it as a splash screen.

readme

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="https://ascii.navinhill.com/svg/zorin-os.dark.svg">
  <img alt="zorin os" src="https://ascii.navinhill.com/svg/zorin-os.svg" width="320">
</picture>
zorin os, as a light README shows it
light, zorin-os.svg
zorin os, as a dark README shows it
dark, zorin-os.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.

zorin-os.ts

[js] [github] 
/*
 * zorin os: the Zorin OS logo, a z in stripes, with a scan line running down
 * it every few seconds that scrambles what it passes.
 *
 * Drawn from Simple Icons' zorin.svg (CC0): 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 the same drawing.
 * The logo is a trademark of its owner, shown here to name the distribution.
 */
import type { Frame, Meta } from "../types.ts";

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

export const meta = {
  name: "zorin os",
  category: "distros",
  note: "the z in blue stripes, scanned now and then",
  cols: 64,
  rows: 28,
  fps: 30,
  options: { scan: 5 },
  // The logo's colour for a light page, then for a dark one; each as drawn, then twice lighter for the scan.
  palette: [
    "#15a6f0", "#67c5f5", "#b9e4fb", "#15a6f0", "#67c5f5", "#b9e4fb",
  ],
} satisfies Meta<ZorinOsOptions>;

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

                q888888888888888888888888888888p
              .p88888888888888888888888888888888q,
             _p8888888888888888888888888888888888q,
            _88888888888888888888888888888888888888,
            """"""""""""""""""""""""""""""""""""""""



      ._______________________________,                 _,
     _p8888888888888888888888888888P"               __p88q,
    _88888888888888888888888888P"'              ._p88888888,
   _888888888888888888888888P"               _pp888888888888_
  q888888888888888888888P"               __p88888888888888888p
  "88888888888888888P"'              ._p888888888888888888888"
   "8888888888888P"               _pp88888888888888888888888"
    "88888888P"               __p88888888888888888888888888"
     '888P"'              ._p88888888888888888888888888888'
      '"                 """"""""""""""""""""""""""""""""'



            ________________________________________
            "88888888888888888888888888888888888888"
             '88888888888888888888888888888888888P'
               888888888888888888888888888888888P
                Y888888888888888888888888888888P

`;

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

                q888888888888888888888888888888p
              .p88888888888888888888888888888888q,
             _p8888888888888888888888888888888888q,
            _88888888888888888888888888888888888888,
            """"""""""""""""""""""""""""""""""""""""



      ._______________________________,                 _,
     _p8888888888888888888888888888P"               __p88q,
    _88888888888888888888888888P"'              ._p88888888,
   _888888888888888888888888P"               _pp888888888888_
  q888888888888888888888P"               __p88888888888888888p
  "88888888888888888P"'              ._p888888888888888888888"
   "8888888888888P"               _pp88888888888888888888888"
    "88888888P"               __p88888888888888888888888888"
     '888P"'              ._p88888888888888888888888888888'
      '"                 """"""""""""""""""""""""""""""""'



            ________________________________________
            "88888888888888888888888888888888888888"
             '88888888888888888888888888888888888P'
               888888888888888888888888888888888P
                Y888888888888888888888888888888P

`;
const INK = String.raw`

                00000000000000000000000000000000
              000000000000000000000000000000000000
             00000000000000000000000000000000000000
            0000000000000000000000000000000000000000
            0000000000000000000000000000000000000000



      000000000000000000000000000000000                 00
     00000000000000000000000000000000               0000000
    000000000000000000000000000000              000000000000
   000000000000000000000000000               0000000000000000
  000000000000000000000000               000000000000000000000
  000000000000000000000              0000000000000000000000000
   0000000000000000               000000000000000000000000000
    00000000000               000000000000000000000000000000
     0000000              000000000000000000000000000000000
      00                 000000000000000000000000000000000



            0000000000000000000000000000000000000000
            0000000000000000000000000000000000000000
             00000000000000000000000000000000000000
               0000000000000000000000000000000000
                00000000000000000000000000000000

`;

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 zorinOs({ scan = meta.options.scan }: Partial<ZorinOsOptions> = {}): 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");
  };
}