How to find points on a curve and display them?

Programming Questions

y.fizee

How to find points on a curve and display them?

in Programming Questions • 1 year ago

So I have this code which takes data from an array and draws a curve:

void drawDataLine(int row) {
beginShape();
for (int col = 0; col < colCount; col++) {
if (data.isValid(row, col)) {
float value = data.getPoint(row, col);
float x = map(years[col], yearMin, yearMax, plotX1, plotX2);
float y = map(value, dataMin, dataMax, plotY2, plotY1);
//vertex(x,y) ;
curveVertex(x, y);
// Double the curve points for the start and stop
if ((col == 0) || (col == colCount-1)) {
curveVertex(x, y);
}
}
}
endShape();
}

I have another function which displays the data values when the cursor is within 3 pixels of the point:

for (int col = 0; col < colCount; col++) {
if (data.isValid(row, col)) {
float radVal = ratio[col];
float value = data.getPoint(row, col);
float compareValue = compare.getPoint(row, col);
float x = map(years[col], yearMin, yearMax, plotX1, plotX2);
float y = map(value, dataMin, dataMax, plotY2, plotY1);
float ellipse1MapVal = map(value, ellipse1Min, ellipse1Max, 10, 80);
float ellipse2MapVal = map(compareValue, ellipse1Min, ellipse1Max, 10, 80);
radVal = map(radVal, radMin, radMax, 1, 7);
if (dist(mouseX, mouseY, x, y) < 3) {
if (drawCirclesPrimary || drawCirclesSecondary) {
noStroke();
if (drawCirclesPrimary) {
fill(0, 255, 0, 100);
ellipse(x, y, ellipse1MapVal, ellipse1MapVal);
}
if (drawCirclesSecondary) {
fill(255, 0, 0, 100);
ellipse(x, y, ellipse2MapVal, ellipse2MapVal);
}
fill(0);
stroke(0);
pushMatrix();
translate(x, y);
rotate(radians(radSec));
line(0, -ellipse1MapVal/2, 0, ellipse1MapVal/2);
popMatrix();
radSec += radVal;
textSize(10);
textAlign(CENTER);
text(nf(value, 0, 2) + " (" + years[col] + ")"+nf(compareValue, 0, 2), x, y-8);
}
else
text(nf(value, 0, 2) + " (" + years[col] + ")", x, y-8);
}
if ((mouseX < x+3)&&(mouseX > x-3))
{
stroke(150);
strokeWeight(1);
line(x, plotY1, x, plotY2);
} } }}

Now the problem is that curveVertex does its interpolation and makes nice curves but I cannot get the points on those curves other than the ones I already have. What I want is the cursor to show values on all the points on the graph rather than the 10 points which I have on the array, much like the graphs on google or yahoo finance. I am a noob when it comes to processing so any help with this will be greatly appreciated.

Regards

Replies(6)

amnon.owed

Re: How to find points on a curve and display them?

1 year ago

Check out curvePoint().

y.fizee

Re: How to find points on a curve and display them?

1 year ago

Well my understanding of curvePoint is that you need to give a no. of points a,b,c,d to get the last one say e. What I want is to get the numbers between two points a and b. I guess it will have to be some sort of interpolation but I do no want linear interpolation so was wondering if processing provides such a mechanism or if there is some other implementation that I can find.

amnon.owed

Re: How to find points on a curve and display them?

1 year ago

Check out curvePoint(). Again.

If you have a number of points (which you do) and you use curveVertex to make a shape (which you do) and you want to get the interpolated value between these points on the curve (which you want), then you can use curvePoint, right? Take a look at the following code example. Explain how curvePoint is not what you want...

Code Example

int currentCurvePoint;
PVector[] vecs = {
new PVector(84, 91), // control point
new PVector(84, 91),
new PVector(68, 19),
new PVector(21, 17),
new PVector(32, 100),
new PVector(32, 100) // control point
};
void setup() {
size(200, 200);
smooth();
}
void draw() {
background(255);
translate(50, 50);
vecs[3].set(mouseX-50, mouseY-50, 0);
drawShape();
drawPoints();
if (frameCount % 20 == 0) { currentCurvePoint++; }
drawCurvePoint(currentCurvePoint % (vecs.length-3));
}
void drawShape() {
noFill();
stroke(0);
beginShape();
for (int i=0; i<vecs.length; i++) {
curveVertex(vecs[i].x, vecs[i].y);
}
endShape();
}
void drawPoints() {
noStroke();
fill(255, 0, 0);
for (int i=1; i<vecs.length-1; i++) {
ellipse(vecs[i].x, vecs[i].y, 5, 5);
}
}
void drawCurvePoint(int num) {
noStroke();
fill(0, 0, 255);
float t = (frameCount % 20)/20.0;
float x = curvePoint(vecs[num].x, vecs[num+1].x, vecs[num+2].x, vecs[num+3].x, t);
float y = curvePoint(vecs[num].y, vecs[num+1].y, vecs[num+2].y, vecs[num+3].y, t);
ellipse(x, y, 15, 15);
}

y.fizee

Re: How to find points on a curve and display them?

1 year ago

Well maybe I am so dumb that I am not getting the functionality of curvePoint() but what I understand is that it interpolates to the next value. So if I give 4 points in succession then its gonna give me the fifth point. I do not want that. In my code I only work on two points at a time so I wish to call a function that would calculate the values between these two points and draw a curve. Sorry if I am not grasping the concept. Can you look at my code and tell me how I will go about using curvePoint() since I don't have four points to begin with initially.

amnon.owed

Re: How to find points on a curve and display them?

1 year ago

All right, couple of things...

You can't make a curve with 2 points. You need at least 4 points. See the reference for curveVertex. With 4 points, the curve will go from point 2 to point 3, where point 1 and point 4 are the control points. What the curve looks like will depend on all these 4 points.
Notice how the drawShape() in my example is exactly the same as the drawDataLine() in your code. The only difference is that I explicitly add the control points at the beginning and end, while you repeat the first and last point with lines 12-14 (which is basically the same thing).
Notice further that in my example a point moves smoothly over the whole curve. I am getting this point on the curve with the aptly named function curvePoint(). So in this example it is hopefully clear that this function can in fact deliver you the interpolated point on a curve.
To get the interpolated x and y on the curve via the curvePoint function, you indeed need 4 points (because a curve requires at least 4 points). curvePoint does not give some random fifth or next point. Instead, for the range 0-1 it gives an interpolated point on the curve.
In your drawDataLine() function you apparantly go over a number of points (colCount) out of which you construct a curve using beginShape-curveVertex-endShape. My advice is to seperate the getting of the data from the drawing of the data. So in one function get all the points and put them into an array or arraylist. Then you will have a list of points, just like I had in my example. Once you have a list of point you can either use those points to draw a curve shape (drawShape function), display those points (drawPoints function) or draw an interpolated point somewhere on the curve (drawCurvePoint function).

Hopefully this clears some things up. If you want further code assistance with your own project, consider posting the whole project somewhere or at least a runnable code example that you feel represents your specific problem.

NOTE: There is a typo in the curvePoint reference. Currently it says "a and d are points on the curve, and b and c are the control points" while it should say (the other way around) "b and c are points on the curve, and a and d are the control points".

y.fizee

Re: How to find points on a curve and display them?

1 year ago

Thank you. I had the concept all wrong. This clears it up. I will get working on it right away. Thanks a lot for your help again :)

Top Reply