)
}
}
)
(
}
{
)
)
(
)
(
(
{
}
)
(
)
}
)
)
{
(
(
)
)
}
)
(
}

Superformula Texture

  1. const TWO_PI = Math.PI * 2;
  2. const SIDE = 8;
  3. const N = 30;
  4. const M = 20;
  5.  
  6. document.body.style.margin = 0;
  7.  
  8. const c = document.body
  9.   .appendChild(document.createElement('canvas'))
  10.   .getContext('2d');
  11.  
  12. onresize = () => {
  13.   c.canvas.width = innerWidth;
  14.   c.canvas.height = innerHeight;
  15.  
  16.   draw();
  17. };
  18. onresize();
  19.  
  20. function draw() {
  21.   c.fillStyle = '#000';
  22.   c.fillRect(0, 0, innerWidth, innerHeight);
  23.  
  24.   const sx = innerWidth / SIDE;
  25.   const sy = innerHeight / SIDE;
  26.  
  27.   for (let i = 0; i <= SIDE; i++) {
  28.     for (let j = 0; j <= SIDE; j++) {
  29.       const n1 = ~~(Math.random() * N);
  30.       const n2 = ~~(Math.random() * N);
  31.       const n3 = ~~(Math.random() * N);
  32.       const m = ~~(Math.random() * Math.random() * M);
  33.       let a = 1;
  34.       let b = 1;
  35.       if (Math.random() < 0.5) {
  36.         a = ~~(Math.random() * 8) - 4;
  37.       }
  38.       if (Math.random() < 0.5) {
  39.         b = ~~(Math.random() * 8) - 4;
  40.       }
  41.       superShape(a, b, m, n1, n2, n3, { x: i * sx, y: j * sy }, 40);
  42.     }
  43.   }
  44. }
  45.  
  46. // Superformula (equations from):
  47. // https://bsapubs.onlinelibrary.wiley.com/doi/10.3732/ajb.90.3.333
  48. // http://en.wikipedia.org/wiki/Superformula
  49. function superShape(a, b, m, n1, n2, n3, pnt, scale) {
  50.   let r = 0;
  51.   let p = 0;
  52.   let xp = 0;
  53.   let yp = 0;
  54.   while (p <= TWO_PI) {
  55.     var ang = (m * p) / 4;
  56.     with (Math) {
  57.       r = pow(pow(abs(cos(ang) / a), n2) + pow(abs(sin(ang) / b), n3), -1 / n1);
  58.       xp = r * cos(p);
  59.       yp = r * sin(p);
  60.     }
  61.     p += 0.01;
  62.     c.fillStyle = '#fff';
  63.     c.fillRect(pnt.x + xp * scale, pnt.y + yp * scale, 1, 1);
  64.   }
  65. }

The Superformula created by Johan Gielis read more about it here… This looks better when expanded to full size on the Snippet Zone editor…

snippet.zone ~ 2021-22 /// {s/z}