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

Update to es2015 canst's in the Fox class and renderer.

Browse source
This commit is contained in:
lucaswadedavis 2016-12-22 11:40:48 -08:00
parent 478ed6b5f7
commit 7e175341fe
2 changed files with 34 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
js/fox.js
View file

@ -1,10 +1,10 @@
var Chance = require('chance');
const Chance = require('chance');
var hsl = function (h, s, l) {
const hsl = function (h, s, l) {
return "hsl(" + h + "," + s + "%, " + l + "%)";
}
var Fox = function (IMG_WIDTH, IMG_HEIGHT, seed) {
const Fox = function (IMG_WIDTH, IMG_HEIGHT, seed) {
if (seed) {
chance = new Chance(seed);
} else {
@ -12,24 +12,24 @@ var Fox = function (IMG_WIDTH, IMG_HEIGHT, seed) {
}
// origin: head top left corner
var kappa = chance.floating({min: 0.2, max: 0.45})
const kappa = chance.floating({min: 0.2, max: 0.45})
var hue = chance.integer({min: 5, max: 50});
var saturation = chance.integer({min: 70, max: 90});
var lightness = chance.integer({min: 40, max: 60});
const hue = chance.integer({min: 5, max: 50});
const saturation = chance.integer({min: 70, max: 90});
const lightness = chance.integer({min: 40, max: 60});
var head = {
const head = {
width: 0.6 * IMG_WIDTH,
height: 0.6 * IMG_HEIGHT,
kappa: kappa,
color: hsl(hue, saturation, lightness)
}
var origin = {x: IMG_WIDTH / 2 - head.width / 2, y: 0.5 * IMG_HEIGHT - head.height / 2};
const origin = {x: IMG_WIDTH / 2 - head.width / 2, y: 0.5 * IMG_HEIGHT - head.height / 2};
var ears = (function (origin, headWidth, headHeight, headColor) {
var offsetX = chance.floating({min: 0.17 * headWidth, max: 0.2 * headWidth});
var angle = chance.floating({min: 0.05 * Math.PI, max: 0.2 * Math.PI});
const ears = (function (origin, headWidth, headHeight, headColor) {
const offsetX = chance.floating({min: 0.17 * headWidth, max: 0.2 * headWidth});
const angle = chance.floating({min: 0.05 * Math.PI, max: 0.2 * Math.PI});
return {
color: headColor,
kappa: 0.9 * kappa,
@ -50,12 +50,12 @@ var Fox = function (IMG_WIDTH, IMG_HEIGHT, seed) {
};
}(origin, head.width, head.height, head.color));
var eyes = (function (origin, headWidth, headHeight) {
const eyes = (function (origin, headWidth, headHeight) {
// TODO: color
var offsetY = chance.floating({min: -0.05 * headHeight, max: -0.025 * headHeight});
var offsetX = chance.floating({min: 0.13 * headWidth, max: 0.25 * headWidth});
const offsetY = chance.floating({min: -0.05 * headHeight, max: -0.025 * headHeight});
const offsetX = chance.floating({min: 0.13 * headWidth, max: 0.25 * headWidth});
var eyeHeight = chance.floating({min: 0.08 * headHeight, max: 0.13 * headHeight});
const eyeHeight = chance.floating({min: 0.08 * headHeight, max: 0.13 * headHeight});
return {
height: eyeHeight,
@ -73,14 +73,14 @@ var Fox = function (IMG_WIDTH, IMG_HEIGHT, seed) {
}
}(origin, head.width, head.height));
var nose = {
const nose = {
x: origin.x + (head.width/2),
y: (eyes.left.y + chance.floating({min: 0.2, max: 0.4}) * (origin.y + head.height - eyes.left.y)),
width: chance.floating({min: 0.03, max: 0.04}) * head.width,
height: chance.floating({min: 0.03, max: 0.04}) * head.width
}
var mouth = {
const mouth = {
x: origin.x + (head.width/2),
y: (nose.y + chance.floating({min: 0.2, max: 0.35}) * (origin.y + head.height - nose.y)),
width: chance.floating({min: 0.08, max: 0.15}) * head.width,
@ -88,7 +88,7 @@ var Fox = function (IMG_WIDTH, IMG_HEIGHT, seed) {
style: chance.pickone(['smirk', 'cat', 'none'])
}
var mask = {
const mask = {
width: chance.floating({min: 0.5 * IMG_WIDTH, max: IMG_WIDTH}),
height: chance.floating({min: 1.7 * (IMG_HEIGHT - eyes.left.y), max: 1.85 * (IMG_HEIGHT - eyes.left.y)})
}

31
js/render-fox.js
View file

@ -1,7 +1,7 @@
var renderFox = function (canvas, opts) {
var width = opts.canvas.width;
var height = opts.canvas.height;
var ctx = canvas.getContext('2d');
const renderFox = function (canvas, opts) {
const width = opts.canvas.width;
const height = opts.canvas.height;
const ctx = canvas.getContext('2d');
ctx.fillStyle = opts.canvas.color;
ctx.fillRect(0, 0, width, height);
@ -15,8 +15,8 @@ var renderFox = function (canvas, opts) {
};
function shift_canvas(ctx, w, h, dx, dy) {
var topImage = ctx.getImageData(0, 0, w, h);
var bottomImage = ctx.getImageData(0, h - dy, w, h);
const topImage = ctx.getImageData(0, 0, w, h);
const bottomImage = ctx.getImageData(0, h - dy, w, h);
ctx.clearRect(0, 0, w, h);
ctx.putImageData(bottomImage, 0, 0);
@ -34,7 +34,7 @@ function renderHead(ctx, opts) {
}
function renderEars(ctx, opts) {
var offset = {
const offset = {
x: ctx.canvas.width/2,
y: ctx.canvas.height/2
}
@ -123,14 +123,13 @@ function drawEllipseByCenter(ctx, cx, cy, w, h, color, fillColor, kappa) {
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
ye = y + h, // y-end
xm = x + w / 2, // x-middle
ym = y + h / 2; // y-middle
function drawEllipse(ctx, x, y, w, h, color, fillColor, kappa=0.3) {
const ox = (w / 2) * kappa; // control point offset horizontal
const oy = (h / 2) * kappa; // control point offset vertical
const xe = x + w; // x-end
const ye = y + h; // y-end
const xm = x + w / 2; // x-middle
const ym = y + h / 2; // y-middle
if (color) {
ctx.strokeStyle = color;
@ -141,7 +140,7 @@ function drawEllipse(ctx, x, y, w, h, color, fillColor, kappa) {
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;
fillColor = fillColor || color;
if (fillColor) {
ctx.fillStyle = fillColor;
ctx.fill();