# Smoke from Perlin noise

**URL:** <https://discourse.processing.org/t/smoke-from-perlin-noise/19462>\
**Category:** Coding Questions\
**Created:** [April 6, 2020, 8:16am UTC](https://discourse.processing.org/t/smoke-from-perlin-noise/19462 "2020-04-06T08:16:17Z")\
**Posts on this page:** 1\
**Showing post:** 5

<div class="post-metadata">

**Author:** ![solub](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/solub/32/333_2.png) [@solub](https://discourse.processing.org/u/solub)\
**Post date:** [April 7, 2020, 1:33pm UTC](https://discourse.processing.org/t/smoke-from-perlin-noise/19462/5 "2020-04-07T13:33:44Z")

</div>

Hi @segu;

`noise` in p5.js seems to be very slow. Calling it twice makes the sketch even slower.  
I would suggest to use an external module instead.

Here is an example with Simplex Noise (see [this](https://discourse.processing.org/t/perlin-3d-noise-working-correctly/18988/3) post for loading):

https://editor.p5js.org/solub/embed/4NNlmeojl

```auto
p5.disableFriendlyErrors = true;

// storing constants
const w = 255;
const s = w*w;
const k = 99;
const f = 30;
const posx = [...Array(s).keys()].map(i => (i % w));
const posy = [...Array(s).keys()].map(i => (i / w));
const a = [...Array(s).keys()].map(i => posx[i] / k);
const b = [...Array(s).keys()].map(i => posy[i] / k);

let x, y;
let i = 0, t = 0, m = 0;
let simplex = new SimplexNoise();

function setup() {
  createCanvas(w, w);
  pixelDensity(1);
}

function draw() {
  t++;
  background('#000');
  
  loadPixels();
  for (i =0; ++i < s;) {
        
    x = posx[i] + Math.round(simplex.noise3D(a[i], b[i], (t/k + m++ % 2)) * f);
    y = posy[i] + Math.round(simplex.noise3D(a[i], b[i], (t/k + m++ % 2)) * f);
    
    index = (x + y * w) << 2;
    c = 55 + pixels[index];
  
    pixels[index] = c;
    pixels[index + 1] = c;
    pixels[index + 2] = c << 1;
  }
  updatePixels();
}

```

---

_[View the full topic](https://discourse.processing.org/t/smoke-from-perlin-noise/19462)._