5秒間機能を実行

Question

私はYouTubeのローディングバーのように上部にバーがあるp5.jsにローディングバーを作ろうとしています。

私は線の幅を減らすことができます map()機能を使用したいので、

var x = 0; 
function setup() { 
    createCanvas(400, 400); 
    x = width; 
} 
function draw() { 
    background(220); 
    stroke(255,0,0); 
    strokeWeight(10); 
    line(0,0,x,0); 
} 

よう

。

map(x, width , 0 , second(),second()+5); 

Working Example

注：すべてxの

Answer 1

まずp5.jsライブラリを使用するには、widthに等しくすべきではありません。 0から開始し、時刻に基づいて更新する必要があります。

第2にsecond()は、現在の時刻の実際の秒数を返します。したがって、この場合は適切ではありません。 millis()を使用して、プロジェクトが開始されてからのミリ秒を返す方がよいでしょう。

最後に、あなたが間違ったmapパラメータを使用している（または少なくとも私はあなたが彼らにを渡しているためでやろうとしているのか理解していない）

x = map(millis(), 0, 5000, 0 , width); 

上記は、ミリ秒の範囲をマップしますキャンバスの0 - widthに対して0 - 5000（0〜5秒）である。

---

バーをいつでも初期化できるようにするには、値の範囲の開始値と終了値に変数を使用します。

var x, 
    startAt; 

function setup() { 
    createCanvas(400, 400); 
    startAt = millis(); 
} 

function draw() { 
    background(220); 
    stroke(255, 0, 0); 
    strokeWeight(10); 

    x = map(millis(), startAt, startAt + 5000, 0, width); 
    line(0, 0, x, 0); 
} 

function mouseClicked() { 
    startAt = millis(); 
} 

この例では、クリックするたびにバーが再起動されます。 http://alpha.editor.p5js.org/gpetrioli/sketches/SyibBz_ff