processingで輝度の波を作りたい

Question

processingで動く縞模様を作りたいのですが、実行結果が一枚の画像を横にスライドしているような感じになります。（コードを実行してもらったらわかるかと思います。）最終的に真っ黒にならずに縞模様が動く動画のようにするにはどこを変更したら良いのでしょうか。

processing
コード
void setup() {
  size(200, 200);// 
  background( 0 );
  textSize(16);
  textAlign(CENTER, CENTER);
 }
void draw() {
  move();
  count = count + 1;
}
void move() {// 動く縞
  float val; // 階調値(0~255)
  float NumOfCycle = 2; // 波の数
  int i, x;

  background( 0 ); 
  noStroke();
  for (i=0; i<200; i++) {
    val=255*(1+sin(NumOfCycle*i*2*PI/200))/2; 
    x=count%width;
    fill(val); 
    rect(i+x, 0, 1, height);
  }
}

Answer 1

描く図形の方の位相をずらすのが定石かと思います。

void move() {// 動く縞
  float val; // 階調値(0~255)
  float NumOfCycle = 2; // 波の数

  background( 0 ); 
  for (int i=0; i<200; i++) {
    val=255*(1+sin(NumOfCycle*((i-count)%200)*2*PI/200))/2; 
    stroke(val); 
    line(i, 0, i, height); //別にrectで描いてもいいですけど。
  }
}

あるいは、図形の方は一定に描いて、「窓」をずらしていくというのもtranslate()標準装備のProcessingらしいと言えるかも。

void move() {// 動く縞
  float val; // 階調値(0~255)
  float NumOfCycle = 2; // 波の数

  background( 0 ); 
  
  translate(count%200-200,0);//「窓」の位置をずらす
  for (int i=0; i<400; i++) {//2倍幅描いておく
    val=255*(1+sin(NumOfCycle*i*2*PI/200))/2; 
    stroke(val); 
    line(i, 0, i, height); //別にrectで描いてもいいですけど。
  }
}

Answer 2

要は書き始めの位置（0 + x）がどんどん右へ行ってしまうので、background(0);のままの部分が残ってしまうわけですよね？

であれば最初からwidth分左にずらしておいて、2倍widthを書いてしまえばいいんじゃないでしょうか（無駄ですが^^;

void setup() {
  size(200, 200);
  noStroke();
}

void draw() {
  background(0);
  move();
}

void move() {
  float NumOfCycle = 2;

  for (int i = 0; i < width * 2; i++) {
    float val = 255 * (1 + sin(NumOfCycle * i * 2 * PI / width)) / 2;
    int x = frameCount % width;
    fill(val);
    rect(i + x - width, 0, 1, height);
  }
}

---

rect(i, 0, 1, height);にしてvalの調整でもできると思いますが、私は算数どまりなのでわかりません^^;