Project-05-Wallpaper

sketch

function setup() {
	createCanvas(400,200);
}

function draw() {
    background(255,228,196);
    var tw = 30;
    var th = 30;
    var oy = 0;
    var ox = 0;
    var rows = 3*height/30;
    //draws a staggered circle pattern
    for (var y = 0; y < rows; y++) {
        if (y%2 == 0){
            var cols = width/30;
        }else{
            var cols = width/30-1;
        }
        //changes behavior based on which row it's on
        for (var x = -1; x < cols+1; x++) {
            if (cols == width/30){
                var py = oy + y / 2 * th;
                var px = ox + x * tw;
                fill(222);
                ellipse(px, py, 5, 5);
                drawSquare(px, py);
                zigZag(px,py,1);
                zigZag(px,py,0);
            }else{
                var py = oy + y / 2 * th;
                var px = ox + x * tw + tw/2;
                fill(135);
                ellipse(px, py, 5, 5);
                drawSquare(px, py);
                zigZag(px,py,0);
            }
        }
    }
    noLoop();
}
// draws squares
function drawSquare(x,y){
    rectMode(CENTER);
    fill(123,213,132);
    rect(x+15, y, 5, 5);
}

function zigZag(x,y,mode){
    x-=2;
    y-=1;
    var a = x;
    var b = y;
    //draws zig zagging lines
    for (var n = 0; n<15; n++){
        if (n%2==0){
            x+=2;
            line(a, b, x, y);
            a = x;
        }else{
            //draws lines going left
            if (mode == 1){
                y+=2;
                line(a, b, x, y);
                b = y;
            //draws lines going right
            }else {
                y-=2;
                line(a, b, x, y);
                b = y;
            }
        }
    }
}

I created an alternating grid of circles with rectangles filling the spaces in between. I then created a function that created zig zagging lines to link together the circles in a rectangular way. I tried connecting the circles so that they are somewhat hidden by the lines even though their shapes are still visible so that the attention is drawn onto the brighter colored squares that stand out in the center of the peach background.