let z;

let amount = 15;

let filter1;

let xOffset = 0;

let yOffset = 0;

let hueStep = 1; // Schrittgröße für die Farbe

let mainHue = 200; // Hauptfarbe

​

function setup() {

  createCanvas(800, 800);

  colorMode(HSB, 360, 100, 100, 100);

  background(0);

  noStroke();

  t = 400;

  z = 0;

  filter1 = new makeFilter();

}

​

function draw() {

  translate(width / 2 + xOffset, height / 2 + yOffset);

  let saturation = 100;

  let brightness = 100;

  let alpha = 5; // hohe Transparenz

​

  fill((mainHue + t) % 360, saturation, brightness, alpha); // Farbe basierend auf t

​

  beginShape();

  for (let i = 0; i < TWO_PI; i += 0.1) {

    let rad = 200 * noise(i * 0.1 + t * 0.01, z * 0.01);

    let x = rad * cos(i);

    let y = rad * sin(i);

    curveVertex(x, y);

  }

  endShape(CLOSE);

​

  z += 0.1;

  t += hueStep; // Farbe ändern mit jedem Durchlauf

​

  if (frameCount % 1000 == 0) {

    filter1.applyFilter();

  }

​

  xOffset = sin(frameCount * 0.005) * 50;

  yOffset = cos(frameCount * 0.005) * 50;

}

​

class makeFilter {

  applyFilter() {

    loadPixels();

    const d = pixelDensity();

    const pixelsCount = 4 * (width * d) * (height * d);

    for (let i = 0; i < pixelsCount; i += 4) {

      let grainAmount = random(-amount, amount);

      pixels[i] = pixels[i] + grainAmount;

      pixels[i + 1] = pixels[i + 1] + grainAmount;

      pixels[i + 2] = pixels[i + 2] + grainAmount;

    }

    filter(BLUR, 8); // Mehr Blur

    updatePixels();

  }

}

​

function keyPressed() {

  if (key === "s" || key === "S") {

    saveCanvas("yourtruly", "png");

  }

}

​