nose eyes ears etc

js/fox.js

@@ -2,6 +2,10 @@
 var Chance = require('chance');
 var chance = new Chance();
 
+var hsl = function (h, s, l) {
+  return "hsl(" + h + "," + s + "%, " + l + "%)";
+}
+
 var Fox = function (IMG_WIDTH, IMG_HEIGHT) {
 
   // head top left corner
@@ -9,12 +13,20 @@ var Fox = function (IMG_WIDTH, IMG_HEIGHT) {
   // TODO: head headWidth and height
   var headWidth = IMG_WIDTH / 2;
   var headHeight = IMG_HEIGHT / 2;
+  var kappa = chance.floating({min: 0.2, max: 0.45})
+
+  var hue = chance.integer({min: 70, max: 90});
+  var saturation = chance.integer({min: 70, max: 90});
+  var lightness = chance.integer({min: 40, max: 60});
+  var headColor = hsl(hue, saturation, lightness);
 
   var ears = (function () {
     var offsetX = chance.floating({min: 0.1 * headWidth, max: 0.4 * headWidth});
-    var angle = chance.floating({min: 0, max: Math.PI / 6});
+    var angle = chance.floating({min: 0, max: 0.2 * Math.PI});
     // TODO: size
     return {
+      color: headColor,
+      kappa: kappa,
       left: {
         x: origin.x + (headWidth/2) - offsetX,
         y: origin.y + (0.15 * headHeight),
@@ -35,9 +47,11 @@ var Fox = function (IMG_WIDTH, IMG_HEIGHT) {
   var eyes = (function () {
     // TODO: color
     var offsetY = chance.floating({min: -0.05 * headHeight, max: 0.05 * headHeight});
-    var offsetX = chance.floating({min: 0.2 * headWidth, max: 0.25 * headWidth});
+    var offsetX = chance.floating({min: 0.13 * headWidth, max: 0.25 * headWidth});
 
     return {
+      height: 0.1 * headHeight,
+      width: 0.05 * headWidth,
       left: {
         x: origin.x + (headWidth/2) - offsetX,
         y: origin.y + (headHeight/2) + offsetY
@@ -49,6 +63,15 @@ var Fox = function (IMG_WIDTH, IMG_HEIGHT) {
     }
   }());
 
+  var nose = (function (eyes) {
+    return {
+      x: origin.x + (headWidth/2),
+      y: (eyes.left.y + 0.3 * (origin.y + headHeight - eyes.left.y)),
+      width: 0.05 * headWidth,
+      height: 0.05 * headHeight
+    }
+  }(eyes));
+
   return {
     canvas: {
       height: IMG_HEIGHT,
@@ -57,11 +80,14 @@ var Fox = function (IMG_WIDTH, IMG_HEIGHT) {
     head: {
         origin: origin,
         width: headWidth,
-        height: headHeight
+        height: headHeight,
+        color: headColor,
+        kappa: kappa,
+        maskColor: hsl(hue, saturation, 95)
     },
     ears: ears,
     eyes: eyes,
-    // nose: nose,
+    nose: nose,
     // mouth: mouth
   };
 };

server.js

@@ -48,6 +48,7 @@ var renderFox = function (canvas, opts) {
     // draw cheeks
     // draw eyes
     // draw nose
+    renderNose(ctx, opts.nose);
     // draw mouth
 };
 
@@ -55,7 +56,7 @@ function renderHead(ctx, opts) {
     ctx.save();
     ctx.translate(ctx.canvas.width/2, ctx.canvas.height/2);
     ctx.rotate(Math.PI / 4);
-    drawEllipseByCenter(ctx, 0, 0, opts.width, opts.height, "orange");
+    drawEllipseByCenter(ctx, 0, 0, opts.width, opts.height, opts.color, null, opts.kappa);
     ctx.restore();
 }
 
@@ -67,19 +68,23 @@ function renderEars(ctx, opts) {
     ctx.save();
     ctx.translate(offset.x, offset.y);
     ctx.rotate(-opts.left.angle);
-    drawEllipseByCenter(ctx, opts.left.x - offset.x, opts.left.y - offset.y, opts.left.width, opts.left.height, "orange");
+    drawEllipseByCenter(ctx, opts.left.x - offset.x, opts.left.y - offset.y, opts.left.width, opts.left.height, opts.color, null, opts.kappa);
     ctx.restore();
 
     ctx.save();
     ctx.translate(offset.x, offset.y);
     ctx.rotate(-opts.right.angle);
-    drawEllipseByCenter(ctx, opts.right.x - offset.x, opts.right.y - offset.y, opts.right.width, opts.right.height, "orange");
+    drawEllipseByCenter(ctx, opts.right.x - offset.x, opts.right.y - offset.y, opts.right.width, opts.right.height, opts.color, null, opts.kappa);
     ctx.restore();
 }
 
 function renderEyes(ctx, opts) {
-    drawEllipseByCenter(ctx, opts.left.x, opts.left.y, 5, 10, "black", 1);
+    drawEllipseByCenter(ctx, opts.left.x, opts.left.y, opts.width, opts.height, "black", null, 0.5);
-    drawEllipseByCenter(ctx, opts.right.x, opts.right.y, 5, 10, "black", 1);
+    drawEllipseByCenter(ctx, opts.right.x, opts.right.y, opts.width, opts.height, "black", null, 0.5);
+}
+
+function renderNose(ctx, opts) {
+    drawEllipseByCenter(ctx, opts.x, opts.y, opts.width, opts.height, "black", null, 0.5);
 }
 
 function drawEllipseByCenter(ctx, cx, cy, w, h, color, fillColor, kappa) {
@@ -136,8 +141,6 @@ var circle = function(c){
 function writeFoxesToDisk (width, height, n=10) {
     var fileNames = [];
     for (var i = 0; i < n; i++) {
-        var width = 200;
-        var height = 200;
         var Image = Canvas.Image;
         var canvas = new Canvas(width, height);
         var ctx = canvas.getContext('2d');