Processingで右から左に連続で途切れることなく文字を表示するにはどうしたらいいでしょうか

Question

Processingで右から左に連続で途切れることなく文字を表示するにはどうしたらいいでしょうか。
お店の宣伝で使われている電光掲示板のように”EIGHTEIGHTEIGHT…”と繰り返し永久に文字が流れるようにしたいです。

float x;
PFont font;
String msg = "EIGHT";
float speed = -1;

void setup() {
size(400, 200);
font = loadFont("Calibri-BoldItalic-48.vlw");
textFont(font);
textSize(32);
x = width;
}
void draw() {
background(255);
fill(0);
float msgWidth = textWidth(msg);
text(msg, x, height/2);
x = x+speed;
}

Answer 1

for文を使って同じ処理を繰り返してみるのはいかがでしょうか。
参考文献記載しておきます。
繰り返しループ

Comments

[tyanoma123]

掲載していただいたページ、とても参考になりました。ありがとうございました。

Answer 2

追記：最初の回答は質問意図をつかめてなかったため追記の形でコメントします。

まずはウィンドウの幅いっぱいに"EIGHT"を並べる処理を書いてみてください。動かすのはその後で考えましょう。
前回の回答に書いた考え方（各関数や変数が何を意味しているか）も参考になるのではないでしょうか？繰り返し処理についてはices_sinonさんが記述例と実行例が載っているページを紹介してくださってます。そのあたりも参考にしながら考えてみてください。

以下は元の回答

連続で途切れることなく

この正確な意味がはっきりわかりませんが、「画面左端から消えたら再び右から出現する」ということでよいなら、xがある限界より小さくなったときに再度右端の座標に設定しなおせばよいです。

text(msg, x, ...)としていることから変数xはテキストの左端の座標であることがわかります。msgはxからx + msgWidthの区間に表示されるのですが、ウィンドウの座標は左端が0、右端がwidthとなりますので、テキストが画面左側から消えるときのxの値は-msgWidthになるはずです。

よって以下のようにすればよいでしょう。

...

void draw() {
  ...
  x = x + speed;

  // ここで以下の処理を追加
  if (x < -msgWidth) {
    x = width;
  }
}

Comments

[tyanoma123]

説明不足で申し訳ございません。
お店の宣伝で使われている電光掲示板のように”EIGHTEIGHTEIGHT…”と繰り返し永久に文字が流れるようにしたいです。

[KSwordOfHaste]

質問文の記述が不十分だったということですね。
それならコメント欄に書くのではなく質問文を編集してください。閲覧者は回答のコメント欄を一々みたりしないかも知れませんよね？だから質問内容は質問文にかくべきなのです。
自分はわかっているつもりでも他者に正確に伝わらないことはままあります。できだけ正確に丁寧に書くようお願いします。

[tyanoma123]

アドバイスありがとうございました。質問文を編集させていただきました。

[tyanoma123]

何度もお時間を取らせてしまい申し訳ありませんでした。なんとか制作できました。回答ありがとうございました。

[thkana]

PFontで用意した文字サイズとtextSizeで指定した文字サイズが異なると、私の手元ではtextWidthの計算が多少ずれることがあるようです。特に事情がないのであれば合わせたほうがよさそう。

[KSwordOfHaste]

フォントによってそういうことがあるのでしょうかね・・・
"Calibri-BoldItalic-48.vlw"の例で言えば48, 32, 16の3種類ぐらい試してみましたが特に違和感が感じられませんでした。

[thkana]

手元で検討していたソースだと、ちょっとカクカクが見えたので。
とりあえず別回答に載せときます。Windows 10上で試しましたが、何かしら環境依存があるかも知れませんね。

Answer 3

KSwirdOfHasteさんのコメント欄のネタ。元の質問と関係ないわけでもないので解答欄で書いておきます。

PFontのサイズ(ファイル生成が面倒なのでcreateFontでやってます。これの影響の有無は確認していないのですが...)とtextSizeが異なると「カクカク」します。
ご参考まで。

float x;
PFont font;
String msg = "EIGHT";
float speed = -1;
String msgLine="";
float msgWidth;

void setup() {
  size(400, 200);
  //font = loadFont("Calibri-BoldItalic-48.vlw");
  font = createFont("Calibri Bold Italic",48);//2番めのパラメータを32にするとカクカクしない
  textFont(font);
  textSize(32);
  x = width;
  msgWidth=textWidth(msg);
  for(int i=0;i<(int)(width/msgWidth)+2; i++){
    msgLine+=msg;
  }
}

void draw() {
  background(255);
  fill(0);
  text(msgLine, x, height/2);
  x = x+speed;
  if(x<-msgWidth){
    x=0;
  }
}

Comments

[thkana]

noSmooth();
しとかないと描画が微妙にぶれたりしますがそれは別件。

[KSwordOfHaste]

再現しました(Windows 10)textWidthの結果が違うのが原因のようです。
createFont: 48, textFont: 32 -> 86.074127
createFont: 32, textFont: 32 -> 80.562500
となりました。createFontで作ったフォントの場合、textSizeの指定はtextWidthの結果に影響しないみたいです。86.0...はtextSizeが48のときの幅です。なんだかバグのような気がしますが探し方が悪いのかprocessingやstackoverflowからこのトピックを見つけられませんでした...

この件とは直接関係ないですが、スムーズに動かすために
if (x < -msgWidth) {x = 0; }
よりも
if (x < -msgWidth) {x += msgWidth; }
の方がいいような気がします。