Need Help Looping a command

Question

I currently have a large amount of text that I want to scroll up until the end of the text reaches the top of the canvas then it starts from the bottom and restarts. I am unsure how to make it restart, and I though I knew how to make to scroll.

So, if you can help me restart the code, and make it scroll that would be helpful!!

I haven't started with making it restart because I am unsure. For the scrolling I thought if I made a varible and had it = the starting point, and add the varible to the text height, so that when I add the code "varibleName = varibleName - 1" it would move the poistion constanlly.This did work only when the code was out of a else if statement and if I hadn't clicked on the button that brings me to the screen with the text. So, before I clicked the button it would scroll, but once I clicked it it would stop. SO I thought I would add it to the else if statment and it would work, but NOPE. Nothing...

The code I wanted to add was:
loc = loc -1
Anything that is *italic* is where the code was.

// Varible Name 
let loc = 175;

// button setup
function setup(){
  enterButton = new Sprite (width/2, height/2+100);
  a2Button = new Sprite (width/2-150,height/2+100);
  a3Button = new Sprite (width/2+150, height/2+100);
  a4Button = new Sprite (width/2+300, height/2+100);
}

// where the screens get called when a button is pressed
function draw (){
*// had added the code here but it only worked when the button wasn't pressed*
  if (screen==0){
      if (enterButton.mouse.presses()) {
        print('enter to screen1');
        // set up screen one
        showScreen1();
        // screen number
        screen = 1;
    } else if (a2Button.mouse.presses()){
        print('a2 to screen1');
        // set up screen one
        showScreen1();
        // screen number
        screen = 28;
    }else if (a3Button.mouse.presses()){
        print('a3 to screen1');
        // set up screen one
        credits();
        *// location of text (thought I could add it here, but nope)*
        // screen number
        screen = 29;
    }else if (a4Button.mouse.presses()){
        print('a4 to screen1');
        // set up screen one
        showScreen1();
        // screen number
        screen = 30;
    }
  }
}

// The important screen
// Credits
function credits(){
   background ('lightblue');
    text(
    "Chase Through the Stars\n\n\nGame Director/Programmer\nMars W.\n\nArtWork\nMars W. & Maky S.\n\nMusic\njdgag\n\nVoice Over\n Mars W.\n\nAdditonal Help\n Girls Who Code\n\n\nSpecial Thanks to Girls Who Code for teaching us the basics of p5.js, which allowed me to create this game\n and for the people who helped me when I was having difficulties. I also appreciate my girlfriend, Maky, for helping me with some of the artwork.\n\n\nHope\nWhat is hope? Hope is an optimistic state of mind. So to me, this means that you try no matter what and believe that anything is possible.\nIn my game Chase Through The Stars, the main character is lost in space, looking for the ISS to reunite with his family.\nThe character goes through different paths, many being an example of hope, so that they can get back.\nThis shows hope because although the character is experiencing something negative, they still push through, believing it is possible to return to the ISS.\nWhile creating this game, I experienced many difficulties. There would be many times when my code didn't work because I forgot something or made a mistake,\nor even when I wanted to add features to my game that was never taught to us.\nIt made me very angry when I didn't know why my code didn't work or just not know how to code something,\nbut even though I got angry and found myself having difficulties, I never gave up.\nI pushed through, knowing that if I worked at it, I would eventually get it, and my game would be ready for the Girl's Who Code game jam.",
    width / 2, **loc**
  );
*thought I could add the code here... but like always, NOPE!*
   // Button postion 
    a2Button.pos={x: -100, y: -100}
      a3Button.pos={x: -100, y: -100}
      a4Button.pos={x: -100, y: -100}
    // Button
  e5Button.pos = { x: width /2, y: height / 2+100};
  e5Button.w = 50;
  e5Button.h = 50;
  e5Button.collider = "k";
  e5Button.color = "plum";
  e5Button.text = "Restart";
}

Answer 1

if I understood correctly in this modified code, the loc value is decreased by scrollSpeed each frame, causing the text to scroll upwards. When the loc value goes below a certain threshold (in this case, -1000), the text will be reset to the bottom of the canvas (height), creating the illusion of continuous scrolling.

let loc = 175;
let scrollSpeed = 1;

function draw() {
  ...
  if (screen === 29) {
    background('lightblue');
    loc -= scrollSpeed; // Decrease the loc value to scroll the text upwards
    text(
      "Your long text goes here...",
      width / 2, loc
    );

    if (loc < -1000) {
      // If the text goes above a certain position, reset loc to restart the text
      loc = height;
    }

    // Rest of the code ...
  }

  // Rest of the code ...
}