Circuito Caminhante 3 - OpenProcessing

mySketch
grid
xxxxxxxxxx
 
/******************
Code by Vamoss
Original code link:
https://openprocessing.org/sketch/2213120
​
Author links:
http://vamoss.com.br
http://twitter.com/vamoss
http://github.com/vamoss
******************/
​
var colors = ["#FFC30F", "#FF5733", "#1AC7C4"];
​
const GRID_UNITS = 100;
const GRID_SIZE = Math.min(innerWidth, innerHeight) / GRID_UNITS;
var grid, values;
const number_of_types = colors.length;
var itensPerRow;
​
var walkers = [];
​
function setup() {
  colors.forEach((str, i) => colors[i] = color(str));
  
  createCanvas(GRID_SIZE*GRID_UNITS, GRID_SIZE*GRID_UNITS);
  
  values = [];
  for(var y = 0; y < height-2; y += GRID_SIZE) {
    for(var x = 0; x < width-2; x += GRID_SIZE) {
      values.push(floor(random(number_of_types)))
    }
  }
  
  itensPerRow = sqrt(values.length);
  for(var i = 0; i < number_of_types; i++){
    for(var j = 0; j < 10; j++){
      walkers.push({
        x: floor(random(itensPerRow)),
        y: floor(random(itensPerRow)),
        number: i
      })
    }
  }
  
  startGrid();
}
​
function startGrid(){
  walkers.forEach(w => {
    w.x = constrain(w.x + random([-1, 0, 1]), 0, itensPerRow-1);
    w.y = constrain(w.y + random([-1, 0, 1]), 0, itensPerRow-1);
    values[w.y * itensPerRow + w.x] = w.number;
  })
  
  grid = new Grid(GRID_SIZE, width, height, 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(0);
  
  startGrid();
  
  noFill();
  strokeWeight(GRID_SIZE/8);
  strokeJoin(ROUND);
  grid.shapes.forEach(shape => {
    if(shape.number >= 0) {
      stroke(shape.color);
      beginShape();
      shape.forEach(coord => vertex(coord.x, coord.y));
      endShape(CLOSE);
    }
  });
  
  
  //draw values
  textSize(GRID_SIZE/2);
  textAlign(CENTER, CENTER);
  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);
  })
  
  noFill();
  walkers.forEach(w => {
    var x = w.x + 0.5;
    var y = w.y + 0.5;
    stroke(colors[w.number]);
    circle(x * GRID_SIZE, y * GRID_SIZE, GRID_SIZE/2);
  })
  
  /*
  //draw values
  textSize(GRID_SIZE/2);
  textAlign(CENTER, CENTER);
  fill(255);
  noStroke();
  values.forEach((v, index) => {
    var x = index % itensPerRow + 0.5;
    var y = floor(index / itensPerRow) + 0.5;
    text(v, x * GRID_SIZE, y * GRID_SIZE);
  })
  */
}
​
/**
 * lerp color from multiple color array
 * param {Integer} [t] lerp factor from 0 to 1
 * param {Array} [[color, color]] colors to lerp, minimum 2 colors in array
 */
function lerpColors(t, colors)
{
  let i = Math.floor(t*(colors.length-1));
  if(i < 0) return colors[0];
  if(i >= colors.length-1) return colors[colors.length-1];
​
  let percent = (t - i / (colors.length-1)) * (colors.length-1);
  return color(
    colors[i]._getRed() + percent*(colors[i+1]._getRed()-colors[i]._getRed()),
    colors[i]._getGreen() + percent*(colors[i+1]._getGreen()-colors[i]._getGreen()),
    colors[i]._getBlue() + percent*(colors[i+1]._getBlue()-colors[i]._getBlue())
  )
}
​
function mousePressed(){
    walkers.push({
      x: floor(mouseX/width*itensPerRow),
      y: floor(mouseY/height*itensPerRow),
      number: 0
    })
}
​
function mouseDragged(){
    walkers.push({
      x: floor(mouseX/width*itensPerRow),
      y: floor(mouseY/height*itensPerRow),
      number: 0
    })
}
​
function keyPressed(){
  startGrid();
}