Creating a grid with objects that store their index number (X and Y)

p5.js Coding Questions
1

Hello everyone, coming back after a long hiatus of not coding and my mind is a bit stumped. I am revisiting an old project so my brain keeps going back to my previous solutions even though I know that wasn’t the best way to do it.

I am trying to create a grid of objects that know their index within the grid both x and y.

This is a simplified version of what I have so far

let tile = []; //Tile Class
let numTiles = 100;
let tileSize = 100;
let gridWidth = 800;
let gridHeight = 600;

let x, y, w, h;
let index;

function setup() {
  createCanvas(windowWidth, windowHeight);
  for (let i = 0; i < numTiles; i++) {
    tile.push(new tileClass(i));
  }
}

function draw() {
  background(100);
  for (let i = 0; i < gridWidth; i += tileSize) {
    for (let j = 0; j < gridHeight; j += tileSize) {
      tile[0].draw(i, j, tileSize, tileSize);
    }
  }
}

//CLASS
class tileClass {
  constructor(tempIndex) {
    this.index = tempIndex;
  }
  draw(tempX, tempY, tempWidth, tempHeight) {
    this.x = tempX;
    this.y = tempY;
    this.w = tempWidth;
    this.h = tempHeight;

    this.showTile();
    this.showText();
  }

  showTile() {
    noFill();
    rect(this.x, this.y, this.w, this.h);
  }

  showText() {
    textAlign(CENTER, CENTER);
    fill(255);
    textSize(32);
    text(this.index, this.x + this.w / 2, this.y + this.h / 2);
  }
}

So in setup I know I can give it an initial index, however, later on in the sketch I would like the user to be able to change the number of tiles. With the way I was doing it, the index assign in draw would just count up indefinitely. I don’t know how to draw the objects in an array with a unique index.

I know I am missing something that would make this a ton easier. Like is there a way to create a vector of objects to have both an X and a Y? My previous solution from years ago had things like run = true and solutions like that all over the place so I am trying to find the best solution this time.

Thanks all!

2

I am sure I misunderstood you

rewrote it in procssing/java, not p5js

in setup I put more data into the class (such as x,y,w,h) so draw() is very brief

That’s the main point.

—————

Additionally you can add new tiles.

index is unique of course (because k)

Chrisir


final int tileSize = 100;

tileClass[] tiles = new tileClass [8*6]; //Tile Class

int k=0; 

void setup() {
  size(1200, 800);

  int gridWidth = 800;
  int gridHeight = 600;

  for (int i = 0; i < gridWidth; i += tileSize) {
    for (int j = 0; j < gridHeight; j += tileSize) {
      tiles[k] = new tileClass(i, j, tileSize, tileSize, k);
      k++;
    }
  }
  println(k);
}

void draw() {
  background(100);
  for (tileClass tC : tiles) {
    tC.showTile();
  }
  fill(255);
  textAlign(LEFT);
  text("click mouse to add tiles", 
    33, height-33);
}

void mousePressed() {
  //

  tiles = (tileClass[]) append(tiles, new tileClass(mouseX, mouseY, tileSize, tileSize, k));
  k++;
}

// ========================================================================================
//CLASS
class tileClass {

  int index; 
  int x, y, w, h; 

  tileClass(int tempX, int tempY, 
    int tempWidth, int tempHeight, 
    int tempIndex) {
    this.index = tempIndex;
    this.x = tempX;
    this.y = tempY;
    this.w = tempWidth;
    this.h = tempHeight;
  }

  void draw() {
    showTile();
    showText();
  }

  void showTile() {
    noFill();
    rect(this.x, this.y, this.w, this.h);

    showText() ;
  }

  void  showText() {
    textAlign(CENTER, CENTER);
    fill(255);
    textSize(32);
    text(index, 
      x + w / 2, y + h / 2);
  }
}
1 Like
3

Hmmm, this is definitely something I can build upon. If it helps, this is the original sketch I am trying to improve upon.

https://editor.p5js.org/TedCharlesBrown/full/iDQ9esVkF

image
image1936×1516 370 KB

So when I say the user will input the number of tiles, that would change the “raster” or grid size and will redraw the grid from scratch.

1 Like
4

Actually, I believe that you have given me the solution. Simply moving the for loop into the setup, then re-calling the setup function anytime the grid is changed seems already be working.

Thanks!

1 Like
5

Yeah and call this with new parameters