Fizzbuzz 使用形状 (p5.js)

Question

我目前正在尝试使用形状创建 fizzbuzz，但无法正确显示可被 3 和 5 整除的正方形。我搜索了答案，但似乎没有人尝试过。

编写一个程序，在屏幕上水平绘制 25 个黑色圆圈。请使用从零开始的 for 循环完成此操作，并在每次迭代时将 iterand 递增 1。

然而，

当iterand能被3整除时，画一个紫色圆圈代替当 iterand 可以被 5 整除时，改为画一个绿色方块当 iterand 可以被 3 AND 5 整除时，画一个蓝色方块代替

function setup() {
createCanvas(1500, 1500);
ellipseMode(CENTER);
}

function draw() {
  background(200);
  var y = 100;
  // 25 black squares
  for (let x = 0; x < 1250; x += 50) {
    fill(0);
    ellipse(x, y, 50, 50);
    // sets the purple circle
    if (x % 3 === 0) {
      fill(153, 31, 240);
      ellipse(x, y, 50, 50);
    }
    // sets the green squares should be on top
    if (x % 5 === 0) {
      fill(0, 255, 0);
      square(x + 25, y - 25, 50);
    }
    // sets the last blue square
    // issue is the is supposed to be only one at the 15 mark
    if (x % 3 == 0 && x % 5 == 0) {
      fill(0, 0, 255);
      square(x + 25, y - 25, 50);
    }
  }
}

Answer 1

主要问题是您的条件评估 x。注意，x是x坐标，是50的倍数。
您必须评估该字段的索引。

仔细阅读您自己的说明：

[...] accomplish this with a for loop that starts at zero, and increments an iterand forward by one each iteration.

此外还需要绘制形状"instead".

运行从 i=0 到 i<25 的循环：

for (let i = 0; i < 25; ++ i)

并使用

if () { ... } else if () { ... } else { ... }

序列：

看例子：

function setup() {
    createCanvas(1500, 1500);
}

function draw() {
    background(200);
    var y = 100;
    // 25 black squares
    for (let i = 0; i < 25; ++ i) {
        let x = i*50; 
        
        if (i % 3 == 0 && i % 5 == 0) {
            // sets the last blue square
            fill(0, 0, 255);
            square(x, y, 50);
        }
        else if (i % 5 === 0) {
            // sets the green squares should be on top
            fill(0, 255, 0);
            square(x, y, 50);
        }
        else if (i % 3 === 0) {
            // sets the purple circle
            fill(153, 31, 240);
            ellipse(x+25, y+25, 50, 50);
        }
        else {
            // black circle
            fill(0);
            ellipse(x+25, y+25, 50, 50);
        }
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.js"></script>

Fizzbuzz 使用形状 (p5.js)

Fizzbuzz using shapes (p5.js)

javascript

processing

for-loop

if-statement

p5.js