diff --git a/js/fox.js b/js/fox.js index 08bfbff..74d5cb0 100644 --- a/js/fox.js +++ b/js/fox.js @@ -1,18 +1,22 @@ // TODO: use query params for these var Chance = require('chance'); -var chance = new Chance(); var hsl = function (h, s, l) { return "hsl(" + h + "," + s + "%, " + l + "%)"; } -var Fox = function (IMG_WIDTH, IMG_HEIGHT) { +var Fox = function (IMG_WIDTH, IMG_HEIGHT, seed) { + if (seed) { + chance = new Chance(seed); + } else { + chance = new Chance(); + } // head top left corner - var origin = {x: IMG_WIDTH / 4, y: IMG_HEIGHT / 4}; // TODO: head headWidth and height - var headWidth = IMG_WIDTH / 2; - var headHeight = IMG_HEIGHT / 2; + var headWidth = 0.65 * IMG_WIDTH; + var headHeight = 0.65 * IMG_HEIGHT; + var origin = {x: IMG_WIDTH / 2 - headWidth / 2, y: IMG_HEIGHT / 2 - headHeight / 2}; var kappa = chance.floating({min: 0.2, max: 0.45}) var hue = chance.integer({min: 5, max: 50}); @@ -32,21 +36,21 @@ var Fox = function (IMG_WIDTH, IMG_HEIGHT) { y: origin.y + (0.15 * headHeight), angle: angle, width: 0.4 * headWidth, - height: 0.6 * headHeight + 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.6 * headHeight + height: 0.8 * headHeight } }; }()); var eyes = (function () { // TODO: color - var offsetY = chance.floating({min: -0.05 * headHeight, max: 0.05 * headHeight}); + var offsetY = chance.floating({min: -0.05 * headHeight, max: -0.025 * headHeight}); var offsetX = chance.floating({min: 0.13 * headWidth, max: 0.25 * headWidth}); var eyeHeight = chance.floating({min: 0.08 * headHeight, max: 0.13 * headHeight}); @@ -54,6 +58,8 @@ var Fox = function (IMG_WIDTH, IMG_HEIGHT) { 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 @@ -69,11 +75,21 @@ var Fox = function (IMG_WIDTH, IMG_HEIGHT) { return { x: origin.x + (headWidth/2), y: (eyes.left.y + 0.3 * (origin.y + headHeight - eyes.left.y)), - width: 0.06 * headWidth, - height: 0.05 * headWidth + width: 0.04 * headWidth, + height: 0.03 * headWidth } }(eyes)); + var mouth = (function (nose) { + return { + x: origin.x + (headWidth/2), + y: (nose.y + 0.15 * (origin.y + headHeight - nose.y)), + width: 0.08 * headWidth, + height: 0.04 * headWidth, + style: chance.pickone(['smirk', 'cat', 'none']) + } + }(nose)); + return { canvas: { height: IMG_HEIGHT, @@ -92,12 +108,12 @@ var Fox = function (IMG_WIDTH, IMG_HEIGHT) { kappa: kappa, maskColor: hsl(hue, saturation, 95), maskWidth: chance.integer({min: 0.5 * IMG_WIDTH, max: IMG_WIDTH}), - maskHeight: chance.integer({min: 0.85 * IMG_HEIGHT, max: 1 * IMG_HEIGHT}) + maskHeight: chance.integer({min: 1.7 * (IMG_HEIGHT - eyes.left.y), max: 1.85 * (IMG_HEIGHT - eyes.left.y)}) }, ears: ears, eyes: eyes, nose: nose, - // mouth: mouth + mouth: mouth }; }; diff --git a/server.js b/server.js index 7a6e4d3..863d07f 100644 --- a/server.js +++ b/server.js @@ -52,6 +52,7 @@ var renderFox = function (canvas, opts) { // draw nose renderNose(ctx, opts.nose); // draw mouth + renderMouth(ctx, opts.mouth); }; function renderHead(ctx, opts) { @@ -84,8 +85,30 @@ function renderEars(ctx, opts) { } function renderEyes(ctx, opts) { - drawEllipseByCenter(ctx, opts.left.x, opts.left.y, opts.width, opts.height, "black", null, 0.5); - drawEllipseByCenter(ctx, opts.right.x, opts.right.y, opts.width, opts.height, "black", null, 0.5); + switch (opts.style) { + case "ellipse": + drawEllipseByCenter(ctx, opts.left.x, opts.left.y, opts.width, opts.height, "black", null, 0.5); + drawEllipseByCenter(ctx, opts.right.x, opts.right.y, opts.width, opts.height, "black", null, 0.5); + break; + case "smiley": + ctx.strokeStyle = "black"; + ctx.beginPath(); + ctx.moveTo(opts.left.x - opts.width, opts.left.y + opts.height); + ctx.bezierCurveTo(opts.left.x - opts.width, opts.left.y + opts.height, opts.left.x, opts.left.y, opts.left.x + opts.width, opts.left.y + opts.height); + ctx.lineWidth = 2; + ctx.stroke(); + ctx.closePath(); + + ctx.beginPath(); + ctx.moveTo(opts.right.x - opts.width, opts.right.y + opts.height); + ctx.bezierCurveTo(opts.right.x - opts.width, opts.right.y + opts.height, opts.right.x, opts.right.y, opts.right.x + opts.width, opts.right.y + opts.height); + ctx.lineWidth = 2; + ctx.stroke(); + ctx.closePath(); + break; + case "none": + break; + } } function renderNose(ctx, opts) { @@ -96,9 +119,29 @@ function renderNose(ctx, opts) { ctx.bezierCurveTo(opts.x - opts.width/2, opts.y - opts.height/2, opts.x, opts.y - opts.height, opts.x + opts.width/2, opts.y - opts.height/2); ctx.bezierCurveTo(opts.x + opts.width/2, opts.y - opts.height/2, opts.x + opts.width/2, opts.y + opts.height/2, opts.x, opts.y + opts.height/2); ctx.bezierCurveTo(opts.x, opts.y + opts.height/2, opts.x - opts.width/2, opts.y + opts.height/2, opts.x - opts.width/2, opts.y - opts.height/2); - // drawEllipseByCenter(ctx, opts.x, opts.y, opts.width, opts.height, "black", null, 0.5); + ctx.fillStyle = "black"; ctx.fill(); - //ctx.closePath(); // not used correctly, see comments (use to close off open path) + ctx.stroke(); +} + +function renderMouth(ctx, opts) { + ctx.strokeStyle = "black"; + ctx.lineWidth = 2; + ctx.beginPath(); + switch (opts.style) { + case "smirk": + ctx.moveTo(opts.x - opts.width/2, opts.y - opts.height/2); + ctx.bezierCurveTo(opts.x - opts.width/2, opts.y - opts.height/2, + opts.x - opts.width/2, opts.y + opts.height/2, + opts.x + opts.width/2, opts.y + ) + break; + case "cat": + ctx.moveTo(opts.x - opts.width/2, opts.y + opts.height/2); + ctx.lineTo(opts.x, opts.y - opts.height/2); + ctx.lineTo(opts.x + opts.width/2, opts.y + opts.height/2); + break; + } ctx.stroke(); } @@ -188,6 +231,5 @@ app.get('/', function(req, res) { res.send(images.join('')); }); - app.listen(process.env.PORT || 3000); console.log('listening on http://localhost:3000');