# Processing should define Array just like it has Vector

**URL:** https://discourse.processing.org/t/processing-should-define-array-just-like-it-has-vector/44840
**Category:** Development
**Created:** [July 26, 2024, 7:25pm UTC](https://discourse.processing.org/t/processing-should-define-array-just-like-it-has-vector/44840 "2024-07-26T19:25:31Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![project\_2501](https://avatars.discourse-cdn.com/v4/letter/p/cc9497/32.png) [@project\_2501](https://discourse.processing.org/u/project_2501)
#### Post date: [July 26, 2024, 7:25pm UTC](https://discourse.processing.org/t/processing-should-define-array-just-like-it-has-vector/44840/1 "2024-07-26T19:25:31Z")

</div>

Working with 2-dimensional is a very common scenario in creative coding.

Processing should define an Array and how it can be used (methods?) - just like it has with Vector.

The level of support without Processing mandating it is very varied - with Javascript not supporting 2-d or n-d arrays cleanly, and python only doing so via numpy. I don’t know what Java does.

Once Processing has defined this capability as part of the language specification, then the javascript, python, java, and other implementations must also support Arrays.

There are two key reasons for doing this, and they apply just as equally to Vector:

1. Ease of use and accessibility for newcomers. _(telling them to implement their own in javascript using lists of lists is not good)_
2. Conistency across implementations for a very very common requirement for creative / generative coding.

Some thought should go into the design of the API / methods to ensure the feature is consistent, logical, easy to use, and minimises cognitive load. Make the easy things easy.

For those arguing against, I would welcome an explanation of why Vector was defined but 2-d (or n-d) Array shouldn’t.

---

<div class="post-metadata">

### Author: ![eightohnine](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/eightohnine/32/19793_2.png) [@eightohnine](https://discourse.processing.org/u/eightohnine)
#### Post date: [July 26, 2024, 8:37pm UTC](https://discourse.processing.org/t/processing-should-define-array-just-like-it-has-vector/44840/2 "2024-07-26T20:37:33Z")

</div>

I’d have loved to see some more concrete examples from your side, on how you’d imagine a potential implementation to look like. Would help kick-start the conversations.

As someone with no background in CS, I understand PVector to be a custom helper class made to simplify the manipulation of vectors and thus make them more accessible/easier to digest for novices. Without having any idea of the technical ins and outs and philosophical consequences for the language, I see no reason why some PArray class couldn’t also exist alongside the current array implementation. It could certainly make the use of arrays more approachable.

But how deep would that “userfrindlyficaiton” go?

I, for example, have tripped over the arrays indexing convention – starting at 0 – wayyyyy to often in my early days of writing code. Many a frustrating IndexOutOfBound was thrown. So would you also expect such an ingrained convention to be “rectified”? Because that convention, even though anchored in programming history, is just zero user-friendly.

---

<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: [July 26, 2024, 9:26pm UTC](https://discourse.processing.org/t/processing-should-define-array-just-like-it-has-vector/44840/3 "2024-07-26T21:26:56Z")

</div>

A simple example of a function that creates a 2D-array of PVector instances:

```auto
final PVector[][] pvArr2d = createPVecArr2d(5, 3); // 5 x 3

void setup() {
  for (final PVector[] pvArr1d : pvArr2d) println(pvArr1d);
  exit();
}

static final PVector[][] createPVecArr2d(final int rows, final int cols) {
  final PVector[][] arr2d = new PVector[rows][cols];

  for (final PVector[] arr1d : arr2d) for (int i = 0; i < arr1d.length; )
    arr1d[i++] = new PVector();

  return arr2d;
}

```

[0.0, 0.0, 0.0] [0.0, 0.0, 0.0] [0.0, 0.0, 0.0]  
[0.0, 0.0, 0.0] [0.0, 0.0, 0.0] [0.0, 0.0, 0.0]  
[0.0, 0.0, 0.0] [0.0, 0.0, 0.0] [0.0, 0.0, 0.0]  
[0.0, 0.0, 0.0] [0.0, 0.0, 0.0] [0.0, 0.0, 0.0]  
[0.0, 0.0, 0.0] [0.0, 0.0, 0.0] [0.0, 0.0, 0.0]

---

<div class="post-metadata">

### Author: ![project\_2501](https://avatars.discourse-cdn.com/v4/letter/p/cc9497/32.png) [@project\_2501](https://discourse.processing.org/u/project_2501)
#### Post date: [July 26, 2024, 11:24pm UTC](https://discourse.processing.org/t/processing-should-define-array-just-like-it-has-vector/44840/4 "2024-07-26T23:24:02Z")

</div>

it should be as simple as:

**create**  
`var arr = new Array(5,5);`

**access**  
`var x = arr[3,2];`

**update**  
`arr[2,2] = 5;`

Other possible useful methods could be: max, min, sum, … or we could do what numpy does and allow arithmetic operations to apply element-wise two arrays. Additional separate libraries could then implement FFTs, convolution etc … but that would not get in the way of the simple clear basics suitable for beginners.

Given P5 is primarily used to create designs, visualising arrays should be part of definition. eg

**plot**  
`arr.plot(location_x, location_y)`

… with additional options for scale and colour mapping, now we’re getting into to more advanced optional functions. This proposal is about getting the foundations right.

I don’t think the zero-indexing thing is a major issue, but others may have more informed views on that. Processing’s top-left as the origin causes more problems than 0-indexing in my 5+ years experience of teaching 7-17 year olds to code.

For me, creating a 2d array in javascript is particularly unpleasant, complicated, and even the “one-liners” require advanced incantations.

---

<div class="post-metadata">

### Author: ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)
#### Post date: [July 27, 2024, 9:16am UTC](https://discourse.processing.org/t/processing-should-define-array-just-like-it-has-vector/44840/5 "2024-07-27T09:16:56Z")

</div>

I suggest that you rename this discussion to

> p5.js should define Array …

You can see that some responders are thinking you mean Processing Java mode.

Multi-dimensional arrays are not native to Javascript or Java so syntax like

> [@project\_2501](#):
>
> **create**  
> `var arr = new Array(5,5);`
> 
> **access**  
> `var x = arr[3,2];`
> 
> **update**  
> `arr[2,2] = 5;`

is not possible because it would mean rewriting the Javascipt or Java language.

---

<div class="post-metadata">

### Author: ![project\_2501](https://avatars.discourse-cdn.com/v4/letter/p/cc9497/32.png) [@project\_2501](https://discourse.processing.org/u/project_2501)
#### Post date: [July 27, 2024, 10:15am UTC](https://discourse.processing.org/t/processing-should-define-array-just-like-it-has-vector/44840/6 "2024-07-27T10:15:56Z")

</div>

I definitely do mean that Processing should define it, not p5js.

For example, Processing defines `rectangle` and `ellipse` and line and `Vector`, whether or not the individual implementation languages have these or not.

Another example, p5js doesn’t have `Vector`. Processing defines it so the javascript implementation of processing must therefore implement `Vector` too.

---

<div class="post-metadata">

### Author: ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)
#### Post date: [July 27, 2024, 12:44pm UTC](https://discourse.processing.org/t/processing-should-define-array-just-like-it-has-vector/44840/7 "2024-07-27T12:44:42Z")

</div>

When Processing was first created it was a basic programming IDE that enabled non-programmers, graphics artists etc. an easy to introduction to creating computation art / graphics. It did not create a new language rather it provided a wrapper for Java that hid many of its complexities, in particular OO (object orientated) syntax and semantics.

So effectively it had a single mode “Java” and became thought of as a _new language_, the “Processing language”. Today Processing is an IDE that supports multiple modes / languages.

Available modes:

 ![Screenshot 2024-07-27 at 13.23.21](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/1/1/115571002e312efcb78bb5b60568a84dfb5089d5.png)

Although there is similarity between Java mode and p5js it is unrealistic for them to have an identical API since the underlying languages have different syntax and semantics…

> [@project\_2501](#):
>
> Another example, p5js doesn’t have `Vector`. Processing defines it so the javascript implementation of processing must therefore implement `Vector` too.

Actually the Java mode vector is called `PVector` and Javascript does have a vector class [`p5.Vector`](https://p5js.org/reference/p5/p5.Vector/). Personally I would refute the need for an identical API because both implementations would sink to the lowest common denominator.

Having said all that the question arises as to whether Java mode and p5js should provide an implementation of a 2D or even nD array. I think it would make a nice addition but the API would need careful planning because once released it would be problematic to change its implementation / API.

---

<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: [July 27, 2024, 3:38pm UTC](https://discourse.processing.org/t/processing-should-define-array-just-like-it-has-vector/44840/8 "2024-07-27T15:38:02Z")

</div>

> [@quark](#):
>
> … Java mode and p5js it is unrealistic for them to have an identical API since the underlying languages have different syntax and semantics…

There’s the original Processing.JS lib, which strives for API compatibility w/ Processing’s Java:  
[https://GotoLoop.GitHub.io/processing-js.github.io/reference/](https://GotoLoop.GitHub.io/processing-js.github.io/reference/)

---

<div class="post-metadata">

### Author: ![project\_2501](https://avatars.discourse-cdn.com/v4/letter/p/cc9497/32.png) [@project\_2501](https://discourse.processing.org/u/project_2501)
#### Post date: [July 28, 2024, 3:01pm UTC](https://discourse.processing.org/t/processing-should-define-array-just-like-it-has-vector/44840/9 "2024-07-28T15:01:29Z")

</div>

What is the process for making a formal proposal for Processing to define and mandate Array?

Is there a process similar to a PEP for Python?

---

<div class="post-metadata">

### Author: ![project\_2501](https://avatars.discourse-cdn.com/v4/letter/p/cc9497/32.png) [@project\_2501](https://discourse.processing.org/u/project_2501)
#### Post date: [July 28, 2024, 3:02pm UTC](https://discourse.processing.org/t/processing-should-define-array-just-like-it-has-vector/44840/10 "2024-07-28T15:02:21Z")

</div>

I’ve edited the title back to Processing not p5 because that is the central idea of this post.

---

<div class="post-metadata">

### Author: ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)
#### Post date: [July 28, 2024, 3:39pm UTC](https://discourse.processing.org/t/processing-should-define-array-just-like-it-has-vector/44840/12 "2024-07-28T15:39:37Z")

</div>

> [@project\_2501](#):
>
> What is the process for making a formal proposal for Processing to define and mandate Array?

AFAIK you post an ‘enhancement’ request on the _appropriate_ repository issues page.

For Processing Java mode click [here](https://github.com/processing/processing/issues)  
For p5.js click [here](https://github.com/processing/p5.js/issues)

I think you will find that each mode has it’s own development team, so if the enhancement is accepted by one team it doesn’t mean that the other team will follow suit.

---

<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: [July 28, 2024, 7:43pm UTC](https://discourse.processing.org/t/processing-should-define-array-just-like-it-has-vector/44840/13 "2024-07-28T19:43:04Z")

</div>

As a prototype you can just write your own class  
implementing the commands you are looking for.

I did that for Table and PVector.

---

<div class="post-metadata">

### Author: ![project\_2501](https://avatars.discourse-cdn.com/v4/letter/p/cc9497/32.png) [@project\_2501](https://discourse.processing.org/u/project_2501)
#### Post date: [July 28, 2024, 8:09pm UTC](https://discourse.processing.org/t/processing-should-define-array-just-like-it-has-vector/44840/15 "2024-07-28T20:09:28Z")

</div>

> [@quark](#):
>
> AFAIK you post an ‘enhancement’ request on the _appropriate_ repository issues page.
> 
> For Processing Java mode click [here](https://github.com/processing/processing/issues)  
> For p5.js click [here](https://github.com/processing/p5.js/issues)
> 
> I think you will find that each mode has it’s own development team, so if the enhancement is accepted by one team it doesn’t mean that the other team will follow suit.

So it seems the proposal needs to first recommend Processing is a framework / standard / API definition which all implementations must conform to.

Where does that discussion need to happen?

---

<div class="post-metadata">

### Author: ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)
#### Post date: [July 28, 2024, 8:45pm UTC](https://discourse.processing.org/t/processing-should-define-array-just-like-it-has-vector/44840/16 "2024-07-28T20:45:31Z")

</div>

> [@project\_2501](#):
>
> Where does that discussion need to happen?

I have no idea.

Hopefully another forum member does and responds here. 😄

---

<div class="post-metadata">

### Author: ![sableraph](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sableraph/32/251_2.png) [@sableraph](https://discourse.processing.org/u/sableraph)
#### Post date: [July 29, 2024, 1:05pm UTC](https://discourse.processing.org/t/processing-should-define-array-just-like-it-has-vector/44840/17 "2024-07-29T13:05:35Z")

</div>

Hi @project_2501 and thanks for your question.

As quark mentioned, p5.js and Processing have distinct development paths. This is reflected in the p5.js [README](https://github.com/processing/p5.js?tab=readme-ov-file#stewards):

> p5.js was created by Lauren Lee McCarthy in 2013 as a new interpretation of Processing for the context of the web. Since then, we have allowed ourselves space to deviate and grow, while drawing inspiration from Processing and our shared community.

Though both Processing and p5.js are supported by the Processing Foundation, each project has its own unique goals, values, and priorities, and uniformity across the ecosystem isn’t a current objective. Other active projects like py5 also implement the Processing API in their own unique way.

Any further discussions would need to happen within the respective development communities on their issue pages.

---

<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: [July 30, 2024, 10:27am UTC](https://discourse.processing.org/t/processing-should-define-array-just-like-it-has-vector/44840/18 "2024-07-30T10:27:51Z")

</div>

On the other hand, 2D-arrays are not too hard to handle.

Here is an example.

```auto

int[][] grid = new int [6][12];

size(700, 700);
background(0);

// ----------------------------------------------------------------

// make grid
for (int x = 0; x < 6; x++) {
  for (int y = 0; y < 6; y++) {
    grid[x][y] = int(random (99));
  }
}

// ----------------------------------------------------------------

// display grid
// step 1: upper und left numbers
for (int x = 0; x < 6; x++)
  text (x, x * 22 +33, 14);
for (int y = 0; y < 6; y++)
  text (y, 13, y * 22 +40);

// step 2: line --->
{
  int y=0;
  stroke(255);
  line (
    13, y * 22 +20,
    13+140, y * 22 +20);
}
// step 3: line | downwards
{
  int x=0;
  stroke(255);
  line (
    x * 22 +23, 14,
    x * 22 +23, 154);
}

// step 4: grid (main part)
for (int x = 0; x < 6; x++) {
  for (int y = 0; y < 6; y++) {
    text (grid[x][y], x * 22 +33, y * 22 +40);
  }
}

// ----------------------------------------------------------------

// show one position
int x = 4;
int y = 5;
int oneValue = grid[x][y];
//
text ("Position "
  + x
  + ", "
  + y
  + " :\n"
  + oneValue,
  x * 22 +310, y * 22 +330);
//
// ----------------------------------------------------------------
//

```

Even when you had a proper class encapsulating the 2D-Array you would still have commands like

```auto
gridTools.make(17,24); 
gridTools.get(4,5); 
gridTools.set(4,5); 
gridTools.display(110,200); 
gridTools.save("grid1.csv");

```

---

<div class="post-metadata">

### Author: ![project\_2501](https://avatars.discourse-cdn.com/v4/letter/p/cc9497/32.png) [@project\_2501](https://discourse.processing.org/u/project_2501)
#### Post date: [July 30, 2024, 10:42am UTC](https://discourse.processing.org/t/processing-should-define-array-just-like-it-has-vector/44840/19 "2024-07-30T10:42:05Z")

</div>

Hi Chrisir - I’m pleased 2d-arrays are easy for you.

But for many young coders, and adults very new to coding, what you describe is too much of a barrier - I speak from over 5 years experience teaching both of these groups.

One of the central pillars of the Processing Foundation was inclusivity and accessibility to newcomers and non-technical artists - and that is the only reason I raised my suggestion to make arrays easier.

---

<div class="post-metadata">

### Author: ![project\_2501](https://avatars.discourse-cdn.com/v4/letter/p/cc9497/32.png) [@project\_2501](https://discourse.processing.org/u/project_2501)
#### Post date: [July 30, 2024, 10:43am UTC](https://discourse.processing.org/t/processing-should-define-array-just-like-it-has-vector/44840/20 "2024-07-30T10:43:47Z")

</div>

Thanks sableRaph.

You have kindly explained the reality.

It means the Processing Foundation doesn’t work as I had expected or hoped.

I’m not my proposal will go anywhere as it depended on the idea of the Foundation mandating how Processing implementations worked.

Thanks anyway

---

<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: [July 30, 2024, 11:11am UTC](https://discourse.processing.org/t/processing-should-define-array-just-like-it-has-vector/44840/21 "2024-07-30T11:11:10Z")

</div>

> <https://github.com/processing/p5.js/issues/7153>
>
> \### Increasing access
> 
> I have over 5 years experience teaching young coders (age… 7-17) and adults who have never coded before (eg artists) to code with p5js.
> 
> I learned about some of the barriers and developed simple.js to make better default choices and also to provide easier to use functions eg circle() and randomNumber().
> 
> One of the remaining big barriers is arrays. Javascript doesn't make it easy.
> 
> Like Vector, I popose an Array is implemented which makes it easy and uniform to use them.
> 
> More details here; https://discourse.processing.org/t/processing-should-define-array-just-like-it-has-vector/44840/13
> 
> \### Most appropriate sub-area of p5.js?
> 
> \- \[X\] Accessibility
> \- \[\] Color
> \- \[\] Core/Environment/Rendering
> \- \[\] Data
> \- \[\] DOM
> \- \[\] Events
> \- \[\] Image
> \- \[\] IO
> \- \[\] Math
> \- \[\] Typography
> \- \[\] Utilities
> \- \[\] WebGL
> \- \[\] Build process
> \- \[\] Unit testing
> \- \[\] Internationalization
> \- \[\] Friendly errors
> \- \[X\] Other (specify if possible)
> 
> \### Feature request details
> 
> see discussion https://discourse.processing.org/t/processing-should-define-array-just-like-it-has-vector/44840/13

---

<div class="post-metadata">

### Author: ![mcintyre](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mcintyre/32/14561_2.png) [@mcintyre](https://discourse.processing.org/u/mcintyre)
#### Post date: [July 30, 2024, 2:29pm UTC](https://discourse.processing.org/t/processing-should-define-array-just-like-it-has-vector/44840/22 "2024-07-30T14:29:17Z")

</div>

@project_2501 it isn’t clear to me that the syntax `arr[3, 2]` does much to simplify the native `arr[3][2]`. As others have mentioned, the syntax `arr[3, 2]` isn’t possible without redefining the Java and JavaScript languages, or else adding some serious hacks to the PDE and p5.js Editor. Operator overloading, as in `5 * arr` or `arr1 + arr2`, is also off the table without dark magic.

[ND4J](https://deeplearning4j.konduit.ai/nd4j/tutorials/quickstart), [TensorFlow.js](https://js.tensorflow.org/api/latest/), and [d3-array](https://d3js.org/d3-array) might be good sources of inspiration for addon libraries.

[Next page](https://discourse.processing.org/t/processing-should-define-array-just-like-it-has-vector/44840.md?page=2)
