Many bouncing balls in javascript

Question

I've been trying to get this to work for a while and I've hit a block and can't get these balls to bounce off of each other and the walls. I'm trying to make essentially a virus simulator, with different balls having different properties determining infection chances whenever they contact each other. Here's the code I'm working with:

Molecule.js:

class Molecule {
    constructor(_i, _max_rad){
        this.moleculeIndex = _i;
        this.rad = random(min_rad, _max_rad);
        this.position = createVector(random(this.rad,width-this.rad),random(this.rad, height-this.rad));
        this.velocity = createVector(random(-2,5),random(-2,5));
        this.bounce = false;
    }

    render() {

        noStroke();

        if (this.bounce) {
                let dx = this.position.x - molecules[moleculeIndex].position.x;
                let dy = this.position.y - molecules[moleculeIndex].position.y;
                let dist = Math.sqrt(dx * dx + dy * dy);

                let normalX = dx / dist;
                let normalY = dy / dist;

                let midpointX = (this.position.x.x + molecules[moleculeIndexmoleculeIndex].position.x) / 2;
                let midpointY = (this.position.x.y + molecules[moleculeIndex].position.y) / 2;

                let dVector = (this.velocity.x - molecules[moleculeIndex].velocity.x) * normalX;
                dVector += (this.velocity.y - molecules[moleculeIndex].velocity.y) * normalY;

                let dvx = dVector * normalX;
                let dvy = dVector * normalY;

                this.velocity.x -= dvx;
                this.velocity.y -= dvy;

                molecules[moleculeIndex].velocity.x += dvx;
                molecules[moleculeIndex].velocity.y += dvy;
            }

        push();
        translate(this.position.x,this.position.y)
        ellipse(0,0,this.rad*2,this.rad*2);
        pop();
    }

    step() {
        this.position.add(this.velocity);
    }

    checkEdges(){

        if(this.position.x < this.rad || this.position.x > width-this.rad){
            this.velocity.x = this.velocity.x * -1;
        }

        if(this.position.y < this.rad || this.position.y > height-this.rad){
            this.velocity.y = this.velocity.y * -1;
        }
    }
}

Sketch.js:

let molecules = [];
let numOfMolecules = 100;

let min_rad = 10;
let max_rad = 50;

let row = 5;
let col = 5;
let gridHeight;
let gridWidth;

let moleculeKey;
let tempArray;
let intersectCount;
let numchecks;

let displayMolecules = true;
let draw_grid = true;
let display_info = true;


function setup() {
    createCanvas(window.innerWidth, window.innerHeight); //create canvas size of screen
    background(150, 178, 164);

    createMolecules();

}

function createMolecules() {
    molecules = [];
    for (let i = 0; i < numOfMolecules; i++) {
        molecules.push(new Molecule(i, max_rad));
    }
}

function draw() {
    background(150, 178, 164);

    gridWidth = window.innerWidth / col;
    gridHeight = window.innerHeight / row;

    splitIntoGrids();
    checkIntersections();
    drawGrid();
    renderGrid();
    resetBalls();
}

function splitIntoGrids() {
    moleculeKey = [];
    for (let i = 0; i < row; i++) {
        moleculeKey.push([]);
        for (let j = 0; j < col; j++) {
            moleculeKey[i].push([]);
            molecules.forEach(molecule => {
                if ((molecule.position.x + molecule.rad > j * gridWidth) &&
                    (molecule.position.x - molecule.rad < j * gridWidth + gridWidth) &&
                    (molecule.position.y + molecule.rad > i * gridHeight) &&
                    (molecule.position.y - molecule.rad < i * gridHeight + gridHeight)) {
                    moleculeKey[i][j].push(molecule.moleculeIndex);
                }
            });
        }
    }
}

/*  Splits into grids and counts the molecules in each grid.
 *  Also checks molecules when overlapping between two cells
 *  Stores molecules in an array, to track the location of each molecule
 */
function checkIntersections() {
    intersectCount = 0;
    numchecks = 0;

    for (let i = 0; i < moleculeKey.length; i++) {
        for (let j = 0; j < moleculeKey[i].length; j++) {

            // if a cell contains more than one molecule, store the molecules into temporary array
            if (moleculeKey[i][j].length > 1) {
                tempArray = moleculeKey[i][j];

                // loops through each molecule in the temporary array
                for (let k = 0; k < tempArray.length; k++) {
                    for (let l = k + 1; l < tempArray.length; l++) {
                        // calculate distance of the molecules between each other
                        let distanceMolecules = p5.Vector.sub(molecules[tempArray[k]].position, molecules[tempArray[l]].position);

                        let vectorLength = distanceMolecules.mag();
                        numchecks++;

                        //checks if molecules are intersecting
                        if (vectorLength < molecules[tempArray[k]].rad + molecules[tempArray[l]].rad) {
                            molecules[tempArray[k]].bounce = true;
                            molecules[tempArray[l]].bounce = true;
                            intersectCount++;
                        }
                    }
                }
            }
        }
    }
}

function drawGrid() {
    if (draw_grid) {
        for (let i = 0; i < row; i++) {
            for (let j = 0; j < col; j++) {
                stroke(255);
                noFill();
                rect(j * gridWidth, i * gridHeight, gridWidth, gridHeight);

                fill(255);
                textSize(12);
                text(moleculeKey[i][j].length, j * gridWidth + 10, i * gridHeight + gridHeight - 10);
            }
        }
    }
}

function resetBalls() {
    for (let i = 0; i < moleculeKey.length; i++) {
        for (let j = 0; j < moleculeKey[i].length; j++) {
            if (moleculeKey[i][j].length > 1) {
                tempArray = moleculeKey[i][j];
                //console.log(tempArray);
                for (let k = 0; k < tempArray.length; k++) {
                    for (let l = k + 1; l < tempArray.length; l++) {
                        let distanceMolecules = p5.Vector.sub(molecules[tempArray[k]].position, molecules[tempArray[l]].position);
                        let vectorLength = distanceMolecules.mag(); //get the length of vector
                        //checks if molecules are not intersecting
                        if (!vectorLength < molecules[tempArray[k]].rad + molecules[tempArray[l]].rad) {
                            //change back color
                            molecules[tempArray[k]].bounce = false;
                            molecules[tempArray[l]].bounce = false;
                        }
                    }
                }
            }
        }
    }
}

function renderGrid() {
    molecules.forEach(molecule => {
        if (displayMolecules) {
            molecule.render();
        }
        molecule.checkEdges();
        molecule.step();
    });
}

With this code I get an error 'Uncaught ReferenceError: moleculeIndex is not defined' on the first line of the if(bounce), I've tried replacing moleculeIndex with some other things but really it was just hoping. Does anyone know why I'm having this problem?

Thanks.

Answer 1

Try replacing the: moleculeIndex with this.moleculeIndex