使用图像可视化排序算法

在本周的博客中，我认为我会做一些事情来帮助我学习更多有关算法的知识，并为编写采访面试做准备。 但是，以我的典型方式，我认为我会尝试使其形象化以做一些不同的事情，以使此有趣的内容读起来并对其进行尝试。 因此，让我们开始吧。

Partitioning the image

起初，我认为使用P5将图像划分为不同的像素，然后将这些图像随机排列以放置在图像的不同区域会很有趣。 但是，事实证明，JavaScript中的P5库和Java中的处理是通过两种不同的方式处理像素的。 Java，当使用loadPixels（）函数时，将返回一个数组，该数组包含所有像素作为该数组中的单个元素，其中每个像素在整个图像上从左到右逐行读取。

现在在javascript中不是这种情况。 P5实际上会给您一个像素数组，其中每个像素实际上会分成该数组中的三个不同元素。 数组的元素实际上是第一个图像像素中的红色量，第​​二个元素是绿色的量，第三个元素是蓝色的量。

因此，与其将一个像素精确地映射到像素阵列的单个元素中，不如将每个单个像素拆分为阵列上的三个元素，每个元素代表各自的rgb值。

这使得交换像素和遍历像素数组比处理对象复杂得多。 同样，考虑到像素数量通常在数百或数千中，对该数组进行排序实际上会增加计算负担，并且观看时没有那么大的指导意义。

因此，我决定根据图像的任意块进行分区更适合该任务。 这里的问题是图像必须在x和y方向上根据指定的量进行分割。 在P5中看起来像：

const sketch = (p) => {
      
    let img, loc, array = [], amountX = 30, amountY = 30;
    let blockWidth, blockHeight;

...

p.setup = () => {
      
        img.resize(img.width - img.width % amountX, img.height - img.height % amountY)
        blockWidth = img.width / amountX
        blockHeight = img.height / amountY

        ...

    } 

p.partition = (img) => {
      
        let array = []
        let newBlock
        for (let j = 0; j < amountY; j++) {
      
            for (let i = 0; i < amountX; i++) {
      
                newBlock = img.get(i * blockWidth, j * blockHeight, blockWidth, blockHeight)
                array.push({
      img: newBlock, index: i