Create sliding loop

p5.js Coding Questions
#1

Hey everyone,
my problem is that I cannot figure out how to loop text.
In other words: If the text string leaves the canvas to the left side I want it to enter the canvas on the right side.
My approach is to set the text’s x variable to the starting point when its value is passing beneath the width of the canvas using an if loop.
Another way could be adding the text’s size to the xposition.
Maybe something like that:
if(xspeed+decrease < speed-textwidth) { decrease = decrease + textWidth; }

Is there a function for getting the width of a text?
If somebody could help I would be very thankful! Here’s the code:

var cooper; 
function preload()
{
  cooper = loadFont('data/CooperHewitt-Bold.otf'); 
}
function setup()
{
  createCanvas(1500,900); 
  textFont(cooper); 
  textSize(300); 
}
function draw() {
  textAlign(CENTER,TOP); 
  background(0); 
  var FontSize = 100; 
  var lineHeight = FontSize ; 
  var xspeed1 =1900; 
  var xspeed2 =1800; 
  var xspeed3 =2000; 
  var decrease = -millis()*0.5; 
  fill('#FFFFFF');
  text('SOCIETY SOCIETY SOCIETY', xspeed1+decrease, 0); 
  fill('#2502C9');
  text('ARTIFICIAL INTELLIGENCE', xspeed2+decrease,  300 ); 
  fill('#FFFFFF');
  text('TECHNOLOGY TECHNOLOGY  ', xspeed3+decrease,  600 ); 
}
#2

Hi @codeflow,

Below is an example that was inspired by code from your previous thread, Translating Processing to P5js. It might not be exactly what you want, but you may be able to adapt it to your needs.

// code originally by codeflow

let montserrat;
function preload() {
    montserrat = loadFont("Montserrat-Bold.otf"); 
}

function setup() {
    createCanvas(1200, 800);
}

function draw() {
    // set up environment
    background(240);
    textAlign(CENTER, CENTER);
    textFont(montserrat);
    fontSize = 144;
    textSize(fontSize);
    rectMode(CENTER);
    noStroke();
    let spacing_buffer = 600;
    // set up text strings
    let alpha = "Alpha";
    let beta = "Beta";
    let gamma = "Gamma";
    // draw text and rectangle
    fill(0);
    text(alpha, frameCount * 1.9 % (width + spacing_buffer) - spacing_buffer / 2, 70);
    fill(0);
    rect(width / 2, height * 3 / 8, width, height / 4);
    fill(255);
    text(beta, frameCount * 2.7 % (width + spacing_buffer) - spacing_buffer / 2, 140 + fontSize);
    fill(0);
    text(gamma, frameCount * 3.0 % (width + spacing_buffer) - spacing_buffer / 2, 220 + 2 * fontSize);
}

You will need to substitute your own file for "Montserrat-Bold.otf" for it to work.

Edited on January 27, 2021 to place comments in the code.

1 Like
#3

Thank you sooo much!

#4

could you explain the modulo spacing_buffer ? I’d like to understand your solution.

#5

As is the case here, modulo operations are often used to implement cyclical processes. If we were to use frameCount % width to control the anchor point of the text, then whenever that anchor point reached the right edge of the canvas, it would start again at the left edge. In that case, the entirety of the text would appear all at once at the left edge at the beginning of its entry. To delay its appearance spatially, so that it would enter more gradually, I added in spacing_buffer in one place and subtracted it in another. To control the speed of the travel, I multiplied frameCount by a factor prior to each modulo operation. The higher that factor, the faster it goes.

Edit (January 27, 2021):

If you would like the text to travel from right to left, you can do this:

text(beta, -frameCount * 2.7 % (width + spacing_buffer) + spacing_buffer * 2, 140 + fontSize);

Notice, in particular, that frameCount is negated. That causes the x coordinate to count downward instead of upward. Other factors have been adjusted to manage the spacing of the entry and exit of the text on the canvas.

1 Like