├── font
    ├── icons.eot
    ├── icons.ttf
    ├── icons.woff
    └── icons.svg
├── img
    ├── low_contrast_linen.png
    ├── alien-avatar-generator.ico
    ├── alien-avatar-generator-preview.jpg
    └── alien-avatar-generator-preview.png
├── README.md
├── index.html
├── css
    └── alien-avatar-generator.css
└── js
    └── alien-avatar-generator.js


/font/icons.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TimPietrusky/alien-avatar-generator/HEAD/font/icons.eot


--------------------------------------------------------------------------------
/font/icons.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TimPietrusky/alien-avatar-generator/HEAD/font/icons.ttf


--------------------------------------------------------------------------------
/font/icons.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TimPietrusky/alien-avatar-generator/HEAD/font/icons.woff


--------------------------------------------------------------------------------
/img/low_contrast_linen.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TimPietrusky/alien-avatar-generator/HEAD/img/low_contrast_linen.png


--------------------------------------------------------------------------------
/img/alien-avatar-generator.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TimPietrusky/alien-avatar-generator/HEAD/img/alien-avatar-generator.ico


--------------------------------------------------------------------------------
/img/alien-avatar-generator-preview.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TimPietrusky/alien-avatar-generator/HEAD/img/alien-avatar-generator-preview.jpg


--------------------------------------------------------------------------------
/img/alien-avatar-generator-preview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TimPietrusky/alien-avatar-generator/HEAD/img/alien-avatar-generator-preview.png


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Alien-Avatar Generator
 2 | 
 3 | ![Alien-Avatar Generator Preview](https://raw.github.com/TimPietrusky/alien-avatar-generator/master/img/alien-avatar-generator-preview.jpg)
 4 | 
 5 | You want to create a freaking **Alien Avatar**? Visit the live page [Alien-Avatar Generator](http://timpietrusky.github.com/alien-avatar-generator). 
 6 | 
 7 | ## More to come in the future
 8 | 
 9 | * Change the background
10 | * Add more items
11 | * Create your personal Avatar with the Avatar-Creator
12 | 
13 | ## Get involved
14 | 
15 | Just create an issue and get going in seconds. 
16 | 
17 | ----
18 | 
19 | 2012 by [Tim Pietrusky](http://timpietrusky.com)


--------------------------------------------------------------------------------
/font/icons.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" standalone="no"?>
 2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
 3 | <svg xmlns="http://www.w3.org/2000/svg">
 4 | <metadata>
 5 | Created by FontForge 20100429 at Sun Oct 14 19:25:01 2012
 6 |  By root
 7 | Copyright (C) 2012 by original authors @ fontello.com
 8 | </metadata>
 9 | <defs>
10 | <font id="icons" horiz-adv-x="364" >
11 |   <font-face 
12 |     font-family="icons"
13 |     font-weight="500"
14 |     font-stretch="normal"
15 |     units-per-em="1000"
16 |     panose-1="2 0 6 3 0 0 0 0 0 0"
17 |     ascent="800"
18 |     descent="-200"
19 |     bbox="0 -150 947 750"
20 |     underline-thickness="50"
21 |     underline-position="-100"
22 |     unicode-range="U+0064-0073"
23 |   />
24 | <missing-glyph 
25 | d="M33 0v666h265v-666h-265zM66 33h199v600h-199v-600z" />
26 |     <glyph glyph-name=".notdef" 
27 | d="M33 0v666h265v-666h-265zM66 33h199v600h-199v-600z" />
28 |     <glyph glyph-name=".null" horiz-adv-x="0" 
29 |  />
30 |     <glyph glyph-name="nonmarkingreturn" horiz-adv-x="333" 
31 |  />
32 |     <glyph glyph-name="d" unicode="d" horiz-adv-x="947" 
33 | d="M0 -46v316q0 8 6 14t14 6h118q8 0 14 -6t6 -14v-178h631v178q0 8 6 14t14 6h118q9 0 14.5 -6t5.5 -14v-316q0 -20 -20 -20h-907q-20 0 -20 20zM178 419.5q3 8.5 20 8.5h158v257q0 16 11 27.5t28 11.5h158q16 0 28 -11.5t12 -27.5v-257h158q15 0 18.5 -8.5t-8.5 -20.5
34 | l-259 -260q-11 -11 -28 -11t-29 11l-259 260q-11 12 -8 20.5z" />
35 |     <glyph glyph-name="g" unicode="g" horiz-adv-x="789" 
36 | d="M0 33v592q0 20 8 38.5t21 31.5t31 21t39 8h592q41 0 69.5 -29t28.5 -70v-592q0 -21 -7.5 -39t-21 -31t-31.5 -21t-38 -8h-592q-41 0 -70 29t-29 70zM99 272q0 -46 11.5 -86.5t43.5 -70.5t90 -47.5t150.5 -17.5t150 17.5t90 47.5t44.5 70.5t12 86.5q0 77 -49 134
37 | q4 17 5 38t-1.5 41t-7.5 38t-13 30h-14q-45 -2 -78.5 -23t-66.5 -39l-7 1q-8 0 -19.5 1t-23.5 1.5t-21 0.5q-19 0 -37 -1t-35 -3l-66 39q-34 21 -78 23h-15q-8 -12 -13 -30t-7.5 -38t-1.5 -41t5 -38q-48 -57 -48 -134zM193 238q15 64 88 71q14 2 28.5 1.5t31.5 -1.5
38 | q7 0 26.5 -1t27 -1t27 1t26.5 1q17 1 32 1.5t27 -1.5q74 -7 90 -71q8 -34 -3.5 -64t-25.5 -44q-21 -21 -69 -33.5t-104 -12.5t-104.5 12.5t-69.5 33.5q-14 14 -25.5 44t-2.5 64zM255 213q0 -24 11.5 -41t28.5 -17t28.5 17t11.5 41t-11.5 40.5t-28.5 16.5t-28.5 -16.5
39 | t-11.5 -40.5zM455 213q0 -24 11.5 -41t28.5 -17t28.5 17t11.5 41t-11.5 40.5t-28.5 16.5t-28.5 -16.5t-11.5 -40.5z" />
40 |     <glyph glyph-name="s" unicode="s" horiz-adv-x="830" 
41 | d="M665 150q62 0 106 -44t44 -106t-44 -106t-106 -44t-106 44t-44 106q0 8 2 24l-261 157q-41 -31 -91 -31q-62 0 -106 44t-44 106t44 106t106 44q50 0 91 -31l261 156q-2 16 -2 25q0 62 44 106t106 44t106 -44t44 -106t-44 -106t-106 -44q-50 0 -91 31l-261 -157
42 | q2 -16 2 -24q0 -9 -2 -25l261 -156q41 31 91 31z" />
43 |   </font>
44 | </defs></svg>
45 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <!doctype html>
 3 | <html lang="en">
 4 | <head>
 5 | 
 6 |     <title>Alien Avatar Generator</title>
 7 | 
 8 |     <meta charset="utf-8">
 9 |     <meta name="author" content="Tim Pietrusky">
10 |     <meta name="robots" content="index,follow">
11 |     <meta name="revisit-after" content="1 days">
12 |     <meta name="description" content="Create a freaking Alien Avatar to be your new best buddy.">
13 | 
14 |     <meta property="og:title" content="Alien Avatar Generator" />
15 |     <meta property="og:description" content="Create a freaking Alien Avatar to be your new best buddy." />
16 |     <meta property="og:image" content="http://timpietrusky.github.com/alien-avatar-generator/img/alien-avatar-generator-preview.jpg" />
17 |     <meta property="og:url" content="http://timpietrusky.github.com/alien-avatar-generator" />
18 | 
19 |     <link rel="stylesheet" href="css/alien-avatar-generator.css">
20 |     <script src="http://raw.github.com/LeaVerou/prefixfree/gh-pages/prefixfree.min.js"></script>
21 | 
22 |     <link rel="shortcut icon" href="img/alien-avatar-generator.ico" type="image/x-icon" />
23 | </head>
24 | 
25 | <body>
26 | 
27 | <section>
28 |     <h1>Alien-Avatar Generator</h1>
29 | </section>
30 | 
31 | <section role="highlight">
32 |     <img class="alien-avatar" role="result" title="Alien Avatar" />
33 | 
34 |     <nav>
35 |         <button role="generate">Random, Baby!</button>
36 |     </nav>
37 | </section>
38 | 
39 | <div class="col-group">
40 | <section role="info" data-icon="d">
41 |     <h2>Download & Usage</h2>
42 | 
43 |     <p>
44 |         <b>Right click</b> on the generated <b>Alien Avatar</b> and <b>save it</b> as an <b>image</b>. 
45 |     </p>
46 |     <p>
47 |         It's <b>free</b>, so use it as you like!
48 |     </p>
49 | </section>
50 | 
51 | <section role="info" data-icon="s">
52 |     <h2>Spread the word</h2>
53 | 
54 |     <p>
55 |         You like this? Share it everywhere!
56 |     </p>
57 | 
58 |         <a href="https://twitter.com/share" class="twitter-share-button" data-text="Create a freaking Alien Avatar!" data-size="large">Tweet</a>
59 |     <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
60 |         
61 | 
62 |         <div class="g-plusone"></div>
63 | </section>
64 | </div>
65 | 
66 | <section role="info" data-icon="g">
67 |     <h2>Get involved</h2>
68 | 
69 |     <p>
70 |         Something is missing? Or not working? You have an awesome idea?   
71 |         <a href="https://github.com/TimPietrusky/alien-avatar-generator" target="_blank">Alien-Avatar Generator on GitHub</a>
72 |     </p>
73 | </section>
74 | 
75 | <footer>
76 |     2012 by <a href="http://timpietrusky.com" target="_blank">Tim Pietrusky</a>
77 | </footer>
78 | 
79 | <canvas id="random_avatar"></canvas>
80 | 
81 | <script type="text/javascript">var _gaq = _gaq || [];_gaq.push(['_setAccount', 'UA-5596313-4']);_gaq.push(['_setDomainName', 'timpietrusky.github.com']);_gaq.push(['_trackPageview']);(function() {var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);})();</script>
82 | 
83 | 
84 | <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
85 | <script src="js/alien-avatar-generator.js"></script>
86 | 
87 | <script type="text/javascript">(function() {var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;po.src = 'https://apis.google.com/js/plusone.js';var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);})();</script>
88 | </body>
89 | </html>


--------------------------------------------------------------------------------
/css/alien-avatar-generator.css:
--------------------------------------------------------------------------------
  1 | @import url(http://fonts.googleapis.com/css?family=Squada+One);
  2 | 
  3 | @font-face {
  4 |   font-family: 'icons';
  5 |   src: url("../font/icons.eot");
  6 |   src: url("../font/icons.eot?#iefix") format('embedded-opentype'), url("../font/icons.woff") format('woff'), url("../font/icons.ttf") format('truetype'), url("../font/icons.svg#icons") format('svg');
  7 |   font-weight: normal;
  8 |   font-style: normal;
  9 | }
 10 | 
 11 | * {
 12 |   box-sizing:border-box;
 13 | }
 14 | 
 15 | html,
 16 | body {
 17 |   height:100%;
 18 |   width:100%;
 19 |   margin:0;
 20 |   padding:0;
 21 | }
 22 | 
 23 | body {
 24 |   background: #222;
 25 |   background: url(../img/low_contrast_linen.png);
 26 |   color:#ccc;
 27 |   font: 1.3em/1.6em sans-serif;
 28 | }
 29 | 
 30 | a {
 31 |   color:#fff;
 32 |   text-decoration:none;
 33 |   display:inline-block;
 34 | 
 35 |   padding: 0 0 .15em 0;
 36 |   border-bottom: 1px solid rgba(255, 255, 255, .2);
 37 |   transition:all .25s ease-in-out;
 38 | }
 39 | 
 40 | a:active {
 41 |   transform: scale(.85);
 42 | }
 43 | 
 44 | a:hover {
 45 |   transform: scale(.85);
 46 |   border-bottom: 1px solid rgba(255, 255, 255, .7);
 47 | }
 48 | 
 49 | h1 {
 50 |   font: 3em 'Squada One', cursive;
 51 |   color:#111;
 52 |   margin:.5em 0;
 53 |   text-shadow: 
 54 |     0 0 10px rgba(200,200,200,.3),
 55 |     0 0 45px rgba(200,200,200,.2),
 56 |     0 -1px 1px #333, 
 57 |     0 1px 1px #666, 
 58 |     0 2px 2px #333;
 59 | }
 60 | 
 61 | h2 {
 62 |   font-size:2.15em;
 63 |   line-height:1.15em;
 64 |   margin:.25em 0;
 65 |   letter-spacing:.05em;
 66 |   text-shadow: 
 67 |     0 0 10px rgba(0, 0, 0, .3),
 68 |     0 0 45px rgba(0, 0, 0, .2);
 69 | }
 70 | 
 71 | canvas {
 72 |   display:none;
 73 | }
 74 | 
 75 | section,
 76 | footer {
 77 |   position:relative;
 78 |   padding:1em 3em;
 79 | }
 80 | 
 81 | section:before {
 82 |   content:attr(data-icon);
 83 |   position:absolute;
 84 |   text-align: right;
 85 |   z-index:-1;
 86 |   right:.5em;
 87 |   top:.1em;
 88 |   font: 10em 'icons';
 89 |   color: rgba(255, 255, 255, .2);
 90 |   text-shadow:0 0 2px (0, 0, 0, .6);
 91 | }
 92 | 
 93 | section:after {
 94 |   content: '';
 95 |   display: table;
 96 |   clear: both;
 97 | }
 98 | 
 99 | section[role="highlight"] {
100 |   padding-top:2em;
101 |   padding-bottom:2em;
102 |   background:rgba(30, 30, 30, .7);
103 |   box-shadow:inset 0 0 .55em rgba(0, 0, 0, .7);
104 | }
105 | 
106 | section[role="info"] {
107 |   margin:.5em 0;
108 |   border-bottom:1em solid rgba(255, 255, 255, .05);
109 | }
110 | 
111 | p {
112 |   background:rgba(0, 0, 0, .3);
113 |   box-shadow:0 0 .2em .1em rgba(0, 0, 0, .5);
114 |   padding:1.25em .75em;
115 | }
116 | 
117 | .alien-avatar {
118 |   float:left;
119 |   box-shadow:0 0 1em rgba(0, 0, 0, .5);
120 |   transition:all .5s ease-in-out;
121 |   animation: flash .45s 1 ease-in-out -.125s;
122 |   margin:0 1em 1em 0;
123 | }
124 | 
125 | @keyframes flash {
126 |   0% {
127 |     transform:scale(.2);
128 |     opacity:.1;
129 |   }
130 |   50% {
131 |     box-shadow:
132 |       0 0 1em rgba(0, 0, 0, .5),
133 |       0 0 4em rgba(160, 160, 160, .8)
134 |     ;
135 |   }
136 |   100% {
137 |     transform:scale(1);
138 |     box-shadow:
139 |       0 0 1em rgba(0, 0, 0, .5),
140 |       0 0 2em rgba(0, 0, 0, .8)
141 |     ;
142 |     opacity:1;
143 |   }
144 | }
145 | 
146 | .goaway {
147 |   position:absolute;
148 |   left:0em;
149 |   animation: goaway .425s 1 ease-out;
150 | }
151 | 
152 | @keyframes goaway {
153 |   0% {}
154 |   100% {
155 |     opacity:0;
156 |     transform:translate(5em, -20em) rotateY(90deg) scale(.2);
157 |   }
158 | }
159 | 
160 | nav {
161 |   float:left;
162 | }
163 | 
164 | 
165 | button {
166 |   font-size:2em;
167 | 
168 |   background-color: rgba(100, 100, 100, .5);
169 |   border: none;
170 |   box-shadow: 
171 |               0 0 1em rgba(0, 0, 0, .5),
172 |               inset 0 -.2em 0 hsla(0,0%,100%,.1),
173 |               inset 0 -.25em 0 hsla(0,0%,0%,.5),
174 |               0 .25em .25em hsla(0,0%,0%,.1);
175 |   color: #222;
176 |   cursor: pointer;
177 |   display: inline-block;
178 |   margin: 0;
179 |   padding: .5em 1.5em .75em;
180 |   text-decoration: none;
181 |   text-shadow: 0 1px 1px hsla(0,0%,100%,.25);
182 |   vertical-align: middle;
183 | 
184 |   transition: all .25s ease-in-out;
185 | }
186 | 
187 | button:hover {
188 |   outline: none;
189 | }
190 | 
191 | button:hover,
192 | button:focus {
193 |   box-shadow: 0 0 1em rgba(0, 0, 0, .5),
194 |               inset 0 -.2em 0 hsla(0,0%,100%,.1),
195 |               inset 0 -.25em 0 hsla(0,0%,0%,.5),
196 |               inset 0 0 0 3em hsla(0,0%,100%,.2),
197 |               0 .25em .25em hsla(0,0%,0%,.1);
198 | }
199 | 
200 | button:active {
201 |   box-shadow: 0 0 1em rgba(0, 0, 0, .5),
202 |               inset 0 0 0 3em hsla(0,0%,100%,.2),
203 |               inset 0 .25em .5em hsla(0,0%,0%,.05),
204 |               0 -1px 1px hsla(0,0%,0%,.1),
205 |               0 1px 1px hsla(0,0%,100%,.25);
206 |   margin-top: .25em;
207 |   outline: none;
208 |   padding-bottom: .5em;
209 | }
210 | 
211 | footer {
212 |   margin:2em 0 0 0;
213 | }
214 | 
215 | /* Equal width 2 columns */
216 | .col-group > section {
217 |   margin-bottom: 1em;
218 | }
219 | 
220 | /* big screens */
221 | @media screen and (min-width: 44em) {
222 |   .col-group {
223 |     overflow: hidden;
224 |     border-bottom:1em solid rgba(255, 255, 255, .05);
225 |   }
226 |   .col-group > section {
227 |     float: left;
228 |     width: 50%;
229 |     border:none;
230 |   }
231 | }
232 | 
233 | /* small screens */
234 | @media screen and (max-width: 44em) {
235 |   section,
236 |   footer {
237 |     padding:1em;
238 |   }
239 | 
240 |   .alien-avatar {
241 |     margin:1em;
242 |   }
243 | 
244 |   .goaway {
245 |     left:1em;
246 |   }
247 | }


--------------------------------------------------------------------------------
/js/alien-avatar-generator.js:
--------------------------------------------------------------------------------
  1 | // Canvas
  2 | var px = 30,
  3 |     px_s = 15;
  4 |   
  5 | // Generate
  6 | var generate = $('button[role="generate"]');
  7 | generate.click(function(e) {
  8 |   Canvas.newAvatar();
  9 | });
 10 | 
 11 | Canvas = {
 12 |   el : {
 13 |     dom : $('#random_avatar').get(0),
 14 |     jq : null,
 15 |     img : null
 16 |   },
 17 |   ctx : null,
 18 |   size : {
 19 |     width : 300,
 20 |     height: 300
 21 |   },
 22 |   
 23 |   init : function() {
 24 |     this.el.jq = $(this.el.dom);
 25 |     this.el.img = $('img[role="result"]');
 26 |     
 27 |     if (this.el.dom.getContext) {
 28 |       this.ctx = this.el.dom.getContext('2d');
 29 |       
 30 |       this.el.jq.attr('width', this.size.width);
 31 |       this.el.jq.attr('height', this.size.height);
 32 | 
 33 |       this.el.img.css('width', this.size.width);
 34 |       this.el.img.css('height', this.size.height);
 35 | 
 36 |       this.newAvatar();
 37 |     } else {
 38 |       // Not supported
 39 |     }
 40 |   }, 
 41 | 
 42 |   newAvatar : function() {
 43 |     // Background gradient
 44 |     var cxlg = this.ctx.createLinearGradient(0, 0, 300, 300);
 45 |     cxlg.addColorStop(0, '#555');
 46 |     cxlg.addColorStop(0.5, '#ccc');
 47 |     cxlg.addColorStop(1.0, '#666');
 48 |     this.ctx.fillStyle = cxlg;
 49 | 
 50 |     this.ctx.fillRect(0,0,300,300);
 51 |     this.ctx.fillRect(300,0,300,300);
 52 |     this.ctx.fillRect(0,300,300,300);
 53 | 
 54 |     // Face
 55 |     face();
 56 | 
 57 |     // Eyes
 58 |     eyes();
 59 | 
 60 |     // Mouth
 61 |     mouth();
 62 | 
 63 |     // Hair
 64 |     hair();
 65 | 
 66 |     // Body
 67 |     body();
 68 | 
 69 |     this.toImg();
 70 |   },
 71 | 
 72 |   toImg : function() {
 73 |     var img_src = this.el.dom.toDataURL("image/png"),
 74 |         old_img = this.el.img,
 75 |         new_img = this.el.img.clone(true);
 76 | 
 77 |     this.el.img.before(new_img);
 78 | 
 79 |     // Warp up old img only if there is a old img
 80 |     if (old_img.attr('src') != undefined) {
 81 |       old_img.addClass('goaway');
 82 | 
 83 |       setTimeout(function() {
 84 |         old_img.remove();
 85 |       }, 400);
 86 |     } else {
 87 |       old_img.remove();
 88 |     }
 89 | 
 90 |     this.el.img = $(new_img);
 91 |     this.el.img.attr('src', img_src);
 92 |   }
 93 | }
 94 | 
 95 | Canvas.init();
 96 | 
 97 | /**
 98 |  * Face
 99 |  */
100 | function face() {
101 |     var faces = [
102 |         [ // F@ face
103 |           [2, 3], [3, 3], [4, 3], [5, 3], [6, 3], [7, 3.5],
104 |           [2, 4], [3, 4], [4, 4], [5, 4], [6, 4], [7, 4],
105 |           [2, 5], [3, 5], [4, 5], [5, 5], [6, 5], [7, 5],
106 |           [2, 6], [3, 6], [4, 6], [5, 6], [6, 6], [7, 5.5],
107 |         ],
108 |         [ // Normal face
109 |           [3, 3], [4, 3], [5, 3], [6, 3],
110 |           [3, 4], [4, 4], [5, 4], [6, 4],
111 |           [3, 5], [4, 5], [5, 5], [6, 5],
112 |           [3, 6], [4, 6], [5, 6],
113 |         ],
114 |         [ // Alien face
115 |           [1, 3], [2, 3], [3, 3], [4, 3], [5, 3], [6, 3], [7, 3], [8, 3],
116 |           [1, 4], [2, 4], [3, 4], [4, 4], [5, 4], [6, 4], [7, 4], [8, 4],
117 |           [3, 5], [4, 5], [5, 5], [6, 5],
118 |           [3, 6], [4, 6], [5, 6],
119 |         ]
120 |     ];
121 | 
122 |     // Face
123 |     draw(
124 |       randomColor(), 
125 |       faces[randomBetween(faces.length)]
126 |     );
127 | }
128 | 
129 | /**
130 |  * Eyes
131 |  */
132 | function eyes() {
133 |     var eyes = [
134 |           [
135 |            [4, 4], [6, 4]
136 |           ]
137 |     ]
138 | 
139 |     // Eyes
140 |     draw(randomColor(), eyes[randomBetween(eyes.length)]);
141 | 
142 |     var pupil = [
143 |          [[4.5, 4], [6.5, 4]],
144 |          [[4.5, 4.5], [6.5, 4.5]],
145 |          [[4, 4.5], [6, 4.5]],
146 |          [[4, 4], [6.5, 4.5]],
147 |          [[4.5, 4.5], [6, 4]],
148 |          []
149 |     ];
150 | 
151 |     // Pupil
152 |     draw(
153 |       randomColor(), 
154 |       pupil[randomBetween(pupil.length)], 
155 |       px_s
156 |     );
157 | }
158 | 
159 | function mouth() {
160 |   // Mouth
161 |   var mouths = [
162 |   	[[4, 6], [5, 6]]
163 |   ];
164 |   
165 |   draw(
166 |     randomColor(), 
167 |     mouths[randomBetween(mouths.length)]
168 |   );
169 |   
170 |   // Decorations
171 |   var decorations = [
172 |   	[[5, 6]],
173 |     [[4, 6], [4.5, 6.5], [5, 6], [5.5, 6.5]],
174 |     []
175 |   ];
176 |   
177 |   draw(
178 |     randomColor(), 
179 |     decorations[randomBetween(decorations.length)],
180 |     px_s
181 |   );
182 | }
183 | 
184 | /**
185 |  * Hair
186 |  */
187 | function hair() {
188 |     var hair = [
189 |           [
190 |                      [4, .5], [5, .5], [6,0],
191 |            [3, 1.5], [4, 1],  [5, 1], [6, 1],
192 |            [3, 2.5], [4, 2],  [5, 2], [6, 2],
193 |           ],
194 |           [
195 |            [4, .5], [5, .5],[6,0],[7,0],
196 |            [2, 1.5],[3, 1.5], [4, 1],  [5, 1], [6, 1],
197 |            [2, 2.5], [3, 2.5], [4, 2],  [5, 2], [6, 2], [7, 2],
198 |           ],
199 |           [
200 |            [4, .5], [5, .5],
201 |            [2, 1.5],[3, 1.5], [4, 1.5],  [5, 1.5], [6, 1.5], [7, 1.5],
202 |            [1, 2.5],[2, 2.5], [3, 2.5], [4, 2.5],  [5, 2.5], [6, 2.5], [7, 2.5], [8, 2.5]
203 |           ],
204 |           [
205 |            [2, .5], [7, .5],
206 |            [2, 1.5], [3, 2], [4, 1.5], [5, 1.5], [6, 2], [7, 1.5],
207 |            [2, 2.5], [4, 2.5],  [5, 2.5], [7, 2.5],
208 |           ],
209 |           []
210 |     ];
211 | 
212 |     draw(
213 |       randomColor(), 
214 |       hair[randomBetween(hair.length)]
215 |     );
216 | }
217 | 
218 | /**
219 |  * Body
220 |  */
221 | function body() {
222 |     var bodys = [
223 |          [
224 |                   [2, 7], [3, 7], [4, 7], [5, 7], [6, 7],
225 |           [1, 8], [2, 8], [3, 8], [4, 8], [5, 8], [6, 8], [7, 8],
226 |           [1, 9], [2, 9], [3, 9], [4, 9], [5, 9], [6, 9], [7, 9]
227 |          ],
228 |          [
229 |           [2, 7], [3, 7], [4, 7], [5, 7], [5, 7], [6, 7], [7, 7],
230 |   [0, 8], [1, 8], [2, 8], [3, 8], [4, 8], [5, 8], [6, 8], [7, 8], [8, 8], [9, 8],
231 |   [0, 9], [1, 9], [2, 9], [3, 9], [4, 9], [5, 9], [6, 9], [7, 9], [8, 9], [9, 9]
232 |          ]
233 |     ];
234 | 
235 |     // Body
236 |     draw(randomColor(), bodys[randomBetween(bodys.length)]);
237 | 
238 |     // Decorations
239 |     var body_decorations = [
240 |            [ // Tie
241 |              [3, 7], [5, 7],
242 |              [4, 8],
243 |              [4, 9],
244 |            ],
245 |            []
246 |     ];
247 | 
248 |     draw(
249 |       randomColor(), 
250 |       body_decorations[randomBetween(body_decorations.length)]
251 |     );
252 | 
253 |     // Decorations 2
254 |     var body_decorations_2 = [
255 |             [
256 |                 [3.5, 7.5], [5, 7], [5, 7],
257 |                 [4, 8],
258 |                 [4, 9],
259 |             ],
260 |             [
261 |              [3, 8.5], [5.5, 8.5],
262 |              [2.5, 9], [6, 9],
263 |              [2.5, 9.5], [5.5, 9.5]
264 |             ],
265 |      ];
266 | 
267 |      draw(
268 |        randomColor(),
269 |        body_decorations_2[randomBetween(body_decorations_2.length)], 
270 |        px_s
271 |      );
272 | }
273 | 
274 | /**
275 |  * Draw something.
276 |  */
277 | function draw(color, coords, size) {
278 |     $.each(coords, function(i, v) {
279 | 
280 |         var _size = px;
281 | 
282 |         if (size != undefined) {
283 |             _size = size;
284 |         }
285 | 
286 |         Canvas.ctx.fillStyle = color;
287 |         Canvas.ctx.fillRect(coords[i][0] * px, coords[i][1] * px, _size, _size);
288 |     });
289 | }
290 | 
291 | /**
292 |  * Return a random value not greater than max.
293 |  */
294 | function randomBetween(max) {
295 |     var r;
296 |     do {r = Math.random();} while(r == 1.0);
297 |     return parseInt(r * max);
298 | }
299 | 
300 | /*
301 |  * Return a random color as hex.
302 |  */
303 | function randomColor() {
304 |     return '#' + Math.floor(Math.random()*16777215).toString(16);
305 | }


--------------------------------------------------------------------------------