createCanvas(600, 400);

}

​

function draw() {

  background(255);

  strokeWeight(8);

  rectV(width * 0.05, height * 0.1, width * 0.2, height * 0.4, 20, '#000');

  rectH(width * 0.25, height * 0.1, width * 0.2, height * 0.4, 20, '#000');

  rectDR(width * 0.05, height * 0.5, width * 0.2, height * 0.4, 20, '#000');

  rectDL(width * 0.25, height * 0.5, width * 0.2, height * 0.4, 20, '#000');

  rectV(width * 0.55, height * 0.1, width * 0.2, height * 0.4, 20, '#000');

  rectH(width * 0.75, height * 0.1, width * 0.2, height * 0.4, 20, '#FFE500');

  rectDR(width * 0.55, height * 0.5, width * 0.2, height * 0.4, 20, '#FF0000');

  rectDL(width * 0.75, height * 0.5, width * 0.2, height * 0.4, 20, '#2196F3');

}

​

function rectV(x, y, w, h, step, strokeColor){

  stroke(color(strokeColor));

  for(ix = x; ix <= x+w; ix+=step)

    line(ix, y, ix, y+h);

  noFill();

  stroke(0);

  rect(x, y, w, h);

}

​

function rectH(x, y, w, h, step, strokeColor){

  stroke(color(strokeColor));

  for(iy = y; iy <= y+h; iy+=step)

    line(x, iy, x+w, iy);

  noFill();

  stroke(0);

  rect(x, y, w, h);

}

​

function rectDR(x, y, w, h, step, strokeColor){

  stroke(color(strokeColor));

​

  for (ix = x; ix < x+w; ix+=step)

    for (iy = y; iy < y+h; iy+=step)

      line(ix, iy+step, ix+step, iy);

  noFill();

  stroke(0);

  rect(x, y, w, h);

}

​

function rectDL(x, y, w, h, step, strokeColor){

  stroke(color(strokeColor));

  for (ix = x; ix < x+w; ix+=step)

    for (iy = y; iy < y+h; iy+=step)

      line(ix, iy, ix+step, iy+step);

​

  noFill();

  stroke(0);

  rect(x, y, w, h);

}