sketch.js

var radius;
var cx, cy;
var third;
var bShowDebug;
var nArcPoints = 30;
var angularAmount;

//-----------------------------------------
function setup() {
  createCanvas(400, 400);
  radius = width / 2 * 0.75;
  cx = width / 2;
  cy = height / 2;
  third = TWO_PI / 3.0;
  bShowDebug = false;
}

//-----------------------------------------
function draw() {
  background(255);
  noFill();
  stroke(0);
  strokeWeight(3);
  strokeJoin(ROUND);

  angularAmount = pow(0.5 + 0.5 * sin(millis() / 2000.0), 2.0);

  beginShape();
  for (var j = 0; j < 3; j++) {
    for (var i = 0; i <= nArcPoints; i++) {
      var angCenter = (j + 0.5) * third;
      var angA = angCenter - angularAmount * 0.5 * third;
      var angB = angCenter + angularAmount * 0.5 * third;
      var t = map(i, 0, nArcPoints, angA, angB) + HALF_PI;
      var px = cx + radius * cos(t);
      var py = cy + radius * sin(t);
      vertex(px, py);
    }
  }
  endShape(CLOSE);

  drawDebug();
}

//-----------------------------------------
function keyPressed(){
  bShowDebug = !bShowDebug;
}

//-----------------------------------------
function drawDebug() {
  if (bShowDebug) {
    stroke(255, 0, 0, 64);
    strokeWeight(1);
    for (var j = 0; j < 3; j++) {
      for (var i = 0; i <= nArcPoints; i++) {
        var angCenter = (j + 0.5) * third;
        var angA = angCenter - angularAmount * 0.5 * third;
        var angB = angCenter + angularAmount * 0.5 * third;
        var t = map(i, 0, nArcPoints, angA, angB) + HALF_PI;
        var px = cx + radius * cos(t);
        var py = cy + radius * sin(t);
        line(cx, cy, px, py);
      }
    }
  }
}