Identicon - An Algorithm Explained

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

Transcript

1. IDENTICON
2. WHO AM I? Jonathan Clarkin @_jrwc jclarkin on Github http://about.me/jclarkin
3. WHAT IS IT? I bet you've seen these avatars in forums before... StackOverflow | GitHub | Wordpress | etc
4. WHAT IS IT? A generated user icon pattern that is unique to each user
5. WHAT IS IT? Demo! JS Fiddle Result JS Fiddle with Code
6. PATTERN Show me the pattern!
7. PATTERN 3X3
8. PATTERN Corners + Edges + Center + Colour
9. PATTERN 16 TILES A set of potential patterns to use to create the icon
10. PATTERN 16 Tiles in JavaScript
11. UNIQUENESS What choices are available for making this icon?
12. 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)
13. UNIQUENESS Lets store this as bits! Total of 22 bits... 4 Million Unique Options !
14. GENERATED What info can we use to generate the unique 22 bits?
15. GENERATED The username!
16. GENERATED Convert the username to a bit hash using Javascript
17. GENERATED Examples: 'Ottawa JS' 1000000110000111010001101010011 'Hackers United' 110000001010000110100111001111110 'Benjamin Sisko' 101101001111010110011010101110001
18. GENERATED Use the hash to pick characteristics
19. GENERATED Use the characteristics to create the icon & Render them to the HTML 5 Canvas
21. 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
22. DEMO - DRAWING ON CANVAS
23. that is to each user FINAL PRODUCT Your identicon! A generated user icon pattern unique
24. GO FORTH and build a custom one! Different Patch Patterns Sizes: 4x4, 8x8, ... Different Symmetries