Canvas FX - Image Filters in Roblox


Here is a 70x140 canvas experimiment. This is just to showcase effects that I’ve implemented, buttons and other ui will be enhanced further on.

The recordings below are slow, the real function runs much faster

Box Blur

Perlin noise

Perlin noises for red, green and blue with a unique seed

Bucket

Not really an effect but makes a good showcase

Posturizing

is customable, but for this usage each color3 value is rounded to nearest 5

Image Sharpening


image

How this works

For box blur and pasteurizing, kernel convolution is used. Here are some sources that i’ve used to create my algorithm:

Kernel (image processing) - Wikipedia.

What’s effect do you prefer?
  • Box Bluring
  • Perlin Noise
  • Paint Bucket
  • Sharpening
  • Pasturization

0 voters

Do you have ideas for more effects (reply)
  • yes
  • suggestion on existing effect
  • no

0 voters

10 Likes

For anyone who’s wondering what game I’m working on that has this canvas system, it would be a game similar to Starving Artists but instead of images people could buy/sell GIFs (basically a video without audio)

Added a new visual interface for the kernel, now instead of writing a unique script for each effect i can just run the properties into the RunKernel function

image
UI interface for custom krnl

Hold on, can ”block blurring” work on a normal image (like any decal) or do they, for example have to be an “image” comprised of pixels (GuiObjects) like in most Roblox drawing games?

Because if so that’s really neat.

Unfortuently i havent supported decal import yet, but I’ll try use 3rd party services to get rgb pixel data of the decal and display it on the screen.

I know there’s a way to achieve that via Python, but still pretty cool creation nonetheless.

A test of my system will be available from next monday/wednesday for 1 week

Woah, 11 months ago, this topic aged qutie a bit.

I’ll soon make a module using the BETTER COLOR3 to replicate what the current thing can do.

This is planned to include:

Custom kernel functions Alongside templates like blurs, custom kernel functions can be made.

Multi-layers The top layer would overlay the bottom layers along as the pixel isn’t transparent.

Compression I might use the JPEG algorithmn and maybe a bit of BITPACKING to compress the images down and decompress them