如何在 javascript 中创建具有不同条纹宽度的交替条纹图案

Question

我正在尝试在 javascript (p5.js) 中创建条纹图案，其中奇数条纹是一种宽度，偶数条纹是另一种宽度。

如果它们的宽度相同，我创建图案的代码如下：

const barSize = 5; //each bar is 5 pixels tall
let numBars = Math.ceil(windowHeight / barSize); //number of bars to draw

for (let i = 0; i < numBars; i++) {
  if (i % 2 === 0) {
    sketch.fill(234, 62, 246); //pink
  } else {
    sketch.fill(0); //black
  }
  sketch.rect( //create a rectangle at x, y, with window width, and barsize height (5 pixels)
    windowWidth / 2 - windowHeight / 2,
    barSize * i,
    windowWidth,
    barSize
  );
}

但是如果我要引入 barSize1 和 barSize2 来创建不同高度（比如 2px 和 8px）的条的交替模式，我无法弄清楚方程式，在一个循环中，将条放在适当的位置。

我该怎么做？

Answer 1

我不得不以不同的方式编写代码，因为我从未使用过 p5，而且我必须按照教程进行操作，但重要的一点是循环。基本上，每次将条形高度加到总和上，然后在前一个条形的总高度处绘制下一个条形。然后当总高度高于 window.

时停止绘制条形图

function setup() {
  createCanvas(400, 200);

  const windowWidth = 400;
  const windowHeight = 200;

  let totalHeight = 0;
  let i = 0;
  let barSize;

  while (totalHeight < windowHeight) {
    if (i % 2 === 0) {
      fill(234, 62, 246); //pink
      barSize = 2;
    } else {
      fill(0); //black
      barSize = 8;
    }

    rect(windowWidth / 2 - windowHeight / 2, totalHeight, windowWidth, barSize);

    totalHeight += barSize;
    i++;
  }
}

<script src="https://cdn.jsdelivr.net/npm/p5@1.2.0/lib/p5.js"></script>

Answer 2

我调整了上面的答案，让它在任何屏幕上填满整个屏幕，以防您想知道如何操作:)

您可以在这里预览草图：https://www.openprocessing.org/sketch/1057170

function setup() {
  createCanvas(windowWidth, windowWidth);

  let totalHeight = 0; // this is your y
    let x = 0;
  let i = 0;
  let barSize;

  while (totalHeight < windowHeight) {
    if (i % 2 === 0) {
      fill(234, 62, 246); //pink
      barSize = 2;
    } else {
      fill(0); //black
      barSize = 8;
    }

    rect(x , totalHeight, windowWidth, barSize);

    totalHeight += barSize;
    i++;
  }
}

如何在 javascript 中创建具有不同条纹宽度的交替条纹图案

how do I create an alternating stripe pattern with different stripe widths in javascript

javascript

loops

modulo

p5.js