From b4d13dccc45eb3c21b886c21ee7ad91730f9efdd Mon Sep 17 00:00:00 2001 From: Jeffrey Sun Date: Thu, 15 Dec 2016 18:17:29 -0800 Subject: [PATCH 1/3] eye style smiley --- js/fox.js | 13 +++++++------ server.js | 25 +++++++++++++++++++++++-- 2 files changed, 30 insertions(+), 8 deletions(-) diff --git a/js/fox.js b/js/fox.js index 08bfbff..22dc5df 100644 --- a/js/fox.js +++ b/js/fox.js @@ -32,21 +32,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 +54,7 @@ var Fox = function (IMG_WIDTH, IMG_HEIGHT) { return { height: eyeHeight, width: eyeHeight/2, + style: chance.pickone(['ellipse', 'smiley']), left: { x: origin.x + (headWidth/2) - offsetX, y: origin.y + (headHeight/2) + offsetY @@ -69,8 +70,8 @@ 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)); @@ -92,7 +93,7 @@ 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, diff --git a/server.js b/server.js index 7a6e4d3..9cfe4dc 100644 --- a/server.js +++ b/server.js @@ -84,8 +84,28 @@ 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; + } } function renderNose(ctx, opts) { @@ -97,6 +117,7 @@ function renderNose(ctx, opts) { 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(); From 9497ef36f7821052ce87c5aa066bc55ba3341d0b Mon Sep 17 00:00:00 2001 From: Jeffrey Sun Date: Thu, 15 Dec 2016 18:34:42 -0800 Subject: [PATCH 2/3] mouth and cancel eyes --- js/fox.js | 15 +++++++++++++-- server.js | 24 ++++++++++++++++++++++-- 2 files changed, 35 insertions(+), 4 deletions(-) diff --git a/js/fox.js b/js/fox.js index 22dc5df..68a559c 100644 --- a/js/fox.js +++ b/js/fox.js @@ -54,7 +54,8 @@ var Fox = function (IMG_WIDTH, IMG_HEIGHT) { return { height: eyeHeight, width: eyeHeight/2, - style: chance.pickone(['ellipse', 'smiley']), + style: 'ellipse', + // style: chance.pickone(['ellipse', 'smiley']), left: { x: origin.x + (headWidth/2) - offsetX, y: origin.y + (headHeight/2) + offsetY @@ -75,6 +76,16 @@ var Fox = function (IMG_WIDTH, IMG_HEIGHT) { } }(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']) + } + }(nose)); + return { canvas: { height: IMG_HEIGHT, @@ -98,7 +109,7 @@ var Fox = function (IMG_WIDTH, IMG_HEIGHT) { ears: ears, eyes: eyes, nose: nose, - // mouth: mouth + mouth: mouth }; }; diff --git a/server.js b/server.js index 9cfe4dc..5b4a8fb 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) { @@ -116,10 +117,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(); } From d284b941ee85b6d31760ddf5a4dca76e82daeb70 Mon Sep 17 00:00:00 2001 From: Jeffrey Sun Date: Thu, 15 Dec 2016 20:20:51 -0800 Subject: [PATCH 3/3] upsize heads, use seeds --- js/fox.js | 16 ++++++++++------ server.js | 3 ++- 2 files changed, 12 insertions(+), 7 deletions(-) diff --git a/js/fox.js b/js/fox.js index 68a559c..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}); @@ -82,7 +86,7 @@ var Fox = function (IMG_WIDTH, IMG_HEIGHT) { y: (nose.y + 0.15 * (origin.y + headHeight - nose.y)), width: 0.08 * headWidth, height: 0.04 * headWidth, - style: chance.pickone(['smirk', 'cat']) + style: chance.pickone(['smirk', 'cat', 'none']) } }(nose)); diff --git a/server.js b/server.js index 5b4a8fb..863d07f 100644 --- a/server.js +++ b/server.js @@ -106,6 +106,8 @@ function renderEyes(ctx, opts) { ctx.stroke(); ctx.closePath(); break; + case "none": + break; } } @@ -229,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');