shearXで歪められた市松模様

/**
 * sheared squares
 * 
 * @author aadebdeb
 * @date 2017/02/22
 */

var speed;

function setup() {
  createCanvas(windowWidth, windowHeight);
  frameRate(15);
  rectMode(CENTER);
  speed = 0;
}

function draw() {
  
  var pspeed = speed;
  speed = mouseX - pmouseX;
  var acc = speed - pspeed;
  
  background(255);
  translate(width, height);
  rotate(PI);
  var maxAcc = 100;
  shearX(map(constrain(acc, -maxAcc, maxAcc), -maxAcc, maxAcc, -PI / 5, PI / 5));
  var rectW = 50;
  var rectH = 70;
  
  var x = 0;
  for (var w = -width / 2; w <= width + width / 2; w += rectW) {
    var y = 0;
    for (var h = 0; h <= height + rectH / 2; h += rectH) {
      stroke(127, 165, 155);
      strokeWeight(1);
      (x + y) % 2 == 0 ? fill(62, 52, 48): fill(245, 251, 254);
      rect(w, h, rectW, rectH);
      y++;
    }
    x++;
  }
}