teardrop dancing

let t = 0;
function setup() {
  createCanvas(windowWidth, windowHeight);
  background(0);
  angleMode(DEGREES);
  stroke(205, 205, 255, 20);
  strokeWeight(0.5);
  describe(
    "teardrop curve that dances and is rotationally placed in a kaleidescope way with a black background and white lines. the teardrops change over time to look like lines to pringle shapes to teardrops.  "
  );
}
function draw() {
  t += 0.2;
  background(0, 10, 60, 2 + 10 * abs(sin(t)));
  translate(width / 2, height / 2);

  p = 2 + 0.5 * sin(t / 3);
  s = width / 10;
  for (let k = 0; k < 5; k++) {
    noFill();
    s = s + (k * width) / 20;
    for (let j = 0; j < 7; j++) {
      push();
      rotate((360 / 7) * j + k * 20);
      translate(100 + k * 50, 0);
      rotate(t);

      beginShape();
      for (let a = 0; a <= 360; a++) {
        x = -s * cos(a + t);
        y = s * sin(a) * pow(sin((1 / 2) * a + t / 3), p);
        vertex(y, x);
      }

      endShape();
      pop();
    }
  }
  circle(0, -300, 20);
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
  background(0);
}