# Pushing a 7712x960 Binary image to p5.js is Super slow. Is there a better way?

**URL:** <https://discourse.processing.org/t/pushing-a-7712x960-binary-image-to-p5-js-is-super-slow-is-there-a-better-way/371>\
**Category:** Coding Questions\
**Created:** [May 25, 2018, 10:45am UTC](https://discourse.processing.org/t/pushing-a-7712x960-binary-image-to-p5-js-is-super-slow-is-there-a-better-way/371 "2018-05-25T10:45:17Z")\
**Posts on this page:** 1\
**Showing post:** 8

<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:** [May 26, 2018, 9:47pm UTC](https://discourse.processing.org/t/pushing-a-7712x960-binary-image-to-p5-js-is-super-slow-is-there-a-better-way/371/8 "2018-05-26T21:47:19Z")

</div>

Made my own version using a DataView + its method **setInt32()** as a wrapper to write to _pixels[]_ 4 bytes (RGBa) at once: 😀

> **[DataView](https://Developer.Mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DataView)**
>
> The DataView view provides a low-level interface for reading and writing multiple number types in a binary ArrayBuffer, without having to care about the platform's endianness.

  

> **[DataView.prototype.setInt32()](https://Developer.Mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DataView/setInt32)**
>
> The setInt32() method stores a signed 32-bit integer (long) value at the specified byte offset from the start of the DataView.

Dunno whether it’s faster or not, but you can check it out online here: 🤡

> **[Fill Image with Random Gray](https://Bl.ocks.org/GoSubRoutine/dd290c28663ef13aaf2f1b5e8d0adffa)**
>
> GoSubRoutine’s Block dd290c28663ef13aaf2f1b5e8d0adffa

```javascript
/**
 * Fill Image with Random Gray (v1.0.3)
 * GoToLoop (2018-May-26)
 *
 * https://Discourse.Processing.org/t/
 * pushing-a-7712x960-binary-image-to-p5-js-
 * is-super-slow-is-there-a-better-way/371/8
 *
 * Bl.ocks.org/GoSubRoutine/dd290c28663ef13aaf2f1b5e8d0adffa
 */

"use strict";

let img;

function setup() {
  createCanvas(400, 300).mousePressed(redraw);
  noLoop();
  img = createImage(width >> 1, height >> 1);
}

function draw() {
  background(top.document.title = '#' + hex(~~random(0x1000), 3));
  fillImgRndGray(img);
  set(width - img.width >> 1, height - img.height >> 1, img);
}

function keyPressed() {
  return !!redraw();
}

function fillImgRndGray(img) {
  if (!img) img = createImage(width, height);
  img.pixels.buffer || img.loadPixels();

  const pix = new DataView(img.pixels.buffer),
        len = pix.byteLength,
        bytes = Int32Array.BYTES_PER_ELEMENT,
        range = 0x100;

  for (let i = 0; i < len; i += bytes) {
    const gray = ~~random(range),
          RGBa = gray<<0o30 | gray<<0o20 | gray<<0o10 | 0xff;

    pix.setInt32(i, RGBa);
  }

  img.updatePixels();
  return img;
}

```

---

_[View the full topic](https://discourse.processing.org/t/pushing-a-7712x960-binary-image-to-p5-js-is-super-slow-is-there-a-better-way/371)._