How to check if two Class instances have same values

Question

To learn some javascript, I have created a little particle system in codepen. You can see it here: Particles

Here is the js code:

const canvas = document.querySelector('#canvas');
const canvasHeight = canvas.height;
const canvasWidth = canvas.width;
const ctx = canvas.getContext('2d');
let amountOfParticles = 300;
let rate = 50;
const velocity = 2;
let size = 2;
let allParticles = [];

const rateInput = document.querySelector('#rate-range');
const amountInput = document.querySelector('#amount-range');
const sizeInput = document.querySelector('#size-range');
const rateNumber = document.querySelector('#rate-number');
const amountNumber = document.querySelector('#amount-number');
const sizeNumber = document.querySelector('#size-number');


class Particle {
   constructor(xPos, yPos) {
     this.xPos = xPos;
     this.yPos = yPos;
     this.size = size;
     this.particleColor = 'rgba(255, 255, 255, .5)'; 
     this.originalX = xPos;
     this.originalY = yPos;
     this.colors = ['rgba(255, 255, 255, .75)',
                    'rgba(107, 185, 240, .75)',
                    'rgba(37, 116, 169, .75)',
                    'rgba(103, 65, 114, .75)',
                    'rgba(207, 0, 15, .75)',
                    'rgba(230, 126, 34, .75)',
                    'rgba(245, 215, 110, .75)'];
   }

  createSquare() {
    ctx.fillStyle = this.particleColor;
    ctx.fillRect(this.xPos, this.yPos, this.size, this.size);
  }

  moveParticle() {
    let directionX = Math.random() * 100;
    if (directionX < 40) {
      this.xPos -= velocity;
    } else if (directionX > 60) {
      this.xPos += velocity;
    }
    let directionY = Math.random() * 100;
    if (directionY < 40) {
      this.yPos -= velocity;
    } else if (directionY > 60) {
      this.yPos += velocity;
    }
    this.setColor();
    this.createSquare();
  }

  setColor() {
    let distance = Math.hypot(this.originalX - this.xPos, this.originalY - this.yPos);
    if (distance < 10) {
      this.particleColor = this.colors[0];
    } else if (distance >= 20 && distance < 40) {
      this.particleColor = this.colors[1];
    } else if (distance >= 41 && distance < 60) {
      this.particleColor = this.colors[2];
    } else if (distance >= 61 && distance < 90) {
      this.particleColor = this.colors[3];
    } else if (distance >= 91 && distance < 120) {
      this.particleColor = this.colors[4];
    } else if (distance >= 121 && distance < 160) {
      this.particleColor = this.colors[5];
    } else {
      this.particleColor = this.colors[6];
    }

  }
} // end of Particle class


function makeParticles() {
  for(let i = 0; i < amountOfParticles; i++) {
    let randomX = Math.floor(Math.random() * canvasWidth);
    let randomY = Math.floor(Math.random() * canvasHeight);
    let newParticle = new Particle(randomX, randomY);
    newParticle.createSquare();
    allParticles.push(newParticle);
  }
}

makeParticles();
setInitialValues();
drawInterval = setInterval(function(){ move(); }, rate);

function move() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);;
  for (let i = 0; i < allParticles.length; i++) {
    allParticles[i].moveParticle();
  }
}

function setInitialValues() {
  rateInput.value = rate;
  rateNumber.innerHTML = rate;
  amountInput.value = amountOfParticles;
  amountNumber.innerHTML = amountOfParticles;
  sizeInput.value = size;
  sizeNumber.innerHTML = size;
}

function updateRate() {
  let newRate = parseInt(rateInput.value);
  rateNumber.innerHTML = newRate;
  rate = newRate;
  clearInterval(drawInterval);
  drawInterval = setInterval(function(){ move(); }, rate);
}

function updateAmount() {
  let newAmount = parseInt(amountInput.value);
  amountNumber.innerHTML = newAmount;
  amountOfParticles = newAmount;
  remakeParticles();
}

function updateSize() {
  let newSize = parseInt(sizeInput.value);
  sizeNumber.innerHTML = newSize;
  size = newSize;
  remakeParticles();
}

function remakeParticles() {
  allParticles = [];
  makeParticles();
}

I would now like to add a new idea. If two particles touch, then I would like them to grow.

I thought I could just loop through the array with all the particles and compare the current particle position with each particle on the array. I can't really implement this because of the browser "blocks".

What would be the best way to do something like this?

Detect a collision is surely something that people do very often and I imagine there is some kind of nice way to do it.

Thank you!

=)

Answer 1

As steven pointed out, use a webworker for a separate JS runtime. You can do this in the following manner:

if (window.Worker) {

      const myWorker = new Worker('worker.js');
      // where worker.js is the URI of your script

}

This will create a web worker which is a seperate javascript thread. Keep in mind that this will have its own window object and thus own variable scope.