playing with particles

const n = 1000;

const particles = [];

const loops = 300;

let colors;

​

function createParticle(x, y, angle, weight) {

  return {

    x: x,

    y: y,

    angle: angle,

    weight: weight || 0

  };

}

​

function updateParticle(particle, t) {

  const noiseScale = 0.03;

  const noiseShift = 0.5;

  let x = particle.x + cos(particle.angle);

  let y = particle.y + sin(particle.angle);

  // use noise field for "weighting" particle to determine

  // if it is too "heavy" or "light" for drawing

  // how to move the angle

  let weight = map(noise(x * noiseScale, y * noiseScale) +

    noiseShift * noise(x, y, t), 0, 1 + noiseShift, 0, 1);

  let angle = particle.angle + (PI / 4) * map(weight, 0, 1, -1, 1);

  return createParticle(x, y, angle, weight);

}

​

function displayParticle(particle) {

  const s = 0.03;

​

  if (particle.weight > (0.5 - s) && particle.weight < (0.5 + s)) {

    const d = abs(0.5 - particle.weight);

    const c = random(colors);

    c.setAlpha(map(d, 0, 0.5 - s, 0.078, 0));

    noStroke();

    fill(c);

    push();

    translate(particle.x, particle.y);

    rotate(random(TAU));

    rect(0, 0, 2, 2);

    pop();

  }

}

​

function setup() {

  createCanvas(600, 600);

  colorMode(HSB, 360, 100, 100);

  background(0, 0, 98);

  colors = [

    color(304, 80, 89),

    color(0, 0, 98),

    // color(58, 5, 8)

  ];

​

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

    particles.push(

      createParticle(

        randomGaussian(width * 0.5, width * 0.25),

        randomGaussian(height * 0.5, height * 0.25),

        random(TWO_PI)

      )

    );

  }

​

}

​

function draw() {

  for (var i = 0; i < particles.length; i++) {

    const p = updateParticle(particles[i], radians(frameCount));

    displayParticle(p);

    particles[i] = p;

  }

​

  if (frameCount > loops) {

    noLoop();

  }

}