Generate Pixel Avatars From Unique Identifiers – Retro Avatar Generator

RetroAvatarGenerator is a lightweight JavaScript library that helps you generate abstract pixel avatars similar to GitHub’s auto-generated profile pictures.

It takes unique identifiers (like user IDs) and converts them into customizable and retro-style avatars using only JavaScript. These avatars are rendered on HTML5 canvas elements, which means they look good at any size.

This library is great for websites and apps that need to show user avatars. Because each avatar is unique to a string, you don’t need to store avatar images. The library creates them for you. This saves space and makes things easier to manage.

Here are some specific ways you could use RetroAvatarGenerator:

• User Profiles: Show a unique avatar next to each user’s name or comment.
• Chat Applications: Give each user a fun, recognizable pixel avatar.
• Leaderboards: Identify players with unique avatars based on their in-game ID.
• Comment Sections: Assign a different avatar to each commenter.

How to use it:

1. Download the Retro Avatar Generator package and include the retro-avatar-generator.js script in your HTML document.

<script src="retro-avatar-generator.js"></script>

2. Add a <span> element with the class retro-avatar where you want the avatar to appear.

<span class="retro-avatar"></span>

3. Utilize the following data-* attributes to customize the avatar:

• data-retro-id: A unique string (like a user ID) that creates a unique avatar. This is required.
• data-retro-size: The size of the avatar in pixels (Defaults to 32).
• data-round: Set to 1 for a circular avatar or 2 for rounded corners (the default is no rounding).
• data-density: Set to 1 for normal pixel density or 2 for fewer, larger pixels (Defaults to 1).

<span class="retro-avatar"
      data-retro-id="cssscript12345"
      data-retro-size="512"
      data-round="2"
      data-density="2"></span>

How it works:

1. Finding Avatar Elements: It finds all HTML elements with the class retro-avatar.
2. Reading Attributes: It reads the data attributes (data-retro-id, data-retro-size, etc.) from each element to determine how the avatar should look.
3. Generating a Seed: It turns the data-retro-id string into a number called a seed. This seed makes sure each unique ID gets a unique avatar.
4. Choosing Colors: It uses the seed to pick two colors: one for the avatar and one for the background. It ensures the colors have enough contrast so the avatar is easy to see.
5. Drawing the Avatar: It creates a high-resolution canvas element and draws the avatar on it pixel by pixel. The left half of the avatar is mirrored to create the right half. The size, density, and rounding are all controlled by the settings you provided.
6. Replacing the Element: It replaces the original <span> element with the new canvas element displaying the avatar.