Open Peeps: Accessories Components

Relevant source files

The following files were used as context for generating this wiki page:

• packages/avatar/src/config/accessories.ts
• packages/avatar/src/open-peeps/components/accessories.ts
• packages/avatar/src/config/avatar.ts
• packages/avatar/src/open-peeps/types.ts
• packages/avatar/src/open-peeps/utils/getComponents.ts
• packages/avatar/src/open-peeps/index.ts
• packages/avatar/src/open-peeps/schema.ts

Accessories are optional SVG elements that can be added to an avatar to provide additional character, such as glasses or an eyepatch. They are part of the "Open Peeps" avatar style. The inclusion of an accessory on a generated avatar is determined by a configurable probability, making them a random feature.

The system allows for a predefined set of accessories to be chosen from. Each accessory is a distinct SVG path that is layered on top of the base avatar during the rendering process. The selection and rendering are handled within the core avatar generation logic, ensuring seamless integration.

Architecture and Configuration

The accessories feature is primarily controlled by two options within the OpenPeepsOptions interface: accessories (an array of accessory names to choose from) and accessoriesProbability (a number from 0 to 100 representing the chance of an accessory being added).

Sources: packages/avatar/src/open-peeps/types.ts:5-7

Default Configuration

The default configuration for avatars is defined in AVATAR_CONFIG. It sets the probability of an accessory appearing to 20% and includes all available accessories in the potential selection pool.

export const AVATAR_CONFIG = {
  accessoriesProbability: 20,
  accessories: ALL_ACCESSORIES,
} satisfies Partial<OpenPeepsOptions>

Sources: packages/avatar/src/config/avatar.ts:15-19

The ALL_ACCESSORIES constant imports all defined accessory names.

import type { Accessories } from '../open-peeps/types'

export const ALL_ACCESSORIES: Accessories[] = [
  'eyepatch',
  'glasses',
  'glasses2',
  'glasses3',
  'glasses4',
  'glasses5',
  'sunglasses',
  'sunglasses2',
]

Sources: packages/avatar/src/config/accessories.ts:1-13

Configuration Options

The following table details the configuration options available for accessories within OpenPeepsOptions.

Option	Type	Description	Default Value
accessories	Accessories[]	An array of accessory names to be considered for random selection.	ALL_ACCESSORIES
accessoriesProbability	number	An integer between 0 and 100 representing the probability of adding an accessory.	20

Sources: packages/avatar/src/open-peeps/types.ts:5-7, packages/avatar/src/config/avatar.ts:16-17, packages/avatar/src/open-peeps/schema.ts:4-28

Component Selection Logic

The decision to add an accessory and which one to use is handled in the getComponents utility function. The process follows a clear probabilistic flow.

This diagram illustrates the selection flow for an accessory component.

First, a specific accessory is randomly chosen from the list provided in the options using pickComponent. Then, a boolean check against accessoriesProbability determines if the chosen accessory will actually be included in the final avatar. If the check fails, no accessory is added.

// packages/avatar/src/open-peeps/utils/getComponents.ts:20-29
  const accessoriesComponent = pickComponent({
    prng,
    group: 'accessories',
    values: options.accessories,
  })

  return {
    // ... other components
    accessories: prng.bool(options.accessoriesProbability)
      ? accessoriesComponent
      : undefined,
  }

Sources: packages/avatar/src/open-peeps/utils/getComponents.ts:20-29

Available Accessories

The library provides a set of predefined accessories. Each corresponds to a specific SVG graphic.

Accessory Name
eyepatch
glasses
glasses2
glasses3
glasses4
glasses5
sunglasses
sunglasses2

Sources: packages/avatar/src/open-peeps/types.ts:77-86, packages/avatar/src/config/accessories.ts:3-12

SVG Component Definitions

The actual SVG path data for each accessory is stored in packages/avatar/src/open-peeps/components/accessories.ts. Each key in the accessories object corresponds to an accessory name and its value is a function that returns the SVG <path> string.

Example of the eyepatch component:

// packages/avatar/src/open-peeps/components/accessories.ts:4-5
export const accessories: ComponentGroup = {
  eyepatch: () =>
    `<path fill-rule="evenodd" clip-rule="evenodd" d="M26.3 125.5c-2-1-3.6-3.3-3.6-5.8 0-4.3 3.3-7.8 7.3-7.8h1.8c12.2 0 22-9.8 22-22s-9.8-22-22-22h-1.8c-4 0-7.3-3.5-7.3-7.8s3.3-5.8 7.3-5.8h1.8c21 0 38 17 38 38s-17 38-38 38h-1.8Z" fill="#000"/>`,
  // ... other accessories
}

Sources: packages/avatar/src/open-peeps/components/accessories.ts

SVG Rendering

The selected accessory component is rendered into the final SVG inside the create function of the Open Peeps style. It is placed within a <g> (group) element with a specific transform attribute to position it correctly over the avatar's face. If no accessory is selected, this part of the SVG string is empty.

// packages/avatar/src/open-peeps/index.ts:38
<g transform="translate(203 303)">${components.accessories?.value(colors) ?? ''}</g>

The translate(203 303) transformation moves the accessory's coordinate system to the correct position on the 704x704 viewBox.

Sources: packages/avatar/src/open-peeps/index.ts:31,38

Schema Definition

The JSON schema for open-peeps formally defines the types and constraints for the accessories and accessoriesProbability properties. This is used for validation and documentation.

Property	Type	Constraints	Default Value
accessories	array	Items must be strings from a predefined enum.	['eyepatch', 'glasses', 'glasses2', 'glasses3', 'glasses4', 'glasses5', 'sunglasses', 'sunglasses2']
accessoriesProbability	integer	minimum: 0, maximum: 100	20

Sources: packages/avatar/src/open-peeps/schema.ts:4-28

This schema ensures that any provided options for accessories are valid before the avatar generation process begins.