​

function setup() {

  windowRes = min(windowWidth, windowHeight);

  createCanvas(windowRes, windowRes);

  gB = createGraphics((fullRes = 1024), fullRes);

  gB.colorMode(HSB, 360);

  gB.rectMode(CENTER);

  imageMode(CENTER);

}

​

function polygonSine(angle, sides) {

  let segmentAngle = TAU / sides; // Angle per polygon segment

  let segmentIndex = floor(angle / segmentAngle); // Index of the segment the angle falls into

  let interpolationFactor =

    (angle - segmentIndex * segmentAngle) / segmentAngle; // Fractional position within the segment

  let sineStart = sin(segmentIndex * segmentAngle); // Sine value at the start of the segment

  let sineEnd = sin((segmentIndex + 1) * segmentAngle); // Sine value at the end of the segment

  return sineStart * (1 - interpolationFactor) + sineEnd * interpolationFactor; // Linear interpolation

}

​

function polygonCosine(angle, sides) {

  let segmentAngle = TAU / sides;

  let segmentIndex = floor(angle / segmentAngle);

  let interpolationFactor =

    (angle - segmentIndex * segmentAngle) / segmentAngle;

  let cosineStart = cos(segmentIndex * segmentAngle);

  let cosineEnd = cos((segmentIndex + 1) * segmentAngle);

  return (

    cosineStart * (1 - interpolationFactor) + cosineEnd * interpolationFactor

  );

}

​

function draw() {

  gB.clear();

  gB.strokeWeight(fullRes * 0.005);

  let gridSize = 32;

  let polygonSides = 4;

  for (let i = 0; i < gridSize; i += 1) {

    for (let j = 0; j < gridSize; j += 1) {

      let offset = 0.1 * (i + j + frameCount);

      gB.push();

      // Shift to the right place on the canvas, with a bit of border

      gB.translate(

        map(i, 0, gridSize - 1, 0.1 * fullRes, 0.9 * fullRes),

        map(j, 0, gridSize - 1, 0.1 * fullRes, 0.9 * fullRes)

      );

      // Basically drawing a circle here: radius * cos/sin of the angle,

      // but the functions constrain it to a line between the polygon's points

      gB.point(

        64 * polygonCosine(offset, polygonSides),

        64 * polygonSine(offset, polygonSides)

      );

      gB.pop();

    }

  }

​

  background(360);

  displayBuffer(gB);

}

​

function displayBuffer(buffer) {

  image(buffer, windowRes / 2, windowRes / 2, windowRes, windowRes);

}

​

function windowResized() {

  windowRes = min(windowWidth, windowHeight);

  resizeCanvas(windowRes, windowRes);

}

​