From b4d13dccc45eb3c21b886c21ee7ad91730f9efdd Mon Sep 17 00:00:00 2001
From: Jeffrey Sun <jrsun@mit.edu>
Date: Thu, 15 Dec 2016 18:17:29 -0800
Subject: [PATCH] eye style smiley

---
 js/fox.js | 13 +++++++------
 server.js | 25 +++++++++++++++++++++++--
 2 files changed, 30 insertions(+), 8 deletions(-)

diff --git a/js/fox.js b/js/fox.js
index 08bfbff..22dc5df 100644
--- a/js/fox.js
+++ b/js/fox.js
@@ -32,21 +32,21 @@ var Fox = function (IMG_WIDTH, IMG_HEIGHT) {
         y: origin.y + (0.15 * headHeight),
         angle: angle,
         width: 0.4 * headWidth,
-        height: 0.6 * headHeight
+        height: 0.8 * headHeight
       },
       right: {
         x: origin.x + (headWidth/2) + offsetX,
         y: origin.y + (0.15 * headHeight),
         angle: -angle,
         width: 0.4 * headWidth,
-        height: 0.6 * headHeight
+        height: 0.8 * headHeight
       }
     };
   }());
 
   var eyes = (function () {
     // TODO: color
-    var offsetY = chance.floating({min: -0.05 * headHeight, max: 0.05 * headHeight});
+    var offsetY = chance.floating({min: -0.05 * headHeight, max: -0.025 * headHeight});
     var offsetX = chance.floating({min: 0.13 * headWidth, max: 0.25 * headWidth});
 
     var eyeHeight = chance.floating({min: 0.08 * headHeight, max: 0.13 * headHeight});
@@ -54,6 +54,7 @@ var Fox = function (IMG_WIDTH, IMG_HEIGHT) {
     return {
       height: eyeHeight,
       width: eyeHeight/2,
+      style: chance.pickone(['ellipse', 'smiley']),
       left: {
         x: origin.x + (headWidth/2) - offsetX,
         y: origin.y + (headHeight/2) + offsetY
@@ -69,8 +70,8 @@ var Fox = function (IMG_WIDTH, IMG_HEIGHT) {
     return {
       x: origin.x + (headWidth/2),
       y: (eyes.left.y + 0.3 * (origin.y + headHeight - eyes.left.y)),
-      width: 0.06 * headWidth,
-      height: 0.05 * headWidth
+      width: 0.04 * headWidth,
+      height: 0.03 * headWidth
     }
   }(eyes));
 
@@ -92,7 +93,7 @@ var Fox = function (IMG_WIDTH, IMG_HEIGHT) {
         kappa: kappa,
         maskColor: hsl(hue, saturation, 95),
         maskWidth: chance.integer({min: 0.5 * IMG_WIDTH, max: IMG_WIDTH}),
-        maskHeight: chance.integer({min: 0.85 * IMG_HEIGHT, max: 1 * IMG_HEIGHT})
+        maskHeight: chance.integer({min: 1.7 * (IMG_HEIGHT - eyes.left.y), max: 1.85 * (IMG_HEIGHT - eyes.left.y)})
     },
     ears: ears,
     eyes: eyes,
diff --git a/server.js b/server.js
index 7a6e4d3..9cfe4dc 100644
--- a/server.js
+++ b/server.js
@@ -84,8 +84,28 @@ function renderEars(ctx, opts) {
 }
 
 function renderEyes(ctx, opts) {
-    drawEllipseByCenter(ctx, opts.left.x, opts.left.y, opts.width, opts.height, "black", null, 0.5);
-    drawEllipseByCenter(ctx, opts.right.x, opts.right.y, opts.width, opts.height, "black", null, 0.5);
+    switch (opts.style) {
+      case "ellipse":
+        drawEllipseByCenter(ctx, opts.left.x, opts.left.y, opts.width, opts.height, "black", null, 0.5);
+        drawEllipseByCenter(ctx, opts.right.x, opts.right.y, opts.width, opts.height, "black", null, 0.5);
+        break;
+      case "smiley":
+        ctx.strokeStyle = "black";
+        ctx.beginPath();
+        ctx.moveTo(opts.left.x - opts.width, opts.left.y + opts.height);
+        ctx.bezierCurveTo(opts.left.x - opts.width, opts.left.y + opts.height, opts.left.x, opts.left.y, opts.left.x + opts.width, opts.left.y + opts.height);
+        ctx.lineWidth = 2;
+        ctx.stroke();
+        ctx.closePath();
+
+        ctx.beginPath();
+        ctx.moveTo(opts.right.x - opts.width, opts.right.y + opts.height);
+        ctx.bezierCurveTo(opts.right.x - opts.width, opts.right.y + opts.height, opts.right.x, opts.right.y, opts.right.x + opts.width, opts.right.y + opts.height);
+        ctx.lineWidth = 2;
+        ctx.stroke();
+        ctx.closePath();
+        break;
+    }
 }
 
 function renderNose(ctx, opts) {
@@ -97,6 +117,7 @@ function renderNose(ctx, opts) {
   ctx.bezierCurveTo(opts.x + opts.width/2, opts.y - opts.height/2, opts.x + opts.width/2, opts.y + opts.height/2, opts.x, opts.y + opts.height/2);
   ctx.bezierCurveTo(opts.x, opts.y + opts.height/2, opts.x - opts.width/2, opts.y + opts.height/2, opts.x - opts.width/2, opts.y - opts.height/2);
     // drawEllipseByCenter(ctx, opts.x, opts.y, opts.width, opts.height, "black", null, 0.5);
+  ctx.fillStyle = "black";
   ctx.fill();
   //ctx.closePath(); // not used correctly, see comments (use to close off open path)
   ctx.stroke();