[playground] noise loops - OpenProcessing

sketch
noiseLoop
xxxxxxxxxx
 
const sketch = {
  fps: 30,
  tPeriod: 1,
};
sketch.duration = ((360 * sketch.tPeriod) / sketch.fps) * 1000;
​
function setup() {
  createCanvas(600, 600);
  colorMode(HSB);
  noFill();
  noiseDetail(16);
  frameRate(sketch.fps);
}
​
function zeroToOneWave(x) {
  return 0.5 * (sin(TAU * x - PI / 2) + 1);
}
​
function draw() {
  const m = 4000;
  const t = radians((frameCount - 1) / sketch.tPeriod);
​
  const bg = color([0, 0, 10]);
  background(bg);
  noStroke();
  const b = 0.99;
  const r = 0.19 * 10 ** -b; // 1.5
  const n = NoiseLoop("dispersion", r);
  const dxN = NoiseLoop("dx", r);
  const dyN = NoiseLoop("dy", r);
  const q = n.value(t) * r;
  const period = 360 * (1 / r) * 10 ** -0.1; //0.00009;
​
  // p, 0 -> 1, every draw
  // period is constant
  // t, 0 -> TAU, every 360 frames
​
  const d = (p) => {
    const x0 = 0; // -width
    const x1 = width; // 2*width
    const y0 = 0; // -height
    const y1 = height; // 2*height
    return {
      // dx: map(dxN.value(period * a - t, p * period), 0, 1, -25, 25),
      // dy: map(dyN.value(period * a - t, p * period), 0, 1, -25, 25)
      //      glitchy
      // dx: map(dxN.value(TAU * (p*period-t), pow(p*period, sin(t/2))), 0, 1, 0, width),
      // dy: map(dyN.value(TAU * (p*period-t), pow(p*period, cos(t/2))), 0, 1, 0, height)
      // flocks
      dx: map(
        dxN.value(TAU * p * period - t, pow(p * period, 1 / q)),
        0,
        1,
        x0,
        x1
      ),
      dy: map(
        dyN.value(TAU * p * period - t, pow(p * period, 2e-1)),
        0,
        1,
        y0,
        y1
      ),
      //      lightning
      // dx: map(dxN.value(TAU * (p*period-t), pow(sin(t), p*period)), 0, 1, -width, 2*width),
      // dy: map(dyN.value(TAU * (p*period-t), pow(cos(t), p*period)), 0, 1, -height, 2*height)
      //      glitch?
      // dx: map(dxN.value(TAU * p*period-t, pow(p*period/10, sin(t))), 0, 1, -width, 2*width),
      // dy: map(dyN.value(TAU * p*period-t, pow(p*period/2, cos(t))), 0, 1, -height, 2*height)
    };
  };
​
  drawDots(d, m, t);
​
  //drawCurves(d, m / 2, t);
​
  noFill();
  stroke(100);
  circle(30, 30, 40);
  fill(100);
  circle(30 + 20 * cos(t), 30 + 20 * sin(t), 4);
}
​
function drawDots(d, m, t) {
  const size = 20;
  const alpha = 0.8;
  for (let i = 0; i <= m; i++) {
    const p = i / m;
    const sP = map(p, 0, 1, 0.1, 1);
    const {
      dx,
      dy
    } = d(p);
    const h = map(sin(t), -1, 1, 36, 93);
    //fill([h, 80, 85, 1]);
    fill([h, 100, 90, 0.8]);
    circle(p * width + dx, p * height + dy, size * sP);
    circle((1 - p) * width - dx, (1 - p) * height - dy, size * sP);
  }
}
​
function drawCurves(d, m, t) {
  strokeWeight(1);
  noFill();
  beginShape();
  for (let i = 0; i <= m; i++) {
    const p = i / m;
    const {
      dx,
      dy
    } = d(p);
    const h = map(sin(t), -1, 1, 0, 100);
    stroke([h, 100, 80, 0.5]);
    curveVertex(p * width + dx, p * height + dy);
    //curveVertex((1-p)*width - dx, (1-p)*height - dy);
  }
  endShape();
  beginShape();
  for (let i = 0; i <= m; i++) {
    const p = i / m;
    const {
      dx,
      dy
    } = d(p);
    const h = map(sin(t), -1, 1, 0, 100);
    stroke([h, 100, 80, 0.5]);
    //curveVertex(p*width + dx, p*height + dy);
    curveVertex((1 - p) * width - dx, (1 - p) * height - dy);
  }
  endShape();
}