Paso a paso #

Problem statement #

Tambien llamada Stepping feet, es una ilusión visual de percepción de movimiento. Esta muestra dos pies, uno azul y otro amarillo, que se mueven horizontalmente a través de un paisaje que consta de rayas blancas y negras. Aunque ambos pies se mueven a una velocidad constante, su velocidad percibida es distinta.

¿Como interactuar con la ilusión?
Para cambiar la velocidad de las figuras se usa el primer slider, para cambiar la relación baras/pie se usa el segundo slider y para mover o detener los pies se debe clickear la casilla de move.

Code #

CODIGO: Paso a paso

Codigo generado usando el editor web de P5.js.

var canvasWidth = 600;
var canvasHeight = 400;

var quantity = 2;
var speed = 1;

var positionXBar1 = 0;
var positionYBar1 = canvasHeight / 3;
var positionYBar2 = (2*canvasHeight) / 3;
var widthBar = 80;
var heightBar = 40;
var colorBar1 = 'yellow';
var colorBar2 = 'blue';
var moveBarRight = true;
var isMove = true;

var sliderSpeed;

function setup() {
  createCanvas(canvasWidth, canvasHeight);
  background('white');
  drawLayout();
}

function draw() {
  drawBoard();
  updateSpeed();
  drawBar1();
  drawBar2();
}

function drawBoard(){
  let position;
  
  quantity = sliderQuantity.value();

  let realLines = (canvasWidth / widthBar) * quantity;
  let widthLine = widthBar / quantity;
  let numberLines = realLines % 2 == 0 ? realLines + 1 : realLines;

  for (let i = 0; i < numberLines; i++) {
    position = i * widthLine;
    if (i % 2 == 0) {
      fill('black');
      rect(position, 0, widthLine, canvasHeight);
    } else {
      strokeWeight(0)
      fill('white');
      rect(position, 0, widthLine, canvasHeight);
    }
  }
}

function drawBar1(){
  fill(colorBar1);
  rect(positionXBar1, positionYBar1, widthBar, heightBar);
  if (moveBarRight) {
    positionXBar1 += speed;
    if (positionXBar1 + widthBar > canvasWidth) {
      moveBarRight = false;
    }
  } else {
    positionXBar1 -= speed;
    if (positionXBar1 <= 0) {
      moveBarRight = true;
    }
  }
}

function drawBar2() {
    fill(colorBar2);
    rect(positionXBar1, positionYBar2, widthBar, heightBar);
    if (moveBarRight) {
      positionXBar1 += speed;
      if (positionXBar1 + widthBar > canvasWidth) {
        moveBarRight = false;
      }
    } else {
      positionXBar1 -= speed;
      if (positionXBar1 <= 0) {
        moveBarRight = true;
      }
    }
  }

  function updateSpeed() {
    if (isMove) {
        speed = sliderSpeed.value();
    }
  }

function drawLayout() {
    //Reset button
    button = createButton('Reset');   
    button.position(40, 440);
    button.mousePressed(() => {
        canvasWidth = 600;
        canvasHeight = 400;
        quantity = 2;
        speed = 1;
        positionXBar1 = 0;
        positionYBar1 = canvasHeight / 3;
        positionXBar2 = 0;
        positionYBar2 = (2*canvasHeight) / 3;
        widthBar = 80;
        heightBar = 40;
        moveBarRight = true;
    });

    //Move checkbox
    checkbox = createCheckbox('Move', isMove); 
    checkbox.position(40, 470);
    checkbox.mousePressed(() => {
        if (speed === 0) {
            isMove = true;
            speed = sliderSpeed.value();
        } else {
            isMove = false;
            speed = 0;
        }
    });

    //Slider speed
    sliderSpeed = createSlider(1, 10, 1);
    sliderSpeed.position(40, 500);
    sliderSpeed.style('width', '80px');
    
    //Slider quantity
    sliderQuantity = createSlider(1, 10, 1);
    sliderQuantity.position(40, 540);
    sliderQuantity.style('width', '80px');
    
    //Change color
    sel = createSelect();
    sel.position(40, 580);
    sel.option('blue-yellow');
    sel.option('red-green');
    sel.option('grey');
    sel.selected('kiwi');
    sel.changed((value) => {
        switch(value.target.value) {
            case 'blue-yellow':
                colorBar1 = 'yellow'
                colorBar2 = 'blue'
                break;
            case 'red-green':
                colorBar1 = 'green'
                colorBar2 = 'red'
                break;
            case 'grey':
                colorBar1 = 'white'
                colorBar2 = 'black'
                break;
        }
    });

}

Conclusions #

La clave de esta ilusión es el contraste, ya que cuando hay un mayor contraste entre el pie y el fondo, el pie se hace visible más facilmente y da una sensación de movimiento rapido mientras que cuando el contraste es bajo, el pie es más dificil de diferenciar del fondo y parecer ir más lento. Esta ilusió demuestra que el fondo de un objeto puede tener un efecto significativo en su velocidad percibida.