const cols = 12, rows = 12, cw = _width/cols, rw = _height/rows, cw2 = cw/2, rw2 = rw/2;

​

//  Segment:    [b0, b1, b2, b3, b4]

//  b0 : Point

//  b1 : Connection left

//  b2 :            right

//  b3 :            up

//  b4 :            down

​

let turn = /*-1*/0, scene = 0;

​

let grid = []; // [rows+1][cols+1]

for(let j = 0; j <= rows; j++){

  grid[j] = [];

  for(let i = 0; i <= cols; i++){

    const V = (i === 0 || i === cols), H = (j === 0 || j === rows);

    grid[j][i] = [/*V && H*/0, +(H && i > 0), +(H && i < cols), +(V && j > 0), +(V && j < rows)];

    //console.log(i, j, grid[j][i].join(""));

  }

}

​

let t1 = 1, t2 = 1, t3 = 1, t4 = 1;

let laserPath = [];

​

let placeRotation = false, screenFlipped = false;

​

let canvas;

​

function setup(){

  canvas = createCanvas(_width, _height);

  //console.log(canvas);

  canvas.elt.onmousewheel = ()=>{

    placeRotation = !placeRotation;

  };

  canvas.elt.onclick = _mousePressed;

}

​

function draw() {

  background(220);

  //1 pixel margin

  scale(Math.max(width, height) / Math.max(width + 2, height + 2));

  translate(1, 1);

  if(screenFlipped) applyMatrix(0, 1, 1, 0, 0, 0);

  //draw Segments

  fill(0); stroke(0); strokeWeight(2);

  for(let j = 0; j <= rows; j++){

    for(let i = 0; i <= cols; i++){

      const seg = grid[j][i], x = i*cw, y = j*rw;

      let flag = true;

      if(seg[0]) ellipse(x,y,cw/12,rw/12), flag = false;

      if(seg[1]) line(x, y, x-cw, y   ), flag = false;

      if(seg[2]) flag = false;

      if(seg[3]) line(x, y, x,    y-rw), flag = false;

      if(seg[4]) flag = false;

      else if(flag){

        fill(200); stroke(200); strokeWeight(1);

        ellipse(x,y,cw/12,rw/12);

        fill(0); stroke(0); strokeWeight(2);

      }

    }

  }

  //draw L.A.S.E.R. Path

  if(laserPath.length){

    fill(255,25,25); stroke(255,25,25); strokeWeight(1);

    for(let ind = 0; ind < laserPath.length - 1; ind++){

      const A = laserPath[ind], B = laserPath[ind+1];

      line(A[0]*cw, A[1]*rw, B[0]*cw, B[1]*rw);

      if(A[4]) ellipse(A[0]*cw, A[1]*rw, cw/12, rw/12);

    }

  }else fill(200, 25, 25);

  //draw L.A.S.E.R. Pointer

  noStroke();

  triangle(-1, -1, cw, -1, -1, rw);

  stroke(200, 25, 25); strokeWeight(2);

  line(cw, -1, -1, rw);

  //draw Players

  fill(0); stroke(0); strokeWeight(0.5);

  ellipse(cw,height-rw,cw2,rw2);

  fill(255); //stroke(0); strokeWeight(0.5);

  ellipse(width-cw,rw,cw2,rw2);

  //draw Triangles

  fill(250); strokeWeight(1);

  if(t1) triangle(width2,height2,width2,height2-rw,width2-cw,height2); // /|

  if(t2) triangle(width2,height2,width2,height2-rw,width2+cw,height2); // |\

  if(t3) triangle(width2,height2,width2,height2+rw,width2-cw,height2); // |/

  if(t4) triangle(width2,height2,width2,height2+rw,width2+cw,height2); // \|

  //draw Preview segment

  if(turn === -1 || mouseX <= cw || mouseX >= width - cw || mouseY <= rw || mouseY >= height - rw) return;

  resetMatrix();

  fill(10,10,150); stroke(10,10,150); strokeWeight(2);

  const mi = round(mouseX / cw), mj = round(mouseY / rw), mx = mi*cw, my = mj*rw;

  if(mi < 1 || mi >= cols || mj < 1 || mj >= rows) return;

  if(placeRotation){

    ellipse(mx, my - rw, cw/12, rw/12);

    ellipse(mx, my + rw, cw/12, rw/12);

    line(mx, my - rw, mx, my + rw);

  }else{

    ellipse(mx - cw, my, cw/12, rw/12);

    ellipse(mx + cw, my, cw/12, rw/12);

    line(mx - cw, my, mx + cw, my);

  }

}

​

function _mousePressed(){

  if(turn === -1) return;

  const mi = round(mouseX / cw), mj = round(mouseY / rw);

  if(mi < 1 || mi >= cols || mj < 1 || mj >= rows) return false;

  if(screenFlipped) placeSegment(mj, mi, !placeRotation);

  else placeSegment(mi, mj, placeRotation);

}

​

function placeSegment(i, j, rot){

  //console.log(`placeSegment(${i},${j},${rot})`);

  const a = 2*rot + 1;

  let seg1, seg2 = grid[j][i], seg3;

  if(rot) seg1 = grid[j-1][i], seg3 = grid[j+1][i];

  else seg1 = grid[j][i-1], seg3 = grid[j][i+1];

  //console.log(`${seg1}\t${seg2}\t${seg3}`);

  seg1[a+1] = seg2[a] = seg2[a+1] = seg3[a] = 1;

  seg1[0] = +(seg1[1] + seg1[2] + seg1[3] + seg1[4] < 2);

  seg2[0] = 0;

  seg3[0] = +(seg3[1] + seg3[2] + seg3[3] + seg3[4] < 2);

  /*seg1[a+1] = seg2[a] = seg2[a+1] = seg3[a] = 1;

  setEndpoint(seg1), setEndpoint(seg2), setEndpoint(seg3);*/

  //console.log(`${seg1}\t${seg2}\t${seg3}`);

}

​

/*function setEndpoint(seg){

  const X = seg[1] + seg[2], Y = seg[3] + seg[4];

  seg[0] = (X + Y + X*Y) % 2;

}*/

​

function bounceLaser(){

  let i = 0, j = 0, dirI = 1, dirJ = 1;

  laserPath = [i,j,dirI,dirJ,false];

  while(true){

    i += dirI, j += dirJ;

    const seg = grid[j][i], X = seg[1] + seg[2], Y = seg[3] + seg[4];

    let _break = false;

    //Bounce l.a.s.e.r.

    const prev = laserPath[laserPath.length - 1];

    let _point = prev[2] != dirI || prev[3] != dirJ;

    for(let ind = 0; ind < laserPath.length; ind++){

      const state = laserPath[ind]

      if(state[0] === i && state[1] === j){

        if(state[2] === dirI && state[3] === dirJ){

          _break = true;

          break;

        }//_point = true;

      }

    }laserPath.push([i,j,dirI,dirJ,_point]);

    if(_break) break;

  }

  console.log(laserPath);

}