How to get control points for a curve from a set of points which make a straight line?

Question

I have a set of n points which make a line, but I would like to have a curve instead of a line.For doing curves in processing, there are control points which are needed, I would like to know how can I get control points from a set on n points. Also I would be dragging curves, hence I would need to find new control points all the time I presume?

Answer 1

Well, you can basically just parse the array of coordinates and use them to create a curveVertex() shape in Processing like this:

// create an array of coordinates in x, y, x, y... format
int[] points = {  
  34, 163,
  67, 345,
  474, 84,
  682, 234,
  495, 396,
  174, 379,
  275, 574
};

void setup() {
  size(800, 600);
  smooth();  
  noFill();
}

void draw() {
  background(255);

  draw_curve_from_points(points);  // draw the curve
  draw_handles_on_points(points, 6, 126);  // draw the handles

}

// a function to draw the curve
void draw_curve_from_points(int[] _points) { 
  noFill();
  stroke(0);
  strokeWeight(1);

  int len = _points.length;
  beginShape();
  curveVertex(_points[0], _points[1]);  // the first point is duplicated to be used as control point
  for (int i = 0; i < len; i +=2) {
    curveVertex(_points[i], _points[i+1]);
  }
  curveVertex(_points[len-2], _points[len-1]);  // idem for last point
  endShape();
}

// draw handles on the points
void draw_handles_on_points(int[] _points, float _size, int _gray) {
  int len = _points.length;
  pushStyle();
  noStroke();
  fill(_gray);
  for (int i = 0; i < len; i +=2) {
    ellipse(_points[i], _points[i+1], _size, _size);
  }
  popStyle();
}

Just add some mouse position recognition and mouse interaction to drag the points around.

Answer 2

It's easiest to think of each curve as being represented by two points and two vectors (each vector goes from an endpoint to its corresponding control point). The curve will be parallel to the vectors at the endpoints, so if one wants to avoid a "kink" at a point between two curves such that the first curve's vector associated with that point goes in a direction opposite the second curve's vector. Depending upon the kinds of shapes that your point sequences are likely to represent, there are various ways of deciding upon the directions and lengths of the vectors subject to the aforementioned criteria. One simple approach is to figure that the vectors associated with a point should be parallel to a line drawn between the points on either side of it, and the vector associated with a curve should have a length proportional to the length of that curve (play around with the scaling factors to see what you like). Note that the longer the vectors, the further the curve will deviate from a line between the endpoints, but that if the vectors are too long a curve may get "loopy".