createCanvas(400, 400);

}

​

function draw() {

  background(255);

  stroke(0);

  DrawGrid(400, 20);

  stroke(0,0,255);

  mylinesB(400, 0, 380, 400);

  stroke(0,255,0);

  mylinesG(400, 400, 0, 0);

  stroke(200,200,0);

  mylinesY(400, 0, 0, 0);

  stroke(255,0,0);

  mylinesR(0,0, 20, 400);

​

}

​

function mylinesB(X1, Y1, X2, Y2) {

  for (var i = Y1; i <= Y2; i = i+20) {

    line(X1, Y1+i, X2-i, Y2);

  }

}

​

function mylinesG(X1, Y1, X2, Y2) {

  for (var i = Y1; i >= Y2; i = i-20) {

    line(X1, i, i, Y2);

  }

}

​

function mylinesR(X1, Y1, X2, Y2) {

  for (var i = X1; i <= Y2; i = i+20) {

    line(X1, Y1 + i, X2 + i, Y2);

  }

}

​

function mylinesY(X1, Y1, X2, Y2) {

  for (var i = X2; i <= X1; i = i+20) {

    line(X1 - i, Y1, X2, Y2 + i);

  }

}

​

​

function DrawGrid(MAX,SPACING) {  

  // parameters MAX and SPACING allow us to pass values into the function

  for (var g = 0; g < MAX; g = g + SPACING) {

    strokeWeight(.5);

    line(g, 0, g, MAX);

    line(0, g, MAX, g);

  }

  // setting up the mid-point lines

  strokeWeight(2);

  line(0, MAX/2, MAX, MAX/2);

  line(MAX/2, 0, MAX/2, MAX);

}

​