diff --git a/js/fox.js b/js/fox.js index f6aad3d..262867f 100644 --- a/js/fox.js +++ b/js/fox.js @@ -2,6 +2,10 @@ 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) { // head top left corner @@ -9,12 +13,20 @@ var Fox = function (IMG_WIDTH, IMG_HEIGHT) { // TODO: head headWidth and height var headWidth = IMG_WIDTH / 2; var headHeight = IMG_HEIGHT / 2; + var kappa = chance.floating({min: 0.2, max: 0.45}) + + var hue = chance.integer({min: 70, max: 90}); + var saturation = chance.integer({min: 70, max: 90}); + var lightness = chance.integer({min: 40, max: 60}); + var headColor = hsl(hue, saturation, lightness); var ears = (function () { var offsetX = chance.floating({min: 0.1 * headWidth, max: 0.4 * headWidth}); - var angle = chance.floating({min: 0, max: Math.PI / 6}); + var angle = chance.floating({min: 0, max: 0.2 * Math.PI}); // TODO: size return { + color: headColor, + kappa: kappa, left: { x: origin.x + (headWidth/2) - offsetX, y: origin.y + (0.15 * headHeight), @@ -35,9 +47,11 @@ var Fox = function (IMG_WIDTH, IMG_HEIGHT) { var eyes = (function () { // TODO: color var offsetY = chance.floating({min: -0.05 * headHeight, max: 0.05 * headHeight}); - var offsetX = chance.floating({min: 0.2 * headWidth, max: 0.25 * headWidth}); + var offsetX = chance.floating({min: 0.13 * headWidth, max: 0.25 * headWidth}); return { + height: 0.1 * headHeight, + width: 0.05 * headWidth, left: { x: origin.x + (headWidth/2) - offsetX, y: origin.y + (headHeight/2) + offsetY @@ -49,6 +63,15 @@ var Fox = function (IMG_WIDTH, IMG_HEIGHT) { } }()); + var nose = (function (eyes) { + return { + x: origin.x + (headWidth/2), + y: (eyes.left.y + 0.3 * (origin.y + headHeight - eyes.left.y)), + width: 0.05 * headWidth, + height: 0.05 * headHeight + } + }(eyes)); + return { canvas: { height: IMG_HEIGHT, @@ -57,11 +80,14 @@ var Fox = function (IMG_WIDTH, IMG_HEIGHT) { head: { origin: origin, width: headWidth, - height: headHeight + height: headHeight, + color: headColor, + kappa: kappa, + maskColor: hsl(hue, saturation, 95) }, ears: ears, eyes: eyes, - // nose: nose, + nose: nose, // mouth: mouth }; }; diff --git a/server.js b/server.js index fd305af..50f5c43 100644 --- a/server.js +++ b/server.js @@ -48,6 +48,7 @@ var renderFox = function (canvas, opts) { // draw cheeks // draw eyes // draw nose + renderNose(ctx, opts.nose); // draw mouth }; @@ -55,7 +56,7 @@ function renderHead(ctx, opts) { ctx.save(); ctx.translate(ctx.canvas.width/2, ctx.canvas.height/2); ctx.rotate(Math.PI / 4); - drawEllipseByCenter(ctx, 0, 0, opts.width, opts.height, "orange"); + drawEllipseByCenter(ctx, 0, 0, opts.width, opts.height, opts.color, null, opts.kappa); ctx.restore(); } @@ -67,19 +68,23 @@ function renderEars(ctx, opts) { ctx.save(); ctx.translate(offset.x, offset.y); ctx.rotate(-opts.left.angle); - drawEllipseByCenter(ctx, opts.left.x - offset.x, opts.left.y - offset.y, opts.left.width, opts.left.height, "orange"); + drawEllipseByCenter(ctx, opts.left.x - offset.x, opts.left.y - offset.y, opts.left.width, opts.left.height, opts.color, null, opts.kappa); ctx.restore(); ctx.save(); ctx.translate(offset.x, offset.y); ctx.rotate(-opts.right.angle); - drawEllipseByCenter(ctx, opts.right.x - offset.x, opts.right.y - offset.y, opts.right.width, opts.right.height, "orange"); + drawEllipseByCenter(ctx, opts.right.x - offset.x, opts.right.y - offset.y, opts.right.width, opts.right.height, opts.color, null, opts.kappa); ctx.restore(); } function renderEyes(ctx, opts) { - drawEllipseByCenter(ctx, opts.left.x, opts.left.y, 5, 10, "black", 1); - drawEllipseByCenter(ctx, opts.right.x, opts.right.y, 5, 10, "black", 1); + 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); +} + +function renderNose(ctx, opts) { + drawEllipseByCenter(ctx, opts.x, opts.y, opts.width, opts.height, "black", null, 0.5); } function drawEllipseByCenter(ctx, cx, cy, w, h, color, fillColor, kappa) { @@ -136,8 +141,6 @@ var circle = function(c){ function writeFoxesToDisk (width, height, n=10) { var fileNames = []; for (var i = 0; i < n; i++) { - var width = 200; - var height = 200; var Image = Canvas.Image; var canvas = new Canvas(width, height); var ctx = canvas.getContext('2d');