GENCG Working Journal - Day 7 & 8 - Extended Projects

Pixels right? I wanna do more with pixels! I overhauled my inital idea of swapping pixels because the outcome didn't convince me at all.
So, I want to swap pixels again, but not without a purpose. The idea is, that I prvovide the code with two images. My program will analyze the images for all its pixels and then try to reconstruct one image with the pixels from the other image. To make this more clear. All pixels in one image will be rearanged, but not changed in their values. The slider in the top left defines "how hard" the program tries to match the original image. If the slider is all the way to the right, you will simply see the source image, because it doesn't try at all to match the original image at all. If the slider is all the way to the left it matches the image as good as possible.
Trying to replicate the image as close as possible might take a considerable amount of time!
This calculations are heavy on your CPU.
The images are downscaled in order to decrease the processing time.
Use the second slider to increase/decrease the resolution
Show me!
Now comes the part i'm definetly most excited and proud of. In this example the "matching factor" changes over time from "not matching at all" to "match as close as possible". Keep in mind that pixels are only changing positions but do NOT change it's color values!
Click the button to start :)
Show me! 
        // this function is called for every pixel of the source image which should be replicated
        // it returns the closest color of the source image accordings to the threshold value
        function findClosestColor(r, g, b, a, sourceColors) {

          // the cumulativeDiff represents the total difference of the sum of the RGBA values
          // the smaller this value becomes, the closer is the found pixel in terms of color values
          let closestCumulativeDiff = 1016;
          let closestColor = color(255, 255, 255, 255);

          // all remaining pixel colors are iterated to find a closer color value
          for (let i = 0; i < sourceColors.length; i++) {
            const c = sourceColors[i];
            let diff =
              Math.abs(r - red(c)) +
              Math.abs(g - green(c)) +
              Math.abs(b - blue(c)) +
              Math.abs(a - alpha(c));
              
            if (diff < closestCumulativeDiff) {
              closestCumulativeDiff = diff;
              closestColor = c;
            }

            // the replicationThreshold determines how similar the pixels must be in order to be matched
            // 0 means the pixels must be identical
            if (closestCumulativeDiff <= replicationThreshold) {
              return closestColor;
            }
          }
          return closestColor;
        }