quadraticPoint

clankill3r

In processing we have the method bezierPoint() and vertexPoint().
We don't have a quadraticPoint() and I needed one.
I made one and I thought I drop it here cause it's not the most easy thing to figure out.

So here it is:

void setup() {
  noFill();
  strokeWeight(1);

  beginShape();
  vertex(20, 20);
  quadraticVertex(80, 20, 50, 50);
  endShape();

  noStroke();
  fill(255, 0, 0);

  int steps = 10;
  for (int i = 0; i <= steps; i++) {
    float t = i / float(steps);
    float x = quadraticPoint(20, 80, 50, t);
    float y = quadraticPoint(20, 20, 50, t);
    ellipse(x, y, 5, 5);
  }
}

public float quadraticPoint(float a, float b, float c, float t) {   
  return bezierPoint(a, a + ((b-a)*2/3.0f), c + ((b-c)*2/3.0f), c, t);
}

Chrisir

what is a quadraticPoint ?

It stays within the rectangle?

clankill3r

Well, we have curvePoint and bezierPoint: https://processing.org/reference/bezierPoint_.html https://processing.org/reference/curvePoint_.html

But we have nothing for something made with quadraticVertex. Maybe quadraticBezierPoint is a better name?

Here a method for when a shape is made with curveVertex. In this case curveVertexPoint might be a better name :)

void setup() {
  noFill();
  beginShape();
  curveVertex(84, 91);
  curveVertex(84, 91);
  curveVertex(68, 19);
  curveVertex(21, 17);
  curveVertex(32, 100);
  curveVertex(32, 100);
  endShape();

  int steps = 18;
  // curvePoint
  // a and d are points on the curve, and b and c are the control points
  for (int i = 0; i <= steps; i++) {

    float t = i / float(steps);

    curvePoint(84, 84, 68, 21, t);

    float x = curvePoint(t,84,84,68,21,32,32);
    float y = curvePoint(t,91,91,19,17,100,100);

      ellipse(x, y, 10, 10);
  }
}


public float curvePoint(float t, float... v) {

  // first figure out of how many parts the curve exists
  int parts = v.length-3;

  // now let's see which part we should operate on
  int part = (int)map(t, 0, 1, 0, parts);
  if (part == parts) part--;

  float partStep = 1.0/parts;

  // we have to correct t now
  float t2 = map(t, 
  part*partStep, // start of part
  (part+1)*partStep, // end of part
  0, 1);

  return curvePoint(v[0+part], v[1+part], v[2+part], v[3+part], t2);  
}