Image processing has always fascinated me. Especially when it's used in Neural Networks.
After coding a very basic module in NodeJS to manipulate images, I decided to try and implement this in Lua so it could be used on Roblox.
Showcase
An example of a GIF converted to images playing in Roblox.
local Image = require(script.Image)
local brightnessArray = {}
math.randomseed(tick())
for i = 1, 100 do
for j = 1, 100 do
table.insert(brightnessArray, math.max(0, (math.noise(i/100, j/100) + 0.5) * 255))
end
end
local img = Image.fromMonochrome(100, 100, brightnessArray)
for i = 1, img.height do
for j = 1, img.width do
local index = (i - 1) * img.width + j
local pixel = img.pixels[index]
local p = Instance.new("Part")
p.Anchored = true
p.Size = Vector3.new(1, 1, 1)
p.CFrame = CFrame.new(i, 10, j)
p.Color = Color3.fromRGB(pixel, pixel, pixel)
p.Material = Enum.Material.SmoothPlastic
p.Parent = workspace
end
wait()
end
--[[
These functions can be used to manipulate the image:
- applyKernel(kernel: table)
- cannyEdges()
- composite(im: Image, x: number, y: number, alpha: number)
- edges()
- flipX() and flipY()
- gaussianBlur()
- getPixel(x: number, y: number)
- grayscale()
- horizontalLines()
- invert()
- rotate90() and rotate180()
- setAlpha(a: number)
- setPixel(x: number, y: number, color: table)
- sharpen() and unsharpen()
- verticalLines()
]]--
I hope you can find great use to this, let me know what functions you would like me to add.
I would love to see what you have made using this module, reply below!
No not really, you can play videos when you update the frame with multiple (stored) pixel arrays, but that’s just one of the possibilities where you could use this for.
I mainly made it for this purpose:
Because I was just wondering if it was possible to be made in Roblox.
You can use this module to render raycasting, visualize perlin noise and more.
I am not allowed to show you how to load an image from any url.
But I can give you an example of how to play videos using multiple pixel arrays.
local Image = require(script.Image)
local remote = game:GetService("ReplicatedStorage").GetImage
local background = script.Parent:WaitForChild("ScreenGui"):WaitForChild("Background")
local images = {}
local imageData = table.create(120, {
width = 20,
height = 20,
pixels = table.create(400, {50, 50, 50})
})
for i = 1, #imageData do
local data = imageData[i]
local newImage = Image.new(data.width, data.height, data.pixels, 3)
newImage:setAlpha(0)
newImage:setCanvas(background)
newImage:setPixel(math.floor(math.random() * data.width + 1), math.floor(math.random() * data.height + 1), {255, 100, 255})
table.insert(images, newImage)
wait()
end
local copy = images[1]:copy()
copy:setCanvas(background)
copy:create()
while true do
for i = 1, #images do
copy.pixels = images[i].pixels -- Fastest method to composite images with the same dimensions.
--copy:composite(images[i], 0, 0, 0) -- When you are working with different sized images, you can use this instead of directly setting the pixels.
copy:update() -- Updates the frames with the corresponding pixels.
wait() -- Delay between frames
end
end
You could also use this loop for more frames per second, you won’t have any control of the speed though.
local i = 1
local frameCount = #images
game:GetService("RunService").RenderStepped:Connect(function()
copy.pixels = images[i].pixels
copy:update()
i = i % frameCount + 1
end)
EDIT:
Removed the frame functionality, so the code above doesn’t work anymore.
This was removed so the code could be used in other things besides just frames.
Yea, bypassing Roblox’s image moderation breaks TOS.
It’d be bad if skids went around uploading NSFW pictures to a game who’s demographic includes underaged children.
