Develop Reference

Hermite Interpolation

I am trying to interpolate between 4 points using a Hermite spline. However my spline seems to always start on the second point and only interpolate to the 3rd point. I have tried this with several differnt calculations and keep getting the same result.
Can anyone give me insight on this? Here is my code.
public ControlPoint Get(float t)
{
//speed multiplyer
//t = t * 10;
return new ControlPoint(
new Vector3(Hermite(points[0].pos.x, points[1].pos.x, points[2].pos.x, points[3].pos.x, t)
, Hermite(points[0].pos.y, points[1].pos.y, points[2].pos.y, points[3].pos.y, t)
, Hermite(points[0].pos.z, points[1].pos.z, points[2].pos.z, points[3].pos.z, t)
),
new Quaternion(Hermite(points[0].rot.x, points[1].rot.x, points[2].rot.x, points[3].rot.x, t)
, Hermite(points[0].rot.y, points[1].rot.y, points[2].rot.y, points[3].rot.y, t)
, Hermite(points[0].rot.z, points[1].rot.z, points[2].rot.z, points[3].rot.z, t)
, Hermite(points[0].rot.w, points[1].rot.w, points[2].rot.w, points[3].rot.w, t)
)
);
}
float Hermite(
float y0, float y1,
float y2, float y3,
float mu,
float tension = 0,
float bias = 0)
{
float m0, m1, mu2, mu3;
float a0, a1, a2, a3;
mu2 = mu * mu;
mu3 = mu2 * mu;
m0 = (y1 - y0) * (1 + bias) * (1 - tension) / 2;
m0 += (y2 - y1) * (1 - bias) * (1 - tension) / 2;
m1 = (y2 - y1) * (1 + bias) * (1 - tension) / 2;
m1 += (y3 - y2) * (1 - bias) * (1 - tension) / 2;
a0 = 2 * mu3 - 3 * mu2 + 1;
a1 = mu3 - 2 * mu2 + mu;
a2 = mu3 - mu2;
a3 = -2 * mu3 + 3 * mu2;
return (a0 * y1 + a1 * m0 + a2 * m1 + a3 * y2);
}

I'm not an expert Hermite Splines by any stretch of the imagination, but from what I've seen is that the expected behavior would be to interpolate between the second and third point. It looks to me like you just hardcoded in each coordinate to your Get function, so it makes sense that you only get a single interpolation when a Hermite Spline is a function. Think of the second and third points as the two points you want to interpolate between, and the first and fourth points just help to create a better curve.
Since it appears you only have four points total, to interpolate between the first and second points, and third and fourth points, try repeating your first coordinates and last coordinates.
//Interpolate between 1st and 2nd points' x coord
Hermite(points[0].pos.x, points[0].pos.x, points[1].pos.x, points[2].pos.x);
//Interpolate between 3rd and 4th points' x coord
Hermite(points[2].pos.x, points[3].pos.x, points[4].pos.x, points[4].pos.x);
To interpolate between the first and second points points[0] is repeated twice because there is no points[-1]. For interpolation between the third and fourth points, points[4] is repeated because there is no points[5].
To reiterate, do not hardcode in coordinates unless you only want a single interpolation. You'll have to modify your Get function and call it a few times to adjust for the behavior you want. Check out how Snea implemented a Hermite Spline in his DrawGraph function, it helped me to better understand Hermite Spline behavior: Cubic Hermite Spline behaving strangely

How to make a pen tools which the curve go smoothly using beizer function

I have a problem of writing the beizer function. I have written a simple code in c# :
public static PointF[] BeizerFunction (int interval, PointF point0, PointF point1, PointF point2) {
//x = (1 - t) * (1 - t) * p[0].x + 2 * (1 - t) * t * p[1].x + t * t * p[2].x;
//y = (1 - t) * (1 - t) * p[0].y + 2 * (1 - t) * t * p[1].y + t * t * p[2].y;
var Points = new PointF[interval];
var time = 1.0f / (float) interval;
for (var i=0; i<Points.Length; i++) {
var point = Points [i];
point = new PointF ();
point.X = (1 - time) * (1 - time) * point0.X
+ 2 * (1 - time) * time * point1.X
+ time * time * point2.X;
point.Y = (1 - time) * (1 - time) * point0.Y
+ 2 * (1 - time) * time * point1.Y
+ time * time * point2.Y;
Points [i] = point;
time ++;
}
return Points;
}
By application is listen to mouse move so I would guess the mouse pointer would be the control points for this function. The above code if correct should give me a beizer curve from three points.
In reality, there multiple curves so there would be more than 3 points. To join the beize curve together I do something like this.
Bezier(p0.5, p1, p1.5);
Bezier(p1.5, p2, p2.5);
Bezier(p2.5, p3, p3.5);
The c# code to draw just a 3 points is this
var p0 = new PointF (50, 50);
var p1 = new PointF (100, 100);
var p2 = new PointF (150, 50);
var points = QuadraticBezierFunction.BeizerFunction (100, p0, p1, p2);
for (var i=0; points != null && i<points.Length-1; i=i+1)
canvas.DrawLine (points[i].X, points[i].Y, points[i+1].X, points[i+1].Y, new Android.Graphics.Paint ());
When I try to draw the curve it doesn't look a curve.

As per #fang's observation, don't use time ++; because you don't want to go from 0.xyz to 1.xyz, you want to increment by small fractions. The Bezier functions only "work" (that is, as intended for the usual graphics purposes) for a time parameter between 0 and 1 (inclusive), so you want to start at time=0;, iterate a number of times with some small time += step;, and stop once time>=1+step.
(and then unless you are extraordinarily lucky you probably need to manually add a final point for time=1 so you are guaranteed the correct endpoint)

Diagonal sweep and orthogonal distance of a point to diagonal

I have a problem where I'm required to find the maximum number of points that are less than or equal to a given distance D to a line drawn in a two-dimensional Euclidean plane. To solve this I wrote the algorithms that would compute a possible maximum if the line was orthogonal to either the x-axis or the y-axis. My problem is when only a diagonal line would yield the maximum number of points.
Given the constraints that both x and y have a minimum value of -1000000 and maximum of 1000000. I wrote the following algorithm to try and find out the maximum. I don't seem to be getting the right answer. Could someone please guide me on where I am going wrong. I've tried drawing a regression line as well but that used vertical distance which did not work for my purposes. Maybe I'm going all wrong and this problem can be solved as an optimization problem. Anyways' any help with a descent explanation is much appreciated.
// diagonal sweep
for (int degree = 1; degree < 180; degree++) if (degree % 90 != 0)
{
int k = 1, degrees = degree;
double x1 = -1000000, x2 = 1000000;
if (degree > 90 && degree < 180)
{
degrees = 180 - degrees;
k = -1;
}
//slope
double m1 = Math.Tan(Math.PI * degrees * k / 180.0);
//Point A
Point A = new Point(x1, m1 * x1);
//Point B
Point B = new Point(x2, m1 * x2);
for (int i = 0; i < x.Length; i++)
{
//Point P = household that needs power
Point P = new Point(x[i], y[i]);
double normalLength = Math.Sqrt((B.X - A.X) * (B.X - A.X) + (B.Y - A.Y) * (B.Y - A.Y));
double segmentLength = 1d * Math.Abs((P.X - A.X) * (B.Y - A.Y) - (P.Y - A.Y) * (B.X - A.X)) / normalLength;
if (segmentLength <= D)
tempCnt++;
}
maxConnections = Math.Max(maxConnections, tempCnt);
tempCnt = 0;
}
return maxConnections;

If you want to define this problem as an optimization problem, you should do it as follows, but it doesn't seem to me this optimization problem is solveable efficiently as is.
maximize: x_1 + x_2 + ... + x_n + 0*a + 0*b + 0*c
s.t.
x_i * d(p_i, line(a,b,c))/ MAX_DISTANCE <= 1
x_i is in {0,1}
Explanation:
x_i are inclusion variables - can get a value of 0 / 1 , and it indicates if the point p_i is in the required distance from the line.
a,b,c are the parameters for the line: ax + by + c = 0
The idea is to maximize the sum of included points, such that each included point is in the desired range. This is represented by the constraint, if x_i=0 - there is no restriction on the point p_i, as the constraint is always satisfied. Otherwise, x_i=1, and you need the distance from the line (let it be d) satisfy 1* d/MAX_DISTANCE <= 1 - which is exactly what you want.
Though I don't think there is an optimal efficient solution to this optimization problem, you might want to try some heuristical solutions for this optiization - such as Genetic Algorithms or Hill Climbing
As a side note, my gut says this problem is NP-Complete, though I have no proof for it yet - and will update this part of the answer if I (or someone else) can come up with a reduction/polynomial solution.

Compare RGB colors in c#

I'm trying to find a way to compare two colors to find out how much they are alike. I can't seem to find any resources about the subject so I'm hoping to get some pointers here.
Idealy, I would like to get a score that tells how much they are alike. For example, 0 to 100, where 100 would be equal and 0 would be totally different.
Thanks!
Edit:
Getting to know a bit more about colors from the answers I understand my question was a bit vague. I will try to explain what I needed this for.
I have pixeldata (location and color) of an application window at 800x600 size so I can find out if a certain window is open or not by checking every x-interval.
However, this method fails as soon as the application is resized (the contents are scaled, not moved). I can calculate where the pixels move, but because of rounding and antialising the color can be slightly different.
Pieter's solution was good enough for me in this case, although all other responses were extremely helpfull as well, so I just upvoted everyone. I do think that ColorEye's answer is the most accurate when looking at this from a professional way, so I marked it as the answer.

What you are looking for is called Delta-E.
http://www.colorwiki.com/wiki/Delta_E:_The_Color_Difference
It is the distance between two colors in LAB color space. It is said that the human eye cannot distinguish colors below 1 DeltaE (I find that my eyes can find differences in colors below 1 DeltaE, each person is different.)
There are 4 formulas for 'color difference'.
Delta E (CIE 1976)
Delta E (CIE 1994)
Delta E (CIE 2000)
Delta E (CMC)
Check the math link on this site:
http://www.brucelindbloom.com/
So the proper answer is to convert your RGB to LAB using the formula given, then use DeltaE 1976 to determine the 'difference' in your colors. A result of 0 would indicate identical colors. Any value higher than 0 could be judged by the rule 'A delta e of 1 or less is indistinguishable by most people'.

There's an open-source .net library that lets you do this easily: https://github.com/hvalidi/ColorMine
The most common method for comparing colors is CIE76:
var a = new Rgb { R = 149, G = 13, B = 12 }
var b = new Rgb { R = 255, G = 13, B = 12 }
var deltaE = a.Compare(b,new Cie1976Comparison());

Colors have different weights affecting human eye.
So convert the colors to grayscale using their calculated weights:
Gray Color =
.11 * B +
.59 * G +
.30 * R
And your difference will be
difference = (GrayColor1 - GrayColor2) * 100.0 / 255.0
with difference ranging from 0-100.
This is actually commonly used and very simple approach thats used calculating image differences in image procesing.
-edit
this is the very simple and still usable formula - even in commercial applications.
If you want to go deep you should check out the color difference methods called: CIE1976, CIE1994, CIE2000 and CMC
Here you can find some more detailed info:
http://en.wikipedia.org/wiki/Color_difference

Something like this:
public static int CompareColors(Color a, Color b)
{
return 100 * (int)(
1.0 - ((double)(
Math.Abs(a.R - b.R) +
Math.Abs(a.G - b.G) +
Math.Abs(a.B - b.B)
) / (256.0 * 3))
);
}

Converting the RGB color to the HSL color space often produces good results. Check wikipedia for the conversion formula. It is up to you to assign weights to the differences in H, the color, S, how 'deep' the color is and L, how bright it is.

I found a interesting approach called Colour metric and adapted it to C#
public static double ColourDistance(Color e1, Color e2)
{
long rmean = ((long)e1.R + (long)e2.R) / 2;
long r = (long)e1.R - (long)e2.R;
long g = (long)e1.G - (long)e2.G;
long b = (long)e1.B - (long)e2.B;
return Math.Sqrt((((512 + rmean) * r * r) >> 8) + 4 * g * g + (((767 - rmean) * b * b) >> 8));
}

Colour perception depends on many factors and similarity can be measured in many ways. Just comparing how similar the R, G and B components are generally gives results humans won't agree with.
There's some general material on colour comparisons in wikipedia, and on working with natural colour spaces in C# in this question.

I've translated the code for DeltaE2000 on Bruce Lindbloom's page into C.
Here:
//
// deltae2000.c
//
// Translated by Dr Cube on 10/1/16.
// Translated to C from this javascript code written by Bruce LindBloom:
// http://www.brucelindbloom.com/index.html?Eqn_DeltaE_CIE2000.html
// http://www.brucelindbloom.com/javascript/ColorDiff.js
#include <stdio.h>
#include <math.h>
#define Lab2k struct Lab2kStruct
Lab2k
{
float L;
float a;
float b;
};
// function expects Lab where: 0 >= L <=100.0 , -100 >=a <= 100.0 and -100 >= b <= 100.0
float
DeltaE2000(Lab2k Lab1,Lab2k Lab2)
{
float kL = 1.0;
float kC = 1.0;
float kH = 1.0;
float lBarPrime = 0.5 * (Lab1.L + Lab2.L);
float c1 = sqrtf(Lab1.a * Lab1.a + Lab1.b * Lab1.b);
float c2 = sqrtf(Lab2.a * Lab2.a + Lab2.b * Lab2.b);
float cBar = 0.5 * (c1 + c2);
float cBar7 = cBar * cBar * cBar * cBar * cBar * cBar * cBar;
float g = 0.5 * (1.0 - sqrtf(cBar7 / (cBar7 + 6103515625.0))); /* 6103515625 = 25^7 */
float a1Prime = Lab1.a * (1.0 + g);
float a2Prime = Lab2.a * (1.0 + g);
float c1Prime = sqrtf(a1Prime * a1Prime + Lab1.b * Lab1.b);
float c2Prime = sqrtf(a2Prime * a2Prime + Lab2.b * Lab2.b);
float cBarPrime = 0.5 * (c1Prime + c2Prime);
float h1Prime = (atan2f(Lab1.b, a1Prime) * 180.0) / M_PI;
float dhPrime; // not initialized on purpose
if (h1Prime < 0.0)
h1Prime += 360.0;
float h2Prime = (atan2f(Lab2.b, a2Prime) * 180.0) / M_PI;
if (h2Prime < 0.0)
h2Prime += 360.0;
float hBarPrime = (fabsf(h1Prime - h2Prime) > 180.0) ? (0.5 * (h1Prime + h2Prime + 360.0)) : (0.5 * (h1Prime + h2Prime));
float t = 1.0 -
0.17 * cosf(M_PI * ( hBarPrime - 30.0) / 180.0) +
0.24 * cosf(M_PI * (2.0 * hBarPrime ) / 180.0) +
0.32 * cosf(M_PI * (3.0 * hBarPrime + 6.0) / 180.0) -
0.20 * cosf(M_PI * (4.0 * hBarPrime - 63.0) / 180.0);
if (fabsf(h2Prime - h1Prime) <= 180.0)
dhPrime = h2Prime - h1Prime;
else
dhPrime = (h2Prime <= h1Prime) ? (h2Prime - h1Prime + 360.0) : (h2Prime - h1Prime - 360.0);
float dLPrime = Lab2.L - Lab1.L;
float dCPrime = c2Prime - c1Prime;
float dHPrime = 2.0 * sqrtf(c1Prime * c2Prime) * sinf(M_PI * (0.5 * dhPrime) / 180.0);
float sL = 1.0 + ((0.015 * (lBarPrime - 50.0) * (lBarPrime - 50.0)) / sqrtf(20.0 + (lBarPrime - 50.0) * (lBarPrime - 50.0)));
float sC = 1.0 + 0.045 * cBarPrime;
float sH = 1.0 + 0.015 * cBarPrime * t;
float dTheta = 30.0 * expf(-((hBarPrime - 275.0) / 25.0) * ((hBarPrime - 275.0) / 25.0));
float cBarPrime7 = cBarPrime * cBarPrime * cBarPrime * cBarPrime * cBarPrime * cBarPrime * cBarPrime;
float rC = sqrtf(cBarPrime7 / (cBarPrime7 + 6103515625.0));
float rT = -2.0 * rC * sinf(M_PI * (2.0 * dTheta) / 180.0);
return(sqrtf(
(dLPrime / (kL * sL)) * (dLPrime / (kL * sL)) +
(dCPrime / (kC * sC)) * (dCPrime / (kC * sC)) +
(dHPrime / (kH * sH)) * (dHPrime / (kH * sH)) +
(dCPrime / (kC * sC)) * (dHPrime / (kH * sH)) * rT
)
);
}

Writing Name Using Bezier Curves In C#

I have to make a program that uses C# Generated Graphics to make a replica of my name that I wrote in cursive. Twist is, I have to use Bezier Curves. I've already called a function to make Bezier Curves using 4 points and a gravity concept. My question to you is, What would be the easiest way to make around 10 curves.
Here is my function for a Bezier Curve.
public static void bezierCurve(
Graphics g,
double p1x, double p1y,
double p2x, double p2y,
double p3x, double p3y,
double p4x, double p4y)
{
double t, r1x, r4x, r1y, r4y;
float x, y;
Pen black = new Pen(Color.Black);
r1x = 3 * (p2x - p1x);
r4x = 3 * (p4x - p3x);
r1y = 3 * (p2y - p1y);
r4y = 3 * (p4y - p3y);
t = 0;
while (t <= 1)
{
x = (float) ((2 * Math.Pow(t, 3) - 3 * Math.Pow(t, 2) + 1) * p1x
+ (-2 * Math.Pow(t, 3) + 3 * Math.Pow(t, 2)) * p4x
+ (Math.Pow(t, 3) - 2 * Math.Pow(t, 2) + t) * r1x
+ (Math.Pow(t, 3) - Math.Pow(t, 2)) * r4x);
y = (float) ((2 * Math.Pow(t, 3) - 3 * Math.Pow(t, 2) + 1) * p1y
+ (-2 * Math.Pow(t, 3) + 3 * Math.Pow(t, 2)) * p1y
+ (Math.Pow(t, 3) - 2 * Math.Pow(t, 2) + t) * r1y
+ (Math.Pow(t, 3) - Math.Pow(t, 2)) * r4y);
g.DrawRectangle(black, x, y, 1, 1);
t = t + 0.01;
}
}

I would suggest taking some vector editing software, e.g. InkScape or Corel, draw your name with beziers using that software, then save as .SVG. The SVG format is easy to understand, here is an example of encoding a bezier path. Copy the coordinates from the path into your program. Alternatively, use a piece of graph paper to get the coordinates by hand.
C# already has a function for drawing Beziers, see Graphics.DrawBezier, that is going to be much more efficient (and producing better-looking results) than your implementation.