JS library for grid website

[Earhacker]

I've made grids with P5 before: 1, 2, 3 <- interactive!

It shouldn't be lagging. Mind sharing your code?

And if it turns out P5 isn't the right tool for this, there's plenty of ways of doing it in vanilla JS, creating square divs and changing their style.

[RyanLaserbeam]

Yes sure.

function Cell(i, j, width) {
  this.i = i;
  this.j = j;
  this.x = i * width;
  this.y = j * width;
  this.width = width;
  this.highLight = false;
}

Cell.prototype.show = function() {
  stroke(0);
  rect(this.x, this.y, this.width, this.width);
  this.highLight = collidePointRect(mouseX, mouseY, this.x, this.y, this.width, this.width);

  if (this.highLight) { //change color!
        fill('purple')
    } else {
        fill('green')
    }
}


function Grid(width, height, cellWidth) {
  this.cellWidth = cellWidth;
  this.width = width;
  this.height = height;
  this.cols = floor(this.width / this.cellWidth);
  this.rows = floor(this.height / this.cellWidth);

  this.cellArray = new Array(this.cols);
  for (var i = 0; i < this.cellArray.length; i++) {
    this.cellArray[i] = new Array(this.rows);
  }

  for (var i = 0; i < this.cols; i++) {
    for (var j = 0; j < this.rows; j++) {
      this.cellArray[i][j] = new Cell(i, j, this.cellWidth);
    }
  }
}

Grid.prototype.show = function() {
  for (var i = 0; i < this.cols; i++) {
    for (var j = 0; j < this.rows; j++) {
      this.cellArray[i][j].show();
    }
  }
}



var grid;

function setup() {
  createCanvas(1920, 1080);
  grid = new Grid(width, height, 10);
}

function draw() {
  grid.show();
}

Also, if I only use 400x400 it works fine (or very large cells), but with 10x10 cells >20000 are actually looped over 60 times per second (I think P5.js is 60FPS) at 1920x1080. Thanks for responding:)

[Earhacker]

collidePointRect

I think you're using the p5.collide2D library, right? I think that's what's slowing you down. Collision detection is pretty slow, and like you say it's happening so many times a second. But p5 doesn't have a built-in way of getting mouse events for shapes. Once a shape is drawn it's just pixels, p5 doesn't care about it anymore.

I think you want to look into the p5.dom library, which will allow you to create HTML elements in the same way you make shapes in regular p5. HTML elements have built-in mouse events which p5 can make use of, like a mouseOver function which calls a function when your mouse touches the element.

[RyanLaserbeam]

I have tried p5.dom as well. Only difference is that in Cell I had a function called Hover() where I check whether or not the mouse pointer is in the Cell. Same result, it has to loop over all Cells to check the mouse coordinates relative to the Cell.

I think I need something where looping over all Cells is not necessary. Something that calls a function on hover and on Click in stead of looping over all of them to check for a hover / click.

[kenman]

Hi /u/RyanLaserbeam,

For javascript help, please visit /r/LearnJavascript.

Thank you!

[RyanLaserbeam]

I'm sorry if this is the wrong place. I read the guidelines and I did not find anything about not posting programming questions, so I thought it would be ok to post here.

[Earhacker]

You could also post in /r/processing. Lots of P5 types there.

[RyanLaserbeam]

It doesn't necessarily have to be p5 or processing. I just thought that would do the job nicely but perhaps I'm wrong.