Image Filtering and Image.MidHandle

Monkey Forums/Monkey Programming/Image Filtering and Image.MidHandle

rIKmAN(Posted 2013) [#1]
I have been doing some tests regarding image filtering after getting blurry and distorted images, and wondered if anyone could shed any light.

[EDIT]
Screenshots taken from GLFW target, as HTML5 doesn't work (well) with the image filtering stuff.

#MOJO_IMAGE_FILTERING_ENABLED = True

' Image 1
img1 = LoadImage("image.png",1,Image.MidHandle)

' Image 2
img2 = LoadImage("image.png)
img2.SetHandle(img2.Width() / 2, img2.Height() / 2


Gives this...



and this...

#MOJO_IMAGE_FILTERING_ENABLED = False

' Image 1
img1 = LoadImage("image.png",1,Image.MidHandle)

' Image 2
img2 = LoadImage("image.png)
img2.SetHandle(img2.Width() / 2, img2.Height() / 2


gives this....



It seems like Image.MidHandle is broken, or doing something that makes the image blurry or distorted depending on the #MOJO_IMAGE_FILTERING_ENABLED flag.

Any ideas?


GfK(Posted 2013) [#2]
Could it be that one image is being drawn at float coords, and the other at integer coords?


rIKmAN(Posted 2013) [#3]
Not unless it's being sneaky behind my back?
DrawImage img1, 300, 400	' img1 loaded with Image.MidHandle flag
DrawImage img2, 540, 400	' img2.SetHandle()
I actually thought it was a problem with the Spine module, but after testing with normal images and removing Spine from the equation found the problem to be with the Image.MidHandle flag.


muddy_shoes(Posted 2013) [#4]
What's the size of the image? SetHandle takes floats, and your mid calculations are doing an int division. Internally, if you set the handle using the MidHandle flag, mojo uses a float divide to calculate the offset. The blurring is presumably because the offset isn't working out to an integer pixel position.


benmc(Posted 2013) [#5]
What muddy_shoes said, basically, is the image size an odd number? Like 303x303? If so, make it 304x304 (for example) and you will probably see this issue go away. I had this same problem when I first started with Monkey and was using GrabImage to get images that weren't perfectly divisible by 2.


Xaron(Posted 2013) [#6]
But having an odd number would mean that it would perfectly fit using MidHandle! So an image with a size of 4x4 pixel does NOT have a correct middle, where an image of 3x3 pixel clearly has?!


rIKmAN(Posted 2013) [#7]
OK, the image in question is 243x223.

I've just padded and extra pixel on x/y to make it 244x224 and muddy and ben are right, it now draw perfectly with the image filtering off.
Thanks both for the fix! :)

Does this mean I have to go through every single odd sized image and pack an extra pixel in, or is there something I can do code-wise?

I have hundreds of images, not looking forward to adding a pixel to every odd sized one! :(


muddy_shoes(Posted 2013) [#8]
You can pad or you can use your integer SetHandle calc or you can allow for the half pixel when positioning. You could alter mojo to force integer positioning, I guess. Which suits you will depend on how you use the graphics.


rIKmAN(Posted 2013) [#9]
I am playing with that now muddy, but I've noticed that even when setting a variable as a Float, unless you divide by a float number (2.0 instead of 2) then the answer comes back as an Int regardless of if the result will have .5 at the end or not.
' This will equal 121
xf:Float = 243 / 2

' This will equal 121.5
xy:Float = 243.0 / 2.0
But the image distortion still happens even if I Int() the Width()/Height() calls, or even if I explicitly set the SetHandle using Ints (SetHandle 121,111).

Just doing some more testing...


muddy_shoes(Posted 2013) [#10]
>But the image distortion still happens even if I Int() the Width()/Height() calls, or even if I explicitly set the SetHandle using Ints (SetHandle 121,111).

I don't follow. If that's true then your initial post isn't true, because you were asking why the image wasn't distorted when you used SetHandle with your own calculations.


rIKmAN(Posted 2013) [#11]
Yep - see my strikethrough :)

OK yep muddy and benmc were right with their sugggestions re: Float/Int pixel positions - thank you!

SpineEntities still have the problem so I am gonna dig into the source and see if it's something I can fix myself or not.

...Spine is fixed also by adding .5 to the SetPosition(), or by placing the image within Spine to a full Int position :)

Cheers guys, much appreciated :)