Infinite Scroll.

let scrollPos = 0;
let n = 100;
let onMobile = false;
let startX=0
let startY = 0
let bits = [];
let bubbles = [];
let c1;
let sChange = false;
function setup() {
  c1 = 500;
  
  canvas = createCanvas(c1, c1);
  canvas.elt.style.touchAction = "none";
  onMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
    navigator.userAgent
  );

  describe(
    'a porthole looking at clouds with a vanishing point at the center in which you can scroll infinitely through. '
  );
  strokeWeight(3);
  for (let i = 0; i < 3000; i++) {
    bubbles[i] = {
      r: random(0, c1 / 2),
      theta: random(0, 2*PI),
      color: [
        random(200, 255),
        random(200, 255),
        random(230, 255),
        random(0.3, 2)
      ],
      fill: color(random(105, 120),random(135, 150),random(155, 180),10),
      vR: random(1,2)
    };
  }
  
}

function draw() {
  translate(c1 / 2, c1 / 2);
  keyCheck();
  noStroke()
  t = frameCount/1000
  bg = color(50, 60, 80)
  scrollPos+=0.0005
  background(bg);
  bubbles.forEach((L) => {
    fill(L.fill);
    circle(L.r*cos(L.theta), L.r*sin(L.theta), L.r/2);
    if(abs(L.r)>c1/2){
      L.r=0
    }else{
      s = scrollPos%(int(c1/2))
      if(sChange){
        L.r=L.vR*s + L.r
         L.theta=L.vR*s/500 + L.theta
      }
      
    }
  });
  sChange = false;
  
  portHole();
  stroke(80, 110, 150)
  strokeWeight(1)
  circle(0,0,490)
  
  
}

function keyCheck() {
  if (keyIsPressed && keyCode === 38) {
    scrollPos--;
  }
  if (keyIsPressed && keyCode === 40) {
    scrollPos++;
  }
}
function windowResized() {
  setup();
  draw();
}

function mouseWheel(event) {
  sChange = true;
  scrollPos = c1*sin( event.delta / 10000);
  return false;
}
function keyPressed() {
  if (keyCode === 32) {
    setup();
    draw();
  }
}

function touchStarted() {
  console.log(`startY: ${startY}, endY: ${touches[0]?.y}, scrollPos: ${scrollPos}`);
  if (onMobile) {
    
    if (touches.length > 0) {
      startX = touches[0].x;
      startY = touches[0].y;
    }
    return false;
  }
}

function touchMoved() {
  sChange = true;
  if (onMobile) {
    if (touches.length > 0) {
      endX = touches[0].x;
      endY = touches[0].y;
    } else {
      endX = mouseX;
      endY = mouseY;
    }

    const diffX = endX - startX;
    const diffY = endY - startY;
    scrollPos += diffY / 5000;
  }
}

function portHole() {
  fill(50, 60, 80);
  stroke(50, 60, 80)
  rd = c1 / 2.2;
  beginShape();
  for (let i = 0; i <= PI; i+=0.01) {
    x = rd * cos(i);
    y = rd * sin(i);
    vertex(x, y);
  }
  vertex(-c1, 0);
  vertex(-c1, c1);
  vertex(c1, c1);
  vertex(c1, 0);
  endShape(CLOSE);
  beginShape();
  for (let i = PI; i <= TWO_PI; i+=0.01) {
    x = rd * cos(i);
    y = rd * sin(i);
    vertex(x, y);
  }
  vertex(c1, 0);
  vertex(c1, -c1);
  vertex(-c1, -c1);
  vertex(-c1, 0);
  endShape(CLOSE);

  noFill();
  circle(0, 0, 2 * rd + 50);
}