Friday Fun XLVI - Image Matrix

Aloha,

Last weekend when sitting in my hotel room in Singapore I had the idea to test the performance of my DotMatrix control again. So I thought what about pixelating an image and visualize it using the control.
Well to be honest it was just too easy to do...so here is the result...

On the left side you see the original picture and on the right side the related pixelated matrix image.
So I thought why not adding some text and figured out that when I draw the text on the DotMatrix control I usually set all "transparent" pixels to the dotOffColor which doesn't look good in this example.
Therefor I've added another method to the DotMatrix control which only draws the pixels in a character that are "on". The method is called

• setCharAtWithBackground()

So with this it was easy to add some text on top of the pixelated image without destroying the existing background pixels.
Now that this was done I decided it might be nice to be able to simply shift the DotMatrix in each direction. Long story short I've implemented for additional methods which are

• shiftLeft()
• shiftRight()
• shiftUp()
• shiftDown()

When calling one of this methods the whole DotMatrix will be shifted by one dot in the choosen direction and redraws itself.
Now I could really test the capability of the DotMatrix by calling for example the shiftLeft method in an AnimationTimer with an update rate of 10ms. So the result was nice as you can see in the following video...



You could also combine the calls like first calling shiftLeft() and after that shiftUp(). It's not perfect because both times the drawMatrix() method will be called but even with this little drawback the DotMatrix is fast enough to create a smooth scrolling effect.

Please keep in mind that you should not go crazy with the no of dots in the DotMatrix control. You will definitely see a decrease in performance if you go to a high number of columns and rows. In the video I use 100x85 dots for the DotMatrix which I think is good enough to use it also for images.

So I don't have any use case for the DotMatrix control at the moment but maybe one of you has and therefor you can find the source code as always over at github.

You will also find 2 other demos in the source code (Main2 and Main3). In Main2 I show you how to create one DotMatrix out of two images and in Main3 I show you how to use two images and draw them alternating on the DotMatrix...so have fun playing around with it :)

Well that's it for today...like always I wish you a nice weekend and never forget...keep coding... ;)