⚡ calculate in web worker to fast up 2d drawings

Author: ramesaliyev

index.html

@@ -101,6 +101,7 @@ <h2 class="page-title">Visual<br />Noises</h2>
   <!-- Utils -->
   <script src="utils/math.js"></script>
   <script src="utils/draw.js"></script>
+  <script src="utils/worker.js"></script>
 
   <!-- Procedural Generation Methods -->
   <script src="methods/value-noise-1d.js"></script>

utils/draw.js

@@ -82,4 +82,22 @@ function rect(x, y, w, h, options) {
   context.rect(x, y, w, h);
   context.closePath();
   fill ? context.fill() : context.stroke();
+};
+
+/**
+ * Draw text.
+ */
+const text = (x, y, text, options = {}) => {
+  const {
+    color = '#fff',
+    size = 14,
+    align = 'center',
+    baseline = 'bottom',
+  } = options;
+
+  context.font = `${size}px sans-serif`;
+  context.textBaseline = baseline;
+  context.textAlign = align;
+  context.fillStyle = color;
+  context.fillText(text, x, y);
 };

utils/worker.js

@@ -0,0 +1,60 @@
+function run(fn, globals, done) {
+  const worker = new Worker(URL.createObjectURL(new Blob([`
+    // Utils
+    const max = Math.max;
+    const min = Math.min;
+    const ceil = Math.ceil;
+    const floor = Math.floor;
+    const cos = Math.cos;
+    const pow = Math.pow;
+    const LCGMultiplier = ${LCGMultiplier};
+    const LCGIncrement = ${LCGIncrement};
+    const LCGModulus = ${LCGModulus};
+    let LCGSeed = ${LCGSeed};
+    ${setRandomSeed};
+    ${srandInt};
+    ${srand};
+    ${srandRange};
+    ${fadeFilter};
+    ${cosFilter};
+    ${smoothStepFilter};
+    ${vectorize};
+    ${multiply};
+    ${sum};
+    ${lerp};
+    ${bilerp};
+    ${map};
+    ${constrain};
+
+    // Globals
+    let speed = ${speed};
+    let offset = ${offset};
+    let amplitude = ${amplitude};
+    let frequency = ${frequency};
+
+    // Value Noise 1D
+    const VALUE_NOISE_1D_DEFAULT_MAX_VERTICES = ${VALUE_NOISE_1D_DEFAULT_MAX_VERTICES};
+    const ValueNoise1DRandomsBySeed = ${JSON.stringify(ValueNoise1DRandomsBySeed)};
+    ${ValueNoise1D};
+
+    // Value Noise 2D
+    const VALUE_NOISE_2D_DEFAULT_MAX_VERTICES = ${VALUE_NOISE_2D_DEFAULT_MAX_VERTICES};
+    const ValueNoise2DRandomsBySeed = ${JSON.stringify(ValueNoise2DRandomsBySeed)};
+    ${ValueNoise2D};
+
+    // State
+    const visualisationFn = ${getCurrentState().visualisationFn};
+    const methodFn = ${getCurrentState().methodFn};
+    const filterFn = ${getCurrentState().filterFn};
+
+    // Supplied Globals
+    ${Object.keys(globals).map(name => `const ${name} = ${globals[name]};`).join('\n')}
+
+    // Run fn.
+    postMessage((${fn})());
+  `])));
+
+  worker.onmessage = ({data}) => done(data);
+
+  return worker;
+}

visualisations/2d-static-image.js

@@ -8,14 +8,31 @@ function draw2DStaticImage({
   height -= 100;
   width -= 200;
 
-  for (let y = 0; y < height; y++) {
-    for (let x = 0; x < width; x++) {
-      const color = map(0, 1, 0, 255, getValueFn(x/amplitude, y/amplitude)[0] / amplitude);
+  text(offsetX/2 + screenWidth/2, screenHeight/2, 'Calculating...', {color: '#666'});
 
-      const xPos = offsetX + x + 100;
-      const yPos = offsetY + height + 100 - y;
+  const calculate = () => {
+    const result = [];
 
-      line(xPos, yPos, xPos, yPos - 1, {color: `rgb(${color}, ${color}, ${color})`});
+    for (let y = 0; y < height; y++) {
+      for (let x = 0; x < width; x++) {
+        const color = map(0, 1, 0, 255, getValueFn(x/amplitude, y/amplitude)[0] / amplitude);
+
+        const xPos = offsetX + x + 100;
+        const yPos = offsetY + height + 100 - y;
+
+        result.push({xPos, yPos, color});
+      }
     }
+
+    return result;
   }
+
+  run(calculate, {getValueFn, height, width, offsetX, offsetY}, result => {
+    context.clearRect(0, 0, screenWidth, screenHeight);
+
+    result.forEach(({xPos, yPos, color}) => {
+      context.fillStyle = `rgb(${color}, ${color}, ${color})`;
+      context.fillRect(xPos, yPos, 1, 1);
+    });
+  });
 }