How to program a "character-snake"?

doeroe

Hi there,

I'm getting started with processing and searching for a way to build a "character-snake", starting on the bottom in the right edge, moving to the left edge, jumping one row up, moving further to the right edge and so on.

The characters from my string "chars" are pushed in the charArray. The snake should become endless, so that "5" is followed by "3", is followed by ".", is followed by "5" ... and every single character runs the whole line to the top of the canvas.

My questions are: - how to transform the commented out code lines at the end of my code to a short working code? At this moment, the distance between the characters are right, but as soon as the first "5" reaches the left edge, all characters referring to this "5" jump in the next line.

• this is my first code - do you have any suggestions to improve it :)

Thanks a lot!

Here is my code:

var tS, chars, x, y, charCount, speed;

function setup() {
  createCanvas(400,400);
  frameRate(50);
  x = width;
  y = height;
  speed = 4;
  bg = "53.56859";
  lg = "10.033459999999991";
  chars = bg + " " + lg + " ";
  charCount = 0; 

  charArray = [];
  widthArray = [];
}

function draw() {

  // called functions
  generalSettings();
  fillArrays();
  loopChars();
  move();
  jump();
  letters();
}

function generalSettings() {
  background(255);
  // text
  textFont("Menlo");
  tS = 12;
  textSize(tS);
  fill(255, 0, 0);
}

function fillArrays() {
  // save char in charArray and charWidth in widthArray
  for (i = 0; i < chars.length; i++) {
    charArray.push(chars.charAt(i));
    widthArray.push(textWidth(charArray[i]));
  }
}

function loopChars() {
  // looping the gps-position
  charCount = (charCount + 1) % chars.length;
}

function move() {
  x = x - speed;   
}  

function jump() {
  // reverse speed by reaching an edge
  if((x < 0) || (x > width)){
    speed = speed * -1;
    y = y - tS;
  }
}

function letters() {
  text(charArray[0], x, y);
}



/*  // correct distance
  text(charArray[0], x , y);
  text(charArray[1], x + textWidth(charArray[0]), y);
  text(charArray[2], x + textWidth(charArray[0]) + textWidth(charArray[1]), y);
  text(charArray[3], x + textWidth(charArray[0]) + textWidth(charArray[1]) + textWidth(charArray[2]), y);
  text(charArray[4], x + textWidth(charArray[0]) + textWidth(charArray[1]) + textWidth(charArray[2]) + textWidth(charArray[3]), y);
*/