siriusfox/foxy-moxy
1
0
Fork 0
mirror of https://git.sleeping.town/mirrors/foxy-moxy synced 2025-11-03 18:12:17 -08:00
Code Issues Projects Releases Packages Wiki Activity

render ears and use chance

Browse source
This commit is contained in:
Jeffrey Sun 2016-12-15 14:21:30 -08:00
parent 4a64a2f57f
commit 4448a59dd0
3 changed files with 49 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

21
js/fox.js
View file

@ -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
}
};
}());

1
package.json
View file

@ -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"

39
server.js
View file

@ -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";