How to fill to partially fill a shape?

[sacrophyte]

I am working on a progress bar, and the example I have seen so far takes several steps:
for both the background and the foreground ellipse
draw a beginning ellipse
draw an ending ellipse
draw a rectangle between the two

Instead, can I draw on ellipse with a background color, and then fill it up partially to indicate progress? The problem with the above example is that it does not represent the 0% - 1% progress very well, making it all look like one big dot. I want the small numbers to be accurately represented.

[sacrophyte]

I still would like to find a better way to do this (partially fill a shape), but here is what I came up with:

def drawProgressBar(progress, bg="black", fg="red"):
    x=10
    y=10
    h=25
    w=200
    s=x # starting x coord
    e=w # ending x coord
    box_X=w+50
    box_Y=h+25

    if progress < 0.01:
        progress = 0

    if progress > 1:
        progress = 1

    # create the canvas
    out = Image.new("RGB", (box_X, box_Y), (66,66,66))
    d = ImageDraw.Draw(out)
    w *= progress

    ## if progress < .5 (half)
    #   put the "progress" in the background with 2 objects (begin ellipse and rectangle)
    #   put the "unfinished" part in the foreground with 3 objects (begin ellipse, rectangle, end ellipse)
    #     make the unfinished begin ellipse get flatter and flatter as it approaches 50%
    ## if progress >= .5 (half)
    #   put the "progress" in the foreground with 3 objects (begin ellipse, rectangle, end ellipse)
    #   put the "unfinished" part in the background with 2 objects (rectangle, end ellipse)
    #     make the progress end ellipse start flat and get rounder as it approaches 100%

    if progress < 0.5:
        # draw progress bar
        d.ellipse((x, y, x+h, y+h),fill=fg)
        d.rectangle((x+(h/2), y, x+w+(h/2), y+h),fill=fg)
        # d.ellipse((x+w, y, x+h+w, y+h),fill=fg)

        # draw background (unfinished portion)
        d.ellipse((x+w, y, x+w+(h*(1-(2*progress))), y+h), fill=bg)
        d.rectangle((x+w+(h/2)-(h*progress), y, e+(h/2), y+h), fill=bg)
        d.ellipse((e, y, e+h, y+h), fill=bg)

    if progress >= 0.5:
        # draw background (unfinished portion)
        # d.ellipse((x, y, x+h, y+h), fill=bg)
        d.rectangle((x+w, y, e+(h/2), y+h), fill=bg)
        d.ellipse((e, y, e+h, y+h), fill=bg)

        # draw progress bar
        d.ellipse((x, y, x+h, y+h),fill=fg)
        d.rectangle((x+(h/2), y, x+w+(h*(progress-0.5)), y+h),fill=fg)
        d.ellipse((x+w, y, x+w+h*2*(progress-0.5), y+h),fill=fg)

    # draw the progress bar to given location, width, progress and color
    out.save("output.png")

And this is what it looks like in discord (using a bot):

[radarhere]

If you were looking for a way to simplify your code, the rounded_rectangle() method would be helpful. That would allow you to draw your starting ellipse, middle rectangle and ending ellipse in one line. #4765 (comment) shows an example of a progress bar using that method.

If you wanted to just stop drawing a shape at a certain x position, I would talk about masking, but you would like to have the red portion also rounded.

I'm not sure what you precisely mean by "accurately represented". Are you after a way to not just fill 0.5% of the width, but instead to also consider every pixel? So that you can fill exactly 0.5% of the ellipse's pixels with red? While also having that red ellipse wax and wane as it moves along?

[sacrophyte]

I did look at rounded_rectangle, and you are right, it would replace the three objects I use now - but it still has the same issue of not representing very low numbers when used as a progress bar. Your comment about masking is very close to what I was thinking - I will have to read more about it and try it out. Ideally, I would like to apply one image (the foreground, which I would make a straight up rectangle) only where the foreground overlaps the background (which could be any shape) - I have never done much with image manipulation directly, but I would think that is a relatively easy operation. And maybe masking does exactly that.

With regard to the waxing and waning effect, I don't necessarily need that - I only used that to properly squeeze in the numbers at the edge of the ranges. And when it was done, I was pleased with it enough to keep it for now. :) It makes for a good animation as well. But a weird quirk I don't see in other progress bars, so I probably will not keep it for long.

[radarhere]

Oh ok. See what you think of this use of masking then. It generates a solid rectangle, a gradient from red to yellow, and then pastes only the parts that overlap the progress ellipse, stopping at the x position indicated by percent.

from PIL import Image, ImageDraw

# Solid background color
outerW, outerH = 300, 100
im = Image.new("RGB", (outerW, outerH), (0, 255, 255))

# For the "foreground image", I'll create a coloured gradient
w, h = 256, 50
gradient = Image.linear_gradient("L").crop((0, 0, h, w)).rotate(90, expand=True)
empty = Image.new("L", gradient.size)
solid = Image.new("L", gradient.size, 255)
foreground = Image.merge("RGB", (solid, gradient, empty))

x, y = (outerW - w) // 2, (outerH - h) // 2

# The progress bar
progress = Image.new("RGBA", (w, h))
draw = ImageDraw.Draw(progress, "RGBA")
draw.rounded_rectangle((0, 0, w, h), 30, fill="#000")

im.paste(progress, (x, y), progress)

percent = 0.5
progress_ims = [foreground, progress]
for i, progress_im in enumerate(progress_ims):
	progress_ims[i] = progress_im.crop((0, 0, int(w * percent), h))
im.paste(progress_ims[0], (x, y), progress_ims[1])

im.show()

It generates the following images for 0.01, 0.05, 0.5 and 1.

[sacrophyte]

Yes! Love it! Thanks. So how do I mark your last comment as the answer? :)

[radarhere]

Cool.

I don't think you can, I think you just mark my first comment as the answer.

[sacrophyte]

Thanks much!