p5.js - 左と右に繰り返し移動する長方形を取得する（バウンス）

Question

大きなプロジェクトのサンプルコードを試していますが、長方形が2つの線の間をバウンスするのに問題があります。

function draw() { 
    print(frameCount) 
    background(255) 
    var x = 150 + frameCount; 
    rect(x,200,15,15); 
    line(150,0,150,400); 
    line(250,0,250,400); 
    if (x >= 250) { 
     background(255) 
     x = 350-frameCount; 
     rect(x,200,15,15); 
     line(250,0,250,400); 
     line(150,0,150,400); 
    } if (x <= 145) { 
     background(255) 
     x = 145 + (frameCount % 100); 
     rect(x,200,15,15); 
     line(250,0,250,400); 
     line(150,0,150,400); 
    } 
} 

私は左にバウンスを指示文の場合、最初のインスタンスの後に、それはオリジナルを無視だという気持ちを、取得しています。私は本当に何がうまくいかないのか分からず、どんな助けもありがたいです。

Answer 1

変数のセットに現在の位置と速度を格納し、それに基づいて矩形を移動するだけでよいでしょう。ここでは例です：

var x = 0; 
var speed = 1; 

function draw(){ 
    x += speed; 
    if(x < 0 || x > width){ 
     speed *= -1; 
    } 

    background(64); 
    line(x, 0, x, height); 
} 

私はこの利用可能hereのチュートリアルを書きました。これは通常の処理用ですが、P5.jsのアイデアは同じです。