Circuitos - OpenProcessing

mySketch
grid
xxxxxxxxxx
 
/******************
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 colors = ["#FFC30F", "#581845", "#900C3F", "#C70039", "#FF5733", "#1AC7C4"];
​
const GRID_UNITS = 6;
const GRID_SIZE = Math.min(innerWidth, innerHeight) / GRID_UNITS;
var grid, shapes;
​
//ui
var sliderNumberOfTypes;
​
function setup() {
  colors.forEach((str, i) => colors[i] = color(str));
  
  sliderNumberOfTypes = createSlider(2, 10, 2, 1);
  sliderNumberOfTypes.position(10, 30);
  sliderNumberOfTypes.size(80);
  sliderNumberOfTypes.input(() => startGrid());
  
  createCanvas(GRID_SIZE*GRID_UNITS, GRID_SIZE*GRID_UNITS);
  
  startGrid();
}
​
function startGrid(){
  grid = new Grid(GRID_SIZE, width, height, sliderNumberOfTypes.value());
  
  //shrink polygon
  shapes = grid.shapes.map(shape => grid.shrinkPolygon(shape, GRID_SIZE/8));
  shapes = [...shapes, ...grid.shapes.map(shape => grid.shrinkPolygon(shape, GRID_SIZE/8*2))];
  shapes = [...shapes, ...grid.shapes.map(shape => grid.shrinkPolygon(shape, GRID_SIZE/8*3))];
  shapes = [...shapes, ...grid.shapes.map(shape => grid.shrinkPolygon(shape, GRID_SIZE/8*4))];
  
  //add colors
  shapes.forEach(shape => {
    shape.colors = [];
    for(var i = 0; i < shape.length-1; i++){
      shape.colors.push(random(colors));
    }
    shape.colors.push(shape.colors[0]);
  })
}
​
function draw() {
  background(0);
  
  const RESOLUTION = 40;
  strokeWeight(GRID_SIZE/16);
  shapes.forEach(shape => {
    for(var i = 1; i <= shape.length; i++){
      var coord1 = shape[i-1];
      var coord2 = shape[i%shape.length];
      for(var j = 1; j <= RESOLUTION; j++){
        var x1 = lerp(coord1.x, coord2.x, (j-1)/RESOLUTION);
        var y1 = lerp(coord1.y, coord2.y, (j-1)/RESOLUTION);
        var x2 = lerp(coord1.x, coord2.x, j/RESOLUTION);
        var y2 = lerp(coord1.y, coord2.y, j/RESOLUTION);
        var pct = (((i-1)*RESOLUTION+(j-1))/(shape.length*RESOLUTION));
        pct = (pct+100-(frameCount/100)%100)%1;
        var c = lerpColors(pct, shape.colors);
        stroke(c);
        line(x1, y1, x2, y2)
      }
    }
  });
}
​
/**
 * 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 keyPressed(){
  startGrid();
}