From 4a64a2f57f93e3d3eebb6027006281b20c9174e8 Mon Sep 17 00:00:00 2001
From: Jeffrey Sun <jrsun@mit.edu>
Date: Thu, 15 Dec 2016 13:39:02 -0800
Subject: [PATCH] bezier curves and kappa

---
 js/fox.js |   4 +-
 server.js | 135 +++++++++++++++++++++---------------------------------
 2 files changed, 54 insertions(+), 85 deletions(-)

diff --git a/js/fox.js b/js/fox.js
index 40359a3..0bcdd0c 100644
--- a/js/fox.js
+++ b/js/fox.js
@@ -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,
diff --git a/server.js b/server.js
index 356aeca..d709a98 100644
--- a/server.js
+++ b/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');