CanvasDraw - A powerful pixel-based graphics engine (Draw pixels, lines, triangles, read/modify image data, and much more!)

Resources Community Resources
, , , ,
#102

Patch and performance boost - v3.1.1

This update is pretty small. Mostly consists of small bug fixes. All though I have optimised the pixel rendering, which should now heavily improve performance for canvases that work under a colour pallete

#103

When I used the function DrawImage from the Canvas, the image wasn’t how it supposed to be, it was fully black, and a white thin line at the bottom.

Server:

local function GetImageData()
	local Image = PNG.new(my PNG image binary)
	local ImageColorsTable = {}
	local ImageAlphasTable = {}
	for x = 1, Image.Width do
		for y = 1, Image.Height do
			local PixelInfo = {Image:GetPixel(x, y)}
			table.insert(ImageColorsTable, PixelInfo[1])
			table.insert(ImageAlphasTable, 255)
		end
	end
	return {
		ImageColours = ImageColorsTable,
		ImageAlphas = ImageAlphasTable,
		ImageResolution = Vector2.new(130, 120)
	}
end
Remote:FireAllClients(GetImageData())

Client:

canvas:DrawImage(data, Vector2.new(0, 0), Vector2.new(130, 120), false)

data is what the function GetImageData returned.

#104

Try drawing the image at (1, 1), as that is the most top left pixel on the canvas, and the PNG module too

#105

I don’t personally have a use case for this but this is one of the coolest things I’ve seen made in Roblox. Wonder if you could make it even faster using parallel? Parallel is still quite limited but I still wonder if you could still make it work within those limits :thinking:

Edit: actually I just realized it would probably be up to whoever is programming the engine nvm

Great work nonetheless!!

1 Like
#106

It didn’t work:
image
It’s just fully black.

#107

Oh I know what you did. You’ve mistaken the Scale parameter as a resolution parameter. That parameter is percentage based. (1, 1) being 100% and (0.5, 0.5) being 50%, etc

image
image863×212 35 KB

If you set it to (1, 1), or leave the parameter empty, you should be fine

Might update the API to mention that it is percentage based.

#108

The image glitched.
image

#109

hmm. odd. I’m not too sure what is going on here to be honest, could you maybe give me a sample place file with the code? I might be able to debug the issue from there as i’m pretty sure this issue isn’t related to CanvasDraw

#110

I was able to fix this issue by editing the module.

1 Like
#111

Absolutely great module. I have one question though. The custom 3D rendering is very cool, and is amazing that you were able to create it within Roblox, but say I wanted to just apply a pixelated filter/post-proccessing to an already made game, using Roblox’s 3d instances, physics, etc. Is the module capable of doing this, and if it is, how should I go about doing it? Frankly Im not that great with the complex math that goes into stuff like this. I could never create a 3D renderer from scratch on my own, so Id really appreciate some guidance. :+1:

1 Like
#112

Well you have two options to create a custom pixelate effect here.

The first and probably easiest one to do is to make a real-time raytracer that casts a ray for every pixel on your screen, which isn’t the most performant.

The second option is to make a basic 3D engine with rotation, movement and scale matrices (Or just use CFrame) with triangle clipping for best performance.

The first option is easy, but laggy.
The second option is difficult, but much more performant if optimized and built correctly.

I’m not sure if theres much else you can do to achieve a pixelate affect.

1 Like
#113


Just wanted to share something I did a little while back using this module. :slight_smile: I wanted to make something similar to Animal Crossing’s clothing system; allowing player’s to draw something and export an image file. This is the closes thing I could get working! I converted a text file into a ppm file which can be opened up in a photoshop program.

5 Likes
#114

oo, neato! Glad to see you’ve found a nice use with this! Hope you find more. There’s heaps of powerful features in this module that not much people are even aware of.

you could even go as far as making an ms paint-style program with higher resolutions and different brushes too

1 Like
#115

I found a glitch where the module doesn’t want to make more pixels:
image
Image is 256x256

#116

thats not related to this module. that is a roblox bug. Roblox cant render too many frames. Thats why the resolution is limited to 256x256. So avoid high colour pallets to avoid creating more frames at high resolutions.

You can also apply colour compression to your image as well. That should fix your problem easily

1 Like
#117

I already set it to 192x192 instead.

1 Like
#118

How do I do that through Canvas:DrawImage()?

1 Like
#119

Well, by colour compression, i mean colour reducer. But all it does is allow the canvas’s frame compression to work and reduce frame count for the pixels which will solve your invisible pixels issue.

ImageData contains the raw Color3 values. So all we have to do is update that pixel colour array in the ImageData, then we can call DrawImage()

local ImageData = CanvasDraw.GetImageDataFromSaveObject(script.NewNoob) -- Our Image

local Canvas = CanvasDraw.new(Frame, ImageData.ImageResolution)

-- Main

local CompressionAmount = 4 -- From 0 to 256 (The lower, more colours, the higher, less colours)

local NewColours = {}

for i, OldColour in pairs(ImageData.ImageColours) do -- Loop through the raw image Color3 values
	
	-- Compress the RGB channels
	local CompressedR = math.floor((OldColour.R * 255) / CompressionAmount) * CompressionAmount
	local CompressedG = math.floor((OldColour.G * 255) / CompressionAmount) * CompressionAmount
	local CompressedB = math.floor((OldColour.B * 255) / CompressionAmount) * CompressionAmount
	
	CompressedColour = Color3.fromRGB(CompressedR, CompressedG, CompressedB)
	NewColours[i] = CompressedColour
end

ImageData.ImageColours = NewColours

Canvas:DrawImageXY(ImageData, 1, 1)
2 Likes
#120

Maybe, it’s stupid question, but why you can’t use Text █ with RichText function?

Like this:

image
image1092×441 110 KB

Text can hold a lot of pixels just in 1 frame.

#121

I’ve asked @boatbomber about this around last year, and it is because you are dealing with strings. And if you want to make any changes to the text related to color values, you would have to do it through string concatenation, which is really slow.

It’s the same reason why importing images with the Image Importer plugin is slow too. It has to deal with string concatenation and converting color values into a string.

Especially when dealing with thousands of pixels, it would just be way to slow.

1 Like