var den = 50;

​

function preload() {

  num0 = loadImage("0.png");

  num1 = loadImage("1.png");

​

  num0.resize(width, height);

  num0.loadPixels();

}

​

function setup() {

  createCanvas(600, 600);

  imageMode(CENTER);

​

  let delta = width / den;

  for (let i = 0; i < width; i += delta) {

    for (let j = 0; j < height; j += delta) {

      let color = num0.get(i, j);

      if (color[3] == 255) {

        particles.push(new Particle(i, j, color[0], color[1], color[2]));

      } else {

        particles.push(new Particle(i, j, 255, 255, 255));

      }

    }

  }

  num0.resize(10, 10);

}

function draw() {

  background(255);

​

  //tint(255, 8);

  //image(num0, 300, 300);

​

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

    //particles[i].update();

    particles[i].display();

  }

}

​

class Particle {

  constructor(x, y, r, g, b) {

    this.pos = createVector(x, y);

    this.target = this.pos.copy();

    this.vel = createVector(0, 0);

    this.acc = createVector(0, 0);

    this.rad = 5;

    this.r = r;

    this.g = g;

    this.b = b;

    this.x = x;

    this.y = y;

  }

​

  update() {

    this.attraction = p5.Vector.sub(this.target, this.pos).mult(0.05);

​

    this.repulsion = createVector(0, 0);

    for (let k = 0; k < fishs.length; k++) {

      this.fishForce = p5.Vector.sub(fishs[k].p, this.pos);

      this.repulsion.add(this.fishForce);

    }

​

    this.repulsion.normalize();

    this.vel.add(this.repulsion.mult(-2.5));

    this.vel.add(this.attraction);

    this.vel.limit(3);

    this.vel.mult(0.7);

    this.pos.add(this.vel);

  }

​

  display() {

    push();

    noStroke();

    fill(this.r, this.g, this.b);

    //circle(this.pos.x, this.pos.y, this.rad);

    if (this.r == 0) {

      image(num0, this.pos.x, this.pos.y);

    }

    pop();

  }

}

​