Smoke from Perlin noise

p5.js Coding Questions
5

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 post for loading):

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();
}
3 Likes