Spectral Tomography - 3D Noise Cross-Section

1. Generate 3D Perlin noise using x, y, and animated z-coordinates to create volumetric slicing through the noise field
2. Sample noise at multiple octaves (scales 0.004, 0.008, 0.016) and blend them for fractal detail
3. Calculate chromatic aberration by shifting noise samples for R, G, B channels by different amounts based on radius and time
4. Apply spiral distortion using angle and distance from center to create organic swirling motion
5. Map noise values to RGB channels with depth-dependent density factor for volumetric feel
6. Increment z-offset over time to continuously slice through the 3D noise volume, creating animation

var sketch = function(p) {
  var zOffset = 0;
  var timeScale = 0.003;
  var noiseScale1 = 0.004;
  var noiseScale2 = 0.008;
  var noiseScale3 = 0.016;
  var aberrationAmount = 12;
  var sliceSpeed = 0.008;
  var brightness = 255;

  p.setup = function() {
    var container = document.getElementById('p5-wrapper');
    p.createCanvas(container.offsetWidth, container.offsetHeight).parent(container);
    p.pixelDensity(1);
    p.colorMode(p.RGB, 255, 255, 255, 255);
  };

  p.draw = function() {
    var w = p.width;
    var h = p.height;
    var step = 4;

    p.loadPixels();

    for (var x = 0; x < w; x += step) {
      for (var y = 0; y < h; y += step) {
        var cx = x - w / 2;
        var cy = y - h / 2;
        var dist = p.sqrt(cx * cx + cy * cy);
        var angle = p.atan2(cy, cx);

        var spiralOffset = p.sin(angle * 3 + zOffset * 10) * 20;
        var radiusFactor = (dist + spiralOffset) / (w * 0.5);

        var nx1 = x * noiseScale1 + p.sin(zOffset * 2) * 50;
        var ny1 = y * noiseScale1 + p.cos(zOffset * 1.5) * 50;
        var nz1 = zOffset * 2;
        var noise1 = p.noise(nx1, ny1, nz1);

        var nx2 = x * noiseScale2 + p.cos(zOffset * 1.7) * 30;
        var ny2 = y * noiseScale2 + p.sin(zOffset * 2.3) * 30;
        var nz2 = zOffset * 1.5 + 100;
        var noise2 = p.noise(nx2, ny2, nz2);

        var nx3 = x * noiseScale3 + p.sin(zOffset * 3.1) * 20;
        var ny3 = y * noiseScale3 + p.cos(zOffset * 2.7) * 20;
        var nz3 = zOffset * 3 + 200;
        var noise3 = p.noise(nx3, ny3, nz3);

        var combinedNoise = noise1 * 0.5 + noise2 * 0.3 + noise3 * 0.2;
        var layeredNoise = p.noise(nx1 * 0.5, ny1 * 0.5, nz1 * 0.5);
        var finalNoise = p.lerp(combinedNoise, layeredNoise, 0.3);

        var depthFactor = p.map(p.sin(zOffset + radiusFactor * 4), -1, 1, 0.3, 1.2);
        var depthNoise = finalNoise * depthFactor;

        var rShift = aberrationAmount * p.sin(zOffset * 2 + radiusFactor * 3);
        var gShift = aberrationAmount * p.cos(zOffset * 1.5 + radiusFactor * 2);
        var bShift = aberrationAmount * p.sin(zOffset * 2.5 + radiusFactor * 4);

        var rNoise = p.noise((x + rShift) * noiseScale1, (y + rShift * 0.5) * noiseScale1, nz1 + rShift * 0.01);
        var gNoise = p.noise((x + gShift) * noiseScale2, (y + gShift * 0.5) * noiseScale2, nz2 + gShift * 0.01);
        var bNoise = p.noise((x + bShift) * noiseScale3, (y + bShift * 0.5) * noiseScale3, nz3 + bShift * 0.01);

        var r = rNoise * depthNoise * brightness;
        var g = gNoise * depthNoise * brightness * 0.9;
        var b = bNoise * depthNoise * brightness * 0.85;

        var wave = p.sin(x * 0.01 + zOffset * 5) * p.cos(y * 0.01 + zOffset * 3);
        r = p.constrain(r + wave * 20, 0, 255);
        g = p.constrain(g + wave * 15, 0, 255);
        b = p.constrain(b + wave * 25, 0, 255);

        var idx = (x + y * w) * 4;
        for (var dx = 0; dx < step && x + dx < w; dx++) {
          for (var dy = 0; dy < step && y + dy < h; dy++) {
            var i = ((x + dx) + (y + dy) * w) * 4;
            p.pixels[i] = r;
            p.pixels[i + 1] = g;
            p.pixels[i + 2] = b;
            p.pixels[i + 3] = 255;
          }
        }
      }
    }

    p.updatePixels();

    p.zOffset += sliceSpeed;

    if (p.frameCount % 300 === 0) {
      p.noiseSeed(p.random(10000));
    }
  };

  p.windowResized = function() {
    var container = document.getElementById('p5-wrapper');
    p.resizeCanvas(container.offsetWidth, container.offsetHeight);
  };
};