显示计算步骤 p5.js

Question

我正在画一个草图来展示排序算法。该算法本身有效，但当我执行它时，它直接进入已解决状态，而我希望它显示所有计算。我试过将帧率设置得低一点，但这只会延迟视觉效果。我将如何设置它以便在每次计算后执行 drawRect() 函数？这是我的代码：

let elements = 25
var array = []
let goal = []
let tempAr = []
let i = 1
let sorted = false

function setup() {
    // frameRate(5)
    // put setup code here
    createCanvas(600, 600)
    background(25)
    // make the goal array ascending
    while (goal.length < elements) {
        goal.push(i)
        i++
    }
    // make the scrambled array
    i = 0
    tempAr = goal
    while (i < elements) {
        let rng = Math.floor(random(tempAr.length))
        array.push(tempAr[rng])
        tempAr.splice(rng, 1)
        i++
    }
}

function draw() {
    fill('#f1f442')
    drawRect()
    if (!sorted) {
        mysort()
    }
}
function drawRect() {
    i = 1
    while (i <= elements) {
        rect(i * (width / elements) - (width / elements), height - array[i - 1] * height / elements, width / elements, array[i - 1] * height / elements)
        i++
    }
}
async function mysort() {
    sorted = false
    while (!sorted) {
        sorted = true
        var e = 0
        while (e < array.length) {
            if (array[e] > array[e + 1]) {
                clear()
                background(25)
                let temp = array[e + 1]
                array[e + 1] = array[e]
                array[e] = temp
                sorted = false
            }
            e++
        }
    }
}

Answer 1

在 P5 中，setup() 中发生的所有事情都会立即发生，draw() 之后会被调用，并且会以 @60fps（或您设置的任何帧速率）连续调用。如果您想显示算法的进度，请在每次 draw() 调用时对算法执行一次迭代（或提供所需输出所需的次数）。

显示计算步骤 p5.js

Showing steps of a calculation p5.js

javascript

p5.js