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});
     const roughJSTiling2 = new TilerTheCreator({width: canvasW, height: canvasH,
                                        scale_factor: 30, name: "rough2", type: 7});
      
    roughJSTiling.readyToTile();
    roughJSTiling2.readyToTile();
const polygons = roughJSTiling.getPolygonsFromRegion();
 const polygons2 = roughJSTiling2.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;
           
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);
 });
 polygons2.forEach((polygon) => {
            roughCanvas.polygon(
                  polygon, {fill: 'red'}
            );
        });
   
 }
setCanvas();