我正在尝试在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
);
}
但是，如果我要引入abarSize1并barSize2创建不同高度的条形（例如2px和8px）的交替图案，我将无法找出将这些条形放置在适当位置的等式。
我该怎么做呢？
我不得不写一些不同的代码，因为我从未使用过p5，而且我必须遵循该教程，但是重要的一点是循环。基本上，每次都将钢筋高度相加，然后以上一个钢筋的总高度绘制下一个钢筋。当总高度高于窗口时，停止绘制条。
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/[email protected]/lib/p5.js"></script>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句