Draws a dynamic, colorful pattern with circles.

by 규연 황

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.min.js"></script>

<script>
      let t = 0;

      function setup() {
        createCanvas(800, 800);
        stroke(255, 66);
        noFill();
      }

      function draw() {
        background(9);
        t += PI / 45;

        for (let i = 10000; i--;) {
          a(i % 200, i / 55);
        }
      }

      function a(x, y, d) {
        let k = 9 * cos(x / 8);
        let e = y / 8 - 12.5;
        d = (sqrt(k * k + e * e) ** 2) / 99 + sin(t) / 6 + 0.5;

        let q = 99 - e * sin(atan2(k, e) * 7) / d + k * (3 + cos(d * d - t) * 2);
        let c = d / 2 + e / 69 - t / 16;

        let px = q * sin(c) + 200;
        let py = (q + 19 * d) * cos(c) + 200;

        point(px, py);
      }
    </script>

CSS

html {
  min-height: 100%;
}
body {
  padding: 0;
  margin: 0;
  height: 100%;
}
main, 
canvas {
  width: 100% !important;
  height: 100% !important;
}