From 7e175341fe57144c0b7d965897ffc8093fe41e81 Mon Sep 17 00:00:00 2001 From: lucaswadedavis Date: Thu, 22 Dec 2016 11:40:48 -0800 Subject: [PATCH] Update to es2015 canst's in the Fox class and renderer. --- js/fox.js | 38 +++++++++++++++++++------------------- js/render-fox.js | 31 +++++++++++++++---------------- 2 files changed, 34 insertions(+), 35 deletions(-) diff --git a/js/fox.js b/js/fox.js index b107c58..7ff2ae9 100644 --- a/js/fox.js +++ b/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}); - var saturation = chance.integer({min: 70, max: 90}); - var lightness = chance.integer({min: 40, max: 60}); + const hue = chance.integer({min: 5, max: 50}); + const saturation = chance.integer({min: 70, max: 90}); + 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) { - var 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 ears = (function (origin, headWidth, headHeight, headColor) { + const offsetX = chance.floating({min: 0.17 * headWidth, max: 0.2 * headWidth}); + 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}); - var offsetX = chance.floating({min: 0.13 * headWidth, max: 0.25 * headWidth}); + const offsetY = chance.floating({min: -0.05 * headHeight, max: -0.025 * headHeight}); + 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)}) } diff --git a/js/render-fox.js b/js/render-fox.js index 3eea7e7..a244451 100644 --- a/js/render-fox.js +++ b/js/render-fox.js @@ -1,7 +1,7 @@ -var renderFox = function (canvas, opts) { - var width = opts.canvas.width; - var height = opts.canvas.height; - var ctx = canvas.getContext('2d'); +const renderFox = function (canvas, opts) { + const width = opts.canvas.width; + const height = opts.canvas.height; + 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); - var bottomImage = ctx.getImageData(0, h - dy, w, h); + const topImage = ctx.getImageData(0, 0, 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) { - var kappa = kappa || 0.3, - ox = (w / 2) * kappa, // control point offset horizontal - oy = (h / 2) * kappa, // control point offset vertical - xe = x + w, // x-end - ye = y + h, // y-end - xm = x + w / 2, // x-middle - ym = y + h / 2; // y-middle +function drawEllipse(ctx, x, y, w, h, color, fillColor, kappa=0.3) { + const ox = (w / 2) * kappa; // control point offset horizontal + const oy = (h / 2) * kappa; // control point offset vertical + const xe = x + w; // x-end + const ye = y + h; // y-end + const xm = x + w / 2; // x-middle + const 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();