diff --git a/js/fox-america.js b/js/fox-america.js new file mode 100644 index 0000000..572ef0a --- /dev/null +++ b/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 diff --git a/js/fox.js b/js/fox.js index e0d63b5..42cf85b 100644 --- a/js/fox.js +++ b/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 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 hue = chance.integer({min: 5, max: 50}) + const saturation = chance.integer({min: 70, max: 90}) + const lightness = chance.integer({min: 40, max: 60}) 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, diff --git a/server.js b/server.js index 53bed90..4229ec4 100644 --- a/server.js +++ b/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 - if (width > 400) width = 400 - const seed = sanitize(req.params.seed) || uuid() - const canvas = composeImage(width, width, seed) - const buffer = canvas.toBuffer() - res.set('Cache-Control', 'max-age=' + cacheTimeout) - res.set('Content-length', buffer.length) - res.type('png') - res.end(buffer, 'binary') + getFox(req, res, 1) +}) + +app.get('/2/:width/:seed', (req, res) => { + getFox(req, res, 2) }) module.exports = app diff --git a/test/test.js b/test/test.js index 5d809d6..1a8bc22 100644 --- a/test/test.js +++ b/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() + }) + }) + }) + }) +})