# Is noise too much for mobile devices to handle in p5js?

**URL:** <https://discourse.processing.org/t/is-noise-too-much-for-mobile-devices-to-handle-in-p5js/23048>\
**Category:** Coding Questions\
**Created:** [August 5, 2020, 3:37am UTC](https://discourse.processing.org/t/is-noise-too-much-for-mobile-devices-to-handle-in-p5js/23048 "2020-08-05T03:37:04Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![mnoble](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnoble/32/99_2.png) [@mnoble](https://discourse.processing.org/u/mnoble)\
**Post date:** [August 5, 2020, 3:37am UTC](https://discourse.processing.org/t/is-noise-too-much-for-mobile-devices-to-handle-in-p5js/23048/1 "2020-08-05T03:37:04Z")

</div>

Hello Forum 🙂

I am working on a visualizer project for mobile devices and I found a great example of clouds using noise on Open Processing. It works good on laptops and crashes on mobile devices. Are noise operations too much for phones to display?

Here’s the sketch:

[https://www.openprocessing.org/sketch/666329](https://www.openprocessing.org/sketch/666329)

---

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [August 5, 2020, 4:08am UTC](https://discourse.processing.org/t/is-noise-too-much-for-mobile-devices-to-handle-in-p5js/23048/2 "2020-08-05T04:08:33Z")

</div>

Not noise per se but the amount of operations required to calculate it can be pretty intensive especially if the size you are working on is large. 10x10 square should have no problem, I would try resizing and change the size until it crashes. This way you can isolate the problem, if it is the size you should be able to use this to find the largest area you can work with or maybe there’s something in your code causing it to crash.

Using huawei mate 20 and it does run albeit slowly

---

<div class="post-metadata">

**Author:** ![mnoble](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnoble/32/99_2.png) [@mnoble](https://discourse.processing.org/u/mnoble)\
**Post date:** [August 5, 2020, 4:46am UTC](https://discourse.processing.org/t/is-noise-too-much-for-mobile-devices-to-handle-in-p5js/23048/3 "2020-08-05T04:46:22Z")

</div>

Thank you Paulgoux for your help!

So, it works well on large screens/laptops but not mobile devices. So perhaps it is not the size. When I adjust the program to be flexible in size - it still works on large screens but crashes on my Iphone. That is why I was thinking it was a mobile thing…

---

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [August 5, 2020, 5:18am UTC](https://discourse.processing.org/t/is-noise-too-much-for-mobile-devices-to-handle-in-p5js/23048/4 "2020-08-05T05:18:20Z")

</div>

![Screenshot_20200805-061427](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/d/d81f4e1eea3b04f333866a7b153f2133c5037186.jpeg)

This is with the draw loop running a nested for loop to 100 or the program defaults,

This is to 50

 ![Screenshot_20200805-061550](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/e/eb690125d0b46dd0b9e9fb455fe9efc3606916f3.jpeg)

Again thus is on huawei mate 20 the iPhone should be able to run it, the for loop is probably to large for its processor.

---

<div class="post-metadata">

**Author:** ![mnoble](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnoble/32/99_2.png) [@mnoble](https://discourse.processing.org/u/mnoble)\
**Post date:** [August 5, 2020, 4:48pm UTC](https://discourse.processing.org/t/is-noise-too-much-for-mobile-devices-to-handle-in-p5js/23048/5 "2020-08-05T16:48:30Z")

</div>

Hi Paulgoux,

Thanks for the further clarification! Maybe the Iphone is the issue because no matter how small I reduce the for loop, it still crashes.

---

<div class="post-metadata">

**Author:** ![mnoble](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnoble/32/99_2.png) [@mnoble](https://discourse.processing.org/u/mnoble)\
**Post date:** [August 5, 2020, 5:31pm UTC](https://discourse.processing.org/t/is-noise-too-much-for-mobile-devices-to-handle-in-p5js/23048/6 "2020-08-05T17:31:59Z")

</div>

I asked Sinan from Open Processing and this is what he replied:

“I suspect it would be related to limited memory available on mobile devices. Many sketches that use direct pixel access on each frame end up using a lot of memory, which may not work well on some mobile devices.”

---

<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:** [August 10, 2020, 8:42am UTC](https://discourse.processing.org/t/is-noise-too-much-for-mobile-devices-to-handle-in-p5js/23048/7 "2020-08-10T08:42:50Z")

</div>

I’ve forked & refactored the “Blurry Clouds” sketch for performance. ☁  
I’ve converted the function **drawNoise()** to a class named Blurry. 🤓  
It didn’t turn out exactly like the original code, but close enough I guess. 🥴  
But hopefully now it should run on your mobile: 📱

https://www.openprocessing.org/sketch/943595/embed/

---

<div class="post-metadata">

**Author:** ![mnoble](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnoble/32/99_2.png) [@mnoble](https://discourse.processing.org/u/mnoble)\
**Post date:** [August 10, 2020, 4:41pm UTC](https://discourse.processing.org/t/is-noise-too-much-for-mobile-devices-to-handle-in-p5js/23048/8 "2020-08-10T16:41:18Z")

</div>

It sure does!!! Wow - I am pretty excited about this. Thank you very much GoToLoop!!!

---

<div class="post-metadata">

**Author:** ![mnoble](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnoble/32/99_2.png) [@mnoble](https://discourse.processing.org/u/mnoble)\
**Post date:** [August 10, 2020, 5:21pm UTC](https://discourse.processing.org/t/is-noise-too-much-for-mobile-devices-to-handle-in-p5js/23048/9 "2020-08-10T17:21:02Z")

</div>

Hello Again GoToLoop!

Just a little context, I am aiming to create an interactive cloud visualizer for some sounds I am making. I was able to add in my sound button and I noticed that my bracket [] usage is more structured than yours - which I believe means I am programming in beginner style (best for me!). Anyhow, I think I working through this.

The other manipulation I wan aiming to do was color changes depending on where the mouse/touch position is on mobile. I noticed this line of code had some effect of over color:

```auto
class Blurry {
  static isLittleEndian() {
    return new Uint8Array(Uint32Array.of(0x12345678).buffer)[0] === 0x78; //77 equals pink/orange
  }

```

I was wondering if you had the time at some point, if you would annotate your example to show me how/where I could implement color changes responsive to touch position. (rollovers?)

No problem - is this is a big ask 🙂

Thanks again for getting me this far!

---

<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:** [August 13, 2020, 5:53am UTC](https://discourse.processing.org/t/is-noise-too-much-for-mobile-devices-to-handle-in-p5js/23048/10 "2020-08-13T05:53:00Z")

</div>

> [@mnoble](#):
>
> I noticed this line of code had some effect over color:

Just theoretically, b/c I’ve just read that we should expect that almost all mobile devices are configured to use little endian byte order:

> <https://stackoverflow.com/questions/58614504/is-ios-guaranteed-to-be-little-endian>

That utility function is just to make 100% sure our code is indeed running on a little endian device (which statistically should always be so):

> **[Endianness](https://en.wikipedia.org/wiki/Endianness)**
>
> In computing, endianness is the order or sequence of bytes of a word of digital data in computer memory or data communication which is identified by describing the impact of the "first" bytes, meaning at the smallest address or sent first. Danny Cohen introduced the terms big-endian and little-endian into computer science for data ordering in an Internet Experiment Note published in 1980. The adjective endian has its origin in the writings of 18th century Anglo-Irish writer Jonathan Swift. In Co...

The datatype of _pixels[]_ is Uint8ClampedArray: [reference | p5.js](http://p5js.org/reference/#/p5/pixels)

And there are 11 Typed Array versions:

> **[TypedArray - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray)**
>
> A TypedArray object describes an array-like view of an
> underlying binary data buffer.
> There is no global property named TypedArray, nor is there a
> directly visible TypedArray constructor. Instead, there are a number of
> different global...

As long as we’re using 1 of the 3 8-bit versions of Typed Arrays we can fully ignore endianness.

But as you can see within Blurry::**resetImageColor()** method there’s a Uint32Array viewer of the p5.Image::_pixels[]_ there:  
`const pix32 = new Uint32Array(img.pixels.buffer),`

It means that instead of needing 4 indices from p5.Image::_pixels[]_ in order to get a pixel’s RGBa color, 1 index now represents the whole 4-byte (32-bit) color value.

The problem about using a multibyte viewer on a little endian device is that its byte order is inverted.

That is, when we read an RGBa pixel we get aBGR mirror of it instead.

And when we write a pixel, we gotta arrange its values in aBGR order, so it’s correctly stored as RGBa:  
`c[3] << 0o30 | c[2] << 0o20 | c[1] << 0o10 | c[0] : // aBGR`

Above the _c[]_ array’s 4 indices represent RGBa, but they’re ordered as aBGR for the sake of the Uint32Array viewer.

But again, all this complex explanation can be skipped if you don’t use a viewer for _pixels[]_. 😉

---

<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:** [August 13, 2020, 6:15am UTC](https://discourse.processing.org/t/is-noise-too-much-for-mobile-devices-to-handle-in-p5js/23048/11 "2020-08-13T06:15:10Z")

</div>

> [@mnoble](#):
>
> … how/where I could implement color changes responsive to touch position.

Even though I’ve refactored the original code for performance, I’ve only focused on some specific parts of it. Its algorithm basis is still unknown for me.

However, I’ve collected & placed all constant values I’ve identified at the end of the Blurry class:

```auto
const BLUR_PROTO = Blurry.prototype;

BLUR_PROTO.W = Blurry.W = 100;
BLUR_PROTO.H = Blurry.H = 100;

BLUR_PROTO.RES_SCALE = Blurry.RES_SCALE_W = 6.5;
BLUR_PROTO.RES_SCALE = Blurry.RES_SCALE_H = 6;

BLUR_PROTO.SPD = Blurry.SPD = 5;
BLUR_PROTO.NOISE_SCALE = Blurry.NOISE_SCALE = .02;

BLUR_PROTO.OCTAVES = Blurry.OCTAVES = 4;
BLUR_PROTO.FALLOFF = Blurry.FALLOFF = .45;

BLUR_PROTO.LITTLE_ENDIAN = Blurry.LITTLE_ENDIAN = Blurry.isLittleEndian();

```

You may turn some of them into global variables instead if you intend on dynamically reassigning their value during sketch execution.

---

<div class="post-metadata">

**Author:** ![mnoble](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnoble/32/99_2.png) [@mnoble](https://discourse.processing.org/u/mnoble)\
**Post date:** [August 13, 2020, 5:44pm UTC](https://discourse.processing.org/t/is-noise-too-much-for-mobile-devices-to-handle-in-p5js/23048/12 "2020-08-13T17:44:02Z")

</div>

Hi GoToLoop,

Wow! Definitely a challenging explanation but it super helpful for understanding the waters I am trying to tread in with a mobile device. Thank you!

---

<div class="post-metadata">

**Author:** ![mnoble](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnoble/32/99_2.png) [@mnoble](https://discourse.processing.org/u/mnoble)\
**Post date:** [August 13, 2020, 5:44pm UTC](https://discourse.processing.org/t/is-noise-too-much-for-mobile-devices-to-handle-in-p5js/23048/13 "2020-08-13T17:44:53Z")

</div>

That makes sense - will give it a whirl. Thank you!