# Accessing width and height variables much slower in P5 Ver 2.0 compared to Ver 1.0

**URL:** <https://discourse.processing.org/t/accessing-width-and-height-variables-much-slower-in-p5-ver-2-0-compared-to-ver-1-0/49325>\
**Category:** Beginners\
**Created:** [September 6, 2026, 6:43am UTC](https://discourse.processing.org/t/accessing-width-and-height-variables-much-slower-in-p5-ver-2-0-compared-to-ver-1-0/49325 "2026-09-06T06:43:09Z")\
**Posts on this page:** 1\
**Showing post:** 21

<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 11, 2026, 5:47am UTC](https://discourse.processing.org/t/accessing-width-and-height-variables-much-slower-in-p5-ver-2-0-compared-to-ver-1-0/49325/21 "2026-09-11T05:47:53Z")

</div>

I’ve remembered there’s another performance trick to handle p5js Uint8ClampedArray _pixels[]_:  
Create a 32-bit array view for it, like Int32Array or Uint32Array, like this sketch I did a long time ago:

> [@Pixels array p5.js vs java improving speed](https://discourse.processing.org/t/pixels-array-p5-js-vs-java-improving-speed/38623/2):
>
> 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/): index.html: \<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[]. Wh…

So for your example below:

> [@ozjerry](#):
>
> ```auto
> 
> for(let y=0; y<height; y++) {
> for(let x=0; x<width; x++) {
> const f = fractal[y * width + x];
> const i = (y * width + x)*4;
> const c = (f/maxIterations)**.5*255|0;
>       
> pixels[i] = c;
> pixels[i+1] = c;
> pixels[i+2] = c;
> pixels[i+3] = 255;
> }
> }
> 
> updatePixels();
> 
> ```

Rather than assigning to 4 RGBa separate indices `[i], [i+1], [i+2] and [i+3]`.  
We instead create 1 32-bit aBGR color and assign it to just the index `[i]`:

```js
"use strict";

/**
 * 32-bit Look-Up Table (LUT) for all 256 opaque gray colors
 */
const GRAY_LUT = Int32Array.from({ length: 256 },
  (_, gray) => 0xFF000000 | gray << 0o20 | gray << 0o10 | gray
);

/**
 * 32-bit array view for the p5js Uint8ClampedArray pixels[]
 * @type {Int32Array}
 */
var pix32View;

/**
 * Cached p5js gray color
 */
var bg;

function setup() {
  createCanvas(1024, 640);
  pixelDensity(1).loadPixels();

  frameRate(60).textSize(20).fill("yellow");

  pix32View = new Int32Array(pixels.buffer);
  bg = color(200);
}

function draw() {
  background(bg);

  var timer = millis();
  const { width, height } = this;

  for (var y = 0; y < height; ++y) {
    const yw = y * width;

    for (var x = 0; x < width; ++x) {
      const idx = yw + x, gray = idx % GRAY_LUT.length;
      pix32View[idx] = GRAY_LUT[gray];
    }
  }

  updatePixels();
  timer = millis() - timer;

  const hud = timer.toFixed(2) + '\t' + (1000 / timer).toFixed(2);
  text(hud, 5, height - 5);
}

```

The example above caches all 256 opaque shades of gray as Int32Array GRAY\_LUT.

But for a regular p5.Color, you can use this callback w/ method **reduce()** over the `{ levels } = color(r, g, b)` array:

```js
function RGBa_Arr_to_aBGR_32bit_Val(acc, val, idx) { // .reduce() callback
  return val << idx * 0o10 | acc;
}

const { levels } = color(200, 100, 50);
const abgrValue = levels.reduce(RGBa_Arr_to_aBGR_32bit_Val, 0);

```

---

_[View the full topic](https://discourse.processing.org/t/accessing-width-and-height-variables-much-slower-in-p5-ver-2-0-compared-to-ver-1-0/49325)._