BinaryField09 / 21

Бинарный фон

Добавим автоматически меняющийся бинарный фон.

Результат

Загрузка Canvas…
Управление примером
8
9
0.25

Подготовка примера…

BinaryField.draw() строит узор нулей и единиц. Он не считает время: приложение передаёт целый номер кадра. Одинаковые размеры, seed и кадр дают одинаковую геометрию.

import { Graphics } from 'pixi.js';
import type { Ticker } from 'pixi.js';
import { BinaryField, CyberPreset } from '@gamedevland/cyber-ui';

const pattern = app.stage.addChild(new Graphics());
const bounds = { x: 24, y: 24, w: 360, h: 120 };
let seconds = 0;
let frame = -1;
const tick = (ticker: Ticker) => {
  seconds += ticker.deltaMS / 1000;
  const next = Math.floor(seconds * 8);
  if (next === frame) return;
  frame = next;
  BinaryField.draw(pattern.clear(), bounds, 12, 9, 7291, frame);
  pattern.fill({ color: CyberPreset.palette.accent, alpha: 0.25 });
};
app.ticker.add(tick);

После bounds идут срез угла, размер ячейки, seed и номер кадра. Размер ячейки — не меньше 1. Для почти пустых границ шириной или высотой до 2 единиц внутренний узор не строится.

Узор обновляется восемь раз в секунду. При удалении экрана убираем callback через app.ticker.remove(tick). При reduced motion оставляем кадр 0. Seed сохраняется между кадрами: меняется номер кадра, а не источник случайных чисел.

Источники ↗

Cyber UI Toolkit · BinaryField↗Seed, frame и построение узора.