nickvdw/image-to-voronoi

Convert an image into a nice-looking Voronoi diagram using one of many available techniques with options for customization.

image-to-voronoi's Issues

Create and improve UI elements

• Menu on the left with parameter configuration
• Image on the right with a possibility to look at previous image
• Additional pages in the navbar (e.g., 'about', 'help', etc)

Double check that naive k-NN works correctly

Improve centroid generation

We can take a look at using contrasts to generate centroids instead of greyscaling. Contrasting may highlight some important borders that could be used to generate centroids to make better Voronoi diagrams.

You could also allow the user to select the region they want to be converted to Voronoi. This user selection could prevent that less important areas in an image are going to be full of centroids and to eventually 'steal the show'.

Shape/Face recognition techniques could also be used. This requires some form of ML.

Create different methods of image manipulation

A link that could be useful for this issue:
https://github.com/MauriceGit/Voronoi_Image_Manipulation

Fit result to parent div

• The result needs to fit in the parent div.
• Clicking the full screen button should still result in showing the WHOLE result rather than the fitted result.
• Saving the result should result in saving the WHOLE result rather than the fitted result.

Fix progress bar that freezes when constructing result

Add interactivity to the Voronoi diagram

• Adding new centroids
• Moving centroids
• Removing centroids

Resizing image

We can use

https://github.com/LinusU/resize-image-data

and add the following code in imageHandler.js

image.addEventListener("load", () => {
        const aspectRatio = image.width / image.height;
        canvas.width = image.width;
        canvas.height = image.height;
        context.drawImage(image, 0, 0);
        const imageData = context.getImageData(0, 0, image.width, image.height);

        const newWidth = image.width / 10;
        const newHeight = newWidth / aspectRatio;
        const result = resizeImageData(
          imageData,
          newWidth,
          newHeight,
          "nearest-neighbor"
        );
        console.log(result);
        resolve(result);
      });

Advantages:

• Faster rendering
• Less laggy

Disadvantages:

• Both bilinear-interpolation and nearest neighbours kind of "ruin" the structure that was present, which leads to worse results