update launcher icon generator to material design - refs romannurik#12

square boilerplate and first attempt at long shadow

add foreground stencil

render longshadow and foreground separately

performance

cleanup

circle boilerplates

cleanup and remove inner mask

material keyline shapes

defaults

add score, elevate effects and form toggles

don't skew Roman's analytics

fix keyline shape crop dimensions

add dog-ear effect

new launcher asset stencils

put rectangles back on grid

remove elevate option

better defaults, output to mipmap- folders

src/html/icons-launcher.html

@@ -62,7 +62,7 @@
       }
 
       .out-image-group {
-        background-image: url(https://docs.google.com/uc?export=download&id=0BxEWAcbuDzg1dFRmYnZScWpfNU0);
+        background-image: url(https://docs.google.com/uc?export=download&id=0B328pHcnJU0QaVhOQnNqR3A1NDg);
         background-size: cover;
       }
     </style>
@@ -83,7 +83,6 @@ <h3>
         </h3>
       </div>
       <div id="footer">
-        <p>Based on the launcher boilerplates from <a href="http://www.androidicons.com/">androidicons.com</a>, with permission.</p>
         <p>See the <a href="https://github.com/romannurik/AndroidAssetStudio">source on GitHub</a>.</p>
         <p>All generated art is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution 3.0 Unported License</a>. <a href="attribution.html">Attribution info</a></p>
       </div>
@@ -116,8 +115,8 @@ <h3>
       // Load image resources (stencils)
       var resList = {};
       for (var density in DENSITIES)
-        for (var backgroundShape in {'square':1, 'circle':1})
-          for (var type in {'back':1, 'fore1':1, 'mask':1, 'mask_inner':1})
+        for (var backgroundShape in {'square':1, 'circle':1, 'vrect':1, 'hrect':1, 'square-dogear':1, 'vrect-dogear':1, 'hrect-dogear':1})
+          for (var type in {'back':1, 'fore1':1, 'mask':1})
             resList[backgroundShape + '-' + density + '-' + type] = (
               'res/launcher-stencil/' + backgroundShape + '/' + density + '/' + type + '.png');
 
@@ -142,13 +141,33 @@ <h3>
         'hdpi-none-targetRect': { x:  4, y:  4, w:  64, h:  64 },
         'mdpi-none-targetRect': { x:  3, y:  3, w:  42, h:  42 },
 
-         'web-circle-targetRect': { x: 32, y: 43, w: 448, h: 448 },
-        'hdpi-circle-targetRect': { x:  4, y:  6, w:  64, h:  64 },
-        'mdpi-circle-targetRect': { x:  3, y:  4, w:  42, h:  42 },
+         'web-circle-targetRect': { x: 21, y: 21, w: 470, h: 470 },
+        'hdpi-circle-targetRect': { x:  3, y:  3, w:  66, h:  66 },
+        'mdpi-circle-targetRect': { x:  2, y:  2, w:  44, h:  44 },
 
-         'web-square-targetRect': { x: 32, y: 53, w: 448, h: 427 },
-        'hdpi-square-targetRect': { x:  4, y:  8, w:  64, h:  60 },
-        'mdpi-square-targetRect': { x:  3, y:  5, w:  42, h:  40 }
+         'web-square-targetRect': { x: 53, y: 53, w: 406, h: 406 },
+        'hdpi-square-targetRect': { x:  7, y:  7, w:  57, h:  57 },
+        'mdpi-square-targetRect': { x:  5, y:  5, w:  38, h:  38 },
+
+         'web-vrect-targetRect': { x: 85, y: 21, w: 342, h: 470 },
+        'hdpi-vrect-targetRect': { x: 12, y:  3, w:  48, h:  66 },
+        'mdpi-vrect-targetRect': { x:  8, y:  2, w:  32, h:  44 },
+
+         'web-hrect-targetRect': { x: 21, y: 85, w: 470, h: 342 },
+        'hdpi-hrect-targetRect': { x:  3, y: 12, w:  66, h:  48 },
+        'mdpi-hrect-targetRect': { x:  2, y:  8, w:  44, h:  32 },
+
+        'web-square-dogear-targetRect': { x: 53, y: 149, w: 406, h: 312 },
+       'hdpi-square-dogear-targetRect': { x:  7, y:  21, w:  57, h:  43 },
+       'mdpi-square-dogear-targetRect': { x:  5, y:  14, w:  38, h:  29 },
+
+        'web-vrect-dogear-targetRect': { x: 85, y: 117, w: 342, h: 374 },
+       'hdpi-vrect-dogear-targetRect': { x: 12, y:  17, w:  48, h:  52 },
+       'mdpi-vrect-dogear-targetRect': { x:  8, y:  11, w:  32, h:  35 },
+
+        'web-hrect-dogear-targetRect': { x: 21, y: 85, w: 374, h: 342 },
+       'hdpi-hrect-dogear-targetRect': { x:  3, y: 12, w:  52, h:  48 },
+       'mdpi-hrect-dogear-targetRect': { x:  2, y:  8, w:  35, h:  32 }
       };
 
       /**
@@ -176,6 +195,11 @@ <h3>
 
         var continue_ = function(foreCtx) {
           var backgroundShape = values['backgroundShape'];
+          if (values['effects'] == 'dogear' &&
+             (backgroundShape == 'square' || backgroundShape == 'hrect' || backgroundShape == 'vrect')) {
+            backgroundShape = backgroundShape + '-dogear';
+          }
+
           for (var density in DENSITIES) {
             var mult = studio.util.getMultBaseMdpi(density);
             if (density == 'web') {
@@ -298,11 +322,6 @@ <h3>
               if (foreCtx) {
                 var tmpCtx2 = imagelib.drawing.context(iconSize);
                 tmpCtx2.save();
-                tmpCtx2.globalCompositeOperation = 'source-over';
-                imagelib.drawing.copy(tmpCtx2, IMAGE_RESOURCES[backgroundShape + '-' + density + '-mask_inner'], iconSize);
-                tmpCtx2.globalCompositeOperation = 'source-atop';
-                tmpCtx2.fillStyle = values['backColor'].color;
-                tmpCtx2.fillRect(0, 0, iconSize.w, iconSize.h);
 
                 var copyFrom = foreCtx;
                 var foreSize = {
@@ -320,13 +339,34 @@ <h3>
                   tmpCtx.globalAlpha = values['foreColor'].alpha / 100;
                 }
 
+                if (values['effects'] == 'shadow') {
+                  // Render at the target size for performance reasons.
+                  // Apply it separately from the foreground to avoid
+                  // edge aliasing artifacts.
+                  var tmpCtx4 = imagelib.drawing.context(iconSize);
+                  imagelib.drawing[values['crop'] ? 'drawCenterCrop' : 'drawCenterInside']
+                    (tmpCtx4, copyFrom, targetRect, {
+                      x: 0, y: 0,
+                      w: foreSize.w, h: foreSize.h
+                    });
+                  imagelib.effects.renderLongShadow(tmpCtx4, iconSize.w, iconSize.h);
+                  imagelib.drawing.copy(tmpCtx2, tmpCtx4, iconSize);
+                }
+
                 imagelib.drawing[values['crop'] ? 'drawCenterCrop' : 'drawCenterInside']
                   (tmpCtx2, copyFrom, targetRect, {
                     x: 0, y: 0,
                     w: foreSize.w, h: foreSize.h
                   });
 
                 imagelib.drawing.copy(tmpCtx, tmpCtx2, iconSize);
+
+                if (values['effects'] == 'score') {
+                  var tmpCtx5 = imagelib.drawing.context(iconSize);
+                  imagelib.effects.renderScore(tmpCtx5, iconSize.w, iconSize.h);
+                  imagelib.drawing.copy(tmpCtx, tmpCtx5, iconSize);
+                }
+
               }
               tmpCtx.restore();
 
@@ -339,7 +379,7 @@ <h3>
             zipper.add({
               name: (density == 'web') ?
                   ('web_hi_res_512.png') :
-                  ('res/drawable-' + density + '/ic_launcher.png'),
+                  ('res/mipmap-' + density + '/ic_launcher.png'),
               base64data: outCtx.canvas.toDataURL().match(/;base64,(.+)/)[1]
             });
 
@@ -371,7 +411,7 @@ <h3>
           new studio.forms.ColorField('foreColor', {
             title: 'Color',
             helpText: 'For transparent foregrounds',
-            defaultValue: '#33b5e5',
+            defaultValue: '#607d8b',
             alpha: true,
             defaultAlpha: 0
           }),
@@ -388,13 +428,26 @@ <h3>
               { id: 'none', title: 'None' },
               { id: 'bevel', title: 'Bevel' },
               { id: 'square', title: 'Square' },
-              { id: 'circle', title: 'Circle' }
+              { id: 'circle', title: 'Circle' },
+              { id: 'vrect', title: 'Vertical Rectangle' },
+              { id: 'hrect', title: 'Horizontal Rectangle' }
             ],
-            defaultValue: 'bevel'
+            defaultValue: 'square'
           }),
           new studio.forms.ColorField('backColor', {
             title: 'Background',
             defaultValue: '#ffffff'
+          }),
+          new studio.forms.EnumField('effects', {
+            title: 'Effect',
+            buttons: true,
+            options: [
+              { id: 'none', title: 'None' },
+              { id: 'shadow', title: 'Long Shadow' },
+              { id: 'score', title: 'Score' },
+              { id: 'dogear', title: 'Dog-Ear' }
+            ],
+            defaultValue: 'none'
           })
           // new studio.forms.EnumField('recenter', {
           //   title: 'Recentering',

src/js/src/imagelib/effects.js

@@ -0,0 +1,83 @@
+/*
+Copyright 2014 Google Inc.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+     http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+//#REQUIRE "includes.js"
+
+imagelib.effects = {};
+
+imagelib.effects.renderLongShadow = function(ctx, w, h) {
+  var imgData = ctx.getImageData(0, 0, w, h);
+  for(var y = 0; y < imgData.height; y++) {
+    for(var x = 0; x < imgData.width; x++) {
+      if (imagelib.effects.isInShade(imgData, x, y)) {
+        imagelib.effects.castShade(imgData, x, y);
+      }
+    }
+  }
+  ctx.putImageData(imgData, 0, 0);
+};
+
+imagelib.effects.renderScore = function(ctx, w, h) {
+  var imgData = ctx.getImageData(0, 0, w, h);
+  for(var y = 0; y < imgData.height/2; y++) {
+    for(var x = 0; x < imgData.width; x++) {
+      var color = [0, 0, 0, 24];
+      imagelib.effects.setColor(imgData, x, y, color);
+    }
+  }
+  ctx.putImageData(imgData, 0, 0);
+};
+
+imagelib.effects.isInShade = function(imgData, x, y) {
+  var data = imgData.data;
+  while (true) {
+    // traverse towards top/left
+    x -= 1;
+    y -= 1;
+    if (x < 0 || y < 0) {
+      // reached edge
+      return false;
+    }
+    if (imagelib.effects.getAlpha(imgData, x, y)) {
+      // alpha value casts shade
+      return true;
+    }
+  }
+};
+
+imagelib.effects.castShade = function(imgData, x, y) {
+  var n = 32;
+  var step = n / (imgData.width + imgData.height);
+  var alpha = n - ((x + y) * step);
+  var color = [0, 0, 0, alpha];
+  //if (imgData.width == 48) console.log('shade alpha = ' + alpha + ' for ' + x + ',' + y);
+  return imagelib.effects.setColor(imgData, x, y, color);
+};
+
+imagelib.effects.setColor = function(imgData, x, y, color) {
+  var index = (y * imgData.width + x) * 4;
+  var data = imgData.data;
+  data[index] = color[0];
+  data[index + 1] = color[1];
+  data[index + 2] = color[2];
+  data[index + 3] = color[3];
+};
+
+imagelib.effects.getAlpha = function(imgData, x, y) {
+  var data = imgData.data;
+  var index = (y * imgData.width + x) * 4 + 3;
+  return data[index];
+};