221020a

function setup() {

  createCanvas(800, 800);

  colorMode(HSB, 360, 100, 100, 100);

  pixelDensity(1);

  angleMode(DEGREES);

  noSmooth();

  background(0, 0, 90);

}

​

function draw() {

  let w = sqrt(2) * width;

  let xStep = w / 50;

  push();

  translate(width / 2, height / 2);

  let sw = w / 4;

  rotate(frameCount / 100);

  translate(-width / 2, -height / 2);

  drawingContext.drawImage(

    this.canvas,

    0,

    0,

    width,

    height,

    -5,

    -5,

    width + 5 * 2,

    height + 5 * 2

  );

  translate(width / 2, height / 2);

  for (let angle = 0; angle < 360; angle += 6) {

    push();

    noStroke();

    circle(

      sin(frameCount + angle) * 200,

      cos(frameCount * 2 + angle) * 200,

      150

    );

    drawingContext.clip();

    drawingContext.setLineDash([sw]);

    rotate(90 + angle * 2 + frameCount);

    translate(-w / 2, -w / 2);

    stroke(0);

    strokeCap(SQUARE);

    let n = 0;

    for (let x = 0; x < w; x += xStep) {

      push();

      if (n++ % 2 == 0) {

        drawingContext.lineDashOffset = sw + frameCount;

      } else {

        drawingContext.lineDashOffset = 0 + frameCount;

      }

      translate(x, 0);

​

      strokeWeight(xStep);

      line(0, 0, 0, w);

      pop();

    }

    pop();

  }

​

  pop();

​

  // noLoop();

}

​