Onda - OpenProcessing

mySketch
xxxxxxxxxx
 
/******************
Code by Vamoss
Original code link:
https://openprocessing.org/sketch/2201268
​
Author links:
http://vamoss.com.br
http://twitter.com/vamoss
http://github.com/vamoss
******************/
​
var colors = ["#FFC30F", "#FF5733", "#1AC7C4"];
​
var grid, groups, shapes;
var GRID_SIZE = 10;
var itensPerRow;
​
function setup() {
  colors.forEach((str, i) => colors[i] = color(str));
  var size = min(windowWidth, windowHeight);
  size -= size%(size/GRID_SIZE);
  createCanvas(size, size);
}
​
function draw() {
  background(255);
  
  startGrid();
  
  strokeWeight(1);
  groups.forEach(group => {
    var number = group[0].number;
    stroke(colors[number]);
    fill(colors[number]);
    group.forEach(g => {
      square(g.x, g.y, GRID_SIZE);
    })
  })
  
  //draw shapes contours
  stroke(0, 0, 0);
  strokeWeight(map(GRID_SIZE, 10, 90, 4, 18));
  noFill();
  shapes.forEach(shape => {
    beginShape();
    shape.forEach(coord => vertex(coord.x, coord.y))
    endShape(CLOSE);
  })
}
​
function startGrid(){
  //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) {
      var number = round((sin(sqrt((x-width/2) * (x-width/2) + (y-height/2) * (y-height/2))/20 - frameCount/5) + 1)/2 * (colors.length-1));
      grid.push({
        x, y, index,
        number,
        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);
  })
}
​
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();
}