mirror of
https://git.sleeping.town/mirrors/foxy-moxy
synced 2024-11-15 00:27:43 +00:00
bezier curves and kappa
This commit is contained in:
Jeffrey Sun
parent
d75f446e84
commit
4a64a2f57f
2 changed files with 54 additions and 85 deletions
|
|
@ -41,8 +41,8 @@ var Fox = function (IMG_WIDTH, IMG_HEIGHT) {
|
|||
},
|
||||
head: {
|
||||
origin: origin,
|
||||
headWidth: headWidth,
|
||||
headHeight:headHeight
|
||||
width: headWidth,
|
||||
height: headHeight
|
||||
},
|
||||
ears: ears,
|
||||
eyes: eyes,
|
||||
|
|
|
|||
135
server.js
135
server.js
|
|
@ -2,37 +2,37 @@ var Fox = require('./js/fox.js');
|
|||
var davis = require('./js/davis.js');
|
||||
var geo = require('./js/geo.js');
|
||||
|
||||
var ngon = function (c) {
|
||||
var n=c.n || 3;
|
||||
|
||||
var ctx= c.context || false;
|
||||
var x=c.x || 500;
|
||||
var y=c.y || x;
|
||||
var r=c.r || 500;
|
||||
if (n%2==0){
|
||||
var rotation=360/(n*2)*davis.random(n*2);
|
||||
}
|
||||
else {
|
||||
var rotation=90+(180*davis.random(2));
|
||||
};
|
||||
rotation=c.rotation || rotation;
|
||||
var color=c.color || davis.randomColor("grey");
|
||||
var lineWidth=c.lineWidth || 1;
|
||||
var fill=c.fill || davis.randcomColor();
|
||||
ctx.beginPath();
|
||||
for (var i=0;i<n+2;i++){
|
||||
var nx=geo.getPoint(x,y,r,rotation+(i*360/n)).x2;
|
||||
var ny=geo.getPoint(x,y,r,rotation+(i*360/n)).y2;
|
||||
ctx.lineTo(nx,ny);
|
||||
}
|
||||
ctx.lineJoin='miter';
|
||||
ctx.strokeStyle=color;
|
||||
ctx.lineWidth=lineWidth;
|
||||
ctx.fillStyle=fill;
|
||||
ctx.fill();
|
||||
ctx.stroke();
|
||||
return true;
|
||||
};
|
||||
// var ngon = function (c) {
|
||||
// var n=c.n || 3;
|
||||
//
|
||||
// var ctx= c.context || false;
|
||||
// var x=c.x || 500;
|
||||
// var y=c.y || x;
|
||||
// var r=c.r || 500;
|
||||
// if (n%2==0){
|
||||
// var rotation=360/(n*2)*davis.random(n*2);
|
||||
// }
|
||||
// else {
|
||||
// var rotation=90+(180*davis.random(2));
|
||||
// };
|
||||
// rotation=c.rotation || rotation;
|
||||
// var color=c.color || davis.randomColor("grey");
|
||||
// var lineWidth=c.lineWidth || 1;
|
||||
// var fill=c.fill || davis.randcomColor();
|
||||
// ctx.beginPath();
|
||||
// for (var i=0;i<n+2;i++){
|
||||
// var nx=geo.getPoint(x,y,r,rotation+(i*360/n)).x2;
|
||||
// var ny=geo.getPoint(x,y,r,rotation+(i*360/n)).y2;
|
||||
// ctx.lineTo(nx,ny);
|
||||
// }
|
||||
// ctx.lineJoin='miter';
|
||||
// ctx.strokeStyle=color;
|
||||
// ctx.lineWidth=lineWidth;
|
||||
// ctx.fillStyle=fill;
|
||||
// ctx.fill();
|
||||
// ctx.stroke();
|
||||
// return true;
|
||||
// };
|
||||
|
||||
var renderFox = function (canvas, opts) {
|
||||
var width = opts.canvas.width;
|
||||
|
|
@ -40,17 +40,31 @@ var renderFox = function (canvas, opts) {
|
|||
var ctx = canvas.getContext('2d');
|
||||
ctx.beginPath();
|
||||
|
||||
circle({
|
||||
gradient:false,
|
||||
context:ctx,
|
||||
x: width/2,
|
||||
y: height/2,
|
||||
r: width/2,
|
||||
});
|
||||
drawEllipseByCenter(ctx, width/2, height/2, opts.head.width, opts.head.height);
|
||||
};
|
||||
|
||||
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 ctx= c.context || false;
|
||||
|
|
@ -71,51 +85,6 @@ var circle = function(c){
|
|||
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 express = require('express');
|
||||
var fs = require('fs');
|
||||
|
|
|
|||
Loading…
Reference in a new issue