如何调整此代码以在 for 循环中包含顶点

Question

//Study 并使用 beginShape(( 和 endShape(( 绘制 3 个单独的草图。每个草图必须包含顶点 ( vertex(( (。你需要的工具：beginShape((，endShape((，vertex((，for loop。

我们应该制作云纹图案。我已经通过下面的代码得到了想要的结果，但它不包括分配要求的顶点。如何编辑调整此代码以包含顶点但给出相同的输出？

var theta = 0.0;
var circWidthMultiplier = 17.5;
var circHeightMultiplier = 12.5;
var rectWidthMultiplier = 12.5;
var rectHeightMultiplier =17.5;
var rotationSpeed = 0.005;
function setup() {
  createCanvas(windowWidth,windowHeight);
  rectMode(CENTER);
}
function draw() {
  background(100);
  noFill();
  push();
  beginShape();
  translate(width/2, height/2);
  for(var i =0; i < 50; i+=5){
    ellipse(0, 0,
    i*rectWidthMultiplier,
    i*rectHeightMultiplier);
  }
  endShape();
  pop();

  push();
  beginShape();
  translate(width/2, height/2);
  rotate(theta);
  for(var i =0; i < 50; i+=5){
    ellipse(0, 0,
    i*circWidthMultiplier,
    i*circHeightMultiplier);
  }
  endShape();
  pop();
  beginShape();
  translate(width/2, height/2);
  for(var i =0; i < 50; i+=2){
    rect(0, 0,
    i*circWidthMultiplier,
    i*circHeightMultiplier);
  }
  endShape();
  pop();
  theta += rotationSpeed;
}

Answer 1

现在你正在使用ellipse()和rect()等函数来绘制你的形状。您可以使用beginShape()、vertex() 和 endShape() 来绘制形状。

从替换rect()函数开始。您已经知道矩形的位置和大小。因此，用对 vertex() 函数的四次调用来替换它应该很容易。

圆圈有点棘手，但仍然可行。您需要使用基本的三角函数来计算圆周围的顶点。谷歌是你的朋友。

但老实说，这似乎有点毫无意义。为什么要费心使用vertex()来绘制"处理"已经为您绘制的形状？您可能需要咨询教师，以确保您正确理解了作业。