Triangle Breathing

// Triangle Breathing

// Sourced from: https://m.youtube.com/watch?v=u9Q8D6n-3qw

​

var timeForCycle = 7; // seconds per cycle

var timeForWait = 2; // seconds of wait between each cycle

var waitFlatness = 2.5; // order of waiting function polynomial (higher orders are flatter longer)

var sideLength = 200;

var minSides = 2;

var maxSides = 8;

​

var interiorAngle = 0;

var T = (timeForCycle + timeForWait/2)/(timeForCycle + timeForWait); // scales from 0 to 1, 0 and 1 are identical

var dT = 1 / (30 * (timeForCycle + timeForWait));

var p;

var segment;

var maxGonInside;

​

function setup() {

  createCanvas(600, 600);

  frameRate(30);

}

​

function draw() {

  background(219);

  maxGonInside = floor(TWO_PI/( PI - interiorAngle));

​

  drawPolygon(interiorAngle, 2, true);

  for (let i = 3; i <= maxGonInside; i++) {

    drawPolygon(PI*(i-2)/i, 1, false);

  }

  reflectScreen();

  T = (T + dT)%1.0;

  interiorAngle = timeToAngle(T);

}

​

function reflectScreen() {

  loadPixels(); 

  for (let y = 0; y < height; y++) {

    for (let x = 0; x < width/2; x++) {

      var index = 4 * (x + y*width); 

      var reflectIndex = 4 * ((width-1 - x) + y*width); 

      pixels[index] = pixels[reflectIndex];

      pixels[index+1] = pixels[reflectIndex+1];

      pixels[index+2] = pixels[reflectIndex+2];

      pixels[index+3] = pixels[reflectIndex+3];

    }

  }

  updatePixels();

}

​

function drawPolygon(iA, weight, isMain) {

  if (isMain) {

    fill(255);

    stroke(0);

  } else {

    noFill();

    stroke(0,175);

  }

  push();

  translate(width/2, height-10);

  strokeWeight(weight);

  beginShape();

  vertex(-1, 0);

  if (T*(timeForCycle + timeForWait) > timeForCycle) {

    vertex(map(timeToSpread(T), 0, 1, 2, sideLength/2), 0);

  } else {

    vertex(sideLength/2, 0);

  }

  p = createVector(sideLength/2, 0);

  segment = createVector(sideLength, 0);

  segment.rotate(-(PI - iA));

  while (p5.Vector.add(p, segment).y < p.y) {

    p.add(segment);

    vertex(p.x, p.y);

    segment.rotate(-(PI - iA));

  }

  if (p.x > 0) {

    vertex(-1, p.y);

  }

  endShape(); 

  pop();

}

​

function timeToAngle(t) {

  if (t*(timeForCycle + timeForWait) < timeForCycle) {

    t = t * (timeForCycle + timeForWait) / timeForCycle;

    //t = 1 - 2*abs(t - 0.5);

    t = sin(PI * t);

    //t = 0.5*sin(TWO_PI*(t - 0.25)) + 0.5;

  } else {

    t = 0;

  }

  var n = map(t, 0, 1, minSides, maxSides);

  var angle = PI*(n-2)/n;

  return angle;

}

​

function timeToSpread(t) {

  t = map(t, timeForCycle/(timeForCycle+timeForWait), 1, 0, 1);

  var spread = pow(2 * abs(t-0.5), waitFlatness);

  return spread;

}