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

const setCanvas = () => {
      
  const canvas = document.getElementById('roughcanvas');
  const canvasW = canvas.width;
  const canvasH = canvas.height;
  const roughCanvas = rough.canvas(canvas);

  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]);
      }
       
      
      
      polygons.forEach((polygon) => {
            const polygonX = getX(polygon);
            const polygonY = getY(polygon);
            const xmin = Math.min( ...polygonX );
            const xmax = Math.max( ...polygonX );
            const ymin = Math.min( ...polygonY );
            const ymax = Math.max( ...polygonY );
            const dx = (xmin+xmax) / 2;
            const dy = (ymin+ymax) / 2;
            roughCanvas.circle(dx, dy, 30, {fill: 'blue'});
const canvasDivisions = canvasW / 3;
const canvasMiddle = canvasDivisions + canvasDivisions;
const pointPlacement = (dx < canvasDivisions) ? "start" : (dx < canvasMiddle) ? "middle" : "end";
const styling = {};
styling.fill = (pointPlacement === "middle") ? "#8aea92" : "#80ada0";
styling.hachureAngle = (pointPlacement === "middle") ? 180 : 90;
styling.hachureGap = (pointPlacement === "middle") ? 10 : 5;

        roughCanvas.polygon(
     polygon, styling);
 })
   
  }
setCanvas();