​

let steps = 360 * 3;

let r = 324;

let noiseScale = 0.003;

const noiseAmount = 150;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  noFill();

  stroke(255, 50);

  // stroke(0, 0, 255, 50);

  background(0);

  r = windowHeight / 2.5;

}

​

function distortedCircle(offset) {

  const scaledR = map(offset, 0, 500, 1, 0.9) * r;

  beginShape();

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

    x = width / 2 + scaledR * cos(TWO_PI * i / steps);

    y = height / 2 + scaledR * sin(TWO_PI * i / steps);

    x += map(

      noise(noiseScale * x, noiseScale * y, (frameCount + offset) / 500),

      0, 

      1, 

      -noiseAmount, 

      noiseAmount

    );

    y += map(noise(noiseScale * x, noiseScale * y, 1), 0, 1, -noiseAmount, noiseAmount);

    vertex(x, y);

  }

  endShape();

}

​

function draw() {

  background(0, 9);

  // background(255, 0, 0, 1);

  for (let offset = 0; offset < 500; offset += 50) {

    stroke(255, map(offset, 0, 500, 50, 10));

    distortedCircle(offset);

  }

  noiseScale = map(sin(frameCount / 1000), -1, 1, 0.002, 0.004);

}

​

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

}

​

function toggleFullScreen() {

  if (!document.fullscreenElement) {

    document.documentElement.requestFullscreen();

  } else if (document.exitFullscreen) {

    document.exitFullscreen();

  }

}

​

document.addEventListener(

  'keydown',

  (e) => {

    if (e.key === 'Enter') {

      toggleFullScreen();

    }

  },

  false,

);