Author Topic: Make 4-lvl grayscale less flickery  (Read 9987 times)

0 Members and 2 Guests are viewing this topic.

Offline nxtboy III

  • LV8 Addict (Next: 1000)
  • ********
  • Posts: 795
  • Rating: +26/-1
  • NXT!
    • View Profile
    • Program NXT
Make 4-lvl grayscale less flickery
« on: December 30, 2011, 08:46:14 pm »
Hi,
I have tried making 4-lvl grayscale but it looks too flickery sometimes. I was wondering of an easy way to make it less flickery.
Right now I have it alternate between 3 pictures very fast. The first pic just shows what is pure black on the picture and what is white. The second one shows the black being either black or dark gray and white being white. The third picture shows the black being being black, dark gray, or light gray and the white being white.
Is there a way to have 4-lvl grayscale still look good but not so flickery?
I have tried blurring an image using 50% dithering but it seems that I can only get 1 shade of gray, not two. If I try using, say, 25% or 75% dithering then it looks obvious that I am dithering the picture. I want it to look a solid gray, not a dithered gray. It only looks solid if I just use 50% dithering, which is half of the pixels are white, half black.

Hopefully that made any sense.
Thanks, and have a nice day,
nxtboy III

Offline thepenguin77

  • z80 Assembly Master
  • LV10 31337 u53r (Next: 2000)
  • **********
  • Posts: 1594
  • Rating: +823/-5
  • The game in my avatar is bit.ly/p0zPWu
    • View Profile
Re: Make 4-lvl grayscale less flickery
« Reply #1 on: December 30, 2011, 10:25:13 pm »
Well, I think the obvious question before we go any farther would be what language is this in? (BASIC vs Axe vs asm makes a huge difference)
zStart v1.3.013 9-20-2013 
All of my utilities
TI-Connect Help
You can build a statue out of either 1'x1' blocks or 12'x12' blocks. The 1'x1' blocks will take a lot longer, but the final product is worth it.
       -Runer112

Offline saintrunner

  • Custom Spriter: You ask it! I'll Make it!
  • LV10 31337 u53r (Next: 2000)
  • **********
  • Posts: 1787
  • Rating: +115/-11
  • Flogging Molly
    • View Profile
    • Jonny K Music
Re: Make 4-lvl grayscale less flickery
« Reply #2 on: December 30, 2011, 10:26:16 pm »
I think he wants axe (Am I right?)
My Sprites Thread   :Updated often :) for your viewing pleasure

GAMES:

Offline nxtboy III

  • LV8 Addict (Next: 1000)
  • ********
  • Posts: 795
  • Rating: +26/-1
  • NXT!
    • View Profile
    • Program NXT
Re: Make 4-lvl grayscale less flickery
« Reply #3 on: December 31, 2011, 01:35:44 am »
Well, actually this is not for a calculator but for another device. On the other device I have it show each picture for 17 ms because I think that is around what the refresh rate is.

Offline Builderboy

  • Physics Guru
  • CoT Emeritus
  • LV13 Extreme Addict (Next: 9001)
  • *
  • Posts: 5673
  • Rating: +613/-9
  • Would you kindly?
    • View Profile
Re: Make 4-lvl grayscale less flickery
« Reply #4 on: December 31, 2011, 01:42:53 am »
What device would that be?

Offline nxtboy III

  • LV8 Addict (Next: 1000)
  • ********
  • Posts: 795
  • Rating: +26/-1
  • NXT!
    • View Profile
    • Program NXT
Re: Make 4-lvl grayscale less flickery
« Reply #5 on: December 31, 2011, 01:44:20 am »
A Lego Mindstorms NXT.

It's not really meant for games, but calcs aren't either.
Their hardware is closely related.
« Last Edit: December 31, 2011, 01:45:22 am by nxtboy III »

Offline Builderboy

  • Physics Guru
  • CoT Emeritus
  • LV13 Extreme Addict (Next: 9001)
  • *
  • Posts: 5673
  • Rating: +613/-9
  • Would you kindly?
    • View Profile
Re: Make 4-lvl grayscale less flickery
« Reply #6 on: December 31, 2011, 02:03:46 am »
Ah interesting!  Well to get better grey, not only should you make sure you actually are matching the refresh rate of the screen, but you also probably should try to get dither to work.  Greyscale works because the average color over the course of several frames of animations is not a black or white color.  Dither increases greyscale quality because the average color of a section of screen is made to be grey in every single frame, not just over the course of many frames.  In addition, every pixel of the same color must be dithered in the same rate and in a constant fashion so splotches don't appear. 

For example, you noted that 50% dithering worked really well, correct?  This is where you would draw a checkerboard one frame, and then draw a shifted checkerboard the next frame such that you drew on all the pixels that were not drawn on the previous.  In this way each frame contains 50% black and 50% white, and over the course of many frames all pixels get an even and consistent distribution of black and white. 

Doing this with 33% and 66% (as 4level has 4 color, 0% 33% 66% and 100%) is a bit trickier, but still can be accomplished.  If we look back on our checkerboard example, we can look at the checkerboard as consisting of sections of 2x2 pixels like so:

Code: [Select]
10      01
01      10

The first and second frame work together to each contain 50% grey.  With 4 level greyscale, we need to make a larger box:

Code: [Select]
100     010     001
010     001     100
001     100     010

This represents the 3x3 box of 33% grey.  There are 3 steps to this animation, and therefore achieving 33% (1/3) grey is easy.  As you can see, each pixel is on only once in the course of the animation, and the frames are displayed in an orderly fashion, which makes everything look smoother.  66% grey would be achieved in much the same way.

Now the tricky part is this; When you are making your greyscale drawings, you are not going to be making them out of 3x3 blocks.  What you need to do is imagine the 3x3 blocks span all the way across the screen.  An array of 3x3 blocks for each color.  1 repeating pattern for 0% 33% 66% and 100%.  Whenever you want to color a pixel, you select the pixels from the 3x3 block that corresponds to that pixel.  If you wanted to color the pixel at (1,1) to 33% grey, it's color pattern would be 1 on the first frame of animation, and 0 on the second and third.  The pixel at location (4,0) however, would have the pattern 0,1,0.

Using this technique, coupled with matching the refresh rate precisely, can lead your greyscale images to be smooth and as least flicker-y as possible.

Offline nxtboy III

  • LV8 Addict (Next: 1000)
  • ********
  • Posts: 795
  • Rating: +26/-1
  • NXT!
    • View Profile
    • Program NXT
Re: Make 4-lvl grayscale less flickery
« Reply #7 on: December 31, 2011, 02:12:30 am »
So does that mean that I have to have 3 images?
Before I was just using one dithered image and just shifting the entire image back and forth on the x axis by 1 pixel.
Thank you very much. :)

Offline Builderboy

  • Physics Guru
  • CoT Emeritus
  • LV13 Extreme Addict (Next: 9001)
  • *
  • Posts: 5673
  • Rating: +613/-9
  • Would you kindly?
    • View Profile
Re: Make 4-lvl grayscale less flickery
« Reply #8 on: December 31, 2011, 02:17:09 am »
You can either use 3 images, or if you want to decrease the total size (but increase the complexity of display) generate the 3 images dynamically from an image that actually does have 4 colors.  This would be a bit more complicated, but decrease the size of the programs you write, which may or may not be a problem for you, I am not familiar with NXT programming size constraints. 

Offline nxtboy III

  • LV8 Addict (Next: 1000)
  • ********
  • Posts: 795
  • Rating: +26/-1
  • NXT!
    • View Profile
    • Program NXT
Re: Make 4-lvl grayscale less flickery
« Reply #9 on: December 31, 2011, 10:34:52 am »
It's easier if I just split it into 3 pictures.
Thank you so much!
I did what you said for some pictures and it works amazingly!!
Now it does not flicker so the pictures look a lot better.
Thanks. :)

Offline DJ Omnimaga

  • Clacualters are teh gr33t
  • CoT Emeritus
  • LV15 Omnimagician (Next: --)
  • *
  • Posts: 55943
  • Rating: +3154/-232
  • CodeWalrus founder & retired Omnimaga founder
    • View Profile
    • Dream of Omnimaga Music
Re: Make 4-lvl grayscale less flickery
« Reply #10 on: December 31, 2011, 11:30:55 am »
One issue with trying to match the screen refresh rate, however, is that on some devices, it's not the same across all of them. For example, one TI-84 Plus may have a different refresh rate than another TI-84 Plus. I wouldn't be surprised if it was the same for Lego Mindstorm NXT devices.

If you get able to test your grayscale on two such devices and the grayscale quality looks different on both, then it might be a good idea to do like certain calculator grayscale games and add a calibration option at the start of your program.

Offline nxtboy III

  • LV8 Addict (Next: 1000)
  • ********
  • Posts: 795
  • Rating: +26/-1
  • NXT!
    • View Profile
    • Program NXT
Re: Make 4-lvl grayscale less flickery
« Reply #11 on: December 31, 2011, 03:30:57 pm »
Is there another pattern of making grays that looks less like moving lines?

Offline DJ Omnimaga

  • Clacualters are teh gr33t
  • CoT Emeritus
  • LV15 Omnimagician (Next: --)
  • *
  • Posts: 55943
  • Rating: +3154/-232
  • CodeWalrus founder & retired Omnimaga founder
    • View Profile
    • Dream of Omnimaga Music
Re: Make 4-lvl grayscale less flickery
« Reply #12 on: December 31, 2011, 03:34:06 pm »
unfortunately nope. Scanlines and checkerboards are the only way grayscale is done by members here really. :(

Offline nxtboy III

  • LV8 Addict (Next: 1000)
  • ********
  • Posts: 795
  • Rating: +26/-1
  • NXT!
    • View Profile
    • Program NXT
Re: Make 4-lvl grayscale less flickery
« Reply #13 on: December 31, 2011, 03:35:39 pm »
Ok, but thanks a lot for the help! It makes my grayscale games look a lot less flickery.

Offline Builderboy

  • Physics Guru
  • CoT Emeritus
  • LV13 Extreme Addict (Next: 9001)
  • *
  • Posts: 5673
  • Rating: +613/-9
  • Would you kindly?
    • View Profile
Re: Make 4-lvl grayscale less flickery
« Reply #14 on: December 31, 2011, 03:43:21 pm »
There is no pattern that I know of that is not moving diagonal lines.  You could experiment with different types of animations, but what is interesting is that if you keep with the idea that (for 33%) there should only be 1 pixel on per row and column in the 3x3 pattern at any time, there is no way to scramble around the pixels, or animation to prevent some sort of scrolling line effect.

Also, see if displaying the images faster results in better greyscale, it is possible the refresh rate is faster than you think!  And if the refresh rate is significantly slow, and the LCD of high enough quality, this effect will not work as well as it does on our TI calculators.