mirrors/foxy-moxy
2
0
Fork 0
mirror of https://git.sleeping.town/mirrors/foxy-moxy synced 2024-12-22 14:25:31 +00:00
Code Issues Projects Releases Packages Wiki Activity

nose eyes ears etc

Browse source
This commit is contained in:
Jeffrey Sun 2016-12-15 15:21:12 -08:00
parent f7075fb4e9
commit 38410a4c98
2 changed files with 40 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
js/fox.js
View file

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

17
server.js
View file

@ -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');