### Distorted lattice

The perfectly aligned grid appears distorted like a flag in the wind. #illusion

en.wikipedia.org/wiki/optical_illusion#gallery

```let size = 20; //min=8, max=50, step=2
let opacity = .45 //min=.1, max=.75, step=.05

Canvas.setpenopacity(opacity);
const turtle = new Turtle();

const canvasSize = 200;
const gridSize = Math.ceil(canvasSize / size) + (Math.ceil(canvasSize / size) % 2 == 0? 1: 0);
var diaSize = size / 4;

function drawCell(i) {
var col = (i % gridSize) - ((gridSize / 2) | 0);
var row = (i / gridSize | 0) - ((gridSize / 2) | 0);

var x = (col * size) - (size / 2);
var y = (row * size) - (size / 2);

var subPattern = [0, 1, 1, 0, 1, 0, 0, 1];

var color = i % 2 == 0;

for(var yy = 0; yy < size; yy += .15) {
if(color) {
var xx = 0;
if(yy < diaSize) { xx = diaSize - yy; } else if(yy > size - diaSize) { xx = yy - (3 * diaSize); }

turtle.jump(x + xx, y + yy);
turtle.goto(x + size - xx, y + yy);
}
}
for(var k = 0; k < 2; k += opacity) { drawSubcell(x, y, diaSize, subPattern[((i / gridSize | 0) + (i % gridSize)) % subPattern.length]); }
}

function drawSubcell(x, y, size, isPrimary) {
if(isPrimary) {
drawCellet(x - (size / 2), y - (size / 2), size / 2);
drawCellet(x - (size / 2), y + (size / 2), size / 2);
return;
}
drawCellet(x, y, size / 2);
drawCellet(x - size, y, size / 2);
}

function drawCellet(x, y, size) {
for(var i = 0; i < size; i += .15) {
turtle.jump(x + i, y - i);
turtle.goto(x + size + i, y + size - i);
}
}

function walk(i) {
drawCell(i);
return i < Math.pow(gridSize, 2) - 1;
}```