different endpoint weight values in a Bezier curve

redraw

Learning Bezier curves I came out with the, now popular, Bezier conector used in data visualizations,

PVector a1, a2, c1, c2;

void setup() {
  size(400, 400);
  background(255);

  a1 = new PVector(0, random(height));
  a2 = new PVector(width, random(height));
  c1 = new PVector(width/2, a1.y);
  c2 = new PVector(width/2, a2.y);

  strokeWeight(3);
  stroke(255, 0, 0);
  bezier(a1.x, a1.y, //point 1
         c1.x, c1.y, //ctrl 1
         c2.x, c2.y, //ctrl 2
         a2.x, a2.y); //point 2
}

Is it possible to set different strokeWeight values to endpoints in a Bezier curve? So that, something that starts with strokeWeight(3), ends with strokeWeight(16). I might be wrong and actually there's another way to achieve that.

quark

I am fairly confident there is no direct way of doing this in Processing. The solution is to take charge of drawing the bezier curve yourself and changing the stroke weight as you go.

The code below does this - increase steps to improve smoothness.

PVector a1, a2, c1, c2;

void setup() {
  size(400, 400);
  background(255);

  a1 = new PVector(0, random(height));
  a2 = new PVector(width, random(height));
  c1 = new PVector(width/2, a1.y);
  c2 = new PVector(width/2, a2.y);

  strokeWeight(3);
  stroke(255, 0, 0);

  int steps = 60;
  // Stroke weight variables
  float s0 = 3, s1 = 12, s = s0;
  float ds = (s1 - s0)/steps;
  // Parametric variables
  float dt = 1.0 / steps;
  float t = dt;
  // Initial poistion
  float px = a1.x;
  float py = a1.y;
  for (int i = 1; i <= steps; i++) {
    float x = bezierPoint(a1.x, c1.x, c2.x, a2.x, t);
    float y = bezierPoint(a1.y, c1.y, c2.y, a2.y, t);
    strokeWeight(s);
    line(px, py, x, y);
    px = x;
    py = y;
    s += ds; // Change stroke
    t += dt; // next parametric value
  }
}

redraw

thanks quark, not so smooth but that's look better. I forgot about bezierPoint()