const w = 63;

const h = 32;

const csz = 6;

const nParts = 512;

​

const particles = [];

const grid = [];

let fx = 0, fy = 0,

    fangle = 0, flen = 0;

​

​

​

function setup() {

  frameRate(16);

  createCanvas(w * csz, h * csz);

  colorMode(HSL);

  bgColor = color(0, 0, 90);

  sandColor = color(37, 70, 70);

  ctrlColor = color(37, 57, 32);

  ctrlColor.setAlpha(0.3);

  for (let x = 0; x < w; ++x) {

    let col = [];

    grid.push(col);

    for (let y = 0; y < h; ++y) {

      col.push(null);

    }

  }

  for (let i = 0; i < nParts; ++i) {

    while (true) {

      let x = Math.floor(random(w)),

          y = Math.floor(random(h));

      if (grid[x][y] != null) continue;

      let part = new Particle(x, y);

      particles.push(part);

      grid[x][y] = part;

      break;

    }

  }

}

​

function keyPressed() {

  if (keyCode == LEFT_ARROW && fx > -200) fx -= 20;

  else if (keyCode == RIGHT_ARROW && fx < 200) fx += 20;

  else if (keyCode == UP_ARROW && fy > -200) fy -= 20;

  else if (keyCode == DOWN_ARROW && fy < 200) fy += 20;

  fangle = createVector(fx, fy).heading();

  flen = Math.sqrt(fx ** 2 + fy ** 2);

}

​

function draw() {

  // Simulation

  for (const part of particles) part.update();

  for (const part of particles) part.updated = false;

  // BG

  background(bgColor);

  // Sand

  stroke(bgColor);

  strokeWeight(1);

  fill(sandColor);

  for (const part of particles) {

    rect(part.x * csz, part.y * csz, csz, csz);

  }

  // Control

  stroke(ctrlColor);

  fill(ctrlColor);

  push();

  translate(w / 2 * csz, h / 2 * csz);

  rotate(fangle);

  beginShape();

  vertex(-flen/4, -3);

  vertex(0, -3);

  vertex(0, -10);

  vertex(flen/4, 0);

  vertex(0, 10);

  vertex(0, 3);

  vertex(-flen/4, 3);

  endShape();

  pop();

}

​

class Particle {

  constructor(x, y) {

    this.x = x;

    this.y = y;

    this.updated = false;

    this.vx = 0;

    this.vy = 0;

    this.movX = 0;

    this.movY = 0;

  }

  update() {

​

    this.updated = true;

​

    // Add force to velocity (scaled); friction

    this.vx += fx * 0.05;

    this.vy += fy * 0.05;

    if (this.vx + this.vy > 0) {

      let noiseLevel = Math.sqrt(this.vx ** 2, this.vy ** 2) * 0.1;

      this.vx += random(-noiseLevel, noiseLevel);

      this.vy += random(-noiseLevel, noiseLevel);

    }

    this.vx *= 0.9;

    this.vy *= 0.9;

    // Add velocity to cumulative movement

    // If either reaches 1, we move

    this.movX += this.vx;

    this.movY += this.vy;

    let dx = Math.floor(this.movX / 20);

    let dy = Math.floor(this.movY / 20);

    if (dx == 0 && dy == 0) return;

    // Test new position. We can be kicking particle there,

    // But only if it hasn't been updated own yet.

    if (this.tryMove(dx, dy)) {

      this.move(dx, dy);

    }

    // If we cannot move there: we come to a halt

    else {

      if (dx != 0) {

        this.vx = 0;

        this.movX = 0;

      }

      if (dy != 0) {

        this.vy = 0;

        this.movY = 0;

      }

    }

  }

  tryMove(dx, dy) {

    let trgX = this.x + dx, trgY = this.y + dy;

    if (trgX < 0 || trgX >= w) return false;

    if (trgY < 0 || trgY >= h) return false;

    let other = grid[trgX][trgY];

    if (other == null) return true;

    if (other.updated) return false;

    let otherTrgX = other.x + dx;

    let otherTrgY = other.y + dy;

    if (otherTrgX < 0 || otherTrgX >= w) return false;

    if (otherTrgY < 0 || otherTrgY >= h) return false;

    if (grid[otherTrgX][otherTrgY] != null) return false;

    other.move(dx, dy);

    other.updated = true;

    return true;

  }

  move(dx, dy) {

    grid[this.x][this.y] = null;

    this.x += dx;

    this.y += dy;

    if (grid[this.x][this.y] != null)

      throw("Attempting to move to occupied position");

    grid[this.x][this.y] = this;

    this.movX -= dx * 20;

    this.movY -= dy * 20;

  }

}

​

​