mirror of
https://git.sleeping.town/mirrors/foxy-moxy
synced 2024-11-21 11:37: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 offsetX = chance.floating({min: 0.1 * headWidth, max: 0.4 * headWidth});
|
||||
var angle = chance.floating({min: 0, max: Math.PI / 6});
|
||||
// TODO: size, angle?
|
||||
// TODO: size
|
||||
return {
|
||||
left: {
|
||||
x: origin.x + (headWidth/2) - offsetX,
|
||||
|
@ -33,8 +33,20 @@ var Fox = function (IMG_WIDTH, IMG_HEIGHT) {
|
|||
}());
|
||||
|
||||
var eyes = (function () {
|
||||
// TODO: y, offsetX, color
|
||||
return null;
|
||||
// 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});
|
||||
|
||||
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 {
|
||||
|
|
35
server.js
35
server.js
|
@ -39,10 +39,12 @@ var renderFox = function (canvas, opts) {
|
|||
var height = opts.canvas.height;
|
||||
var ctx = canvas.getContext('2d');
|
||||
|
||||
// draw head
|
||||
renderHead(ctx, opts.head);
|
||||
// draw ears
|
||||
renderEars(ctx, opts.ears);
|
||||
// draw head
|
||||
renderHead(ctx, opts.head);
|
||||
// draw eyes
|
||||
renderEyes(ctx, opts.eyes);
|
||||
// draw cheeks
|
||||
// draw eyes
|
||||
// draw nose
|
||||
|
@ -53,7 +55,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);
|
||||
drawEllipseByCenter(ctx, 0, 0, opts.width, opts.height, "orange");
|
||||
ctx.restore();
|
||||
}
|
||||
|
||||
|
@ -65,23 +67,28 @@ 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);
|
||||
drawEllipseByCenter(ctx, opts.left.x - offset.x, opts.left.y - offset.y, opts.left.width, opts.left.height, "orange");
|
||||
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);
|
||||
drawEllipseByCenter(ctx, opts.right.x - offset.x, opts.right.y - offset.y, opts.right.width, opts.right.height, "orange");
|
||||
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);
|
||||
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);
|
||||
}
|
||||
|
||||
function drawEllipse(ctx, x, y, w, h) {
|
||||
var kappa = .3,
|
||||
function drawEllipseByCenter(ctx, cx, cy, w, h, color, fillColor, kappa) {
|
||||
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
|
||||
oy = (h / 2) * kappa, // control point offset vertical
|
||||
xe = x + w, // x-end
|
||||
|
@ -89,12 +96,20 @@ function drawEllipse(ctx, x, y, w, h) {
|
|||
xm = x + w / 2, // x-middle
|
||||
ym = y + h / 2; // y-middle
|
||||
|
||||
if (color) {
|
||||
ctx.strokeStyle = color;
|
||||
}
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x, ym);
|
||||
ctx.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
|
||||
ctx.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
|
||||
ctx.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
|
||||
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.stroke();
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue