###서문에
많은 경우 한 세트의 점을 매끄러운 곡선으로 연결해야 합니다. 점에서 곡선으로, 이것이 곡선 피팅입니다. 최소 제곱법은 곡선 피팅을 구현하는 가장 간단한 방법으로, 효과는 그리 좋지 않지만 간단함이 장점입니다
##一.곡선 피팅
연속 곡선을 사용하여 평면상의 이산 점군이 나타내는 좌표 간의 함수 관계를 근사적으로 묘사 또는 모방하는 데이터 처리 방법
네,说白了란 매끄러운 곡선으로 연결하는 것입니다. 연필을 들고 있으면 쉽게 할 수 있지만, 프로그래밍으로 구현하려면 일정한 난이도가 있습니다. 아래에서 사용할 방법은 최소 제곱법이라고 하며, 원리, 수학 공식, 증명 과정에 대해서는 죄송하지만 저는 알지 못합니다.
##二.완전한 코드
P.S. 아래 코드는 어떤 Java 구현을 기반으로 수정한 것입니다. 여기를 클릭 하여 원문을 확인하세요
function PolyFitForcast() {
/**
* <p>
* 函数功能：最小二乘法曲线拟合
* </p>
* <p>
* 方程:Y = a(0) + a(1) * (X - X1)+ a(2) * (X - X1)^2 + ..... .+ a(m) * (X -
* X1)^m X1 为 X 的平均数
* </p>
*
* @param x
* 实型一维数组，长度为 n. 存放给定 n 个数据点的 X 坐标
* @param y
* 实型一维数组，长度为 n.存放给定 n 个 데이터 점의 Y 坐标
* @param n
* 变量。给定 데이터 점의 개수
* @param a
* 实型一维数组，长度为 m. 返回 m-1 次拟合多项式的 m 个系数
* @param m
* 拟合多项式的项数，即拟合多项式的最高次数为 m-1. 要求 m<=n 且 m<=20。若 m>n 或 m>20
* ，则本函数自动按 m=min{n,20} 处理.
* <p>
* Date:2007-12-25 16:21 PM
* </p>
* @author qingbao-gao
* @return 多项式系数存储数组
*/
function PolyFit(x, y, n, a, m) {
var i, j, k;
var z, p, c, g, q = 0, d1, d2;
var s = new Array(20);
var t = new Array(20);
var b = new Array(20);
var dt = new Array(3);
for (i = 0; i <= m - 1; i++) {
a[i] = 0.0;
}
if (m > n) {
m = n;
}
if (m > 20) {
m = 20;
}
z = 0.0;
for (i = 0; i <= n - 1; i++) {
z = z + x[i] / (1.0 * n);
}
b[0] = 1.0;
d1 = 1.0 * n;
p = 0.0;
c = 0.0;
for (i = 0; i <= n - 1; i++) {
p = p + (x[i] - z);
c = c + y[i];
}
c = c / d1;
p = p / d1;
a[0] = c * b[0];
if (m > 1) {
t[1] = 1.0;
t[0] = -p;
d2 = 0.0;
c = 0.0;
g = 0.0;
for (i = 0; i <= n - 1; i++) {
q = x[i] - z - p;
d2 = d2 + q * q;
c = c + y[i] * q;
g = g + (x[i] - z) * q * q;
}
c = c / d2;
p = g / d2;
q = d2 / d1;
d1 = d2;
a[1] = c * t[1];
a[0] = c * t[0] + a[0];
}
for (j = 2; j <= m - 1; j++) {
s[j] = t[j - 1];
s[j - 1] = -p * t[j - 1] + t[j - 2];
if (j >= 3)
for (k = j - 2; k >= 1; k--) {
s[k] = -p * t[k] + t[k - 1] - q * b[k];
}
s[0] = -p * t[0] - q * b[0];
d2 = 0.0;
c = 0.0;
g = 0.0;
for (i = 0; i <= n - 1; i++) {
q = s[j];
for (k = j - 1; k >= 0; k--) {
q = q * (x[i] - z) + s[k];
}
d2 = d2 + q * q;
c = c + y[i] * q;
g = g + (x[i] - z) * q * q;
}
c = c / d2;
p = g / d2;
q = d2 / d1;
d1 = d2;
a[j] = c * s[j];
t[j] = s[j];
for (k = j - 1; k >= 0; k--) {
a[k] = c * s[k] + a[k];
b[k] = t[k];
t[k] = s[k];
}
}
dt[0] = 0.0;
dt[1] = 0.0;
dt[2] = 0.0;
for (i = 0; i <= n - 1; i++) {
q = a[m - 1];
for (k = m - 2; k >= 0; k--) {
q = a[k] + q * (x[i] - z);
}
p = q - y[i];
if (Math.abs(p) > dt[2]) {
dt[2] = Math.abs(p);
}
dt[0] = dt[0] + p * p;
dt[1] = dt[1] + Math.abs(p);
}
return a;
}// end
/**
* <p>
* 对 X 轴 데이터 점 구平均值
* </p>
*
* @param x
* 存储 X 轴 데이터 점의数组
* <p>
* Date:2007-12-25 20:21 PM
* </p>
* @author qingbao-gao
* @return 平均值
*/
function average(x) {
var ave = 0;
var sum = 0;
if (x !== null) {
for (var i = 0; i < x.length; i++) {
sum += x[i];
}
ave = sum / x.length;
}
return ave;
}
/**
* <p>
* 由 X 值获得 Y 值
* </p>
* @param x
* 当前 X 轴 입력 값，即为 예측 의 月份
* @param xx
* 当前 X 轴 입력 값 의 前 X 데이터 점
* @param a
* 存储多项式系数 의数组
* @param m
* 存储多项式 의 最高次数 의数组
* <p>
* Date:2007-12-25 PM 20:07
* </p>
* @return 对应 X 轴 데이터 점 값 의 Y 轴 값
*/
function getY(x, xx, a, m) {
var y = 0;
var ave = average(xx);
var l = 0;
for (var i = 0; i < m; i++) {
l = a[0];
if (i > 0) {
y += a[i] * Math.pow((x - ave), i);
}
}
return (y + l);
}
/**
* 返回拟合后的 점 坐标数组
* @param {Array} arr 점 坐标数组
* @return {Array} 拟合后的 점 坐标数组
*/
this.get = function(arr) {
var arrX = [], arrY = [];
for (var i = 0; i < arr.length; i++) {
arrX.push(arr[i].x);
arrY.push(arr[i].y);
}
var len = arrY.length;
var m = 3;
var a = new Array(arrX.length);
var aa = PolyFit(arrX, arrY, len, a, m);
var arrRes = [];
for(var i = 0; i < len; i++){
arrRes.push({x: arrX[i], y: getY(arrX[i], arrX, aa, m)});
}
return arrRes;
};
}
// var arr = [{x: 10, y: 10},{x: 40, y: 90},{x: 70, y: 65},{x: 100, y: 15}];
// // 最小二乘法拟合
// var res = new PolyFitForcast().get(arr);
// var canvas = document.createElement('canvas');
// var ctx2d = canvas.getContext('2d');
// ctx2d.lineWidth = 1;
// ctx2d.strokeStyle = '#000';
// ctx2d.beginPath();
// ctx2d.moveTo(arr[0].x, arr[0].y);
// ctx2d.lineTo(arr[1].x, arr[1].y);
// ctx2d.lineTo(arr[2].x, arr[2].y);
// ctx2d.lineTo(arr[3].x, arr[3].y);
// ctx2d.stroke();
// ctx2d.strokeStyle = '#f00';
// ctx2d.beginPath();
// ctx2d.moveTo(res[0].x, res[0].y);
// ctx2d.lineTo(res[1].x, res[1].y);
// ctx2d.lineTo(res[2].x, res[2].y);
// ctx2d.lineTo(res[3].x, res[3].y);
// ctx2d.stroke();
// document.body.appendChild(canvas);
##三.효과
위의 코드를 브라우저 console 에 복사하여 주석을 삭제한 후 Enter 를 누르면 효과를 확인할 수 있습니다. 물론, 4 개의 점의 효과는 매우 나쁩니다. 아래에 10 개의 점을 피팅한 효과도를 제시합니다:
실제로 10 개의 점을 피팅한 후에도 곡선은 아직 충분히 매끄럽지 않습니다. 그러나 만약 어떤 장면이 마침내 많은 점을 제공할 수 있고,描画 속도가 요구되며 정밀도 요구가 높지 않다면, 이 방식은 아주 좋습니다
##四.더 매끄럽고 자연스러운 곡선 피팅
최소 제곱법은 기대할 수 없습니다. 여러 번 피팅을 반복하지 않는 한, 그러나 효과 향상은 뚜렷하지 않으며, 곡선은 점점 더 평평해지고, 마지막에는 직선에 근사합니다. 이것은 우리가 원하는 결과가 아닙니다
또 다른 방법으로 베지어 곡선이 있습니다. 한 세트의 정보 점 외에, 2 개의 제어 점을 제공해야 합니다. 제어 점 선택이 적절하면 매우 완벽한 매끄러운 곡선 효과를 구현할 수 있습니다. 어려운 것은 기존 정보 점에서 2 개의 제어 점을 어떻게 구하는가입니다. 구체적인 방법은 Smoother Signatures 를 확인하세요
아직 댓글이 없습니다