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!

=)

@calm OP wants to check whether two *distinct* objects contain the same values — Bergi, Sep 14 '18 at 12:19

Steven Spungin · Answer 1 · 2018-09-14T12:36:38.697

1

If you need to do a long duration computation, and do not want to block the UI, use a web worker.

https://www.w3schools.com/htmL/html5_webworkers.asp

Your compuation code will go in another script, and you will use window messaging to send the parameters and retrieve the value.

edited Sep 14 '18 at 12:36

answered Sep 14 '18 at 12:17

Steven Spungin

27,002
5
88
78

score 0 · Accepted Answer · answered Sep 14 '18 at 12:28

0

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.

answered Sep 14 '18 at 12:28

Willem van der Veen

33,665
16
190
155

But then do the comparison i was planning? It seems to me there must be some better way. If i do it like i was thinking, i will actually compare with particle pair twice... – LuisBento Sep 14 '18 at 12:40
@LuisBento you are asking 2 questions here. 1 on dealing with a blocking UI and 1 on optimizing an algorithm. I suggest you ask that as another question, or check out https://stackoverflow.com/questions/1068834/object-comparison-in-javascript – Steven Spungin Sep 14 '18 at 13:34

How to check if two Class instances have same values

2 Answers2