ループを使用してp5.jsで図形を作成する

Question

P5.jsでコーディングして作業するのが初めてです。私は3つの矢印を作成したいと思います。それらの間には空間や距離がありません。3つの矢印を生成したいと思います。

私はループ、変数、関数を練習することでこれをしようとしていますが、何も動作していないため、これを過度に複雑にするかもしれません。私はbeginShape（）を使って矢印を作成し、頂点を設定し、それを関数として設定しました。私は関数を変数に設定し、forループ出力を3つの矢印にしたいと思います。

ここに私は何をしているのかわかりません/ループの仕方などが間違っているかどうかについての私の論理ですか？私は家庭教師が必要です、笑。どんな助けもありがとう！ここに私のコードは、私は今それを実行すると、単一の矢印が表示されます（上部のコメントアウトビットは私のクラスの宿題のために指示されている）である。：

// Assignment: Study and use beginShape() and endShape() to draw 3 separate sketches. Each sketch must contain vertices // 
// (vertex()). tools you will need: beginShape(), endShape(), vertex(), for loop // 

var functionArrow = Arrow(); 
function setup() { 
createCanvas(windowWidth, windowHeight); 
} 


function draw() { 
    background(255); 
    Arrow() 
    for (var i=Arrow; i < 500; i+=5); { //loop through to display the triangles// 
    } 

    function Arrow() { 
    beginShape(); 
    vertex(180,82); 
    vertex(207,36); 
    vertex(214,63); 
    vertex(407,11); 
    vertex(412,30); 
    vertex(219,82); 
    vertex(223,109); 
    endShape(CLOSE); 

} 
} 

Answer 1

あなたは正しい軌道に乗っているが、あなたが必要ですこれをあなたが記述したようにするには、いくつかのことを行う必要があります。

今すぐarrow()関数は、同じ位置に矢印を描画します。したがって、最初に行う必要があるのはarrow()のパラメータをパラメータ化して、与えられた場所に基づいて矢印を描くようにします。ここでは3つの円を描く少し例を示します：

function drawCircles(x, y){ 
    ellipse(x, y - 25, 10, 10); 
    ellipse(x, y, 10, 10); 
    ellipse(x, y + 25, 10, 10); 
} 

その後、別の値を使用してその関数を呼び出すことができます。

function draw(){ 
    drawCircles(100, 100); 
    drawCircles(200, 100); 
    drawCircles(300, 100); 
} 

ます。また、forループの中に入れて、決定するループ変数を使用することができますパラメータ：

function draw(){ 
    for (var i = 100; i <= 300; i += 100) { 
     drawCircles(i, 100); 
    } 
} 

これは単なる例であることに注意してください。これは、少なくとも正しい構文で始める必要があります。また、関数をdraw()関数と同じレベルで定義したことにも注意してください。あなたはあなたのの機能の中にarrow()の機能を持っています。これはおそらくあなたがしたいことではありません。