Update to es2015 canst's in the Fox class and renderer.

js/fox.js

@@ -1,10 +1,10 @@
-var Chance = require('chance');
+const Chance = require('chance');
 
-var hsl = function (h, s, l) {
+const hsl = function (h, s, l) {
   return "hsl(" + h + "," + s + "%, " + l + "%)";
 }
 
-var Fox = function (IMG_WIDTH, IMG_HEIGHT, seed) {
+const Fox = function (IMG_WIDTH, IMG_HEIGHT, seed) {
   if (seed) {
     chance = new Chance(seed);
   } else {
@@ -12,24 +12,24 @@ var Fox = function (IMG_WIDTH, IMG_HEIGHT, seed) {
   }
 
   // origin: head top left corner
-  var kappa = chance.floating({min: 0.2, max: 0.45})
+  const kappa = chance.floating({min: 0.2, max: 0.45})
 
-  var hue = chance.integer({min: 5, max: 50});
+  const hue = chance.integer({min: 5, max: 50});
-  var saturation = chance.integer({min: 70, max: 90});
+  const saturation = chance.integer({min: 70, max: 90});
-  var lightness = chance.integer({min: 40, max: 60});
+  const lightness = chance.integer({min: 40, max: 60});
 
-  var head = {
+  const head = {
     width: 0.6 * IMG_WIDTH,
     height: 0.6 * IMG_HEIGHT,
     kappa: kappa,
     color: hsl(hue, saturation, lightness)
   }
 
-  var origin = {x: IMG_WIDTH / 2 - head.width / 2, y: 0.5 * IMG_HEIGHT - head.height / 2};
+  const origin = {x: IMG_WIDTH / 2 - head.width / 2, y: 0.5 * IMG_HEIGHT - head.height / 2};
 
-  var ears = (function (origin, headWidth, headHeight, headColor) {
+  const ears = (function (origin, headWidth, headHeight, headColor) {
-    var offsetX = chance.floating({min: 0.17 * headWidth, max: 0.2 * headWidth});
+    const offsetX = chance.floating({min: 0.17 * headWidth, max: 0.2 * headWidth});
-    var angle = chance.floating({min: 0.05 * Math.PI, max: 0.2 * Math.PI});
+    const angle = chance.floating({min: 0.05 * Math.PI, max: 0.2 * Math.PI});
     return {
       color: headColor,
       kappa: 0.9 * kappa,
@@ -50,12 +50,12 @@ var Fox = function (IMG_WIDTH, IMG_HEIGHT, seed) {
     };
   }(origin, head.width, head.height, head.color));
 
-  var eyes = (function (origin, headWidth, headHeight) {
+  const eyes = (function (origin, headWidth, headHeight) {
     // TODO: color
-    var offsetY = chance.floating({min: -0.05 * headHeight, max: -0.025 * headHeight});
+    const offsetY = chance.floating({min: -0.05 * headHeight, max: -0.025 * headHeight});
-    var offsetX = chance.floating({min: 0.13 * headWidth, max: 0.25 * headWidth});
+    const offsetX = chance.floating({min: 0.13 * headWidth, max: 0.25 * headWidth});
 
-    var eyeHeight = chance.floating({min: 0.08 * headHeight, max: 0.13 * headHeight});
+    const eyeHeight = chance.floating({min: 0.08 * headHeight, max: 0.13 * headHeight});
 
     return {
       height: eyeHeight,
@@ -73,14 +73,14 @@ var Fox = function (IMG_WIDTH, IMG_HEIGHT, seed) {
     }
   }(origin, head.width, head.height));
 
-  var nose = {
+  const nose = {
     x: origin.x + (head.width/2),
     y: (eyes.left.y + chance.floating({min: 0.2, max: 0.4}) * (origin.y + head.height - eyes.left.y)),
     width: chance.floating({min: 0.03, max: 0.04}) * head.width,
     height: chance.floating({min: 0.03, max: 0.04}) * head.width
   }
 
-  var mouth = {
+  const mouth = {
     x: origin.x + (head.width/2),
     y: (nose.y + chance.floating({min: 0.2, max: 0.35}) * (origin.y + head.height - nose.y)),
     width: chance.floating({min: 0.08, max: 0.15}) * head.width,
@@ -88,7 +88,7 @@ var Fox = function (IMG_WIDTH, IMG_HEIGHT, seed) {
     style: chance.pickone(['smirk', 'cat', 'none'])
   }
 
-  var mask = {
+  const mask = {
     width: chance.floating({min: 0.5 * IMG_WIDTH, max: IMG_WIDTH}),
     height: chance.floating({min: 1.7 * (IMG_HEIGHT - eyes.left.y), max: 1.85 * (IMG_HEIGHT - eyes.left.y)})
   }

js/render-fox.js

@@ -1,7 +1,7 @@
-var renderFox = function (canvas, opts) {
+const renderFox = function (canvas, opts) {
-    var width = opts.canvas.width;
+    const width = opts.canvas.width;
-    var height = opts.canvas.height;
+    const height = opts.canvas.height;
-    var ctx = canvas.getContext('2d');
+    const ctx = canvas.getContext('2d');
 
     ctx.fillStyle = opts.canvas.color;
     ctx.fillRect(0, 0, width, height);
@@ -15,8 +15,8 @@ var renderFox = function (canvas, opts) {
 };
 
 function shift_canvas(ctx, w, h, dx, dy) {
-  var topImage = ctx.getImageData(0, 0, w, h);
+  const topImage = ctx.getImageData(0, 0, w, h);
-  var bottomImage = ctx.getImageData(0, h - dy, w, h);
+  const bottomImage = ctx.getImageData(0, h - dy, w, h);
 
   ctx.clearRect(0, 0, w, h);
   ctx.putImageData(bottomImage, 0, 0);
@@ -34,7 +34,7 @@ function renderHead(ctx, opts) {
 }
 
 function renderEars(ctx, opts) {
-    var offset = {
+    const offset = {
         x: ctx.canvas.width/2,
         y: ctx.canvas.height/2
     }
@@ -123,14 +123,13 @@ function drawEllipseByCenter(ctx, cx, cy, w, h, color, fillColor, kappa) {
   drawEllipse(ctx, cx - w/2.0, cy - h/2.0, w, h, color, fillColor, kappa);
 }
 
-function drawEllipse(ctx, x, y, w, h, color, fillColor, kappa) {
+function drawEllipse(ctx, x, y, w, h, color, fillColor, kappa=0.3) {
-  var kappa = kappa || 0.3,
+  const ox = (w / 2) * kappa; // control point offset horizontal
-      ox = (w / 2) * kappa, // control point offset horizontal
+  const oy = (h / 2) * kappa; // control point offset vertical
-      oy = (h / 2) * kappa, // control point offset vertical
+  const xe = x + w;           // x-end
-      xe = x + w,           // x-end
+  const ye = y + h;           // y-end
-      ye = y + h,           // y-end
+  const xm = x + w / 2;       // x-middle
-      xm = x + w / 2,       // x-middle
+  const ym = y + h / 2;       // y-middle
-      ym = y + h / 2;       // y-middle
 
   if (color) {
     ctx.strokeStyle = color;
@@ -141,7 +140,7 @@ function drawEllipse(ctx, x, y, w, h, color, fillColor, kappa) {
   ctx.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
   ctx.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
   ctx.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
-  var fillColor = fillColor || color;
+  fillColor = fillColor || color;
   if (fillColor) {
     ctx.fillStyle = fillColor;
     ctx.fill();