Chemin courbe en traits pointillés

dashed_circle.pde

// renaud.jean-francois(arobas)uqam(point)ca
// Syntaxe Processing version 3.3.7
// samedi, 9 juin 2018

// Ajustez au besoin
int steps_per_segment = 10; // il y a quatre segments courbe dans le cercle

float rayon = 280;
float centrex, centrey;
// Formule permettant d’établir la distance d’un levier dans une figure circulaire
// voir http://pomax.github.io/bezierinfo/#circles_cubic
float fraction = 4*((sqrt(2)-1)/3.0);

ArrayList<P> points = new ArrayList<P>();
int numPoints;


void setup() {
  size(800, 800, FX2D); // mode FX2D plus précis
  background(0);

  centrex = width/2;
  centrey = height/2;

  // computation des points intermédiaires
  for (int i = 0; i < steps_per_segment; i++) {
    float x = bezierPoint(0-rayon, 0-rayon, 0-(rayon*fraction), 0, i/float(steps_per_segment));
    float y = bezierPoint(0, 0-(rayon*fraction), 0-rayon, 0-rayon, i/float(steps_per_segment));
    points.add(new P(x, y));
  }
  for (int i = 0; i < steps_per_segment; i++) {
    float x = bezierPoint(0, 0+(rayon*fraction), 0+rayon, 0+rayon, i/float(steps_per_segment));
    float y = bezierPoint(0-rayon, 0-rayon, 0-(rayon*fraction), 0, i/float(steps_per_segment));
    points.add(new P(x, y));
  }
  for (int i = 0; i < steps_per_segment; i++) {
    float x = bezierPoint(0+rayon, 0+rayon, 0+(rayon*fraction), 0, i/float(steps_per_segment));
    float y = bezierPoint(0, 0+(rayon*fraction), 0+rayon, 0+rayon, i/float(steps_per_segment));
    points.add(new P(x, y));
  }
  for (int i = 0; i < steps_per_segment; i++) {
    float x = bezierPoint(0, 0-(rayon*fraction), 0-rayon, 0-rayon, i/float(steps_per_segment));
    float y = bezierPoint(0+rayon, 0+rayon, 0+(rayon*fraction), 0, i/float(steps_per_segment));
    points.add(new P(x, y));
  }

  //println (points.size());
  numPoints = points.size();

  //noLoop();
}

void draw() {
  background(0);
  //curveTightness(map(mouseX, 0 , width, 0, -0.5));

  translate(centrex, centrey);


  pushStyle();
  fill(200, 50, 25);
  noStroke();
  ellipse(240, 100, 180, 180);
  popStyle();


  // Dessin du cercle
  /*
  pushStyle();
   noFill();
   stroke(255,0,0);
   strokeWeight(1);
   cercleBezier();
   popStyle();
   */

  // animation de rotation
  rotate((millis()*0.0002)%TWO_PI);

  // Dessin du tracé en pointillé
  pushStyle();
  noFill();
  stroke(255);
  strokeWeight(14);
  strokeCap(SQUARE);

  for (int i = 0; i < points.size(); i+=2) {
    // traits droits
    //line(points.get(i).x, points.get(i).y, points.get((i+1)%numPoints).x, points.get((i+1)%numPoints).y);

    // traits courbés
    if (i == 0) {
      curve(points.get(points.size()-1).x, points.get(points.size()-1).y, points.get(0).x, points.get(0).y, points.get(1).x, points.get(1).y, points.get(2).x, points.get(2).y);
    } else {
      curve(points.get(i-1).x, points.get(i-1).y, points.get(i).x, points.get(i).y, points.get((i+1)%numPoints).x, points.get((i+1)%numPoints).y, points.get((i+2)%numPoints).x, points.get((i+2)%numPoints).y);
    }
  }
  popStyle();
}


// Dessin d’un cercle avec quatre courbes de bézier
void cercleBezier() {
  beginShape();
  vertex(0-rayon, 0);
  bezierVertex(0-rayon, 0-(rayon*fraction), 0-(rayon*fraction), 0-rayon, 0, 0-rayon);
  bezierVertex(0+(rayon*fraction), 0-rayon, 0+rayon, 0-(rayon*fraction), 0+rayon, 0);
  bezierVertex(0+rayon, 0+(rayon*fraction), 0+(rayon*fraction), 0+rayon, 0, 0+rayon);
  bezierVertex(0-(rayon*fraction), 0+rayon, 0-rayon, 0+(rayon*fraction), 0-rayon, 0);
  endShape(CLOSE);
}


// Classe pour mémoriser la position de points en 2D
class P {
  float x, y;

  P(float _x, float _y) {
    x = _x;
    y = _y;
  }
}

Exemple d’un rendu :