Figures: API reference

Two entries: the main one, which runs anywhere, Node included, and @cesarvenzac/figures/react.

The main entry

figureFor(seed)

A figure made from any word: the same word, the same figure.

function figureFor(seed: string): Figure;

readFigure(value), isFigure(value)

A stored figure read back, any part missing or unknown taken from DEFAULT_FIGURE; and whether a value is a whole figure.

function readFigure(value: unknown): Figure;
function isFigure(value: unknown): value is Figure;

reactionTo(from, to)

The reaction a figure plays as its mood changes from one to the other, or null.

function reactionTo(from: Mood, to: Mood): Once | null;

svgOf(figure, expression?, colours?, size?, id?)

A figure as an SVG file, seen from the front.

function svgOf(
  figure: Figure,
  expression?: Expression, // "neutral"
  colours?: Partial<Colourway & { ink: string }>,
  size?: number, // 100
  id?: string, // "figure", its gradient's name
): string;

Types

type Shape = "cube" | "sphere" | "pyramid" | "block" | "cloud";
type Energy = "calm" | "lively" | "bouncy";
type Habit = "look" | "hum" | "nap" | "spin" | "wave" | "morph";
type Palette = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
type Figure = {
  shape: Shape;
  energy: Energy;
  habit: Habit;
  palette: Palette;
};
type Mood =
  | "idle" | "thinking" | "working"
  | "happy" | "trouble" | "sleep";
type Expression = (typeof EXPRESSIONS)[number];
type Loop = (typeof LOOPS)[number];
type Reaction = (typeof REACTIONS)[number];
type Once = (typeof ONCE)[number]; // a move or a reaction
type Motion = Loop | Once;
type Colourway = { main: string; light: string; deep: string };

Constants

SHAPES, ENERGIES, HABITS, PALETTES, MOODS: every value of each.
EXPRESSIONS: the fourteen faces.
LOOPS: how a figure moves while it stays in a mood: breathe, work, think, float, rest, worry.
MOVES and REACTIONS, both in ONCE, and every loop and move in MOTIONS.
COLOURWAYS: the eight colourways, by number. INK: the eyes' near black.
DEFAULT_FIGURE: what readFigure fills in from, a lively sphere in blue that looks around.

@cesarvenzac/figures/react

AgentFigure

A live figure, drawn with WebGL 2. Moods and moves says what each prop does.

function AgentFigure(props: {
  figure: Figure;
  mood?: Mood; // "idle"
  expression?: Expression; // in place of its mood's
  motion?: Motion; // a loop, in place of its mood's
  play?: { motion: Motion; at: number }; // a move, now
  size?: number; // its box, in pixels: 48
  look?: boolean; // follows the pointer: true
  react?: boolean; // smiles when what it's in is hovered: true
  pet?: boolean; // petted when clicked: true
  still?: boolean; // drawn once: false
  grab?: boolean; // turned by dragging: false
  drain?: number; // 0 to 1, greys it: 0
  aim?: { x: number; y: number }; // where it looks, −1 to 1
  lift?: (now: number) => number; // off the ground, 0 to 1
  colours?: Colourway; // its colourway's
  ink?: string; // INK
  className?: string;
  style?: CSSProperties; // after its own
}): JSX.Element;

AgentDot

A figure's colours alone, as a dot.

function AgentDot(props: {
  figure: Figure;
  colours?: Colourway; // its colourway's
  size?: number; // 8
  className?: string;
  style?: CSSProperties;
}): JSX.Element;