# Pixels array p5.js vs java improving speed

**URL:** <https://discourse.processing.org/t/pixels-array-p5-js-vs-java-improving-speed/38623>\
**Category:** Coding Questions\
**Created:** [September 3, 2022, 12:56am UTC](https://discourse.processing.org/t/pixels-array-p5-js-vs-java-improving-speed/38623 "2022-09-03T00:56:05Z")\
**Posts on this page:** 1\
**Showing post:** 2

<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 3, 2022, 2:56pm UTC](https://discourse.processing.org/t/pixels-array-p5-js-vs-java-improving-speed/38623/2 "2022-09-03T14:56:25Z")

</div>

> [@Sunt](#):
>
> I translated a Java to a p5.js sketch.

If your aim was just to make it run online just know your sketch is totally convertible to [Processing.js](https://gotoloop.github.io/processing-js.github.io/):

https://OpenProcessing.org/sketch/1637958/embed/
## index.html:

```auto
<script defer src=https://Unpkg.com/processing-js></script>
<canvas data-src=Trig_Pixel_Colors.pde></canvas>

```

As you can see from the embedded [`<iframe>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe) above I’ve made many changes to your Java sketch.

Most important 1 was moving the _K[]_ array initialization to **setup()**.

After all, nothing in the _K[]_ array changes after it’s filled w/ colors the 1st time, just like _A[]_.

> [@Sunt](#):
>
> The p5.js pixels array takes 4 times more values…

> [@Sunt](#):
>
> The p5.js runs terribly slow…

While Java Mode uses a 32bit integer value to represent an [aRGB](https://processing.org/reference/color_datatype.html) color for its [_pixels[]_](https://processing.org/reference/pixels.html) array, p5js version goes w/ an Uint8ClampedArray container which requires 4 elements to represent an [RGBa](https://p5js.org/reference/#/p5/pixels) value:

> **[Uint8ClampedArray - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8ClampedArray)**
>
> The Uint8ClampedArray typed array represents an array of 8-bit unsigned integers clamped to 0–255. The contents are initialized to 0 unless initialization data is explicitly provided. Once established, you can reference elements in the array using...

However there’s a workaround to access p5js’ _pixels[]_ as a 32bit value!

We simply create a new 32bit typed array, either [Int32Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Int32Array) or [Uint32Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint32Array), and pass the _pixels[]_'s Uint8ClampedArray::[_buffer_](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/buffer) to its constructor:  
`pix32 = new Uint32Array(pixels.buffer);`

This way we get a view over the original [Uint8ClampedArray](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8ClampedArray) container, where any changes made to 1 reflect on the other.

The only trap about it is that typed arrays store their values according to a computer’s endianness, which for almost all personal devices is little-endian:

> **[Endianness - Glossary | MDN](https://developer.mozilla.org/en-US/docs/Glossary/Endianness)**
>
> Endian and endianness (or "byte-order") describe how computers organize the bytes that make up numbers.

So we need to invert the byte-order when we’re converting a sequence of RGBa 8bit values to a 32bit unified value, resulting in an aBGR order!

Another obstacle is that p5js’ [**color()**](https://p5js.org/reference/#/p5/color) returns a [p5.Color](https://p5js.org/reference/#/p5.Color) object rather than a 32bit value like Processing’s.

Among the many [p5.Color](https://p5js.org/reference/#/p5.Color) undocumented properties is _levels[]_, which stores an RGBa representation as a 4-_length_ array:  
`{ levels: rgbaArray } = color(R + u, G + v, B + u),`

The line above relies on an [object destructuring assignment](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#object_destructuring) in order to unpack the _levels[]_ property from the [p5.Color](https://p5js.org/reference/#/p5.Color) object and then rename it to _rgbaArray[]_.

Next step now is to convert that 4-_length_ array to an aBGR unified value.

For that I’ve chosen method Array::**reduce()**:

> **[Array.prototype.reduce() - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce)**
>
> The reduce() method of Array instances executes a user-supplied "reducer" callback function on each element of the array, in order, passing in the return value from the calculation on the preceding element. The final result of running the reducer...

`abgrValue = rgbaArray.reduce(RGBa_Arr_to_aBGR_32bit_Val, 0);`

```javascript
function RGBa_Arr_to_aBGR_32bit_Val(acc, val, idx) {
  return acc | val << idx * 0o10;
}

```

Here’s the complete p5js sketch running online w/ same performance as Processing’s:

https://OpenProcessing.org/sketch/1637961/embed/
## index.html:

```auto
<script async src=https://cdn.JsDelivr.net/npm/p5></script>
<script defer src=sketch.js></script>

```

Extra links about other JS syntaxes I’ve used on the p5js flavor:

- Math.[**hypot()**](https://developer.mozilla.org/en-%5BUS/docs/Web/JavaScript/Reference/Global_Objects/Math/hypot)
- [Left shift operator (\<\<)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Left_shift)
- [Bitwise XOR assignment (^=)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_XOR_assignment)
- Array::[**reverse()**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse)

---

_[View the full topic](https://discourse.processing.org/t/pixels-array-p5-js-vs-java-improving-speed/38623)._