嵌套的For Loop，用于音乐可视化软件不迭代(p5.js)

Question

我正试图为一个音乐可视化项目创建一些测量声音频率的音阶，它们的目的是在2x2网格模式中显示4个不同的频率（低音、中低音、中高音和高音）。他们的目的是显示4个不同的频率（低音，中低频，中高频和高音在一个2x2的网格模式。 我几乎在那里，我有我的矩形，但测量和显示频率本身的针只迭代的顶部行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();
    };

Answer 1

请尝试改变

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).

这应该可以。