Merge pull request #18 from Patreon/jrsun-foxy-version

foxy moxy versioning

js/fox-america.js

@@ -0,0 +1,118 @@
+const Chance = require('chance')
+const colors = require('./constants/colors.js')
+
+const hsl = function (h, s, l) {
+  return 'hsl(' + h + ',' + s + '%, ' + l + '%)'
+}
+
+const Fox = function (IMG_WIDTH, IMG_HEIGHT, seed) {
+  const chance = seed ? new Chance(seed) : new Chance()
+
+  // origin: head top left corner
+  const kappa = chance.floating({min: 0.2, max: 0.45})
+
+  chance.bool()
+  chance.bool()
+
+  const headColor = (function () {
+    const level = chance.floating({min: 0, max: 1})
+    const result = []
+    const min = colors.head.brick
+    const max = colors.head.yellow
+    for (let i = 0; i < min.length; i++) {
+      result.push(min[i] + (max[i] - min[i]) * level)
+    }
+    return hsl.apply(null, result)
+  })()
+
+  const head = {
+    width: 0.6 * IMG_WIDTH,
+    height: 0.6 * IMG_HEIGHT,
+    kappa: kappa,
+    color: headColor
+  }
+
+  const origin = {x: IMG_WIDTH / 2 - head.width / 2, y: 0.5 * IMG_HEIGHT - head.height / 2}
+
+  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,
+      left: {
+        x: origin.x + (headWidth / 2) - offsetX,
+        y: origin.y + (0.15 * headHeight),
+        angle: angle,
+        width: 0.4 * headWidth,
+        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.8 * headHeight
+      }
+    }
+  }(origin, head.width, head.height, head.color))
+
+  const eyes = (function (origin, headWidth, headHeight) {
+    // TODO: color
+    const offsetY = chance.floating({min: -0.05 * headHeight, max: -0.025 * headHeight})
+    const offsetX = chance.floating({min: 0.13 * headWidth, max: 0.25 * headWidth})
+
+    const eyeHeight = chance.floating({min: 0.08 * headHeight, max: 0.13 * headHeight})
+
+    return {
+      height: eyeHeight,
+      width: eyeHeight / 2,
+      style: 'ellipse',
+      // style: chance.pickone(['ellipse', 'smiley']),
+      left: {
+        x: origin.x + (headWidth / 2) - offsetX,
+        y: origin.y + (headHeight / 2) + offsetY
+      },
+      right: {
+        x: origin.x + (headWidth / 2) + offsetX,
+        y: origin.y + (headHeight / 2) + offsetY
+      }
+    }
+  }(origin, head.width, head.height))
+
+  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
+  }
+
+  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,
+    height: chance.floating({min: 0.03, max: 0.06}) * head.width,
+    style: chance.pickone(['smirk', 'cat', 'none'])
+  }
+
+  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)})
+  }
+  head.mask = mask
+
+  return {
+    canvas: {
+      height: IMG_HEIGHT,
+      width: IMG_WIDTH,
+      color: chance.pickone(Object.keys(colors.bg).map(function (key) { return colors.bg[key] }))
+    },
+    head: head,
+    ears: ears,
+    eyes: eyes,
+    nose: nose,
+    mouth: mouth
+  }
+}
+
+module.exports = Fox

js/fox.js

@@ -1,5 +1,4 @@
 const Chance = require('chance')
-const colors = require('./constants/colors.js')
 
 const hsl = function (h, s, l) {
   return 'hsl(' + h + ',' + s + '%, ' + l + '%)'
@@ -11,22 +10,15 @@ const Fox = function (IMG_WIDTH, IMG_HEIGHT, seed) {
   // origin: head top left corner
   const kappa = chance.floating({min: 0.2, max: 0.45})
 
-  const headColor = (function () {
+  const hue = chance.integer({min: 5, max: 50})
-    const level = chance.floating({min: 0, max: 1})
+  const saturation = chance.integer({min: 70, max: 90})
-    const result = []
+  const lightness = chance.integer({min: 40, max: 60})
-    const min = colors.head.brick
-    const max = colors.head.yellow
-    for (let i = 0; i < min.length; i++) {
-      result.push(min[i] + (max[i] - min[i]) * level)
-    }
-    return hsl.apply(null, result)
-  })()
 
   const head = {
     width: 0.6 * IMG_WIDTH,
     height: 0.6 * IMG_HEIGHT,
     kappa: kappa,
-    color: headColor
+    color: hsl(hue, saturation, lightness)
   }
 
   const origin = {x: IMG_WIDTH / 2 - head.width / 2, y: 0.5 * IMG_HEIGHT - head.height / 2}
@@ -102,7 +94,11 @@ const Fox = function (IMG_WIDTH, IMG_HEIGHT, seed) {
     canvas: {
       height: IMG_HEIGHT,
       width: IMG_WIDTH,
-      color: chance.pickone(Object.keys(colors.bg).map(function (key) { return colors.bg[key] }))
+      color: hsl(
+        chance.integer({min: 0, max: 360}),
+        chance.integer({min: 0, max: 100}),
+        chance.integer({min: 10, max: 100})
+      )
     },
     head: head,
     ears: ears,

server.js

@@ -12,15 +12,37 @@ const sanitize = require('sanitize-filename')
 const Canvas = require('canvas')
 
 const Fox = require('./js/fox.js')
+const FoxAmerica = require('./js/fox-america.js')
 const renderFox = require('./js/render-fox.js')
 
-function composeImage (width, height, seed) {
+function composeImage (width, height, seed, version) {
   seed = seed || uuid()
-  const fox = Fox(width, height, seed)
+  let fox
+  switch (version) {
+    case 2:
+      // America-color bg and fox
+      fox = FoxAmerica(width, height, seed)
+      break
+    default:
+      // original fox
+      fox = Fox(width, height, seed)
+  }
   const canvas = new Canvas(width, height)
   renderFox(canvas, fox)
   return canvas
-};
+}
+
+function getFox (req, res, version) {
+  let width = parseInt(req.params.width) || 400
+  if (width > 400) width = 400
+  const seed = sanitize(req.params.seed) || uuid()
+  const canvas = composeImage(width, width, seed, version)
+  const buffer = canvas.toBuffer()
+  res.set('Cache-Control', 'max-age=' + cacheTimeout)
+  res.set('Content-length', buffer.length)
+  res.type('png')
+  res.end(buffer, 'binary')
+}
 
 const cacheTimeout = 60 * 60 * 24 * 30
 const app = express()
@@ -30,15 +52,11 @@ app.get('/healthcheck', (req, res) => {
 })
 
 app.get('/:width/:seed', (req, res) => {
-  let width = parseInt(req.params.width) || 400
+  getFox(req, res, 1)
-  if (width > 400) width = 400
+})
-  const seed = sanitize(req.params.seed) || uuid()
+
-  const canvas = composeImage(width, width, seed)
+app.get('/2/:width/:seed', (req, res) => {
-  const buffer = canvas.toBuffer()
+  getFox(req, res, 2)
-  res.set('Cache-Control', 'max-age=' + cacheTimeout)
-  res.set('Content-length', buffer.length)
-  res.type('png')
-  res.end(buffer, 'binary')
 })
 
 module.exports = app

test/test.js

@@ -8,7 +8,7 @@ const app = require('../server')
 
 const testUID = 4125370
 
-describe('Foxy-moxy', () => {
+describe('Foxy-moxy v1', () => {
   describe('fox generation', () => {
     it('should respect widths < 400', (done) => {
       const width = 158
@@ -47,3 +47,43 @@ describe('Foxy-moxy', () => {
     })
   })
 })
+
+describe('Foxy-moxy v2', () => {
+  describe('fox generation', () => {
+    it('should respect widths < 400', (done) => {
+      const width = 158
+      request(app)
+                .get(`/2/${width}/${testUID}`)
+                .expect('Content-Type', 'image/png')
+                .expect(200)
+                .end(function (err, res) {
+                  assert(!err, String(err))
+                  sharp(res.body).metadata((err, metadata) => {
+                    assert(!err, String(err))
+                    assert.equal(metadata.format, 'png')
+                    assert.equal(metadata.height, width)
+                    assert.equal(metadata.width, width)
+                    done()
+                  })
+                })
+    })
+
+    it('should allow max width of 400', (done) => {
+      const width = 510
+      request(app)
+                .get(`/2/${width}/${testUID}`)
+                .expect('Content-Type', 'image/png')
+                .expect(200)
+                .end(function (err, res) {
+                  assert(!err, String(err))
+                  sharp(res.body).metadata((err, metadata) => {
+                    assert(!err, String(err))
+                    assert.equal(metadata.format, 'png')
+                    assert.equal(metadata.height, 400)
+                    assert.equal(metadata.width, 400)
+                    done()
+                  })
+                })
+    })
+  })
+})