Slide 1

Slide 1 text

IDENTICON

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

PATTERN Show me the pattern!

Slide 7

Slide 7 text

PATTERN 3X3

Slide 8

Slide 8 text

PATTERN Corners + Edges + Center + Colour

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

PATTERN 16 Tiles in JavaScript

Slide 11

Slide 11 text

UNIQUENESS What choices are available for making this icon?

Slide 12

Slide 12 text

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)

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

GENERATED The username!

Slide 16

Slide 16 text

GENERATED Convert the username to a bit hash using Javascript

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

GENERATED Use the hash to pick characteristics

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

DEMO - DRAWING ON CANVAS

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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