Question

我正在使用p5.js库，无法正确格式化for循环以显示这些圆圈：

function draw() {
  ellipse(width/12,height/2,width/6,width/6);    
  ellipse(width/12,height/4,width/12,width/12);
  ellipse(width/12,height/8,width/24,width/24);
  ellipse(width/12,height/16,width/48,width/48);
}

我尝试过以下但没有制作省略号。我哪里错了？

下面我附上了完整的代码。

for(var i = 0; i < 4; i++){
  ellipse(width/12, height/(2 * (2^i)), width/(6 * (2^i)), width/(6 * (2^i));  
}

＆＃13;

function setup() {
  canvas = createCanvas(windowWidth,windowHeight);
}

function draw() {
  background(255);
  fill(	149, 185, 241,160);
  rect(width*(1/6),0,width*(2/3),height);
  
  
  fill(181,99,87,160);
  noStroke();
  
  for(var i = 0; i < 4; i++){
  ellipse(width/12, height/(2* pow(2,i)), width/(6 * pow(2,i)), width/(6 * pow(2,i));  
}

  
}


window.onresize = function() {
  canvas.size(windowWidth, windowHeight);
}

＆＃13;

Answer 1

这不符合您的想法：

2^i

这是一个按位xor运算符。有关详细信息，请参阅this question，Google就是您的朋友。

您可能正在寻找P5.js pow()功能。更多信息可以在the reference找到。

你应该养成debugging代码的习惯。如果您有这样的问题，请尝试打印出每个参数的值。你本来能够隔离你的问题，这使谷歌搜索更容易。

例如，执行此操作：

for(var i = 0; i < 4; i++){
  console.log('i: ' + i);
  console.log('width: ' + width);
  console.log('width/12: ' + width/12);
  console.log('pow(2,i): ' + pow(2,i));
  console.log('height/(2* pow(2,i)): ' + height/(2* pow(2,i)));
  console.log('width/(6 * pow(2,i)): ' + width/(6 * pow(2,i)));
  ellipse(width/12, height/(2* pow(2,i)), width/(6 * pow(2,i)), width/(6 * pow(2,i)));  
}

这将告诉您哪个参数与您的预期不同，您可以进一步将问题与此区分开来。

当然，这也需要你检查developer console，你也应该养成这样做的习惯。这就是你遇到的任何错误都会出现的地方。您问题中当前的代码缺少)行上的ellipse()右括号。

如果您有后续问题，请尝试发布MCVE我们可以复制并粘贴以自行运行，而不是断开连接的代码段。

Answer 2

您可以使用left shift <<运算符，因为您正在使用因子2，例如

for (var i = 0; i < 4; i++) {
    ellipse(width / 12, height / (2 << i), width / (6 * (2 << i)), width / (6 * (2 << i));
}

＆＃13;

console.log(2 << 0, 2 << 1, 2 << 2, 2 << 3);

＆＃13;

如何缩短这个使圆圈成为数组的代码？

2 个答案: