mirror of
https://git.sleeping.town/mirrors/foxy-moxy
synced 2024-11-21 19:47:43 +00:00
colors and such
This commit is contained in:
parent
bdb6c46df8
commit
1a4c1bd288
2 changed files with 40 additions and 13 deletions
18
js/fox.js
18
js/fox.js
|
@ -13,7 +13,7 @@ var Fox = function (IMG_WIDTH, IMG_HEIGHT) {
|
||||||
var ears = (function () {
|
var ears = (function () {
|
||||||
var offsetX = chance.floating({min: 0.1 * headWidth, max: 0.4 * headWidth});
|
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: Math.PI / 6});
|
||||||
// TODO: size, angle?
|
// TODO: size
|
||||||
return {
|
return {
|
||||||
left: {
|
left: {
|
||||||
x: origin.x + (headWidth/2) - offsetX,
|
x: origin.x + (headWidth/2) - offsetX,
|
||||||
|
@ -33,8 +33,20 @@ var Fox = function (IMG_WIDTH, IMG_HEIGHT) {
|
||||||
}());
|
}());
|
||||||
|
|
||||||
var eyes = (function () {
|
var eyes = (function () {
|
||||||
// TODO: y, offsetX, color
|
// TODO: color
|
||||||
return null;
|
var offsetY = chance.floating({min: -0.05 * headHeight, max: 0.05 * headHeight});
|
||||||
|
var offsetX = chance.floating({min: 0.2 * headWidth, max: 0.25 * headWidth});
|
||||||
|
|
||||||
|
return {
|
||||||
|
left: {
|
||||||
|
x: origin.x + (headWidth/2) - offsetX,
|
||||||
|
y: origin.y + (headHeight/2) + offsetY
|
||||||
|
},
|
||||||
|
right: {
|
||||||
|
x: origin.x + (headWidth/2) + offsetX,
|
||||||
|
y: origin.y + (headHeight/2) + offsetY
|
||||||
|
}
|
||||||
|
}
|
||||||
}());
|
}());
|
||||||
|
|
||||||
return {
|
return {
|
||||||
|
|
35
server.js
35
server.js
|
@ -39,10 +39,12 @@ var renderFox = function (canvas, opts) {
|
||||||
var height = opts.canvas.height;
|
var height = opts.canvas.height;
|
||||||
var ctx = canvas.getContext('2d');
|
var ctx = canvas.getContext('2d');
|
||||||
|
|
||||||
// draw head
|
|
||||||
renderHead(ctx, opts.head);
|
|
||||||
// draw ears
|
// draw ears
|
||||||
renderEars(ctx, opts.ears);
|
renderEars(ctx, opts.ears);
|
||||||
|
// draw head
|
||||||
|
renderHead(ctx, opts.head);
|
||||||
|
// draw eyes
|
||||||
|
renderEyes(ctx, opts.eyes);
|
||||||
// draw cheeks
|
// draw cheeks
|
||||||
// draw eyes
|
// draw eyes
|
||||||
// draw nose
|
// draw nose
|
||||||
|
@ -53,7 +55,7 @@ function renderHead(ctx, opts) {
|
||||||
ctx.save();
|
ctx.save();
|
||||||
ctx.translate(ctx.canvas.width/2, ctx.canvas.height/2);
|
ctx.translate(ctx.canvas.width/2, ctx.canvas.height/2);
|
||||||
ctx.rotate(Math.PI / 4);
|
ctx.rotate(Math.PI / 4);
|
||||||
drawEllipseByCenter(ctx, 0, 0, opts.width, opts.height);
|
drawEllipseByCenter(ctx, 0, 0, opts.width, opts.height, "orange");
|
||||||
ctx.restore();
|
ctx.restore();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -65,23 +67,28 @@ function renderEars(ctx, opts) {
|
||||||
ctx.save();
|
ctx.save();
|
||||||
ctx.translate(offset.x, offset.y);
|
ctx.translate(offset.x, offset.y);
|
||||||
ctx.rotate(-opts.left.angle);
|
ctx.rotate(-opts.left.angle);
|
||||||
drawEllipseByCenter(ctx, opts.left.x - offset.x, opts.left.y - offset.y, opts.left.width, opts.left.height);
|
drawEllipseByCenter(ctx, opts.left.x - offset.x, opts.left.y - offset.y, opts.left.width, opts.left.height, "orange");
|
||||||
ctx.restore();
|
ctx.restore();
|
||||||
|
|
||||||
ctx.save();
|
ctx.save();
|
||||||
ctx.translate(offset.x, offset.y);
|
ctx.translate(offset.x, offset.y);
|
||||||
ctx.rotate(-opts.right.angle);
|
ctx.rotate(-opts.right.angle);
|
||||||
drawEllipseByCenter(ctx, opts.right.x - offset.x, opts.right.y - offset.y, opts.right.width, opts.right.height);
|
drawEllipseByCenter(ctx, opts.right.x - offset.x, opts.right.y - offset.y, opts.right.width, opts.right.height, "orange");
|
||||||
ctx.restore();
|
ctx.restore();
|
||||||
}
|
}
|
||||||
|
|
||||||
function drawEllipseByCenter(ctx, cx, cy, w, h) {
|
function renderEyes(ctx, opts) {
|
||||||
console.log("ellipse coords", cx, cy, w, h);
|
drawEllipseByCenter(ctx, opts.left.x, opts.left.y, 5, 10, "black", 1);
|
||||||
drawEllipse(ctx, cx - w/2.0, cy - h/2.0, w, h);
|
drawEllipseByCenter(ctx, opts.right.x, opts.right.y, 5, 10, "black", 1);
|
||||||
}
|
}
|
||||||
|
|
||||||
function drawEllipse(ctx, x, y, w, h) {
|
function drawEllipseByCenter(ctx, cx, cy, w, h, color, fillColor, kappa) {
|
||||||
var kappa = .3,
|
console.log("ellipse coords", cx, cy, w, h);
|
||||||
|
drawEllipse(ctx, cx - w/2.0, cy - h/2.0, w, h, color, fillColor, kappa);
|
||||||
|
}
|
||||||
|
|
||||||
|
function drawEllipse(ctx, x, y, w, h, color, fillColor, kappa) {
|
||||||
|
var kappa = kappa || 0.3,
|
||||||
ox = (w / 2) * kappa, // control point offset horizontal
|
ox = (w / 2) * kappa, // control point offset horizontal
|
||||||
oy = (h / 2) * kappa, // control point offset vertical
|
oy = (h / 2) * kappa, // control point offset vertical
|
||||||
xe = x + w, // x-end
|
xe = x + w, // x-end
|
||||||
|
@ -89,12 +96,20 @@ function drawEllipse(ctx, x, y, w, h) {
|
||||||
xm = x + w / 2, // x-middle
|
xm = x + w / 2, // x-middle
|
||||||
ym = y + h / 2; // y-middle
|
ym = y + h / 2; // y-middle
|
||||||
|
|
||||||
|
if (color) {
|
||||||
|
ctx.strokeStyle = color;
|
||||||
|
}
|
||||||
ctx.beginPath();
|
ctx.beginPath();
|
||||||
ctx.moveTo(x, ym);
|
ctx.moveTo(x, ym);
|
||||||
ctx.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
|
ctx.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
|
||||||
ctx.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
|
ctx.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
|
||||||
ctx.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
|
ctx.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
|
||||||
ctx.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
|
ctx.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
|
||||||
|
var fillColor = fillColor || color;
|
||||||
|
if (fillColor) {
|
||||||
|
ctx.fillStyle = fillColor;
|
||||||
|
ctx.fill();
|
||||||
|
}
|
||||||
//ctx.closePath(); // not used correctly, see comments (use to close off open path)
|
//ctx.closePath(); // not used correctly, see comments (use to close off open path)
|
||||||
ctx.stroke();
|
ctx.stroke();
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue