Create sliding loop

p5.js Coding Questions
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