P5.js: Matrix functions

[filipemeneses]

Most appropriate sub-area of p5.js?

• [ ] Color
• [ ] Core/Environment/Rendering
• [ ] Data
• [ ] Events
• [ ] Image
• [ ] IO
• [x] Math
• [ ] Typography
• [ ] Utilities
• [ ] WebGL
• [ ] Other (specify if possible)

New feature details:

Started using p5.js yesterday and it's amazing to try thing out on the fly. I was tooling with the examples and doing 3 dimensional matrices always looks verbose:

for (let x = 0; x < 10; x++) {
  for (let y = 0; y < 10; y++) {
    for (let z = 0; z < 10; z++) {
      someFunction(x, y, z)
    }
  }
}

Maybe we could write a fluent function like this:

matrix(10, 10, 10).loop(someFunction)

and maybe even n-dimentional:

matrix(10, 10, 10, ... , n).loop(someFunction)

Not sure if should return a p5.Vector instance as argument

[welcome[bot]]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, be sure to follow the issue template if you haven't already.

[ArjunwadkarAjay]

Hi @filipemeneses are you are asking is to apply a function on all elements of matrix.
To do this you could use map function in Javascript...
https://medium.com/poka-techblog/simplify-your-javascript-use-map-reduce-and-filter-bd02c593cc2d
If this is not what you meant please explain me .

[filipemeneses]

Nope, but you gave me an idea. My request is a feature that creates multi dimensional array given arguments and offer convenient functions. Using map, reduce, filter might be more effective, like:

matrix(10, 10, 10).map(([x, y, z]) => {})
````

A simple implementation of matrix (only works for 3d) would be:

```js
const matrix = (px, py, pz) => {
  let makeArray = n => [...Array(n)].map((_, i) => i)
  return {
    map: fn => makeArray(px).map(x => 
      makeArray(py).map(y => 
        makeArray(pz).map(z => fn([x, y, z]))
      )
    )
  }
}

matrix(1, 1, 1).map(([x, y, z]) => ({x, y, z}))
// -> 
// [
//   [
//     [
//       {
//         "x": 0,
//         "y": 0,
//         "z": 0
//       }
//     ]
//   ]
// ]

[ArjunwadkarAjay]

I understood what you are trying to say ,I also believe that there must features to work with Matrices of n dimensions and to perform operations on them.
There must me something to initialize and use matrices easily in p5.
So ,can you assign me this issue to work and give me a chance to make using matrices easier in p5.

[filipemeneses]

We could open a project to implement Array.prototype functions if it makes sense for use in matrices. I suggest we start with:

Array.prototype.filter()
Array.prototype.forEach()
Array.prototype.map()
Array.prototype.reduce()
Array.prototype.toString()

[ArjunwadkarAjay]

Yes, sure we should do it together.I will start working on it.

[ArjunwadkarAjay]

@filipemeneses I thought about the matrix and also started , but then realized that in computer graphics, there is almost no use of n dimensional matrices .
While p5 is a library for computer drawing and animation.
So @filipemeneses can you please tell your use case for n dimensional arrays.

[filipemeneses]

@ArjunwadkarAjay You're right, I want for 2D and 3D, I only suggested n dimensional for convenience. I was testing Perlin noise and made a 3D 3x3x3 cube to visualize it.

I didn't save the code, but it was something like this:

function setup() {
  createCanvas(710, 400, WEBGL);
}

const matrix = (px, py, pz) => {
  let makeArray = n => [...Array(n)].map((_, i) => i)
  return {
    map: fn => makeArray(px).forEach(x => 
      makeArray(py).forEach(y => 
        makeArray(pz).forEach(z => fn([x, y, z]))
      )
    )
  }
}
const makeBox = (x, y, z, a) => {
  fill(50, 50, 50, a);
  push();
  translate(x * 50 , y * 50, z * 50);
  box(50);
  pop();
}

function draw() {
  background(100);
  camera(-450, -450, 600, 0, 0, 0, 0, 1, 0);
  stroke("#fff");

  noiseSeed(1);

  matrix(3, 3, 3).forEach(([x, y, z]) => {
    makeBox(x, y, z, noise(x, y, z) * 255);  
  })
}

[outofambit]

hi @filipemeneses @ArjunwadkarAjay nice to see you working through this! are you planning to open a PR to p5 at some point? if so, i'd like to checkin about if this to see if its best incorporated in p5 itself or as a p5 library. this seems useful, but i don't know how much matrix math most p5 users encounter. do you have a sense for this?

@aferriss @stalgiag do you have thoughts? you're more familiar with this part of p5 than me!

[filipemeneses]

@outofambit Currently I'm only using these functions. Maybe could also have a p5.Matrix class to handle matrix math operations.

[aferriss]

@filipemeneses This does look very useful! But I'd agree with @outofambit that this is a pretty niche use case and probably better as a library of matrix helper functions. The only time I've found myself using matrices in p5 is when working directly with the webGL renderer on the library itself. Not that there aren't lots of other valid uses for them, but I'm guessing it's not that common.

[ArjunwadkarAjay]

@outofambit and @aferriss the p5 is currently used by beginners to programming.
The matrix library would be used by students learning core computer graphics to implement algorithms from basics.

[nickmcintyre]

@filipemeneses Agreed matrices would be nice to have in the ecosystem. There's actually an existing p5.Matrix class used for graphics.

Now for a shameless plug... 😉

I've tinkered with a couple of approaches to building a more extensive math library for p5.js and made some progress wrapping TensorFlow.js. Take a look at número and let me know if you think it might be useful to you.

[filipemeneses]

@nickmcintyre wooah, amazing library man! thanks for sharing here!