let palette = ["#ff71ce", "#01cdfe", "#05ffa1", "#b967ff", "#fffb96"];

let bg;

​

let bggfx, gfx;

let grid;

​

let step = 1;

let particles;

let windowScale;

function setup() {

  createCanvas(3000,3000);

  angleMode(RADIANS);

  windowScale = width / 1000;

  let bgidx = int(random(0,palette.length-1))

  bg = palette[bgidx];

  palette.splice(bgidx, 1);

  bggfx = createGraphics(width,height);

  bggfx.background(color(bg))

  step *= windowScale;

  grid = [];

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

    grid[r] = [];

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

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

      grid[r][c] = map(n,0.0,1.0,0.0, TWO_PI);

    }

  }

  gfx = createGraphics(width,height);

  particles = [];

  for (let _ = 0; _ < 1000*windowScale; _++) {

    particles.push({x:random(width), y: random(height), c: random(palette)})

  }

  gfx.noFill();

}

​

function draw() {

  image(bggfx,0,0);

  image(gfx,0,0);

  for (let p of particles) {

    let a = grid[int(p.y)][int(p.x)];

    let _x = step * cos(a)

    let _y = step * sin(a);

    gfx.push();

    // gfx.rotate(a);

    let _c = color(p.c);

    _c.setAlpha(20);

    gfx.stroke(_c);

    gfx.rect(p.x, p.y, 10, 10);

    // gfx.rotate(-a)

    gfx.pop();

    p.x += _x;

    p.y += _y;

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

      p.x = int(random(0,width))

      p.y = int(random(0,height))

    }

  }

  if (frameCount > 1000) {

    console.log("done");

    noLoop();

  }

}

​