For 循环在 p5.js 中创建形状

Question

我是 P5.js 编码和工作的新手。我想创建 3 个箭头，彼此间隔几个像素（它们之间的 space/distance 对我来说并不重要，我只想生成 3 个箭头）。

我正在尝试通过练习 for 循环、变量和函数来做到这一点，但可能对我自己来说太复杂了，因为没有任何效果。我使用 beginShape() 创建了箭头并设置了顶点，然后将其设置为函数。然后我想将函数设置为一个变量，并有一个for循环输出3个箭头。

我疯了吗here/have不知道我在干嘛doing/is我关于for循环等工作的逻辑有问题吗？我需要一个导师，哈哈。任何帮助表示赞赏！这是我的代码（顶部注释掉的部分是我的 class' 家庭作业的说明）当我运行现在出现一个箭头。:

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

也可以放在for循环中，用循环变量来决定参数：

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

请注意，这只是一个示例，但这至少应该让您开始使用一些正确的语法。另请注意，我已将 drawCircles() 函数定义在与 draw() 函数相同的级别。你的 arrow() 函数在你的 draw() 函数中，这可能不是你想要的。

For 循环在 p5.js 中创建形状

For Loops to Create Shapes in p5.js

javascript

processing

p5.js