W = 700

H = 700

skip = 1

padding = 50

debug = false

debugFont = false

​

function setup() {

  createCanvas(W + padding, H + padding);

  background(250);

  strokeWeight(1)

  stroke(175)

  smooth()

  frameRate(6);

​

}

​

function that(skip)

{

    // Top to Right

  for (i = 0; i < m; i++) {

    if (debug)

      stroke(0, 126, 0)

    if (i > m - skip)

      line(i * W / m + padding / 2, padding / 2, W + padding / 2, ((i + skip) % (m + 1) + 1) * W / m + padding / 2)

    else

      line(i * W / m + padding / 2, padding / 2, W + padding / 2, (i + skip) % (m + 1) * W / m + padding / 2)

  }

​

  // Right to Bottom

  for (i = 0; i < m; i++) {

    if (debug)

      stroke(126, 0, 0)

    if (i == m - skip) {

      line(W + padding / 2, i * W / m + padding / 2, (0) * W / m + padding / 2, H + padding / 2)

    } else if (i > m - skip - 1) {

      line(W + padding / 2, i * W / m + padding / 2, (m - (i + skip) % (m + 1) - 1) * W / m + padding / 2, H + padding / 2)

    } else {

      line(W + padding / 2, i * W / m + padding / 2, (m - (i + skip) % (m + 1) + 0) * W / m + padding / 2, H + padding / 2)

    }

  }

​

  // Bottom to Left

  for (i = m; i > 0; i--) {

    if (debug)

      stroke(0, 0, 126)

​

    if (i == skip) {

      line(i * W / m + padding / 2, H + padding / 2, padding / 2, ((0) * W / m + padding / 2))

    } else if (i > skip) {

      line(i * W / m + padding / 2, H + padding / 2, padding / 2, ((i - skip) * W / m + padding / 2))

    } else {

      line(i * W / m + padding / 2, H + padding / 2, padding / 2, ((i + m - skip) * W / m + padding / 2))

    }

  }

​

  //   // Left to Top

  for (i = m; i > 0; i--) {

    if (debug)

      stroke(126, 126, 0)

    if (i == skip) {

      line(padding / 2, i * W / m + padding / 2, (m - i + skip) * W / m + padding / 2, padding / 2)

    } else if (i > skip) {

      line(padding / 2, i * W / m + padding / 2, (m - i + skip + 0) * W / m + padding / 2, padding / 2)

    } else {

      line(padding / 2, i * W / m + padding / 2, (skip - i) * W / m + padding / 2, padding / 2)

    }

​

  }

​

  // Grid Dots

  for (i = 0; i <= m; i++) {

    for (j = 0; j <= m; j++) {

​

      if (i == 0 || j == 0 || i == m || j == m) {

        fill(150)

        // noStroke()

        circle(i * W / m + padding / 2, j * W / m + padding / 2, 6)

        if (debugFont) {

          if (j == 0 && i < m)

            text(i, i * W / m + padding / 2, j * W / m + padding / 2)

          if (i == m && j < m)

            text(j, i * W / m + padding / 2, j * W / m + padding / 2)

          if (j == m && m - i < m)

            text(i, i * W / m + padding / 2, j * W / m + padding / 2)

          if (i == 0 && m - j < m)

            text(j, i * W / m + padding / 2, j * W / m + padding / 2)

        }

​

​

      }

    }

  }

}

​

​

function draw()

{

  background(0)

  // circle(200,200,skip)

  // skip += 1

  // skip = skip%m

  strokeWeight(.8)

  stroke(216, 216, 216)

  that(4)

  strokeWeight(.8)

  stroke(190,135,10)

  that(22)

​

}