Collective Walkers - OpenProcessing

mySketch
grid
xxxxxxxxxx
 
/******************
Code by Vamoss
Original code link:
https://openprocessing.org/sketch/2215522
​
Author links:
http://vamoss.com.br
http://twitter.com/vamoss
http://github.com/vamoss
******************/
​
var colors = ["#ff8ba6", "#db3b60", "#0b7ca9"];
var colors2;
​
const GRID_UNITS = 20;
const GRID_SIZE = Math.min(innerWidth, innerHeight) / GRID_UNITS;
var grid, values;
const number_of_types = colors.length;
var itensPerRow, itensPerColumn;
​
var walkers = [];
​
function setup() {
  describe("An abstract art piece with colorful shapes that move and change dynamically. It utilizes a grid-based system where each grid cell can have one of several colors. As the program runs, colored shapes evolve across the canvas, creating an ever-changing visual experience.");
  
  createCanvas(windowWidth, windowHeight);
  
  strokeWeight(GRID_SIZE/8);
  strokeJoin(ROUND);
  
  //init colors
  colors.forEach((str, i) => colors[i] = color(str));
  colors2 = colors.map(c => {
    return color(
      c._getRed() * 1.2,
      c._getGreen() * 1.2,
      c._getBlue() * 1.2
    )
  })
  
  //create grid values
  values = [];
  itensPerColumn = 0;
  for(var y = 0; y < height-2; y += GRID_SIZE) {
    itensPerColumn++;
    itensPerRow = 0;
    for(var x = 0; x < width-2; x += GRID_SIZE) {
      itensPerRow++;
      values.push(floor(random(number_of_types)))
    }
  }
  
  //init walkers
  for(var number = 0; number < number_of_types; number++){
    const x = floor(random(itensPerRow));
    const y = floor(random(itensPerColumn));
    walkers.push({x, y, number, easeX: x, easeY: y})
  }
  
  updateGrid();
}
​
function updateGrid(){
  walkers.forEach(w => {
    if(random([true, false]))
      w.x = constrain(w.x + random([-1, 1]), 0, itensPerRow-1);
    else
      w.y = constrain(w.y + random([-1, 1]), 0, itensPerColumn-1);
    values[w.y * itensPerRow + w.x] = w.number;
  })
  
  grid = new Grid(GRID_SIZE, width-2, height-2, number_of_types, values);
  
  //shrink polygon
  grid.shapes = grid.shapes.map(shape => grid.shrinkPolygon(shape, GRID_SIZE/4));
  
  //add colors
  grid.shapes.forEach(shape => {
    if(shape.number >= 0)
      shape.color = colors[shape.number];
      shape.color2 = colors2[shape.number];
  })
}
​
function draw() {
  background("#fff");
  
  if(frameCount%10==0)
    updateGrid();
  
  //draw shapes
  grid.shapes.forEach(shape => {
    if(shape.number >= 0) {
      stroke(shape.color);
      fill(shape.color2);
      beginShape();
      shape.forEach(coord => vertex(coord.x, coord.y));
      endShape(CLOSE);
    }
  });
  
  //draw dots
  noStroke();
  values.forEach((v, index) => {
    var x = index % itensPerRow + 0.5;
    var y = floor(index / itensPerRow) + 0.5;
    fill(colors[v]);
    circle(x * GRID_SIZE, y * GRID_SIZE, GRID_SIZE/6);
  })
  
  //draw walkers
  noFill();
  walkers.forEach((w, i) => {
    w.easeX += (w.x - w.easeX) * 0.3;
    w.easeY += (w.y - w.easeY) * 0.3;
    stroke(colors[w.number]);
    circle((w.easeX + 0.5) * GRID_SIZE, (w.easeY + 0.5) * GRID_SIZE, GRID_SIZE/2);
  })
}
​
function mousePressed(){
  const x = floor(mouseX/width*itensPerRow);
  const y = floor(mouseY/height*itensPerColumn);
  walkers.push({x, y, number: floor(random(number_of_types)), easeX: x, easeY: y});
  updateGrid();
}
​
function keyPressed(){
  updateGrid();
}