Beans

let beans = [];

const numOfBeans = 256;

const minRadius = 20;

const maxRadius = 30;

const margin = 65;

​

setup = () => {

  p5.disableFriendlyErrors = true;

  createCanvas(960, 540, WEBGL);

  noStroke();

  beans = Array(numOfBeans)

    .fill()

    .map((r) => new Bean());

};

​

draw = () => {

  background("black");

​

  directionalLight(color("white"), 0, 0, -1);

  directionalLight(color("gray"), 0,0, -1);

// The light intensity: white + gray = white * 1.5 

  avoidOverlapping();

​

  beans.forEach((r) => r.wrap());

  beans.forEach((r) => r.update());

  beans.forEach((r) => r.show());

};

​

function avoidOverlapping() {

  for (let i = beans.length; i--; ) {

    const A = beans[i];

    for (let j = i; j--; ) {

      const B = beans[j];

      const delta = A.pos.copy().sub(B.pos);

      const distance = sqrt(delta.x ** 2 + delta.y ** 2);

      const sumRadius = A.radius + B.radius;

      if (distance < sumRadius) {

        const k = 1 - distance / sumRadius;

        const force = delta.mult(k);

        A.acc.add(force);

        B.acc.sub(force);

      }

    }

  }

}

​

const type = {

  0: {

    rotation: -0.01,

    color: "orange",

  },

  1: {

    rotation: +0.01,

    color: "green",

  },

  select() {

    return random(2) < 1 ? type[0] : type[1];

  },

};

​

class Bean {

  constructor() {

    this.pos = createVector(random(-1, 1), random(-1, 1));

    this.vel = createVector(0, 0);

    this.acc = createVector(0, 0);

    this.radius = random(minRadius, maxRadius);

​

    this.direction = random(2 * PI);

    const { rotation, color } = type.select();

    this.rotation = rotation;

    this.color = color;

  }

  show() {

    fill(this.color);

    push();

    translate(this.pos.x, this.pos.y, 0);

    sphere(this.radius);

    pop();

  }

  update() {

    this.direction += this.rotation;

    const unitVector = createVector(1, 0).rotate(this.direction);

    this.vel.add(unitVector);

​

    this.vel.add(this.acc.mult(0.5));

    this.pos.add(this.vel);

​

    this.acc.mult(0);

    this.vel.mult(0.9);

  }

  wrap() {

    const r = this.radius + margin;

    this.pos.x = constrain(this.pos.x, r - width / 2, width / 2 - r);

    this.pos.y = constrain(this.pos.y, r - height / 2, height / 2 - r);

  }

}

​