let state;

let offset;

​

let particles;

​

function getRandomInt(min, max) {

  min = Math.ceil(min);

  max = Math.floor(max);

  return Math.floor(Math.random() * (max - min) + min); //The maximum is exclusive and the minimum is inclusive

}

​

class Particle {

  constructor(x, y, vx, vy, color, isBorder, size) {

    this.position = createVector(x, y);

    this.velocity = createVector(vx, vy);

    this.color = color;

    this.isBorder = isBorder;

    this.size = size;

  }

​

  update() {

    this.position.x += this.velocity.x;

    this.position.y += this.velocity.y;

​

    if (this.isBorder) {

      // going right

      if (this.position.x > width - offset) {

        this.velocity.x = 0;

        this.velocity.y = 3;

        this.position.x = width - offset;

      }

      // going left

      if (this.position.x < offset) {

        this.velocity.x = 0;

        this.velocity.y = -3;

        this.position.x = offset;

      }

      // going down

      if (this.position.y > height - offset) {

        this.velocity.y = 0;

        this.velocity.x = -3;

        this.position.y = height - offset;

      }

      // going up

      if (this.position.y < offset) {

        this.velocity.y = 0;

        this.velocity.x = 3;

        this.position.y = offset;

      }

      return true;

    } else {

      if (this.position.x <= offset+this.size || this.position.x >= width-offset-this.size || this.position.y <= offset+this.size || this.position.y >= height-offset-this.size)

        return false;

      return true;

    }

  }

​

  draw() {

    strokeWeight(this.size);

    stroke(this.color);

    point(this.position.x, this.position.y);

    // noStroke();

    // fill(this.color);

    // circle(this.position.x,this.position.y,this.size);

  }

}

​

function setup() {

  particles = [];

​

  offset = 50;

​

  // chromotome // tundra3

  colors = [

    color(242, 242, 242, 255),

    color(135, 195, 202, 255),

    color(123, 115, 119, 255),

    color(178, 71, 93, 255),

    color(125, 62, 62, 255),

    color(235, 127, 100, 255),

    color(217, 198, 122, 255),

  ];

  createCanvas(800, 800);

  pixelDensity(1);

​

  background(colors[0]);

  state = 0; // border, diagonals

  frameRate(60);

  particles.push(new Particle(offset, offset, 3, 0, colors[2], true, 6)); // border

}

​

function draw() {

  for (let i = particles.length-1; i >= 0; i--) {

    let r = particles[i].update();

    if (r) particles[i].draw();  

    if (!r) particles.splice(i,1);

  }

  if (particles.length == 0) {

    console.log("done");

    noLoop();

  }

  if (random() > 0.9 && particles.length < 500) {

    let s = getRandomInt(0,4); // top/right/bottom/left

    let _x,_y,_vx,_vy;

    if (s == 0) { // top

      _x = random(offset+3,width-offset-3);

      _y = offset+3;

      _vx = random(getRandomInt(-3,-1),getRandomInt(-3,-1));

      _vy = random(1,3);

    } else if (s == 1) { // right

      _x = width-offset-3;

      _y = random(offset+3,height-offset-3);

      _vx = random(-1,-3);

      _vy = random(getRandomInt(-3,-1),getRandomInt(-3,-1));

    } else if (s == 2) { // bottom

      _x = random(offset+3,width-offset-3);

      _y = height-offset-3;

      _vx = random(getRandomInt(-3,-1),getRandomInt(-3,-1));

      _vy = random(-1,-3);

    } else { // left

      _x = offset+3;

      _y = random(offset+3,height-offset-1);

      _vx = random(1,3);

      _vy = random(getRandomInt(-3,-1),getRandomInt(-3,-1));

    }

    particles.push(new Particle(

      _x,_y,_vx,_vy,

      colors[getRandomInt(1,colors.length)], false, 3));

  }

}

​