Imageprocessor: Brushes

[JimBobSquarePants]

This issue wraps several brush types.

I think we should implement at least:

• [ ] Path brush
• [ ] Pattern brush (Not essential but nice to have)
• [ ] Elliptical brush (Not essential but nice to have)
• [ ] Gradient brush (Not essential but nice to have)

I'm envisioning something like :

PathBrush brush = new PathBrush
{
    Color = Color.Black,
    Thickness = 10, // the thickness to draw a line
    Path = vectors // A list of vectors to follow
}

Image.Draw(brush)

The method would draw a Bezier curve following the given path, color, and thickness.

[dampee]

If I get through my color space, I'll see what I can do for January. Any startingpoints, hints, ... ?

[JimBobSquarePants]

That'd be great if you could!

Honestly.... Not got much of a clue. I think the source for Cairo might be a place to start looking around as I think a few libraries wrap around it. I'm trying to get my head around this just now.

https://github.com/mono/sysdrawing-coregraphics/blob/master/System.Drawing.Drawing2D/PathGradientBrush.cs

[mweber26]

I don't understand this issue. What are the brushes for? There doesn't appear to be any drawing code to use them.

[JimBobSquarePants]

I've expanded on the issue. We'd obviously have to create bezier classes, a draw method, etc

I found a good primer on Beziers here. http://pomax.github.io/bezierinfo/

[sbarisic]

Is there any progress on this? I have quite a good idea how to implement these. Might give it a go.

[JimBobSquarePants]

@cartman300 None whatsoever.

I'm not the greatest mathemagician in the world so I struggle with this kind of stuff so If you know how to do it please give it a go. I would really appreciate it!

I'm essentially looking at first implementing path drawing. I think we should be able to break bezier and quadratic curves into neat methods and take advantage of the new vector types for things like Vector.Dot etc. Being able to set line thickness would very useful also.

Cheers!

[sbarisic]

I've implemented this in my fork

[JimBobSquarePants]

@cartman300 This is incredible! I'm super happy to see this come together. :smile:

The syntax is great also; really clean and pretty much exactly what I wanted. I had a quick look through the source code and I can see that you're still working on thickness. What's the status of antialiasing?

Buzzing with this demo. I appreciate it so much!

[sbarisic]

Eh, i forgot antialiasing was a thing. I should definitely implement it. Maybe even some kind of serial image processor, because stuff like this can't be parallelized easily (in fact, it makes it slower). I also have to fix the bézier paths because they don't stack easily, got no idea why yet.

[JimBobSquarePants]

Excellent. Thanks!

You can actually turn off the parallel nature of the processors by overriding the Parallelism property, setting it to 1. I do that here in Resizer

[JimBobSquarePants]

Hey @cartman300, Just found this excellent document on line drawing where at the end they deal with line thickness and antialiasing. We can certainly simplify the code sample by applying some of the Vector methods. I'm hoping it would be as useful to you as it looks.

Bresenham.pdf

[sbarisic]

Yes that's useful, but in the following weeks i'm not really sure if i'm gonna have any time to do any programming. But i'm certainly gonna have time after June ends.

Didn't forget about this.

[JimBobSquarePants]

@cartman300 No worries :smile: . I've got a busy time ahead of me also with travel and other projects.

[JimBobSquarePants]

Hey @cartman300 Just a quick checkin. Do you reckon you would get any time soon to have a further look at this?

[sbarisic]

OH yes thanks for reminding me :V I'm gonna take a look tomorrow

[JimBobSquarePants]

@cartman300 Sweet! That's great news!

[sbarisic]

Okay i reforked the repo and restarted the work. Had kind of a hard time figuring out where to put the brush stuffs (might need refactoring later).

Antialiasing should be a separate filter so you can choose different methods and also because i have no idea how to fill polygons with edge antialiasing with reasonable performance.

[JimBobSquarePants]

Yeah, we can always move it around. I'm deliberately keeping a very flat namespace for the library so feature discovery is easy.

Once we can get a working version we can work on improving performance so don't worry about that at this stage. I still have a lot of optimisation work to o on the project.

Just to note, whatever solution you do plese make sure you are using the generic Image<T,TP> terminology throughout so that the methods can be reused for different pixel formats. I f you get stuck at all or spot anything daft I have done please let me know.

[sbarisic]

How would i go on about directly manipulating pixels in an Image? When i lock it, i get a generic type T for the pixels and i have no idea what to do with it.

[JimBobSquarePants]

Good question. The IPackedVector<TP> interface allows for conversion to and from Vector4 where the X, Y, Z, & W components represent each RGBA component in applicable packed vector implementations.

Here's an example of me using those methds to change the alpha component of each pixel.

https://github.com/JimBobSquarePants/ImageProcessor/blob/93be57e7c664506115d8dcb098fd6f404f201332/src/ImageProcessorCore/Filters/Processors/AlphaProcessor.cs#L61

[JimBobSquarePants]

I'm moving this to v1.1 as it's far too big a scope of functionality to include just now. Hopefully we can all club together and get a really great API working for this.

[JimBobSquarePants]

Hey @cartman300 what happened to the source code from when you wrote the demo? I was going to see if I could continue your work but various methods seem to be missing.

[sbarisic]

The source code was very ugly and i deleted the old repository so i can re-clone the project again and reimplement it again. Got unexpectedly very busy lately so i can't guarantee anything, can give general guidelines tho.

Currently what's on top of my mind:
The easiest way would be to write a "software renderer" of some kind to render polygons to an image, that part can be later reused.

After that you can use math to generate points on a path with variable resolution, you can change different path types by just changing the formula (just going along the line and spitting out points)

To give thickness to the lines, you can inflate by generating concentric circles with a variable radius (relative to each point along the line) and use math to generate convex polygons for each path segment and draw them in-order

[sbarisic]

This part might come in handy, isn't the most efficient but should get you started
https://github.com/cartman300/Libraria/blob/master/LibrariaShared/Maths.cs#L39

[JimBobSquarePants]

More useful links

http://build-failed.blogspot.com.au/2016/08/creating-simple-tileserver-with-net.html
http://devmag.org.za/2011/04/05/bzier-curves-a-tutorial/
http://pomax.github.io/bezierinfo/

[eByte23]

I'll have a play around over the weekend and see how I go. Can't promise anything but I'll take a look.

[JimBobSquarePants]

This issue was moved to https://github.com/JimBobSquarePants/ImageSharp/issues/5