# Javascript classes, but more a design question

**URL:** <https://discourse.processing.org/t/javascript-classes-but-more-a-design-question/38848>\
**Category:** Beginners\
**Created:** [September 18, 2022, 11:55pm UTC](https://discourse.processing.org/t/javascript-classes-but-more-a-design-question/38848 "2022-09-18T23:55:57Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![vkbr](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/vkbr/32/16844_2.png) [@vkbr](https://discourse.processing.org/u/vkbr)\
**Post date:** [September 18, 2022, 11:55pm UTC](https://discourse.processing.org/t/javascript-classes-but-more-a-design-question/38848/1 "2022-09-18T23:55:57Z")

</div>

Trying to figure out a design for this:

I have a class `Grid`.

I want to make points relative to a Grid instance (there will be only one instance of Grid). Relative means the point coordinates will change accordingly to changes made in grid.

To build a new point I need access to data in Grid instance so I can make the proper calculations.  
Also each instance point must retain a unique data referent to the state of a Grid property at the moment the point was built.

I thought in some possible approaches.

1. Make the points and store them inside Grid class. In a collection of some kind, or an object. That’s ok, but not very beautiful and ‘oopy’ I think. The Grid class will be doing to much things, and the work to keep track of each point will be convoluted. There will be a lot ways to create a point, they must be updated every cycle, and do some other stuff, so the class will be like “polluted”.

2. Make a sub class Gpoint, extending Grid. But then, i’ll have to provide the instance of Grid to every point, right? A constructor like `constructor(Grid, x, y)` If so, doesn’t it makes extending useless?

3. Make a class like Gpoints (plural) that gets an instance of Grid (the instance), and deal with storing all the points. Then make GPoint that extends Gpoints class and use super(Grid) to get a ref to the Grid instance.

Well, all that still not seems very good an answer yet…

Please advise : )

thanks.

ps:

here a skeleton i’m working with

```auto
	class Gpoints {

	    constructor(Grid) {
	        this.grid = Grid;
	        this.Gpoints = [];
	    }

	    make_gpoint(x, y, label){

	    	let gp = new Gpoint(x, y, label);
	    	this.Gpoints.push(gp);
	    }

	} //class

	class Gpoint extends Gpoints {
	    constructor(x, y, label) {
	    	super(grid);
	        this.x = x;
	        this.y = y;
	        this.gx;
	        this.gxy; 
	        this.label = label;
	        this.g_width;
	    }

	}//class

```

and then something like:

```auto
    gps = new Gpoints(grid);
    gp1 = gps.make_gpoint(100, 100, 'gp1');

```

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [September 19, 2022, 4:31am UTC](https://discourse.processing.org/t/javascript-classes-but-more-a-design-question/38848/2 "2022-09-19T04:31:39Z")

</div>

Not sure what you’re trying to accomplish, but the following code creates a grid of points (or can be adapted to draw about any shape you like).

```auto
let _numRows = 60;
let _numCols = 60;

function pointGrid(left, top, ptSize, colGap, rowGap) {
  for(let k = 0; k < _numRows; k++) {
    for(let j = 0; j < _numCols; j++){
      let x = left + j*(colGap);
      let y = top + k*(rowGap);
      stroke(0,0,255);
      strokeWeight(2.0);
      circle(x,y,ptSize);
    }
  }
 }

function setup() {
  createCanvas(630, 630);
  background(209);
  pointGrid(20, 20, 2, 10, 10);
}

function draw() {
}

```

---

<div class="post-metadata">

**Author:** ![vkbr](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/vkbr/32/16844_2.png) [@vkbr](https://discourse.processing.org/u/vkbr)\
**Post date:** [September 19, 2022, 11:18am UTC](https://discourse.processing.org/t/javascript-classes-but-more-a-design-question/38848/3 "2022-09-19T11:18:51Z")

</div>

Thanks @svan. Great example.  
Actually my question is more of conceptual nature, about designing the inheritance chain. As I’m working I’m starting to think that perhaps the best is to keep the “storage” inside the grid class. But I’m not sure yet : )  
Anyway thanks for your time 🙂

cheers

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [September 19, 2022, 12:56pm UTC](https://discourse.processing.org/t/javascript-classes-but-more-a-design-question/38848/4 "2022-09-19T12:56:46Z")

</div>

I don’t know if it will help you or not, but it is possible to use the code that I posted to display an array of objects with a unique id assigned to each object. When using mousePressed() the id may be retrieved.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [September 19, 2022, 1:18pm UTC](https://discourse.processing.org/t/javascript-classes-but-more-a-design-question/38848/5 "2022-09-19T13:18:27Z")

</div>

I think you are overthinking.

No “extends” required.

Just make a class Point to store the data. You can (but don’t have to) make a class Grid to work with the points.

---

<div class="post-metadata">

**Author:** ![vkbr](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/vkbr/32/16844_2.png) [@vkbr](https://discourse.processing.org/u/vkbr)\
**Post date:** [September 19, 2022, 2:14pm UTC](https://discourse.processing.org/t/javascript-classes-but-more-a-design-question/38848/6 "2022-09-19T14:14:48Z")

</div>

Thanks @Chrisir I think you are right, as I mentioned above. Overthinking I am.

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [September 19, 2022, 2:15pm UTC](https://discourse.processing.org/t/javascript-classes-but-more-a-design-question/38848/7 "2022-09-19T14:15:32Z")

</div>

I’m of same opinion as @Chrisir’s.

That is, have a Point class plus a Grid class to manage the instances of Point.

I did the same for this sketch “Self Avoiding Walk II”:

> **[Self Avoiding Walk Ii Coffeescript](https://glitch.com/~self-avoiding-walk-ii-coffeescript)**
>
> https://Discourse.Processing.org/t/converting-coding-challenge-self-avoiding-walk-backtracing-from-p5-js-to-processing-java/35047/19

In its subfolder “modules/” there are 3 JS files (plus 3 CoffeeScript files ☕ ):

1. [https://Self-Avoiding-Walk-II-CoffeeScript.Glitch.me/modules/grid.js](https://Self-Avoiding-Walk-II-CoffeeScript.Glitch.me/modules/grid.js)
2. [https://Self-Avoiding-Walk-II-CoffeeScript.Glitch.me/modules/spot.js](https://Self-Avoiding-Walk-II-CoffeeScript.Glitch.me/modules/spot.js)
3. [https://Self-Avoiding-Walk-II-CoffeeScript.Glitch.me/modules/step.js](https://Self-Avoiding-Walk-II-CoffeeScript.Glitch.me/modules/step.js)

In file “grid.js” I have a class Grid that inside its method **createGrid()** 2 arrays are created:

1. a 2d array _grid[][]_ of Spot objects.
2. and a 1d array _path[]_ of also Spot objects.

Basically the singleton Grid class manages all instances of the Spot class.

And in turn, each Spot instance has 4 instances of class Step inside its 1d array _options[]_.

Plus a temporary 1d array _dirs[]_ which collects each Step that hasn’t been _tried_.

In short, I think that kind of hierarchy of classes is pretty organized and works very well. 🧑‍🏭

---

<div class="post-metadata">

**Author:** ![vkbr](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/vkbr/32/16844_2.png) [@vkbr](https://discourse.processing.org/u/vkbr)\
**Post date:** [September 19, 2022, 2:17pm UTC](https://discourse.processing.org/t/javascript-classes-but-more-a-design-question/38848/8 "2022-09-19T14:17:54Z")

</div>

Thanks @GoToLoop. I’ll look later into your code. And I’m of same opinion as @Chrisir too. Thanks for the code examples.