Have ideas to improve npm?Join in the discussion! »

    @fractalsoftware/random-avatar-generator
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.6 • Public • Published

    Random Avatar Generator

    LICENSE Node.js CI Node.js Package

    A random pixel pattern generator with low collision and zero external dependencies.

    sample

    Demo

    https://morra.co/random-avatar-generator

    Introduction

    As part of an academic publication and a side project, I built this simple library to ilustrate different aspects of the JavaScript language capabilities and ecosystem, mixed with some general software development concepts.

    This library can produce a random svg code for a given complexity with the following logic:

    • For a given complexity positive integer number a couple of numbers representing x and y axes random binary numbers are generated.
    • XOR computed value enables one position within the matrix of values.
    • In order to have bigger numeric space to prevent collision, each row within the matrix has a random color number.

    Installation

    $ npm install @fractalsoftware/random-avatar-generator
    

    Usage

    How to generate a random pattern:

    In browser

    <script src="random-avatar-generator.js"></script>
    
    <div id="randomavatar"></div>
    
    <script>
      document.getElementById(
        "randomavatar"
      ).innerHtml = randomAvatarGenerator.getRandomAvatar(8);
    </script>

    In NodeJS

    const randomAvatarGenerator = require("random-avatar-generator");
    
    // Using default method parameters
    fs.writeFileSync("avatar.svg", randomAvatarGenerator.getRandomAvatar());

    In React

    import { getRandomAvatar } from "@fractalsoftware/random-avatar-generator";
    
    const avatar = getRandomAvatar();
    cons inlineAvatar = <img src={`data:image/svg+xml;base64,${btoa(avatar)}`} />;

    Controlled use

    You can also generate the avatar data definition and then generate the SVG string with the following methods:

    const avatarData = randomAvatarGenerator.generateRandomAvatarData();
    const svgCode = randomAvatarGenerator.getAvatarFromData(avatarData);

    In this way, you can keep track of the avatar code and repaint it when needed.

    Options

    These are the general parameters available in the library API:

    complexity

    This parameter determines the bits length of the x and y axes randomly generated numbers.

    size

    The purpose of this optional parameter is the inner calculations of the SVG paths. As the output is a scalable vector, dimensions are almost irrelevant, but we prefered to keep this parameter available on the the library API.

    renderMethod

    As each enabled position within the SVG output can be rendered independently, the API allows the selection of the way it will be draw. There are defined two methods for this property: square (default) and circle. But also it's possible to extend it defining a custom callback that must output a string with a valid SVG path.

    This is an example of a custom callback that can be used in this parameter:

    const drawTriangle = (resolution, indexX, indexY) => `M${(indexX * resolution) + (resolution / 2)},${indexY * resolution} l${resolution / 2} ${resolution} l-${resolution} 0z`;
    // Output example: M76.5,0 l25.5 51 l-51 0z

    in wich

    resolution is function of the relation between size and complexity or the size of each cell to be draw:

    const resolution = Math.floor(size / complexity);

    and

    indexX and indexY are the selected cell coordinates to be draw.

    With this parameters you'll be able to define the absolute position within the draw area and the dimensions of each cell.

    More information about SVG paths here: Paths - SVG: Scalable Vector Graphics | MDN.

    Available methods

    generateRandomAvatarData

    Returns a randomly generated string representation code of an avatar for a given complexity.

    Usage

    const avatarData = randomAvatarGenerator.generateRandomAvatarData(3);
    // Output example: 0-6-6te25-9d9p0-xd5g

    Arguments

    name type description
    complexity number (optional) Default value: 16
    avatarDataSeparator string (optional) Default value: -

    getAvatarFromData

    Returns a string with a valid SVG markup for a given avatarData.

    Usage

    randomAvatarGenerator.getAvatarFromData("0-6-6te25-9d9p0-xd5g");
    // Output: <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 256 256"><path fill="#aeb26d" d="M0,0 h85 v85 h-85Z M85,0 h85 v85 h-85Z M170,0 h85 v85 h-85Z"/><path fill="#f01b54" d="M0,85 h85 v85 h-85Z M85,85 h85 v85 h-85Z M170,85 h85 v85 h-85Z"/><path fill="#17c0d4" d=""/></svg>

    Arguments

    name type description
    avatarData string (required) A valid avatar data code
    renderMethod string or function (optional) Default value: square
    size number (optional) Default value: 256
    avatarDataSeparator string (optional) Default value: -

    getRandomAvatar

    A simpler helper that returns a random SVG markup for a give complexity

    Usage

    const randomAvatar = randomAvatarGenerator.getRandomAvatar(4);
    // Output example: <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 256 256"><path fill="#fbdfae" d="M0,0 h64 v64 h-64Z M128,0 h64 v64 h-64Z"/><path fill="#1ad956" d="M0,64 h64 v64 h-64Z M128,64 h64 v64 h-64Z"/><path fill="#f26f0b" d="M64,128 h64 v64 h-64Z M192,128 h64 v64 h-64Z"/><path fill="#38b27d" d="M0,192 h64 v64 h-64Z M128,192 h64 v64 h-64Z"/></svg>

    Arguments

    name type description
    complexity number (optional) Default value: 16
    renderMethod string or function (optional) Default value: square
    size number (optional) Default value: 256

    License

    The code is available under the MIT license.

    Install

    npm i @fractalsoftware/random-avatar-generator

    DownloadsWeekly Downloads

    5

    Version

    1.0.6

    License

    ISC

    Unpacked Size

    66.3 kB

    Total Files

    22

    Last publish

    Collaborators

    • avatar
    • avatar