Moving Blocks Illusion, a Psychology Paper visualized with Processing

Can you tell that the yellow and blue blocks are actually aligned? Click the visualization to see the lines! This project is based off of Psychology research by Stuart Anstis, in his paper “Moving objects appear to slow down at low contrasts“, published in the Journal of Neural Networks in 2003. [raw] [/raw] The code for this illustration is below, and is designed to work even if you change the numbers in the size() function to fit your screen:

int bars = 40;
int x = 0, vx = 0;
boolean showLines = false;
void setup() {
  size(800,400);
  vx = width / bars / 20;
}
void draw() {
  float barWidth = width / bars;
  for(int i = 0; i < bars; i++) {
    noStroke();
    fill( (i%2) * 255);
    rect(i*barWidth,0,barWidth,height);
  }
  fill(0,0,100);
  float blockHeight = barWidth * 1.5;
  float blockWidth = barWidth * 4;
  rect(x,height/3 - blockHeight/2,blockWidth,blockHeight);
  fill(255,255,0);
  rect(x,height/3*2 - blockHeight/2,blockWidth,blockHeight);
  x += vx;
  if( x + blockWidth > width || x < 0) vx = -vx;
  if(showLines) {
    stroke(255,0,0);
    line(x,0,x,height);
    line(x+blockWidth,0,x+blockWidth,height);
  }
}
void mousePressed() {
  showLines = !showLines;
}

How does this work? The abstract of the paper summarizes:

Moving cars give the illusion of slowing down in foggy conditions, because low contrast reduces perceived speed. A grey square that drifts horizontally across a surround of black and white vertical stripes appears to stop and start as it crosses each stripe, because its contrast keeps changing. A moving square whose vertical and horizontal edges have different contrasts will show illusory distortions in perceived direction. Contrast also affects the apparent amplitude and salience of back-and-forth apparent motion. Finally, a line of black and white dots on a grey surround moves in illusory directions, because of a mismatch in the contrasts along and across the dotted line. Thus, motion signals in the early parts of the visual system are profoundly altered by stimulus luminance and contrast. This suggests that motion is coded by the relative firing rates of neural channels tuned to fast and slow motion, with contrast-dependence being a motion analog of the Bezold–Brucke hue shift.

In this Processing application, the variables x and vx control the position and velocity of the blocks. A for loop is used to draw the grid of bars, a total of 40 set at the top in int bars. An if statement is used to reverse vx whenever the blocks hit the right or left side of the screen. Finally, void mousePressed toggles whether two red lines are drawn to shown the alignment of the blocks. Pretty nifty!