let gfx;

const miradors = [

    "#020202",

    "#ff6936",

    "#fddc3f",

    "#0075ca",

    "#03bb70",

];

const powerpuff = [

    "#201010",

    "#5dece1",

    "#ea50c4",

    "#47e752",

    "#130d0d",

];

const butterfly = [

    "#191e36",

    "#f40104",

    "#f6c0b3",

    "#99673a",

    "#f0f1f4",

];

const cc239 = [

    "#e0eff0",

    "#e3dd34",

    "#78496b",

    "#f0527f",

    "#a7e0e2"

];

​

const monochrome = [

    // "#000000",

    "#111111",

    "#333333",

    "#666666",

    "#999999",

    "#cccccc",

    "#eeeeee",

    "#ffffff",

];

​

const jung_hippo = [

    "#ffffff",

    "#fe7bac",

    "#ff921e",

    "#3da8f5",

    "#7ac943",

];

​

const dt02 = [

    // "#000000", // added

    "#111111",

    "#eee3d3",

    "#302956",

    "#f3c51a",

];

​

const frozen_rose = [

    "#f2e8e4",

    "#2a358f",

    "#e9697b",

    "#1b164d",

    "#f6d996",

];

​

const foxshelter = [

    "#dddddd",

    "#ff3931",

    "#007861",

    "#311f27",

    "#bab9a4",

];

​

const revolucion = [

    "#2d1922",

    "#ed555d",

    "#fffcc9",

    "#41b797",

    "#eda126",

    "#7b5770",

];

​

const cc245 = [

    "#f6f4ed",

    "#0d4a4e",

    "#ff947b",

    "#ead3a2",

    "#5284ab",

];

​

​

let mode;

let palettes = [miradors, powerpuff,monochrome];//, butterfly, cc239, monochrome, jung_hippo, dt02, frozen_rose, foxshelter, revolucion, cc245];

let palette;

​

function preload() {

  font = loadFont("Pixuf.ttf");

}

​

function setup() {

  createCanvas(1000, 1000);//, SVG);

  cellsize = width * 0.05;

  // noiseDetail(8, 0.75);

  let noiseScale = 0.1;

  gfx = createGraphics(width, height);

​

  let numcells = int(width / cellsize);

  let cellscale = int(width / numcells);

​

  palette  = random(palettes);

  background(220);

  textFont(font);

  textSize(cellsize/2);

  textAlign(CENTER,CENTER);

  let grid = [];

  let hcs = cellsize / 2;

  noFill();

  stroke(0);

  for (let r = 0; r < numcells; r++) {

    grid[r] = [];

    for (let c = 0; c < numcells; c++) {

      let n = noise(c * noiseScale, r * noiseScale);

      let idx = int(map(n,0.0,1.0,0,palette.length-1));

      grid[r][c] = {

        a:map(n, 0.0, 1.0, 0, TWO_PI),

        // a:Math.ceil(

        //   (map(n, 0.0, 1.0, 0.0, TWO_PI) * (PI / 4)) / (PI / 4)

        // ),

        c:palette[idx],

      };

      console.log(`r:[${r}], c:[${c}], n:[${n}], a:[${grid[r][c].a}]`)

      // grid[r][c] = {

      //   a:Math.ceil(

      //     (map(n, 0.0, 1.0, 0.0, TWO_PI) * (PI / 4)) / (PI / 4)

      //   ),

      //   c:palette[idx],

      // };

​

      // angle: Math.ceil(

      //         (map(n, 0.0, 1.0, 0.0, TWO_PI) * (PI / 4)) / (PI / 4)

      //       ),

      // draw background

      let _y = r * cellsize + hcs;

        let _x = c * cellsize + hcs;

      if (r < numcells * 0.25) { // draw numbers

        textFont(font)

        text(n.toFixed(2), _x, _y);

        // text(n.toFixed(2), _x, _y);

      } else if (r < numcells * 0.4) { // overlay both

        stroke(0,0,0,map(r, numcells*0.25,numcells*0.4,255,10));

        textFont(font)

        text(n.toFixed(2), _x, _y);

        push();

        stroke(255,0,255,map(r, numcells*0.25,numcells*0.4,10,255));

        translate(_x,_y);

        rotate(grid[r][c].a);

        textFont("Arial");

        text("→", 0,0);

        pop();

      } else if (r < numcells * 0.8) { // draw arrows

        push();

        stroke(255,0,255,map(r, numcells*0.25,numcells*0.8,255,10));

        translate(_x,_y);

        rotate(grid[r][c].a);

        textFont("Arial");

        text("→", 0,0);

        pop();

      }

    }

  }

​

  let particles = [];

  for (let _ = 0; _ < 5000; _++) {

    let l = random(width / 2, width * 2);

    particles.push({

      x: int(random(0,width-1)),

      y: int(random(0,height-1)),

      life: l,

      col: random(palette),

    });

  }

​

  strokeWeight(1.0);

  while (particles.length > 0) {

    for (let i = particles.length - 1; i >= 0; i--) {

      let p = particles[i];

​

      const step = 1.0;

      const row = Math.floor(p.y / cellscale);

      const col = Math.floor(p.x / cellscale);

      const angle = grid[row][col].a;

​

      let xstep = step * cos(angle);

      let ystep = step * sin(angle);

​

      // console.log(row,col,grid[row][col])

      // let c = color(grid[row][col].c);

      let c = color(p.col);

      if (row < height * 0.25) c.setAlpha(40);

      else if (row < height * 0.5) c.setAlpha(80);

      stroke(c);

      point(p.x, p.y);

      p.x += xstep;

      p.y += ystep;

​

      if (p.x > width - 1 || p.x < 0 || p.y > height - 1 || p.y < 0)

        particles.splice(i, 1);

    }

  }

​

  // save("chalk","svg");

  console.log(`n[0.0] = a[${map(0.0, 0.0, 1.0, 0, TWO_PI)}]`)

  console.log(`n[0.5] = a[${map(0.5, 0.0, 1.0, 0, TWO_PI)}]`)

  console.log(`n[1.0] = a[${map(1.0, 0.0, 1.0, 0, TWO_PI)}]`)

  noLoop();

}

​

function draw() {

  // background(220);

}

​

function keypressed() {

  // if (key == 's')

  //   save("chalk","svg");

}

​