const RECORD = false;

const MANUAL = false;

​

const AA = 2;

let OUTPUT_SIZE = 1 * 1080;

​

let SIZE, SCALE, TEX;

​

function setup() {

  OUTPUT_SIZE = RECORD ? OUTPUT_SIZE : min(windowWidth, windowHeight);

  SIZE = OUTPUT_SIZE * AA;

  SCALE = SIZE / 1080;

  createCanvas(OUTPUT_SIZE, OUTPUT_SIZE);

  TEX = createGraphics(SIZE, SIZE);

  TEX.colorMode(RGB, 1);

  TEX.noFill();

  TEX.strokeCap(PROJECT);

​

  // noLoop();

  noiseSeed(100);

}

​

function keyPressed() {

  if (key == 'Enter') {

    save("noise field " + Date.now());

  }

  if (key == 'r') {

    noiseSeed(random() * 1000);

    draw();

  }

}

​

function draw() {

  if (RECORD && frameCount === 1 && typeof P5Capture !== 'undefined') {

    const capture = P5Capture.getInstance();

    capture.start({

      format: "webm",

      duration: FRAMES,

      quality: 1,

      framerate: 60,

    });

  }

​

  t = fract(frameCount / FRAMES);

  TEX.background(0.9);

  // translate(-width / 2, 0ght / 2);

  const count = 150;

  const segments = 150;

  const weight = 3 * SCALE;

  const outline_weight = 6 * SCALE;

  const m_x = mouseX / width;

  const m_y = mouseY / width;

  if (MANUAL) t = fract(m_x);

  const dist = 3;

  const noise_f = 3;

  const noise_scale = 1;

  const noise_offset = t * dist;

  const noise_offset_x = noise_offset; //cos(TAU * noise_offset);

  const noise_offset_y = noise_offset; //sin(TAU * noise_offset);

  const noise_offset_z = 0; //sin(TAU * noise_offset);

  noiseDetail(4, .5);

  function getNoise(x, y) {

    return (noise(

        (x + noise_offset_x) * noise_scale, 

        (y + noise_offset_y) * noise_scale,

        noise_offset_z * noise_scale,

      ) - 0.5) * noise_f * invCosn(x); // * lerp(0.25, 1, invCosn(y));

  }

  const lines = [];

  for (let i=0; i<count; i++) {

    const positions = [];

    lines[i] = positions;

    for (let j=0; j<segments; j++) {

      let x = j / (segments - 1);

      let y = i / (count - 1);

      y -= lerp(

        getNoise(x, y),

        getNoise(x - dist, y - dist), 

        invCosn(t * 0.5),

      );

      positions.push({ x, y });

    }

  }

  const col2 = TEX.color(1, 0.5, 0);

  const col1 = TEX.color(0.5, 0, 1);

  lines.forEach((positions, i) => {

    const drawLine = () => {

​

      TEX.beginShape();

      const { x, y } = positions[0];

      TEX.vertex(spaceX(x), spaceY(y));

      const inc = 3;

      for (let i=1; i<positions.length - inc; i += inc) {

        const { x: x1, y: y1 } = positions[i];

        const { x: x2, y: y2 } = positions[i + 1];

        const { x: x3, y: y3 } = positions[i + 2];

​

        TEX.bezierVertex(

          spaceX(x1), spaceY(y1),

          spaceX(x2), spaceY(y2),

          spaceX(x3), spaceY(y3)

        )

​

        // line(spaceX(x1), spaceY(y1), spaceX(x2), spaceY(y2));

      }

      TEX.endShape();      

    }

​

    const f = i / lines.length;

    col = lerpColor(col1, col2, f);

    TEX.stroke(col);

    TEX.strokeWeight(outline_weight);

    drawLine();

    TEX.stroke("white");

    TEX.strokeWeight(weight);

    drawLine();

  });

  image(TEX, 0, 0, OUTPUT_SIZE, OUTPUT_SIZE);

}

​

​

function spaceX(v) {

  const pad = 0.25;

  return lerp(pad, 1 - pad, v) * SIZE;

}

​

function spaceY(v) {

  const pad = 0.33;

  return lerp(pad, 1 - pad, v) * SIZE;

}

​

function invCosn(v) {

  return 1 - (cos(v * TAU) * 0.5 + 0.5)

}