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()函数，以便根据您提供的位置绘制箭头。这是一个绘制三个圆圈的小例子：

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()函数，这可能不是您想要做的。

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

1 个答案: