我如何缩短这段将圆圈变成数组的代码？

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

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

Answer 1

这不是您认为的那样：

2^i

这是按位异或运算符。请参阅 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() 行缺少 ) 右括号。

如果您有后续问题，请尝试 post 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));
}

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

我如何缩短这段将圆圈变成数组的代码？

how do i make shorten this code that makes circles into an array?

javascript

p5.js