// cspears1110.github.io

​

// Tsuro is a popular boardgame that is eerily similar to 10PRINT:

// Given a 2D tile, 8 points exist, 2 on each side, spaced evenly apart

// In each tile, there exists a 4 connections between two distinct points, essentially a connection for every point

// Placed along side other tiles, paths are formed, similar to 10PRINT

// While Tsuro's path are curved, I've opted for a linear approach in this challenge

​

//    0 1

//    | |

// 7 –   – 2

// 6 –   – 3

//    | |

//    5 4

​

let boxWidth = 60;

let boxHeight = 60;

let spacing = boxWidth;

let pointSpacing = 20;

let x = 0;

let y = 0;

​

function getPointPos(n) {

  let v;

  switch (n) {

  case 0:

    v = createVector(x + pointSpacing, y);

    break;

  case 1:

    v = createVector(x + pointSpacing * 2, y);

    break;

  case 2:

     v = createVector(x + boxWidth, y + pointSpacing);

    break;

  case 3:

    v = createVector(x + boxWidth, y + pointSpacing * 2);

    break;

  case 4:

    v = createVector(x + pointSpacing * 2, y + boxHeight);

    break;

  case 5:

    v = createVector(x + pointSpacing, y + boxHeight);

    break;

  case 6:

    v = createVector(x, y + pointSpacing * 2);

    break;

  case 7:

    v = createVector(x, y + pointSpacing);

  }

  return v;

}

​

function setup() {

  createCanvas(displayWidth, displayHeight);

  frameRate(24);

  background(128, 19, 19);

}

​

function draw() {

  let pointArray = [0, 1, 2, 3, 4, 5, 6, 7];

  let shuffledArray = shuffle(pointArray);

  let count = 8;

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

    let a = shuffledArray.shift();

    let b = shuffledArray.shift();

    let aV = getPointPos(a);

    let bV = getPointPos(b);

    //draw line between them

    stroke(251, 192, 45);

    strokeWeight(3);

    line(aV.x, aV.y, bV.x, bV.y);

  }

  x = x + boxWidth;

  if (x > width){

    x = 0;

    y += boxHeight;

  }

}

​