Why does this wobble? | 易学教程

问题

Tested on Processing 2.2.1 & 3.0a2 on OS X.

The code I've tweaked below may look familiar to some of you, it's what Imgur now uses as their loading animation. It was posted on OpenProcessing.org and I've been able to get it working in Processing, but the arcs are constantly wobbling around (relative movement within 1 pixel). I'm new to Processing and I don't see anything in the sketch that could be causing this, it runs in ProcessingJS without issue (though very high CPU utilization).

int num = 6;

float step, spacing, theta, angle, startPosition;

void setup() {
  frameRate( 60 );
  size( 60, 60 );
  strokeWeight( 3 );
  noFill();
  stroke( 51, 51, 51 );
  step = 11;
  startPosition = -( PI / 2 );
}

void draw() {
  background( 255, 255, 255, 0 );
  translate( width / 2, height / 2 );
  for ( int i = 0; i < num; i++ ) {
    spacing = i * step;
    angle = ( theta + ( ( PI / 4 / num ) * i ) ) % PI;
    float arcEnd = map( sin( angle ), -1, 1, -TWO_PI, TWO_PI );
    if ( angle <= ( PI / 2 )  ) {
      arc( 0, 0, spacing, spacing, 0 + startPosition , arcEnd + startPosition  );
    }
    else {
      arc( 0, 0, spacing, spacing, TWO_PI - arcEnd + startPosition , TWO_PI + startPosition  );
    }
  }
  arc( 0, 0, 1, 1, 0, TWO_PI );
  theta += .02;
}

If it helps, I'm trying to export this to an animated GIF. I tried doing this with ProcessingJS and jsgif, but hit some snags. I'm able to get it exported in Processing using gifAnimation just fine.

UPDATE

Looks like I'm going with hint( ENABLE_STROKE_PURE );, cleaned up with strokeCap( SQUARE ); within setup(). It doesn't look the same as the original but I do like the straight edges. Sometimes when you compromise, the result ends up even better than the "ideal" solution.

回答1:

I see the problem on 2.2.1 for OS X, and calling hint(ENABLE_STROKE_PURE) in setup() fixes it for me. I couldn't find good documentation for this call, though; it's just something that gets mentioned here and there.

As for the root cause, if I absolutely had to speculate, I'd guess that Processing's Java renderer approximates a circular arc using a spline with a small number of control points. The control points are spaced out between the endpoints, so as the endpoints move, so do the bumps in the approximation. The approximation might be good enough for a single frame, but the animation makes the bumps obvious. Setting ENABLE_STROKE_PURE might increase the number of control points, or it might force Processing to use a more expensive circular arc primitive in the underlying graphics library it's built upon. Again, though, this is just a guess as to why a drawing environment might have a bug like the one you've seen. I haven't read Processing's source code to verify the guess.

来源：https://stackoverflow.com/questions/25194697/why-does-this-wobble

标签

processing