Image editing in love2d

[Relazy]

We can draw rectangles 1x1 therefore we can create images just like an image editor, so.. What if we make a new canvas (our image) then we can simply draw the rectangles on it. But the problem is rather obvious.. Such a method will put a huge strain on love as at least 800x600 image objects will have have to be drawn each frame. So instead of doing that I have thought about using the canvas and actually saving the image objects into it meaning that for example when you draw and then release the mouse button(finish drawing for a second) the data is saved onto the canvas, therefore reducing the image objects being draw.

Is there a more efficient way of implementing such drawing capabilities in the game? Do I need to use texture stuff for this? Like mesh or whatever <-- As you can see I don't know much about that and it's over-all a mystery to me so please do enlighten me if it's necessary.

Another problem with this is:
So for example if I have a canvas with a black image on it can I then draw a shape and set it to transparent therefore "deleting" the other pixels behind it. Essentially masking. If so how could I implement it?

So to summarize my question is:
What is the most efficient method of replicating the functions of an image editor in love2d?

Note: When I say image objects I mean anything from polygons to actual images from file system.

[s-ol]

I don't really understand what you mean by image objects.
The problem you describe would appear when you store all your drawn things in a large table, something like this:

Code: Select all

for I,v in ipairs(brushstrokes) do
  love.graphics.line(v.x,v.y,v.dx,v.day)
end

But as soon as you draw something to a canvas that's that - it's now on the canvas and done. There is no "saving to canvas" there is only drawing to a canvas. Therefore everything you need to do is draw everything to the canvas as soon as it is "fixed" (the user has commited to drawing it) and be sure to never clear it.

[Relazy]

I don't really understand what you mean by image objects.

Anything from an image to a polygon this includes png images and generated polygons.

The problem you describe would appear when you store all your drawn things in a large table, something like this:

Code: Select all

for I,v in ipairs(brushstrokes) do
  love.graphics.line(v.x,v.y,v.dx,v.day)
end

But as soon as you draw something to a canvas that's that - it's now on the canvas and done. There is no "saving to canvas" there is only drawing to a canvas. Therefore everything you need to do is draw everything to the canvas as soon as it is "fixed" (the user has commited to drawing it) and be sure to never clear it.

What I mean by saving to canvas is to merge two canvas together so for example one canvas would be the original image and another will be current active editing layer (when mouse "l" is down the canvas is created and once it is released the two canvases are merged)

Actually I realized that I answered my own question in regards of masking as with this method it is possible to create a shape of {0,0,0,0} color meaning that it will be transparent and the transparency will be saved onto the canvas.

My problem however is with how love.graphics.rectangles are processed, because what I plan to do is to allow the user to draw a rectangle on mouse click such as "l" which is bound to create a temporary canvas and on that canvas the rectangles will be drawn (1px in size). So for a single canvas it will have 800 x 600 = 480 000 rectangles to process per frame, which is rather expensive or am I wrong?

Another issue with this method is how to undo actions? As with every action it will require me to save the old canvas before the new one is applied and therefore it will force a limit to the size of the undo stack. Due to these issues I am seeking another method which is more efficient and allows for easy undo/redo actions.

[s-ol]

I don't really understand what you mean by image objects.

Anything from an image to a polygon this includes png images and generated polygons.

The problem you describe would appear when you store all your drawn things in a large table, something like this:

Code: Select all

for I,v in ipairs(brushstrokes) do
  love.graphics.line(v.x,v.y,v.dx,v.day)
end

But as soon as you draw something to a canvas that's that - it's now on the canvas and done. There is no "saving to canvas" there is only drawing to a canvas. Therefore everything you need to do is draw everything to the canvas as soon as it is "fixed" (the user has commited to drawing it) and be sure to never clear it.

What I mean by saving to canvas is to merge two canvas together so for example one canvas would be the original image and another will be current active editing layer (when mouse "l" is down the canvas is created and once it is released the two canvases are merged)

Actually I realized that I answered my own question in regards of masking as with this method it is possible to create a shape of {0,0,0,0} color meaning that it will be transparent and the transparency will be saved onto the canvas.

My problem however is with how love.graphics.rectangles are processed, because what I plan to do is to allow the user to draw a rectangle on mouse click such as "l" which is bound to create a temporary canvas and on that canvas the rectangles will be drawn (1px in size). So for a single canvas it will have 800 x 600 = 480 000 rectangles to process per frame, which is rather expensive or am I wrong?

Another issue with this method is how to undo actions? As with every action it will require me to save the old canvas before the new one is applied and therefore it will force a limit to the size of the undo stack. Due to these issues I am seeking another method which is more efficient and allows for easy undo/redo actions.

There is no way to do undo/redo without saving the changes, and there cannot be one.

You don't need 800x600 rectangles, it's enough when you only draw the ones you changed (so the rectangle the mouse is at at the moment).

Leaving undo/redo out of this atm, you can draw directly to the canvas in love.draw and be done - no saving of love.graphics.rectangles.

480k rectangles is kind of expensive, but much more importantly it makes no sense at all, if you are going to store single pixels use a canvas.

You don't need a "temporary" canvas when you only draw your list of current changes (a list of rectangles) to it, you can skip ahead and draw the list of changes to the screen directly.

[whitebear]

Something I did while back when I first got my hands on android device. I did some quick control changes for it so you can use rudimentary controls on pc.

Press Enter to choose colour (my code was not designed for pc so it looks bit odd )

Draw_Android.love

(2.63 KiB) Downloaded 125 times

Maybe it will help you with ideas how to do yours.