mirror of
https://git.sleeping.town/mirrors/foxy-moxy
synced 2024-11-14 16:17:44 +00:00
nose eyes ears etc
This commit is contained in:
parent
f7075fb4e9
commit
38410a4c98
2 changed files with 40 additions and 11 deletions
34
js/fox.js
34
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
|
||||
};
|
||||
};
|
||||
|
|
17
server.js
17
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');
|
||||
|
|
Loading…
Reference in a new issue