circle_to_triangle_14.js

/*
 * ◯⟷△ №.14
 * Interpolation From a Circle to an Equilateral Triangle (#14)
 * "By approximating a circle with three Bézier cubic splines
 * and modulating the spline control points."
 * Page Fourteen of a 14-Page Pedagogical Sketchbook
 * By Golan Levin (@golan), 2017-2021.
 *
 * Animated GIF, 1024x1024, 720 frames @50fps, made with p5.js;
 * Presented October 25, 2017 on the Coding Train episode,
 * "Guest Tutorial #7: Circle Morphing with Golan Levin"
 * (https://www.youtube.com/watch?v=mvgcNOX8JGQ&t=1075s).
 * NFT created in 2021 for #Sketch4Processing, and minted by
 * KT1TaPfAuhmnyo6Le6zKe17opvFCsTxk1VN7 (golan_x_processingorg).
 * Per contract, 20% of all sales are donated to @ProcessingOrg.
 *
 * References:
 * - Joseph Choma, "Morphing: A Guide to Mathematical
 * Transformations for Architects and Designers", 2015.
 * - Guus Craenen and Adrian Häne, "Fruit Salad", 1970.
 * - CTG Japan (Masao Kohmura, Koji Fujino, Makoto Ohtake),
 * "Running Cola is Africa!", 1968.
 * - Wassily Kandinsky, "Point and Line to Plane", 1926.
 * - William Kolomyjec, "Banana Cone", 1970-1975.
 * - Jürg Lehni and Wilm Thoben, "Footnotes from the History
 * of Two Cultures: Mitsuo Katsui", 2015.
 * - Manfred Mohr, "P-112 / Lady Quark", 1972.
 * - Bruno Munari, "Square Circle Triangle", 1960-1976.
 * - Charles Philipon, "Les Poires", 1831.
 * - Troika, "Squaring the Circle"; "Dark Matter", 2013-2014.
 * - Wucius Wong, "Principles of Two-Dimensional Design", 1972.
 * - Yuki Yoshida, "A Book of drawCircle()", 2014.
 */

var radius;
var cx, cy;
var trianglePoints = [];
var bShowDebug;
var backgrCol;
var strokeCol1;
var strokeCol2;
var nFrames = 720;
var nLoops = 2;

function setup() {
  createCanvas(1024, 1024);
  pixelDensity(1);
  frameRate(60);

  backgrCol = color(253, 247, 241);
  strokeCol1 = color(24, 14, 6, 255);
  strokeCol2 = color(24, 14, 6, 128);

  radius = (width / 2) * 0.75;
  cx = width / 2;
  cy = height / 2;

  for (var i = 0; i < 3; i++) {
    // triangle vertices
    var x = cx + radius * cos((i * TWO_PI) / 3.0 - HALF_PI);
    var y = cy + radius * sin((i * TWO_PI) / 3.0 - HALF_PI);
    trianglePoints[i] = { x, y };
  }
}

function draw() {
  background(backgrCol);
  strokeCap(ROUND);
  strokeJoin(ROUND);

  var progress = (frameCount % nFrames) / nFrames;
  var theta = TWO_PI * progress * 2.0 + PI;
  var bShowDebug = progress > 0.5;

  var wiggle = 0.5 * (1 + cos(theta));
  var amount = 0.77 * wiggle; // magic number

  for (var i = 0; i < 3; i++) {
    var p0x = trianglePoints[i].x;
    var p0y = trianglePoints[i].y;
    var p3x = trianglePoints[(i + 2) % 3].x;
    var p3y = trianglePoints[(i + 2) % 3].y;
    var p1x = p0x + amount * (p0y - cy);
    var p1y = p0y - amount * (p0x - cx);
    var p2x = p3x - amount * (p3y - cy);
    var p2y = p3y + amount * (p3x - cx);

    noFill();
    stroke(strokeCol1);
    strokeWeight(ceil(width * 0.01));
    bezier(p0x, p0y, p1x, p1y, p2x, p2y, p3x, p3y);

    if (bShowDebug) {
      var u = width / 1024.0;
      stroke(strokeCol2);
      strokeWeight(u);
      fill(strokeCol2);
      circle(p1x, p1y, 6 * u);
      circle(p2x, p2y, 6 * u);
      line(p0x, p0y, p1x, p1y);
      line(p3x, p3y, p2x, p2y);
      noFill();
    }
  }
}