Grid Composition 2

/******************

Code by Vamoss

Original code link:

https://openprocessing.org/sketch/2201028

​

Author links:

http://vamoss.com.br

http://twitter.com/vamoss

http://github.com/vamoss

******************/

​

var grid, groups, shapes;

var GRID_SIZE;//defined by UI

var NUMBER_OF_TYPES;//defined by UI

var itensPerRow;

var gridSizeStep = 10;

​

//ui

var sliderColumnWidth;

var sliderNumberOfTypes;

var checkboxContour;

var checkboxVertices;

var checkboxDebug;

​

function setup() {

  //ui

  sliderColumnWidth = createSlider(8, 80, 20, 1);

  sliderColumnWidth.position(10, 10);

  sliderColumnWidth.size(80);

  sliderColumnWidth.input(() => {startGrid(); draw()});

  sliderNumberOfTypes = createSlider(2, 10, 5, 1);

  sliderNumberOfTypes.position(10, 30);

  sliderNumberOfTypes.size(80);

  sliderNumberOfTypes.input(() => {startGrid(); draw()});

  checkboxContour = createCheckbox("Draw Contour", true);

  checkboxContour.position(10, 50);

  checkboxContour.input(() => {draw()});

  checkboxVertices = createCheckbox("Draw Vertices");

  checkboxVertices.position(10, 70);

  checkboxVertices.input(() => {draw()});

  checkboxDebug = createCheckbox("Draw Groups");

  checkboxDebug.position(10, 90);

  checkboxDebug.input(() => {draw()});

  var size = min(windowWidth, windowHeight);

  size -= size%(size/sliderColumnWidth.value());

  createCanvas(size, size);

  noLoop();

  startGrid();

}

​

function draw() {

  background(255);

  if(checkboxDebug.checked()) {

    //draw all groups

    noStroke();

    groups.forEach(group => {

      var number = group[0].number;

      if(number == 0){

        fill(255);

      }else{

        fill(map(number, 0, NUMBER_OF_TYPES, 50, 150));

      }

      group.forEach(g => {

        square(g.x, g.y, GRID_SIZE);

      })

    })

  }

  //draw shapes contours

  if(checkboxContour.checked()){

    stroke(255, 0, 0);

    strokeWeight(map(GRID_SIZE, 10, 90, 1, 3));

  }else{

    noStroke();

  }

  shapes.forEach(shape => {

    fill(random(50, 255), random(50, 255), random(50, 255), 150);

    beginShape();

    shape.forEach(coord => vertex(coord.x, coord.y))

    endShape(CLOSE);

  })

  //draw shape vertex

  if(checkboxVertices.checked()){

    var circleSize = map(GRID_SIZE, 10, 90, 5, 10);

    fill(255, 0, 0);

    noStroke();

    shapes.forEach(shape => {

      shape.forEach(coord => {

        circle(coord.x, coord.y, circleSize);

      });

    })

  }

  if(checkboxDebug.checked()) {

    //draw indices

    textSize(GRID_SIZE/2);

    textAlign(CENTER, CENTER);

    fill(0);

    noStroke();

    grid.forEach(g => {

      text(g.number, g.x + GRID_SIZE/2, g.y + GRID_SIZE/2);

    })

  }

}

​

function startGrid(){

  GRID_SIZE = width/sliderColumnWidth.value();

  NUMBER_OF_TYPES = sliderNumberOfTypes.value();

  //create the grid

  grid = [];

  var index = 0;

  for(var y = 0; y < height-2; y += GRID_SIZE) {

    for(var x = 0; x < width-2; x += GRID_SIZE) {

      grid.push({

        x, y, index,

        number: floor(random(NUMBER_OF_TYPES)),

        used: false//to find neighbors

      })

      index++;

    }

  }

  itensPerRow = sqrt(grid.length);

  //group itens by same number type

  groups = [];

  grid.forEach((g, index) => {

    if(!g.used){

      g.used = true;

      var neighbors = [g];

      findNeighbors(g.number, index, neighbors);

      groups.push(neighbors);

    }

  });

  //create shape with perimeter coordinates

  shapes = [];

  groups.forEach(group => {

    //convert group of squares to countour shape

    //idea adapted from: https://stackoverflow.com/questions/20997254/java-merge-adiacent-rectangles-into-a-polygon?rq=1

​

    //created edges

    var edges = [];

    group.forEach(g => {

      edges.push({x1: g.x, y1: g.y, x2: g.x + GRID_SIZE, y2: g.y});//top

      edges.push({x1: g.x + GRID_SIZE, y1: g.y, x2: g.x + GRID_SIZE, y2: g.y + GRID_SIZE});//left

      edges.push({x1: g.x + GRID_SIZE, y1: g.y + GRID_SIZE, x2: g.x, y2: g.y + GRID_SIZE});//bottom

      edges.push({x1: g.x, y1: g.y + GRID_SIZE, x2: g.x, y2: g.y});//right

    });

​

    //remove duplicated edges

    for(var i = edges.length-1; i >= 0; i--){

      const edge = edges[i];

      if(edge){

        const duplicatedIndex = edges.findIndex((edge2, i2) => 

          i !== i2 &&

          ((edge.x1 === edge2.x1 && edge.y1 === edge2.y1 && edge.x2 === edge2.x2 && edge.y2 === edge2.y2) ||

           (edge.x1 === edge2.x2 && edge.y1 === edge2.y2 && edge.x2 === edge2.x1 && edge.y2 === edge2.y1))

        );

        if(duplicatedIndex >= 0){

          edges.splice(Math.max(i, duplicatedIndex), 1);

          edges.splice(Math.min(i, duplicatedIndex), 1);

        }

      }

    }

​

    //connect edges

    var startEdge = edges.splice(0, 1)[0];

    var shape = [{x: startEdge.x1, y: startEdge.y1}];

    createShapeFromEdges(shape, edges, startEdge.x2, startEdge.y2);

​

    shapes.push(shape);

  })

  //keep only corners vertex

  shapes = shapes.map(shape => simplifyPolygon(shape));

  //shrink polygon

  shapes = shapes.map(shape => shrinkPolygon(shape, GRID_SIZE/3));

}

​

function simplifyPolygon(polygon) {

    const newPolygon = [];

​

    newPolygon.push(polygon[0]);

​

    for (let i = 1; i < polygon.length; i++) {

        const prevPoint = polygon[i - 1];

        const currentPoint = polygon[i];

        const nextPoint = i === polygon.length - 1 ? polygon[0] : polygon[i + 1];

​

        const angle1 = Math.atan2(currentPoint.y - prevPoint.y, currentPoint.x - prevPoint.x);

        const angle2 = Math.atan2(nextPoint.y - currentPoint.y, nextPoint.x - currentPoint.x);

​

        // If the angle changes, it's a corner, so include it

        if (angle1 !== angle2) {

            newPolygon.push(currentPoint);

        }

    }

​

    return newPolygon;

}

​

function shrinkPolygon(polygon, distance) {

    const shrinkedPolygon = [];

​

    for (let i = 0; i < polygon.length; i++) {

        const p1 = polygon[i];

        const p2 = polygon[(i + 1) % polygon.length];

        const p3 = polygon[(i + 2) % polygon.length];

​

        const dx1 = p2.x - p1.x;

        const dy1 = p2.y - p1.y;

        const length1 = Math.sqrt(dx1 * dx1 + dy1 * dy1);

        const nx1 = -dy1 / length1;

        const ny1 = dx1 / length1;

​

        const dx2 = p3.x - p2.x;

        const dy2 = p3.y - p2.y;

        const length2 = Math.sqrt(dx2 * dx2 + dy2 * dy2);

        const nx2 = -dy2 / length2;

        const ny2 = dx2 / length2;

​

        const miterX = p2.x + nx1 + nx2;

        const miterY = p2.y + ny1 + ny2;

​

        const miterLength = distance / Math.sqrt((nx1 + nx2) ** 2 + (ny1 + ny2) ** 2);

​

        const offsetX = miterLength * (nx1 + nx2);

        const offsetY = miterLength * (ny1 + ny2);

​

        const newX = miterX + offsetX;

        const newY = miterY + offsetY;

​

        shrinkedPolygon.push({ x: newX, y: newY });

    }

​

    return shrinkedPolygon;

}

​

function createShapeFromEdges(shape, edges, x, y){

  for(var i = 0; i < edges.length; i++){

    const edge = edges[i];

    if(edge.x1 === x && edge.y1 === y){

      shape.push({x: edge.x1, y: edge.y1});

      edges.splice(i, 1);

      return createShapeFromEdges(shape, edges, edge.x2, edge.y2);

    }else if(edge.x2 === x && edge.y2 === y) {

      shape.push({x: edge.x2, y: edge.y2});

      edges.splice(i, 1);

      return createShapeFromEdges(shape, edges, edge.x1, edge.y1);

    }

  }

}

​

//find neighbors with same number

function findNeighbors(number, index, neighbors){

  //left

  if(index % itensPerRow != 0)

    getIndex(number, index - 1, neighbors);

  //right

  if(index % itensPerRow != itensPerRow-1)

    getIndex(number, index + 1, neighbors);

  //top

  getIndex(number, index - itensPerRow, neighbors);

  //bottom

  getIndex(number, index + itensPerRow, neighbors);

}

​

//validate if index exits, is not used and has the same number

function getIndex(number, index, neighbors){

  if(index >= 0 && index < grid.length){

    if(!grid[index].used && grid[index].number == number){

      grid[index].used = true;

      neighbors.push(grid[index]);

      findNeighbors(number, index, neighbors)

    }

  }

  return null;

}

​

function keyPressed(){

  startGrid();

  draw();

}