siriusfox/foxy-moxy
1
0
Fork 0
mirror of https://git.sleeping.town/mirrors/foxy-moxy synced 2025-11-03 18:12:17 -08:00
Code Issues Projects Releases Packages Wiki Activity

bezier curves and kappa

Browse source
This commit is contained in:
Jeffrey Sun 2016-12-15 13:39:02 -08:00
parent d75f446e84
commit 4a64a2f57f
2 changed files with 54 additions and 85 deletions
Download patch file Download diff file Expand all files Collapse all files

4
js/fox.js
View file

@ -41,8 +41,8 @@ var Fox = function (IMG_WIDTH, IMG_HEIGHT) {
}, },
head: { head: {
origin: origin, origin: origin,
headWidth: headWidth, width: headWidth,
headHeight:headHeight height: headHeight
}, },
ears: ears, ears: ears,
eyes: eyes, eyes: eyes,

135
server.js
View file

@ -2,37 +2,37 @@ var Fox = require('./js/fox.js');
var davis = require('./js/davis.js'); var davis = require('./js/davis.js');
var geo = require('./js/geo.js'); var geo = require('./js/geo.js');
var ngon = function (c) { // var ngon = function (c) {
var n=c.n || 3; // var n=c.n || 3;
//
var ctx= c.context || false; // var ctx= c.context || false;
var x=c.x || 500; // var x=c.x || 500;
var y=c.y || x; // var y=c.y || x;
var r=c.r || 500; // var r=c.r || 500;
if (n%2==0){ // if (n%2==0){
var rotation=360/(n*2)*davis.random(n*2); // var rotation=360/(n*2)*davis.random(n*2);
} // }
else { // else {
var rotation=90+(180*davis.random(2)); // var rotation=90+(180*davis.random(2));
}; // };
rotation=c.rotation || rotation; // rotation=c.rotation || rotation;
var color=c.color || davis.randomColor("grey"); // var color=c.color || davis.randomColor("grey");
var lineWidth=c.lineWidth || 1; // var lineWidth=c.lineWidth || 1;
var fill=c.fill || davis.randcomColor(); // var fill=c.fill || davis.randcomColor();
ctx.beginPath(); // ctx.beginPath();
for (var i=0;i<n+2;i++){ // for (var i=0;i<n+2;i++){
var nx=geo.getPoint(x,y,r,rotation+(i*360/n)).x2; // var nx=geo.getPoint(x,y,r,rotation+(i*360/n)).x2;
var ny=geo.getPoint(x,y,r,rotation+(i*360/n)).y2; // var ny=geo.getPoint(x,y,r,rotation+(i*360/n)).y2;
ctx.lineTo(nx,ny); // ctx.lineTo(nx,ny);
} // }
ctx.lineJoin='miter'; // ctx.lineJoin='miter';
ctx.strokeStyle=color; // ctx.strokeStyle=color;
ctx.lineWidth=lineWidth; // ctx.lineWidth=lineWidth;
ctx.fillStyle=fill; // ctx.fillStyle=fill;
ctx.fill(); // ctx.fill();
ctx.stroke(); // ctx.stroke();
return true; // return true;
}; // };
var renderFox = function (canvas, opts) { var renderFox = function (canvas, opts) {
var width = opts.canvas.width; var width = opts.canvas.width;
@ -40,17 +40,31 @@ var renderFox = function (canvas, opts) {
var ctx = canvas.getContext('2d'); var ctx = canvas.getContext('2d');
ctx.beginPath(); ctx.beginPath();
circle({ drawEllipseByCenter(ctx, width/2, height/2, opts.head.width, opts.head.height);
gradient:false,
context:ctx,
x: width/2,
y: height/2,
r: width/2,
});
}; };
function drawEllipseByCenter(ctx, cx, cy, w, h) {
drawEllipse(ctx, cx - w/2.0, cy - h/2.0, w, h);
}
function drawEllipse(ctx, x, y, w, h) {
var kappa = .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
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);
//ctx.closePath(); // not used correctly, see comments (use to close off open path)
ctx.stroke();
}
var circle = function(c){ var circle = function(c){
var ctx= c.context || false; var ctx= c.context || false;
@ -71,51 +85,6 @@ var circle = function(c){
return true; return true;
}; };
var radial = function(ctx,width,height){
ctx.beginPath();
ctx.arc(width/2,width/2,davis.random(width/2),0,2*Math.PI);
ctx.strokeStyle=davis.randomColor();
ctx.lineWidth=1+davis.random(0.5*width);
ctx.stroke();
for (var j=0;j<davis.random(4);j++){
var r=davis.random(width/2);
var rf=davis.random(width/2);
var color=davis.randomColor();
davis.maybe(2,3,function(){color=davis.randomColor("grey");});
var lw=1+davis.random(width/10);
var steps=1+davis.random(30);
var incrementMod=davis.random(3)*90;
var n=davis.random(6);
var rotation=90*davis.random(3);
var fadeColor=davis.pick(["rgba(0,0,0,0)","rgba(255,255,255,0)"]);
var fadeRadius=Math.random();
davis.maybe(1,5,function(){fadeRadius=0;});
davis.maybe(1,5,function(){fadeRadius=false;});
for (var i=0;i<steps;i++){
var increment=i*360/steps;
var x=geo.getPoint(width/2,height/2,rf,increment+incrementMod).x2;
var y=geo.getPoint(width/2,height/2,rf,increment+incrementMod).y2;
circle({
n:n,
gradient:true,
context:ctx,
x:x,
y:y,
r:r,
rotation:rotation,
lineWidth:lw,
color:color,
fadeColor:fadeColor,
fadeRadius:fadeRadius
});
}
}
};
var Canvas = require('canvas'); var Canvas = require('canvas');
var express = require('express'); var express = require('express');
var fs = require('fs'); var fs = require('fs');