Description
/*
* ◯⟶△ №.05
* Interpolation From a Circle to an Equilateral Triangle (#05)
* "By sampling a circle into many segments, and then locally
* averaging (blurring) each point with its neighbors,
* except for the three special corner vertices."
* Page Five of a 14-Page Pedagogical Sketchbook
* By Golan Levin (@golan), 2017-2021.
* Note: this morph is monodirectional.
* https://link.medium.com/bn3sesXYOkb
*
* Animated GIF, 1024x1024, 701 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=13m29s).
* 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 nFrames = 720;
var nCirclePoints = 120;
var circlePoints = [];
var strokeCol1;
var backgrCol;
function setup() {
createCanvas(1024, 1024);
pixelDensity(1);
frameRate(60);
strokeCol1 = color(24, 14, 6, 255);
backgrCol = color(253, 247, 241);
radius = (width / 2) * 0.75;
cx = width / 2;
cy = height / 2;
init();
}
function init() {
for (var i = 0; i < nCirclePoints; i++) {
var t = map(i, 0, nCirclePoints, 0, TWO_PI) - HALF_PI;
var x = cx + radius * cos(t);
var y = cy + radius * sin(t);
circlePoints[i] = { x, y };
}
}
function draw() {
background(backgrCol);
noFill();
stroke(strokeCol1);
strokeJoin(MITER);
strokeWeight(ceil(width * 0.01));
// Average points with their neighbors.
// Pause for 20 frames; then do two passes.
// Restart the animation after 720 frames.
var fc = frameCount % nFrames;
if (fc == 0) init();
if (fc > 20) {
for (var k = 0; k < 2; k++) {
for (var i = 0; i < nCirclePoints; i++) {
if (i % (nCirclePoints / 3) !== 0) {
var h = (i - 1 + nCirclePoints) % nCirclePoints;
var j = (i + 1 + nCirclePoints) % nCirclePoints;
var hx = circlePoints[h].x;
var hy = circlePoints[h].y;
var ix = circlePoints[i].x;
var iy = circlePoints[i].y;
var jx = circlePoints[j].x;
var jy = circlePoints[j].y;
circlePoints[i].x = (hx + ix + jx) / 3.0;
circlePoints[i].y = (hy + iy + jy) / 3.0;
}
}
}
}
beginShape(); // Render the shape.
for (var i = 0; i < nCirclePoints; i++) {
vertex(circlePoints[i].x, circlePoints[i].y);
}
endShape(CLOSE);
}