let squareSize = 14; // min=10, max=36, step=1
let lineRatio = 0.07; // min=0.01, max=0.2, step=.01
let tileOffset = 3; // min=2, max=4, step=1

// You can find the Turtle API reference here: https://turtletoy.net/syntax
Canvas.setpenopacity(.5);

// Global code will be evaluated once.
const turtle = new Turtle();

function drawSquare(x, y, size, fill) {
    var lineW = size * lineRatio;
    for(var i = 0; i < size; i += .2) {
        turtle.jump(x, y + i);
        turtle.goto(x + (i < lineW? size: lineW) , y + i);
    }
    
    if(fill) {
        for(var i = 0; i < size - lineW; i += .05) {
            turtle.jump(x + lineW , y + lineW + i);
            turtle.goto(x + size  , y + lineW + i);
        }
    }    
}

var transitions = []
for(var i = 0; i < 1; i += 1 / tileOffset) {
    transitions.push(squareSize * i);
}
for(var i = transitions.length - 2; i > 0; i--) {
    transitions.push(transitions[i]);
}

// The walk function will be called until it returns false.
function walk(i) {
    y = (i * squareSize) - 105;
    
    //transition = [0, squareSize / 3, 2 * squareSize / 3, squareSize / 3];
    
    for(var x = -100 - squareSize, j = 0; x < 100; j++, x += squareSize) {
        drawSquare(x + transitions[i % transitions.length], y, squareSize, j % 2 == 0);
    }
    
    return y < 100;
}