音乐可视化器的嵌套 For 循环不迭代 (p5.js)

Nested For Loop for music visualiser not iterating (p5.js)

我正在尝试为音乐可视化项目创建一些测量声音频率的音阶。它们旨在以 2x2 网格模式显示 4 种不同的频率(低音、中低、中高和高音。我快到了,我有我的矩形,但是测量和显示频率本身的针只迭代顶行 x 和不是最后一行。我是 JavaScript 的新手,所以我确定它可能是我遗漏的非常简单的东西。

    // draw the plots to the screen
    this.draw = function() {
        //create an array amplitude values from the fft.
        var spectrum = fourier.analyze();
        //iterator for selecting frequency bin.
        var currentBin = 0;
        push();
        fill('#f0f2d2');
        //nested for loop to place plots in 2*2 grid.
        for(var i = 0; i < this.plotsDown; i++) {
            for(var j = 0; j < this.plotsAcross; j++) {

                //calculate the size of the plots
                var x = this.pad * j * 10;
                var y = height/20 * i * 10;
                var w = (width - this.pad) / this.plotsAcross;
                var h = (height - this.pad) / this.plotsDown;

                //draw a rectangle at that location and size
                rect(x, y, w, h);

                //add on the ticks
                this.ticks((x + w/2), h, this.frequencyBins[i])

                var energy = fourier.getEnergy(this.frequencyBins[currentBin]);

                //add the needle
                this.needle(energy, (x + w/2), h)

                currentBin++;
            }
        }

        pop();
    };

请尝试更改

this.ticks((x + w/2), h, this.frequencyBins[i])

this.ticks((x + w/2), y + h, this.frequencyBins[i]),

正在改变

this.needle(energy, (x + w/2), h)

this.needle(energy, (x + w/2), y + h).

这应该有效。