render ears and use chance

js/fox.js

@@ -1,10 +1,6 @@
 // TODO: use query params for these
-var gen = require('random-seed');
+var Chance = require('chance');
-
+var chance = new Chance();
-// move to helper function
-var genBetween = function (min, max) {
-  return min + (max - min) * gen();
-}
 
 var Fox = function (IMG_WIDTH, IMG_HEIGHT) {
 
@@ -15,16 +11,23 @@ var Fox = function (IMG_WIDTH, IMG_HEIGHT) {
   var headHeight = IMG_HEIGHT / 2;
 
   var ears = (function () {
-    var offsetX = genBetween(0, headWidth/2);
+    var offsetX = chance.floating({min: 0, max: headWidth/2});
+    var angle = chance.floating({min: 0, max: Math.PI / 6});
     // TODO: size, angle?
     return {
       left: {
         x: origin.x + (headWidth/2) - offsetX,
-        y: origin.y
+        y: origin.y + (0.15 * headHeight),
+        angle: angle,
+        width: 0.4 * headWidth,
+        height: 0.6 * headHeight 
       },
       right: {
         x: origin.x + (headWidth/2) + offsetX,
-        y: origin.y
+        y: origin.y + (0.15 * headHeight),
+        angle: -angle,
+        width: 0.4 * headWidth,
+        height: 0.6 * headHeight 
       }
     };
   }());

package.json

@@ -18,6 +18,7 @@
   "homepage": "https://github.com/lucaswadedavis/icogaru#readme",
   "dependencies": {
     "canvas": "^1.6.2",
+    "chance": "^1.0.4",
     "express": "^4.14.0",
     "node-gyp": "^3.4.0",
     "random-seed": "^0.3.0"

server.js

@@ -38,12 +38,45 @@ var renderFox = function (canvas, opts) {
     var width = opts.canvas.width;
     var height = opts.canvas.height;
     var ctx = canvas.getContext('2d');
-    ctx.beginPath();
 
-    drawEllipseByCenter(ctx, width/2, height/2, opts.head.width, opts.head.height);
+    // draw head
+    renderHead(ctx, opts.head);
+    // draw ears
+    renderEars(ctx, opts.ears);
+    // draw cheeks
+    // draw eyes
+    // draw nose
+    // draw mouth
 };
 
+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);
+    ctx.restore();
+}
+
+function renderEars(ctx, opts) {
+    var offset = {
+        x: ctx.canvas.width/2,
+        y: ctx.canvas.height/2
+    }
+    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);
+    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);
+    ctx.restore();
+}
+
 function drawEllipseByCenter(ctx, cx, cy, w, h) {
+  console.log("ellipse coords", cx, cy, w, h);
   drawEllipse(ctx, cx - w/2.0, cy - h/2.0, w, h);
 }
 
@@ -102,7 +135,7 @@ app.get('/', function(req, res) {
     var canvas = new Canvas(width, height);
     var ctx = canvas.getContext('2d');
     var fox = Fox(width, height);
-    console.log(fox);
+    console.log("fox", fox);
     renderFox(canvas, fox);
     var img = new Buffer(canvas.toDataURL(), 'base64');
     var fileName = "fox" + Math.floor(Math.random() * 10000) + ".png";