this is example is to show how to make particles drawing patterns

The program is refresh every 10 seconds

*/

​

let particleSystem = [];

​

function setup() {

  createCanvas(500, 500);

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

    particleSystem.push(new particle());

  }

  background(30); //IMPORTANT

}

​

function draw() {

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

    particleSystem[i].move();

    particleSystem[i].display();

    particleSystem[i].bounce();

  }

  refresh();

}

​

function refresh() {

  if (second() % 10 === 0) {

    background(30);

  }

}

​

class particle {

  //constructor

  constructor() {

    this.speed = createVector(random(-3, 3), random(.3, 1));

    this.xPos = random(width);

    this.yPos = random(height);

    this.size = random(.1, 10);

  }

  //move the particle

  move() {

    this.xPos = this.xPos + this.speed.x;

    this.yPos = this.yPos + this.speed.y;

  }

​

  //display the particle

  display() {

    stroke(random(255));

    strokeWeight(this.size);

    point(this.xPos, this.yPos);

  }

​

  //bounce

  bounce() {

    if (this.xPos > width || this.xPos < 0) {

      this.speed.x = this.speed.x * -1;

    }

    if (this.yPos > height || this.yPos < 0) {

      this.speed.y = this.speed.y * -1;

    }

  }

​

}