How can I optimize this specific part of my p5js code (using trig functions) to reduce lag while maintaining the visual effect?

Question

So, my sketch is running okay on my laptop-- I have a MacBook Pro 2021 with 16GB RAM, and my sketch runs ~30 frames per second. However, other people have tried to open my sketch on their own laptops and are experiencing severe lag to the point that some cannot run the sketch at all.

I identified a specific chunk of my code that is almost doubling the lag (when I remove it, I go back up to ~60 FPS), but I don't know how to change it to reduce lag while also maintaining the visual it draws.

The problem code is the section labeled "yellow connectors" from lines 98-103. I have tried changing the lines to points, which does make my FPS go from 30 to 60, but it obviously changes the way the yellow connectors look.

I want to change the lines to points, then alter how the points are coded so that the points still appear as a moving series of lines connecting the red and blue double helix. Perhaps instead of applying a sin function to the yellow connectors, I could use a tan function, or something else?

I don't know if this is even possible, but I need help!

p5.disableFriendlyErrors = true;

var si=0.1;
var hi=0.1;
let tenet;
let words;
 
function preload() {
  tenet = loadImage('proneil.jpeg');
  words = loadImage('tenetword.png');
}

function setup() {
  console.log('Move your mouse across the screen. Hold down on the "0", "9", or "8" keys on your keyboard to change up the visuals. Click and drag across the screen to change the POV.','Then try different combinations of clicking, dragging, and using your keyboard. Double click to reset. Have fun! :)');
  createCanvas(1000, 600, WEBGL);
  camera(0, 0, (height/1.4) / tan(PI/6), 0, 0, 0, 0.15, 1, 0);
  perspective(1050, width / height, 100, 2000);
  // learned from Coding Train video:
  // https://www.youtube.com/watch?v=BW3D9WwalQE&list=PLRqwX-V7Uu6bPhi8sS1hHJ77n3zRO9FR_&index=6
  blendMode(BLEND);
}

function draw() {
  console.log(frameRate());
  
  //Color changing background
  let bg = map(noise(frameCount*0.01),0,1,-50,100)
  background(60-bg,0,10+bg);
  // Color changing code is from lines 70-73 of:
  // https://editor.p5js.org/EdCavett/sketches/r_JeOy-v
  
  noFill();
  
  //White noise background
  for (var a=0; a<=width*2; a++) {
      strokeWeight(1);
      stroke(255,255,0);
      point(a-650, random(height*3)-1000);
    }
  // Edited from Coding Train video:
  // https://www.youtube.com/watch?v=y7sgcFhk6ZM
  
//BACKGROUND WAVES
  //Continuous sin wave animation
  for (var x=1; x<=height+3000; x=x+5) {
    
    let twist = map(mouseX,0,1000,3*PI,PI)
    
    if (keyIsPressed===true && key==='0') {
      rotateY(PI);
    } else if(keyIsPressed===true && key==='9') {
      rotateY(twist/mouseY);
    } else {
      rotateY(PI*2)
    }
    // Pressing the '0' and '9' keys on the keyboard allows user to rotate the scene in different ways to create cool visuals.
    // https://p5js.org/reference/#/p5/keyIsPressed
    
      var j=(x+hi)/95;
      var z = cos(j*1.4);
  // Base loop from Claire
  // https://editor.p5js.org/clairez/sketches/7CTJFKiO-
  // Changed to sin() & some values changed
  
      //purple shadow
      strokeWeight(18);
      stroke(100,120,150,50);
      point(x-3000, z*height/-3,0);
      
      //red blue strands
      strokeWeight(15);
      stroke(200,200,0,30);
      point(x-2900, z*height/2,0);
      stroke(0,200,200,30);
      point(x-2800, z*height/-1.5,0);
//BACKGROUND WAVES END
  

//FOREGROUND DOUBLE HELIX START!!!!
      var p=(x+si)/95;
      var y = sin(p*1.55);
    
      noFill();

      //white shadow
      strokeWeight(45);
      stroke(255,10);
      point(x-2900, y*height/7);
      stroke(255,10);
      point(x-2900, y*height/-8);
      
      //yellow connectors
      strokeWeight(1);
      stroke(200,200,0);
      line(x-2900, y,x-2900, y*height/8.5)
      stroke(250,200,0);
      line(x-2900, y*height/-8.5,x-2900, y)
    
      //purple shadow
      strokeWeight(35);
      stroke(100,0,100,150);
      point(x-2900, y*height/7.5);
      stroke(100,0,100,150);
      point(x-2900, y*height/-7.5);
      
      //red and blue strands
      strokeWeight(30);
      stroke(255,0,0,150);
      point(x-2900, y*height/7);
      stroke(0,0,255,150);
      point(x-2900, y*height/-8);
    
    if (mouseIsPressed) {
      rotateY(PI);
        x--;
        si+=0.04;
        hi+=0.02;
    } else {
        let zoom1 = map(mouseY,0,600,1050,1049.9);
        perspective(zoom1, 1.6, 100, 2000);
    }
  // Changes animation speed and removes effect of zoom1 when mouse is pressed down.
//FOREGROUND DOUBLE HELIX END!!!!

if(keyIsPressed===true && key==='8') {
  push();
  blendMode(LIGHTEST); // https://p5js.org/reference/#/p5/blendMode
image(tenet,random(-140,-160),random(-110,-90),190,190);
  blendMode(BLEND);
  let shade = map(mouseX,0,1000,10,50)
  tint(255,shade);
image(tenet,random(-145,-155),random(-105,-95),190,190);
image(words,random(-15,-20),random(-100,-95),500,700);
  pop();
  //Photo and text with blend effect appear when "8" key is held down.
         }
    
    }
 si++;
 hi+=3;
 // Sets animation speed 
}

function mouseDragged() {
    let zoom = map(mouseX,0,1000,1050,1050.5) 
    camera(0, 0, (height/1.4) / tan(PI/6), mouseX/8, 0, 0, 0.15, 1, 0);
    perspective(zoom, width / height, 100, 1000);
  }
  // Changes camera perspective when mouse is dragged on the x-axis.


function doubleClicked() {
  camera(0, 0, (height/1.4) / tan(PI/6), 0, 0, 0, 0.15, 1, 0);
perspective(1050, width / height, 100, 1000);
  }
  // Resets camera perspective to normal when mouse is double clicked.