wiwichips / imgprobox

🎨 Image Processing Toolbox in the browser using Rust + WASM + React https://wiwichips.github.io/imgprobox/

Check out my Resume	Other places you can find me
GitHub stats	Last song I played

imgprobox's Issues

FFT

Implement Fast Fourier Transformations for convolutions

WebWorkers

Perhaps through use of wasm_bindgen_rayon?

Features that need to be completed

Backend work

• Noise maker
• Filtering
• Histogram Equalization
• Detect if kernel is separable, and separate it
• Implement rotations
• Implement cropping

Frontend Glue

• Selecting a padding type
• Selecting mirror types
• Selecting a type of interpolation
• Filtering options
• Remove button from convolutions
• Implement cropping frontend
• Convert to Grayscale
• Sepia

Bonus Features

• Display colour co-occurance matrix
• Allow for Fractals to be passed in
• Make filtering way faster

Bugs

• Identity Kernel is not displaying properly 😭 ALSO on 1x2 kernel... so guessing its from the separable kernels.... add a check to see if row and or col is length 1 and if so dont recurse...
• Fix linear mapping to have a cutoff
• Fix only integers being passed as linear things?
• Fix thresholding
• Fix bricks not being deployed to website
• Fix noise being behind... in updates.. need to press twice...

Website redesign

The website doesn't look perfect, I'd like it to scale better and look better formatted.

It has the basic structure I want, but it acts a little janky. I don't like how you have to click "set kernel" in the convolutions tab of the progra.

Co-occurancy Matrix

Generate a co-adjacency matrix for an image and then turn it into an image that can be viewed

Here is an example python program I wrote to do this

#!/usr/bin/env python3
from PIL import Image
import numpy as np

# Load image
img = Image.open("mb.png")

# Convert image to numpy array
img_arr = np.array(img)

# Initialize co-occurrence matrices for each color channel
red_co = np.zeros((256, 256))
green_co = np.zeros((256, 256))
blue_co = np.zeros((256, 256))

# Loop through each pixel in the image
for i in range(img_arr.shape[0]-1):
    for j in range(img_arr.shape[1]-1):
        # Update co-occurrence matrix for red channel
        red_co[img_arr[i,j,0], img_arr[i+1,j,0]] += 1
        # Update co-occurrence matrix for green channel
        green_co[img_arr[i,j,1], img_arr[i+1,j,1]] += 1
        # Update co-occurrence matrix for blue channel
        blue_co[img_arr[i,j,2], img_arr[i+1,j,2]] += 1

# Print co-occurrence matrices
print("Red channel co-occurrence matrix:")
print(red_co)
print("Green channel co-occurrence matrix:")
print(green_co)
print("Blue channel co-occurrence matrix:")
print(blue_co)

# Convert co-occurrence matrices to 8-bit unsigned integer format
red_co = red_co.astype(np.uint8)
green_co = green_co.astype(np.uint8)
blue_co = blue_co.astype(np.uint8)

# Combine co-occurrence matrices into a single RGB image
co_image = np.dstack((red_co, green_co, blue_co))

# Create PIL image from numpy array
co_pil = Image.fromarray(co_image)

# Resize image to 256x256
co_pil = co_pil.resize((256, 256))

# Display image
co_pil.show()

Speedup filtering

Filtering is very slow but there are a number of ways to speed it up

One way would be to only compare diffs of filters when traversing pixels in an image...

---

Also, just more generally I don't like my implementation of filters and think it would be redesigned

Fractals

Add mandlebrot and other fractals to the program and allow people to perform image processing on the images

here is a python example mandlebrot

#!/usr/bin/env python3
from PIL import Image

# Define the size of the image
WIDTH = 640
HEIGHT = 480

# Define the range of the complex plane to plot
RE_START = -2
RE_END = 1
IM_START = -1
IM_END = 1

# Create a new image with the given size
img = Image.new('RGB', (WIDTH, HEIGHT), color='black')

# Loop through each pixel in the image
for x in range(WIDTH):
    for y in range(HEIGHT):
        # Convert pixel coordinate to complex number
        c = complex(RE_START + (x / WIDTH) * (RE_END - RE_START),
                    IM_START + (y / HEIGHT) * (IM_END - IM_START))
        z = 0
        # Iterate until the absolute value of z is greater than 2 or the maximum number of iterations is reached
        for i in range(100):
            if abs(z) > 2:
                break
            z = z**2 + c
        # Set the color of the pixel based on the number of iterations
        color = (i % 8 * 32, i % 16 * 16, i % 32 * 8)
        img.putpixel((x, y), color)

# Save the image
img.save('mandelbrot.png')

DCP

Add DCP functionality (perhaps for video processing or some other type of image processing that is very intensive and can be distributed on DCP nicely)

See https://www.dcp.dev/ for more info on DCP