fractalkitty looking for math? fractalkitty.com

weekly creative coding

blurry fabric

#random#trig#animation#tiling#wcc


let n = 180;
let a, b, c, d;
function setup() {
  c = max(800, min(windowWidth, windowHeight)) * 0.95;
  createCanvas(c, c);
  background(0);
  d = width / n;
  a = random(2, 10);
  b = random(3, 5);
  c = random(6, 10);
  noStroke();
  describe(
    "a sketch-like feel of white strands making a weave or fabric pattern with faint hints of tesselation"
  );
}
function draw() {
  translate(width / 2, height / 2);

  t = frameCount / 20;
  background(0, 0, 0, 15);

  for (let i = -n / 1.5; i <= n / 1.5; i++) {
    for (let j = -n / 1.5; j <= n / 1.5; j++) {
      x = -c / 2 + (i + 0.5) * d;
      y = -c / 2 + (j + 0.5) * d;
      s = dist(x, y, 0, 0) / 20;

      fill(255 - s, 255 - s, 255 - s + 100 * abs(sin(t / 2)), 5);

      beginShape();
      vertex(x + c * Math.sin(t) * Math.cos(t / 2), y + d * Math.cos(t));
      vertex(
        x + d * c * Math.sin(t / b - i * j) * Math.cos(t / 4),
        y + d * c * Math.cos(t / b - i * j)
      );
      vertex(x + (a / b) * Math.sin(-t / a), y + d * Math.cos(t / a));
      vertex(
        x - d * b * Math.sin(t / c - i * j) * Math.cos(t),
        y + d * b * Math.cos(-t / c - i * j)
      );
      vertex(
        x + d * Math.sin(-t / a - i * j),
        y + (d / c) * cos(t / a - i * j)
      );
      vertex(
        x + (d / b) * c * Math.sin(-t / b - i * j),
        y + (d / a) * c * Math.cos(t / b - i * j)
      );
      endShape();
    }
  }
}