diff --git a/js/fox.js b/js/fox.js index 0bcdd0c..de79fd1 100644 --- a/js/fox.js +++ b/js/fox.js @@ -1,10 +1,6 @@ // TODO: use query params for these -var gen = require('random-seed'); - -// move to helper function -var genBetween = function (min, max) { - return min + (max - min) * gen(); -} +var Chance = require('chance'); +var chance = new Chance(); var Fox = function (IMG_WIDTH, IMG_HEIGHT) { @@ -15,16 +11,23 @@ var Fox = function (IMG_WIDTH, IMG_HEIGHT) { var headHeight = IMG_HEIGHT / 2; var ears = (function () { - var offsetX = genBetween(0, headWidth/2); + var offsetX = chance.floating({min: 0, max: headWidth/2}); + var angle = chance.floating({min: 0, max: Math.PI / 6}); // TODO: size, angle? return { left: { x: origin.x + (headWidth/2) - offsetX, - y: origin.y + y: origin.y + (0.15 * headHeight), + angle: angle, + width: 0.4 * headWidth, + height: 0.6 * headHeight }, right: { x: origin.x + (headWidth/2) + offsetX, - y: origin.y + y: origin.y + (0.15 * headHeight), + angle: -angle, + width: 0.4 * headWidth, + height: 0.6 * headHeight } }; }()); diff --git a/package.json b/package.json index 0a57a0a..b6cc130 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "homepage": "https://github.com/lucaswadedavis/icogaru#readme", "dependencies": { "canvas": "^1.6.2", + "chance": "^1.0.4", "express": "^4.14.0", "node-gyp": "^3.4.0", "random-seed": "^0.3.0" diff --git a/server.js b/server.js index d709a98..08a2cd0 100644 --- a/server.js +++ b/server.js @@ -38,12 +38,45 @@ var renderFox = function (canvas, opts) { var width = opts.canvas.width; var height = opts.canvas.height; var ctx = canvas.getContext('2d'); - ctx.beginPath(); - drawEllipseByCenter(ctx, width/2, height/2, opts.head.width, opts.head.height); + // draw head + renderHead(ctx, opts.head); + // draw ears + renderEars(ctx, opts.ears); + // draw cheeks + // draw eyes + // draw nose + // draw mouth }; +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); + ctx.restore(); +} + +function renderEars(ctx, opts) { + var offset = { + x: ctx.canvas.width/2, + y: ctx.canvas.height/2 + } + 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); + 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); + ctx.restore(); +} + function drawEllipseByCenter(ctx, cx, cy, w, h) { + console.log("ellipse coords", cx, cy, w, h); drawEllipse(ctx, cx - w/2.0, cy - h/2.0, w, h); } @@ -102,7 +135,7 @@ app.get('/', function(req, res) { var canvas = new Canvas(width, height); var ctx = canvas.getContext('2d'); var fox = Fox(width, height); - console.log(fox); + console.log("fox", fox); renderFox(canvas, fox); var img = new Buffer(canvas.toDataURL(), 'base64'); var fileName = "fox" + Math.floor(Math.random() * 10000) + ".png";