Repeated patterns

This section will cover turning our window into a set of blocks with their own X and Y coordinates, then drawing with another set of coordinates within each block.

The new coordX and coordY will replace the x/y we're used to.

The block that we draw within will be given it's x/y coordinates with cvX and cvY.

C_C is the constant spacing we use - the height and width of each block.

What our DO loop is doing is -

• drawing a filled circle in each block
• moving to the next block to the right until we hit the width of the canvas
• moving to the next row and back to the left

The checks for a block being at the end of it's line adds the constant spacing so we don't have circles half on the screen and half off the screen.

function drawShapes() {

    var coordX = 1,
        coordY = 1;

    var cvX = 1,
        cvY = 1;
    var C_C = 25,
        R = 12.5;

    do {
        coordX = C_C * cvX;
        coordY = C_C * cvY;

        drawCircle(coordX, coordY, R);

        cvX++;

        if (coordX >= w - C_C) {
            cvX = 1;
            cvY++;
        }
    }

    while (C_C * cvY + C_C < h);
}