Для создания циклов в p5.js

Question

Я новичок в кодировании и работе в P5.js. Я хотел бы создать 3 стрелки, расположенных на расстоянии нескольких пикселей друг от друга (пространство/расстояние между ними для меня не имеет большого значения, я просто хотел бы создать 3 стрелки).

Я пытаюсь сделать это, практикуя для циклов, переменных и функций, но может быть слишком усложняю это для себя, потому что ничего не работает. Я создал стрелку с помощью beginShape() и установил вершины, а затем установил ее как функцию. Затем я хотел бы установить функцию как переменную и иметь 3 цикла для вывода цикла.

Am I CRAZY здесь/не знаю, что я делаю/это моя логика относительно того, как для циклов и т. Д. Работает неправильно? Мне нужен учитель, ха-ха. Любая помощь приветствуется! Вот мой код (закомментировано немного сверху инструкция для моего класса домашнего задания) Когда я запускаю его теперь появляется одна стрелка .:

// 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() так, чтобы она рисовала стрелку, основанную на местоположении, которое вы ему даете. Вот небольшой пример, который рисует три круга:

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); 
} 

Вы также можете положить его в цикле, и использовать переменную цикла, чтобы решить параметры:

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

Обратите внимание, что это всего лишь пример, но это должно, по крайней мере, чтобы вы начали с некоторым правильным синтаксисом. Также обратите внимание, что я определил свою функцию drawCircles() на том же уровне, что и функция draw(). У вас есть функция arrow() внутри вашей функции draw(), что, вероятно, не то, что вы хотите сделать.