Strange optical illusion when moving adjacent colours. Fixes?

OpenGL Development
#1

I have been trying to get my head around this problem for a while now, and only figured out what the problem is when editing the pictures to post here. The first picture is of the ‘tile map’, it is actually one big bufferedImage with a few quads in it. Here is what it looks like (when stationary):

959×599 5.56 KB

However, in game, the image is constantly moving around. And when the image moves left, this is what appears to be shown:

959×599 6.23 KB

Please note I had to edit this, as when I screenshotted it, the illusion disappeared. The illusion only effects the seams of some of the quads, but leaves most untouched.
This effect only happens when the whole image is moving to the left. You can even download the original image, and move it to the left to see the effect (for best results do this with java at a constant speed).
My question is, am I right in this being just an illusion or is there something weird going on with OpenGL, and is there any steps I can take to eliminate the problem?

#2

If you can’t capture it in a screenshot, it’s probably an artifact of your particular screen, probably due to the high saturation colours you have adjacent to each other. Can you reproduce it by dragging the image around in a paint program? Have you seen it on any other machines?

#3

Can reproduce it in a paint program (just save the image and give it a go yourself, drag the image to the left at a constant speed), and same thing occurs on a macbook pro in its paint program, I am using windows 7.

#4

Solid colors can cause strange optical illusions. For example, the bright pink square in your first picture seems to be slightly larger, misaligned with the rest of the grid, and closer to the viewer (probably a function of being brighter and looking larger because it’s brighter).

Here’s what the picture looks like in grayscale.

Here’s what the picture appears to look like (in color) as an exaggerated (grayscale) image.

Here are a few ways I might correct hide optical illusions:
Borders
Blurring
Pattern

I don’t know to what extent it will help when there is that much contrast. Maybe it’s best to just avoid those colors.

[quote=“http://devmag.org.za/2012/07/29/how-to-choose-colours-procedurally-algorithms/”]Colour perception is not absolute. Colours appear differently depending on surrounding colours. This is an important factor when selecting colour palettes that work with existing palettes, or combining more than one palette.

Here is more information on colour contrast effects:

http://www.uxmatters.com/mt/archives/2006/01/color-theory-for-digital-displays-a-quick-reference-part-ii.php#colorContrastEffects
[/quote]

#5

[quote=“http://devmag.org.za/2012/07/29/how-to-choose-colours-procedurally-algorithms/”]Colour perception is not absolute. Colours appear differently depending on surrounding colours. This is an important factor when selecting colour palettes that work with existing palettes, or combining more than one palette.

Here is more information on colour contrast effects:

http://www.uxmatters.com/mt/archives/2006/01/color-theory-for-digital-displays-a-quick-reference-part-ii.php#colorContrastEffects
[/quote]
Awesome read!

#6

Definately a good read, cheers for all the help. So its not a problem with the colours mixing in Java/OpenGL, but our eyes playing tricks on us!

#7

It’s related to the hardware in your monitor. The slower the pixels change their color, the bigger the effect. It’s not an optical illusion, you can film it with a video camera and freeze a frame.

#8

The effect is called “persistence”.

Cas :slight_smile:

#9

On my screen if I move a green box (0x00FF00) over red (0xFF0000) horizontally at 1 pixel per frame (VSynced) the edge between them turns spikey. Seems like my screen updates the colors separately and interlaced in some way. Mainstream screens usually cut corners…

#10

That is actually very cool, thanks cas! I’ll just have to avoid those colours next to each other.