In this other brightness illusion, the 4 squares appear to have different luminance while being actually identical. Only the background varies temporally. This apparent brightness difference occurs because the background gradient introduces a varying contrast with the individual squares. The apparent brightness difference between the squares reaches a maximum when the background gradient with maximum amplitude follows the same direction as the square gradient, and is minimal when the background gradient with maximum amplitude is in the opposite direction.

This illusion, named "The Staircase Gelb Effect", has been popularized and studied by Prof. Alan Gilchrist from Rutgers University (Newark, USA). To learn more about the science behind this effect, check out Prof. Alan Gilchrist's website:

  A physical demonstration of the staircase Gelb effect
  Anchoring Theory of Lightness Perception
  His publications

If you don't believe what you are seeing, check also Prof. Akiyoshi Kitaoka's explanations:

  http://www.psy.ritsumei.ac.jp/~akitaoka/gilchrist2006mytalke.html

How do the properties of the squares or background affect the perception of this illusion? This widget allows you to explore some parameters that affect the appearance of this illusion, for example: the slope of the gradient inside the squares, their size and separation, or the amplitude of background gradient.

Here is the math behind this stimulus:

  x1 = -0.5*side-sep/2
  x2 = 0.5*side+sep/2
  x3 = -1.5*side-1.5*sep
  x4 = 1.5*side+1.5*sep
  square1 = abs(x1-x)<(side/2) & abs(y)<(side/2)
  pattern1 = slope*square1*(x-x1)/size
  square2 = abs(x2-x)<(side/2) & abs(y)<(side/2)
  pattern2 = slope*square2*(x-x2)/size
  square3 = abs(x3-x)<(side/2) & abs(y)<(side/2)
  pattern3 = slope*square3*(x-x3)/size
  square4 = abs(x4-x)<(side/2) & abs(y)<(side/2)
  pattern4 = slope*square4*(x-x4)/size
  patterns = pattern1+pattern2+pattern3+pattern4
  allsquares = bool(square1) | bool(square2) | bool(square3) | bool(square4)
  back = amplitude*(1-allsquares)*x/(size/2)
  z = cos(time)*back+patterns

The whole stimulus is generated in real-time using a GLSL shader that runs right inside your WebGL-compatible browser. The plain Math behind the stimulus was converted to this optimized GLSL shader using the new Psykinematix Pro Edition. Translation to Matlab and Python code is also possible !

This whole widget was also fully generated using Psykinematix Pro Edition. The parameters that control the stimulus properties through the sliders are the same as the ones you would define as dependent or independent variables when using the stimulus in an actual psychophysical experiment run in Psykinematix. The widget creation is otherwise fully customizable with your own logo, copyright, links, etc.

To learn more about the widget creation, click on the above "Made With" button !