Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Identicon - An Algorithm Explained

Identicon - An Algorithm Explained

OttawaJS Presentation and live demo of how to create a micro-library for generating identicons using HTML5 and JavaScript.

jclarkin

May 14, 2014
Tweet

More Decks by jclarkin

Other Decks in Technology

Transcript

  1. WHO AM I?
    Jonathan Clarkin
    @_jrwc
    jclarkin on Github
    http://about.me/jclarkin

    View full-size slide

  2. WHAT IS IT?
    I bet you've seen these avatars in forums before...
    StackOverflow | GitHub | Wordpress | etc

    View full-size slide

  3. WHAT IS IT?
    A generated user icon pattern
    that is unique to each user

    View full-size slide

  4. WHAT IS IT?
    Demo!
    JS Fiddle Result
    JS Fiddle with Code

    View full-size slide

  5. PATTERN
    Show me the pattern!

    View full-size slide

  6. PATTERN
    Corners + Edges + Center
    +
    Colour

    View full-size slide

  7. PATTERN
    16 TILES
    A set of potential patterns to use to create the icon

    View full-size slide

  8. PATTERN
    16 Tiles in JavaScript

    View full-size slide

  9. UNIQUENESS
    What choices are available for making this icon?

    View full-size slide

  10. UNIQUENESS
    CORNERS (SAME FOR EDGES)
    24 - Pattern choices (16 defined)
    21 - Invert Colour Scheme choices (Yes or No)
    22 - Pattern rotation choices (although some may be identical)
    MIDDLE
    22 - Pattern choices (only 4 symmetric patterns in the set)
    21 - Invert Colour Scheme choices (Yes or No)
    COLOUR
    25 - Red Pallet choices (limited to 32)
    25 - Blue Pallet choices (limited to 32)
    25 - Green Pallet choices (limited to 32)

    View full-size slide

  11. UNIQUENESS
    Lets store this as bits!
    Total of 22 bits... 4 Million Unique Options !

    View full-size slide

  12. GENERATED
    What info can we use
    to generate the unique 22 bits?

    View full-size slide

  13. GENERATED
    The username!

    View full-size slide

  14. GENERATED
    Convert the username to a bit hash
    using Javascript

    View full-size slide

  15. GENERATED
    Examples:
    'Ottawa JS'
    1000000110000111010001101010011
    'Hackers United'
    110000001010000110100111001111110
    'Benjamin Sisko'
    101101001111010110011010101110001

    View full-size slide

  16. GENERATED
    Use the hash to pick characteristics

    View full-size slide

  17. GENERATED
    Use the characteristics to create the icon
    & Render them to the HTML 5 Canvas

    View full-size slide

  18. DRAW TO THE CANVAS
    v
    a
    r n
    o
    d
    e = d
    o
    c
    u
    m
    e
    n
    t
    .
    q
    u
    e
    r
    y
    S
    e
    l
    e
    c
    t
    o
    r
    (
    '
    c
    a
    n
    v
    a
    s
    '
    )
    ;
    v
    a
    r c
    t
    x = n
    o
    d
    e
    .
    g
    e
    t
    C
    o
    n
    t
    e
    x
    t
    (
    "
    2
    d
    "
    )
    ;
    /
    / S
    e
    t
    u
    p t
    h
    e d
    e
    f
    a
    u
    l
    t p
    a
    i
    n
    t
    b
    r
    u
    s
    h a
    n
    d s
    a
    v
    e
    c
    t
    x
    .
    f
    i
    l
    l
    S
    t
    y
    l
    e = "
    w
    h
    i
    t
    e
    "
    ;
    c
    t
    x
    .
    s
    a
    v
    e
    (
    )
    ; /
    / R
    e
    s
    t
    o
    r
    e P
    o
    i
    n
    t
    /
    / p
    a
    i
    n
    t b
    a
    c
    k
    g
    r
    o
    u
    n
    d w
    h
    i
    t
    e
    c
    t
    x
    .
    f
    i
    l
    l
    R
    e
    c
    t
    (
    x
    , y
    , s
    i
    z
    e
    , s
    i
    z
    e
    )
    ;
    /
    / S
    e
    t
    u
    p t
    h
    e c
    o
    l
    o
    u
    r
    e
    d p
    a
    i
    n
    t
    b
    r
    u
    s
    h
    c
    t
    x
    .
    f
    i
    l
    l
    S
    t
    y
    l
    e = "
    f
    u
    c
    h
    s
    i
    a
    "
    ;
    /
    / D
    r
    a
    w P
    a
    t
    c
    h
    c
    t
    x
    .
    b
    e
    g
    i
    n
    P
    a
    t
    h
    (
    )
    ;
    c
    t
    x
    .
    m
    o
    v
    e
    T
    o
    (
    x
    ,
    y
    )
    ;
    c
    t
    x
    .
    l
    i
    n
    e
    T
    o
    (
    x
    ,
    y
    )
    ;
    .
    .
    . f
    o
    r a
    l
    l c
    o
    o
    r
    d
    i
    n
    a
    t
    e
    s o
    f t
    h
    e s
    h
    a
    p
    e .
    .
    .
    c
    t
    x
    .
    c
    l
    o
    s
    e
    P
    a
    t
    h
    (
    )
    ;
    c
    t
    x
    .
    f
    i
    l
    l
    (
    )
    ; /
    /
    d
    r
    a
    w t
    o s
    c
    r
    e
    e
    n
    c
    t
    x
    .
    r
    e
    s
    t
    o
    r
    e
    (
    )
    ; /
    / R
    e
    s
    t
    o
    r
    e b
    a
    c
    k t
    o w
    h
    i
    t
    e

    View full-size slide

  19. DEMO - DRAWING ON CANVAS

    View full-size slide

  20. that is to each user
    FINAL PRODUCT
    Your identicon!
    A generated user icon pattern
    unique

    View full-size slide

  21. GO FORTH
    and build a custom one!
    Different Patch Patterns
    Sizes: 4x4, 8x8, ...
    Different Symmetries

    View full-size slide