javascript - p5.j​​s 顶点形状换行

Question

我正在研究音乐可视化并根据歌曲振幅绘制曲线顶点。因此，我正在使用 p5.js 声音库。

当顶点到达 Canvas 的右端时，我想强制换行但将上方的线条保持为单一形状。我当前的版本仅移动下一行中的整个顶点形状。我的思维错误在哪里？

const lineHeight = 30;
const paddingTop = lineHeight;
let currentLine = 1;

function draw() {
    background(0);
    amplitudeHistory.push(amplitude.getLevel());
    stroke(255);
    noFill();
    beginShape();

    for(let i = 0; i < amplitudeHistory.length; i++) {
        let y = map(amplitudeHistory[i], 0, 1, lineHeight + (paddingTop * currentLine) , lineHeight * (-1) + (paddingTop * currentLine));
        curveVertex(i, y);
    }
    endShape();

    if(amplitudeHistory.length > width * currentLine) {
        currentLine++;
    }
}

Answer 1

您需要为每条线绘制 1 个形状。必须绘制的线数由下式计算

noOfLines = amplitudeHistory.length / width + 1;

创建循环并运行 currentLine从 0 到 < noOfLines .单行数据从 currentLine * width 开始结束于 (currentLine+1) * width分别在amplitudeHistory.length最后一行:

let start = currentLine * width;
let end   = min(start + width, amplitudeHistory.length);

要绘制线条，您需要 2 个嵌套循环:

function draw() {
    background(0);
    amplitudeHistory.push(amplitude.getLevel());
    stroke(255);
    noFill();

    let noOfLines = amplitudeHistory.length / width + 1;

    for (let currentLine = 0; currentLine < noOfLines; currentLine ++) {

        beginShape();

        let start = currentLine * width;
        let end   = min(start + width, amplitudeHistory.length);
        for (let i = start; i < end; i++) {
            let y = map(amplitudeHistory[i], 0, 1,
                        lineHeight + (paddingTop * currentLine),
                        lineHeight * (-1) + (paddingTop * currentLine));
            curveVertex(i-start, y);
        }

        endShape();
    }
}