对于循环，在 p5.js 中创建形状

For Loops to Create Shapes in p5.js

本文关键字：js p5 创建 于循环 循环      更新时间：2023-09-26

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

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

我

在这里疯了吗/不知道我在做什么/我关于 for 循环等如何工作的逻辑是否出错？我需要一位导师，哈哈。任何帮助不胜感激！这是我的代码（顶部注释掉的部分是我班级家庭作业的说明）当我现在运行它时，会出现一个箭头。

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

你走在正确的轨道上，但你需要做一些事情来让它按照你描述的方式工作。

现在，您的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);
   }
}

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

相关文章：