Blurry Clouds

/**

 * Blurry Clouds (v1.0.1)

 * Original by Philipp Lehmann (2019-Feb-07)

 * Fork by GoToLoop (2020-Aug-10)

 *

 * https://Discourse.Processing.org/t/

 * is-noise-too-much-for-mobile-devices-to-handle-in-p5js/23048/7

 *

 * https://OpenProcessing.org/sketch/943595

 * https://OpenProcessing.org/sketch/666329

 */

​

'use strict';

​

const NOISE_STEPS = Float32Array.of(.001, .002, .003),

      NOISE_OFFSETS = Uint8Array.of(0, 75, 150),

      NOISE_COLORS = [ 'red', 'lime', 'blue' ],

      NOISE_IS_BLEND = Uint8Array.of(true, true, true),

      blurs = Array(NOISE_COLORS.length).fill();

​

var pg;

​

function setup() {

  const { W, H, RES_SCALE_W, RES_SCALE_H, OCTAVES, FALLOFF } = Blurry;

​

  pixelDensity(1).noiseDetail(OCTAVES, FALLOFF);

​

  createCanvas(W * RES_SCALE_W, H * RES_SCALE_H);

​

  pg = createGraphics(W, H);

​

  for (var i = 0; i < blurs.length; ++i)  blurs[i] = new Blurry(

    NOISE_STEPS[i], NOISE_OFFSETS[i], NOISE_COLORS[i], NOISE_IS_BLEND[i]

  );

}

​

function draw() {

  const { SPD } = Blurry,

        vx = map(mouseX, 0, width,  -SPD, SPD),

        vy = map(mouseY, 0, height, -SPD, SPD);

​

  for (const b of blurs)  b.updateCoords(vx, vy).drawNoise().blendNoise(pg);

  image(pg, 0, 0, width, height);

​

  document.title = round(frameRate());

}

​