How to create an infinite loop of the alphabet at the top of the canvas

geocompi

Hello Anyone reading this,

I have to loop the alphabet across the top of my canvas, so far I have got the alphabet to only go once... How do i get it too loop forever.

final int SPEED = 2;
char alphabet = 'Z';
char nextChar;
float chatX = 100;
int spacing;

void setup(){
size(500,500);  

spacing = width/25;  

}

void draw(){
  background(200);
  float nextChatX = chatX;

for( int i = 0; i < 26  ; i++){
    nextChar = char(alphabet - i);
    fill(0);
    textSize(25);
    text( nextChar , (nextChatX) - (spacing * i), 25);
  }

   if(chatX > 0)
       chatX = (chatX + SPEED);
}

Chrisir

draw loops on and on

So add some x to text and increase x every time draw() runs

geocompi

No that does not do it, the idea is that as soon as "A" appears a "Z" will be right behind it and this will continue until the program is closed

kfrajer

Modify N or modify the algorithm so to reset chatX in order to get truly infinite looping of characters.

Kf

final int N=100;   //NUMBER of characters to display
final int ALPHABET_SIZE=26;

final int SPEED = 2;
char alphabet = 'Z';
char nextChar;
float chatX = 100;
int spacing;

void setup() {
  size(500, 500);  

  spacing = width/25;
}

void draw() {
  background(200);
  float nextChatX = chatX;

  for ( int i = 0; i < N; i++) {
    nextChar = char(alphabet - (i%ALPHABET_SIZE));
    fill(0);
    textSize(25);
    text( nextChar, (nextChatX) - (spacing * i), 25);
  }

  if (chatX > 0)
    chatX = (chatX + SPEED);
}

jeremydouglass

This is a good solution. The main drawback with this approach is that the lack of kerning makes the text look awkward. For example, the W is wider than other letters, so it bangs up against them; the I is narrow, so it leaves a big gap.

Some different ways around that:

1. use a fixed-width font
2. center each character on a tile square
3. measure the textwidth of each character and account for that in spacing https://processing.org/reference/textWidth_.html
4. create a full string (e.g. two alphabets wide) and slide the string.

Each has its own advantages and drawbacks.

jeremydouglass

Here is an example of the string sliding method (as an alternative to the character-based method):

/**
 * SlidingStringCycling
 * Produces an illusion of an endlessly scrolling wrap-around string.
 * 2018-03-10 Jeremy Douglass - Processing 3.3.6
 * forum.processing.org/two/discussion/26745/how-to-create-an-infinite-loop-of-the-alphabet-at-the-top-of-the-canvas#latest
 */

String alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
int framesPerCycle = 300; // number of frames per loop
float tsize = 25;         // font size
float twidth;             // text width in pixels
float toffset = 0;        // text offset from origin in pixels

void setup() {
  fill(0);
  textSize(tsize);
  twidth = textWidth(alphabet); // width of string in pixels
  alphabet = alphabet+alphabet; // double string so letters display after Z
}
void draw() {
  background(192);
  // depending on what frame it is,
  // how far should the string be shifted?
  toffset = map(frameCount%framesPerCycle, 0, framesPerCycle-1, 0, twidth);
  // shift the string off the left edge
  text(alphabet, -toffset, tsize);
}

In fact this is just a single double-alphabet strip being slide back and forth like a typewriter carriage, but it creates an illusion of endless forward motion. To reveal the moment that it pops back, add an extra character here:

alphabet = alphabet+'_'+alphabet; // double string so letters display after Z

or just play it on a much shorter string:

String alphabet = "abc";
int framesPerCycle = 100; // number of frames per loop