// https://en.wikipedia.org/wiki/Truchet_tiles

// and: https://arearugscarpet.blogspot.com/2014/04/the-curse-of-truchets-tiles.html?m=1

​

const DIRS = '↑→↓←';

let rotations = {};

let tiles=[];

let currentTile = 0;

​

let symmetry = [0,1,

                3,2];

​

function preload(){

  tiles.push( loadImage('tile1.jpg') );

  tiles.push( loadImage('tile2.jpg') );

  tiles.push( loadImage('tile3.jpg') );

  tiles.push( loadImage('tile4.jpg') );

}

​

function setup() {

  createCanvas(400, 400);

  rotations[ DIRS[0] ] =   0;

  rotations[ DIRS[1] ] =  90;

  rotations[ DIRS[2] ] = 180;

  rotations[ DIRS[3] ] = 270;

  angleMode(DEGREES);

  imageMode(CENTER);

  let bUp = createButton(DIRS[symmetry[0]]);

  bUp.position(240,2);

  bUp.mousePressed( ()=> {

    symmetry[0] = (symmetry[0]+1)%4;

    bUp.html(DIRS[symmetry[0]]);

  });  

​

  let bR = createButton(DIRS[symmetry[1]]);

  bR.position(270,2);

  bR.mousePressed( ()=> {

    symmetry[1] = (symmetry[1]+1)%4;

    bR.html(DIRS[symmetry[1]]);

  });  

  let bD = createButton(DIRS[symmetry[2]]);

  bD.position(240,30);

  bD.mousePressed( ()=> {

    symmetry[2] = (symmetry[2]+1)%4;

    bD.html(DIRS[symmetry[2]]);

  });  

​

  let bL = createButton(DIRS[symmetry[3]]);

  bL.position(270,30);

  bL.mousePressed( ()=> {

    symmetry[3] = (symmetry[3]+1)%4;

    bL.html(DIRS[symmetry[3]]);

  });  

​

  let bTile = createImg(`tile${currentTile+1}.jpg`,'tile');

  bTile.style("border","3px solid black");

  bTile.position(20,10);

  bTile.size(30,30);

  bTile.mousePressed( ()=> {

    currentTile = (currentTile+1)%4;

    //console.log(bTile.elt.src, currentTile);

    bTile.elt.src = `tile${currentTile+1}.jpg`;

  });  

}

​

function draw() {

  background('yellow');

  let K = 30;

  let sI,sJ;

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

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

      sI = i%2;

      sJ = j%2;

      push();

        translate(35+i*K,90+j*K);

        rotate(rotations[ DIRS[ symmetry[sI+2*sJ] ] ]);

        image(tiles[currentTile],0,0,K,K);

      pop();

    }    

  }

}