Hermite Curve_part2

by YouTingKuo

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js"></script>
<div id="info">Hermite 2D Curve</div>
<div id="dataShow"></div>

CSS

#info {
    position: absolute;
    top: 0px;
    width: 100%;
    padding: 10px;
    text-align: center;
    color: #ffff00
}
#dataShow {
    position: absolute;
    bottom: 20px;
    width: 100%;
    padding:5px;
    text-align: center;
    color: #00ffff;
}
body {
    overflow: hidden;
}

JavaScript

var clock = new THREE.Clock();
var camera, scene, renderer, border;
var mouse = new THREE.Vector2();
var curve;
var count = 0;
var p0, p1, p2, p3;
var r=15; //半徑
var q = [];
var coefficient; //六次方多項式
var resultOfB, resultOfN;
var angleShow;
var mes;

init();
animate();

function eval (coeff, x) {
	var a6=coeff[0],a5=coeff[1],a4=coeff[2],a3=coeff[3],
        a2=coeff[4],a1=coeff[5],a0=coeff[6];
	var fx = x*(x*(x*(x*(x*(a6*x+a5)+a4)+a3)+a2)+a1)+a0;
    var dfx = x*(x*(x*(x*(6*a6*x+5*a5)+4*a4)+3*a3)+2*a2)+a1;
    return [fx,dfx];
}

function bisection (func, interval, eps) {
    var xLo = interval[0];
    var xHi = interval[1];
    
	fHi = func(coefficient,xHi)[0];   // fb
	fLo = func(coefficient,xLo)[0];   // fa
    if (fLo * fHi > 0)
        return undefined;
    
	var xMid, fHi, fLo, fMid;
	var iter = 0;
    while (xHi - xLo > eps) {
        ++iter;
		xMid = (xLo+xHi)/2;
		fMid = func(coefficient,xMid)[0];  // fc
		
        if (Math.abs(fMid) < eps)
			return [xMid, iter];

        else if (fMid*fLo < 0) { // fa*fc < 0 --> [a,c]
			xHi = xMid;
			fHi = fMid;
		} else {  // fc*fb < 0 --> [c,b]
			xLo = xMid;
			fLo = fMid;
		}
	}
    
	return [(xLo+xHi)/2, iter];
}

function Newton (eval, x0, epsilon) {
    var eps = epsilon || 1e-4;
 	var imax = 20;
    for (var i = 0; i < imax; i++) {
	    var fdf = eval (coefficient, x0);
        x1 = x0 - fdf[0]/fdf[1];
        if (Math.abs(x1 - x0) < eps)
            break;
        x0 = x1;
    }
    return [x1, i];  // return [approx. root, iterations]
}

function FourPointForm(q0, q1, q2, q3, mes) {
    var curveGroup = new THREE.Object3D();
    // p1 = q0, t1 = q1-q0, p2 = q3, t2 = q3-q2
    curveGroup.add(drawHermiteCurve(q0, q1.clone().sub(q0), q3, q3.clone().sub(q2)));

    // add four points
    var point, tangent;
    point = new THREE.Mesh(new THREE.CircleGeometry(1, 12), new THREE.MeshBasicMaterial());
    point.position.copy(q0);
    curveGroup.add(point);
    tangent = new THREE.Mesh(new THREE.PlaneGeometry(2, 2),...