import { TilerTheCreator } from 'https://codepen.io/bryanrasmussen/pen/xxwRKOK.js';

const setCanvas = () => {
      const roughCanvas = rough.canvas(document.getElementById('roughcanvas'));
      const roughJSTiling = new TilerTheCreator({width: window.innerWidth, height: window.innerHeight, scale_factor: 50, type: 77});
      roughJSTiling.readyToTile();
      const polygons = roughJSTiling.getPolygonsFromRegion();
      const getX = (polygon) => {
            return polygon.map(p => p[0]);
      } 
      const getY = (polygon) => {
            return polygon.map(p => p[1]);
      }
  const firstPolygon = polygons.shift();
  const firstX = getX(firstPolygon);
  const firstY = getY(firstPolygon);
  const fXmin = Math.min( ...firstX );
  const fXmax = Math.max( ...firstX );
  const fYmin = Math.min( ...firstY);
  const fYmax = Math.max( ...firstY );
  const fdx = (fXmin+fXmax) / 2;
  const fdy = (fYmin+fYmax) / 2;
  const xDist = fdx - fXmin;
  const yDist = fdy - fYmin;
  roughCanvas.circle(fdx, fdy, 30,       {fill: 'blue'});

  roughCanvas.polygon(firstPolygon);
  polygons.forEach((polygon) => {
      const polygonX = getX(polygon);
      const polygonY = getY(polygon);
      const xmin = Math.min( ...polygonX );
      const ymin = Math.min( ...polygonY );
            
      const dx = xmin + xDist;
      const dy = ymin + yDist;
      roughCanvas.circle(dx, dy, 30,         {fill: 'blue'});
      roughCanvas.polygon(polygon);
  })
   
  }
setCanvas();