Acúmulo - 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 = ["#EBC14D","#E78A5D","#C1497D","#8E5AD8","#578BDF"];
​
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);
  
  noLoop();
  strokeWeight(GRID_SIZE/8);
  strokeJoin(ROUND);
  
  //init colors
  colors.forEach((str, i) => colors[i] = color(str));
  colors.forEach(c => c.setAlpha(30))
  
  //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 i = 0; i < 10; i++){
    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})
    }
  }
  for(var i = 0; i < 100; i++){
    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;
    })
  }
  
  updateGrid();
}
​
function updateGrid(){
  for(var i = 0; i < 100; i++){
    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/3));
  
  //add colors
  grid.shapes.forEach(shape => {
    if(shape.number >= 0)
      shape.color = colors[shape.number];
  })
}
​
function draw() {
  background('#fff9e8');
  
  for(var i = 0; i < 20; i++){
    updateGrid();
    //draw shapes
    noStroke();
    grid.shapes.forEach(shape => {
      if(shape.number >= 0) {
        //stroke('#4F4E4E');
        fill(shape.color);
        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('#4F4E4E');
    //  circle((w.easeX + 0.5) * GRID_SIZE, (w.easeY + 0.5) * GRID_SIZE, GRID_SIZE/2);
    // })
  }
}
​
function mousePressed(){
  draw();
}
​
function keyPressed(){
  draw();
}