databender 1.0.3 → 2.0.0-alpha.0

package/index.js

@@ -1,122 +1,205 @@
-var effects = require('./effects');
-var Tuna = require('tunajs');
-
-// Create a Databender instance
-module.exports = function (config, audioCtx) {
-  this.audioCtx = audioCtx ? audioCtx : new AudioContext();
-  this.channels = 1; 
-  this.config = config;
-  this.configKeys = Object.keys(this.config);
-  this.previousConfig = this.config;
-
-  this.convert = function (image) {
-    if (image instanceof Image || image instanceof HTMLVideoElement) {
-      var canvas = document.createElement('canvas');
-      canvas.width = window.innerWidth;
-      canvas.height = window.innerHeight;
-      var context = canvas.getContext('2d');
-      context.drawImage(image, 0, 0, canvas.width, canvas.height);
-      var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
-    }
-    this.imageData = imageData || image;
-    var bufferSize = this.imageData.data.length / this.channels;
-
-    // Make an audioBuffer on the audioContext to pass to the offlineAudioCtx AudioBufferSourceNode
-    var audioBuffer = this.audioCtx.createBuffer(this.channels, bufferSize, this.audioCtx.sampleRate); 
-
-    // This gives us the actual ArrayBuffer that contains the data
-    var nowBuffering = audioBuffer.getChannelData(0);
-
-    nowBuffering.set(this.imageData.data);
-
-    return Promise.resolve(audioBuffer);
-  }
-
-  this.configHasChanged = function () { 
-    return JSON.stringify(this.previousConfig) !== JSON.stringify(this.config);
-  }
-
-  this.updateConfig = function (effect, param, value) {
-    this.config[effect][param] = value;
-  }
 
-  this.render = function (buffer, bypass = false) {
+const isFunction = (candidate) => typeof candidate === 'function';
 
-    // Create offlineAudioCtx that will house our rendered buffer
-    var offlineAudioCtx = new OfflineAudioContext(this.channels, buffer.length * this.channels, this.audioCtx.sampleRate);
+const isConnectable = (candidate) => candidate && typeof candidate.connect === 'function';
 
-    var tuna = new Tuna(offlineAudioCtx);
+const isPromise = (candidate) => candidate && typeof candidate.then === 'function';
 
-    // Create an AudioBufferSourceNode, which represents an audio source consisting of in-memory audio data
-    var bufferSource = offlineAudioCtx.createBufferSource();
+const normalizeEffectNode = (candidate) => {
+    if (!candidate) {
+        return null;
+    }
 
-    // Set buffer to audio buffer containing image data
-    bufferSource.buffer = buffer; 
+    const input = isConnectable(candidate.input) ? candidate.input : candidate;
+    const output = isConnectable(candidate.output) ? candidate.output : input;
 
-    var activeEffects = this.configKeys.reduce((acc, cur) => {
-      this.config[cur].active ? acc[cur] = effects[cur] : false; 
-      return acc;
-    }, {});
-    var activeEffectsIndex = Object.keys(activeEffects);
+    if (!isConnectable(input) || !isConnectable(output)) {
+        return null;
+    }
 
-    bufferSource.start();
+    return { input, output };
+};
 
-    if (activeEffectsIndex && activeEffectsIndex.length) {
-      activeEffectsIndex.forEach((effect) => {
-        if (effect === 'detune' || effect === 'playbackRate') {
-          effects[effect](this.config, tuna, bufferSource);
-          activeEffectsIndex.pop();
-        }
-      });
+const asArray = (value) => {
+    if (!value) {
+        return [];
     }
 
-    if (!activeEffectsIndex.length) {
-      bufferSource.connect(offlineAudioCtx.destination);
-    } else {
-      var nodes = activeEffectsIndex.map((effect) => { 
-        const context = effect === 'biquad' ? offlineAudioCtx : tuna
-        return effects[effect](this.config, context, bufferSource);
-      }).filter(Boolean);
-
-      nodes.forEach((node) => { 
-        bufferSource.connect(node);
-        node.connect(offlineAudioCtx.destination);
-      });
-    }
+    return Array.isArray(value) ? value : [value];
+};
 
-    this.previousConfig = this.config; 
-    // Kick off the render, callback will contain rendered buffer in event
-    return offlineAudioCtx.startRendering();
-  };
-
-  this.draw = function (buffer, context, sourceX = 0, sourceY = 0, x = 0, y = 0, sourceWidth = this.imageData.width, sourceHeight = this.imageData.height, targetWidth = window.innerWidth, targetHeight = window.innerHeight) {
-    // Get buffer data
-    var bufferData = buffer.getChannelData(0);
-
-    // ImageData expects a Uint8ClampedArray so we need to make a typed array from our buffer
-    // @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer
-    var clampedDataArray = new Uint8ClampedArray(buffer.length)
-
-    // set the renderedBuffer to Uint8ClampedArray to use in ImageData later
-    clampedDataArray.set(bufferData);
-
-    // putImageData requires an ImageData Object
-    // @see https://developer.mozilla.org/en-US/docs/Web/API/ImageData
-    const transformedImageData = new ImageData(this.imageData.width, this.imageData.height);
-    transformedImageData.data.set(clampedDataArray);
-
-    const tmpCanvas = document.createElement('canvas');
-    tmpCanvas.width = this.imageData.width;
-    tmpCanvas.height = this.imageData.height;
-    tmpCanvas.getContext('2d').putImageData(transformedImageData, sourceX, sourceY);
-    context.drawImage(tmpCanvas, sourceX, sourceY, sourceWidth, sourceHeight, x, y, targetWidth, targetHeight);
-  };
-
-  this.bend = function (data, context, sourceX = 0, sourceY = 0, x = 0, y = 0, targetWidth = window.innerWidth, targetHeight = window.innerHeight) { 
-    return this.convert(data)
-      .then((buffer) => this.render(buffer))
-      .then((buffer) => this.draw(buffer, context, sourceX, sourceY, x, y, this.imageData.width, this.imageData.height, targetWidth, targetHeight))
-  };
-
-  return this;
+export default class Databender {
+    constructor({
+        config = {},
+        effectsChain = null,
+        chainMode = 'series',
+        audioCtx = null
+    } = {}) {
+        this.audioCtx = audioCtx ? audioCtx : new AudioContext();
+        this.channels = 1;
+        this.config = config || {};
+        this.configKeys = Object.keys(this.config);
+        this.previousConfig = this.config;
+        this.effectsChain = effectsChain ? asArray(effectsChain) : null;
+        this.chainMode = chainMode === 'parallel' ? 'parallel' : 'series';
+
+        this.convert = function(image) {
+            if (image instanceof Image || image instanceof HTMLVideoElement) {
+                const canvas = typeof OffscreenCanvas !== 'undefined'
+                    ? new OffscreenCanvas(window.innerWidth, window.innerHeight)
+                    : (() => {
+                        const element = document.createElement('canvas');
+                        element.width = window.innerWidth;
+                        element.height = window.innerHeight;
+                        return element;
+                    })();
+                var context = canvas.getContext('2d');
+                context.drawImage(image, 0, 0, canvas.width, canvas.height);
+                var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
+            }
+            this.imageData = imageData || image;
+            var bufferSize = this.imageData.data.length / this.channels;
+
+            // Make an audioBuffer on the audioContext to pass to the offlineAudioCtx AudioBufferSourceNode
+            var audioBuffer = this.audioCtx.createBuffer(this.channels, bufferSize, this.audioCtx.sampleRate);
+
+            // This gives us the actual ArrayBuffer that contains the data
+            var nowBuffering = audioBuffer.getChannelData(0);
+
+            for (var i = 0; i < nowBuffering.length; i++) {
+                nowBuffering[i] = (this.imageData.data[i] / 128) - 1;
+            }
+
+            return Promise.resolve(audioBuffer);
+        };
+
+        this.configHasChanged = function() {
+            if (!this.configKeys.length) {
+                return false;
+            }
+            return JSON.stringify(this.previousConfig) !== JSON.stringify(this.config);
+        };
+
+        this.updateConfig = function(effect, param, value) {
+            if (!this.configKeys.length || !this.config[effect]) {
+                return;
+            }
+            this.config[effect][param] = value;
+        };
+
+        this.render = async function(buffer, bypass = false) {
+
+            // Create offlineAudioCtx that will house our rendered buffer
+            var offlineAudioCtx = new OfflineAudioContext(this.channels, buffer.length * this.channels, this.audioCtx.sampleRate);
+
+            // Create an AudioBufferSourceNode, which represents an audio source consisting of in-memory audio data
+            var bufferSource = offlineAudioCtx.createBufferSource();
+
+            // Set buffer to audio buffer containing image data
+            bufferSource.buffer = buffer;
+
+            var resolveEffectsChain = async function() {
+                if (bypass) {
+                    return [];
+                }
+
+                var chainDefinition = null;
+
+                if (this.effectsChain) {
+                    chainDefinition = this.effectsChain;
+                }
+
+                if (isPromise(chainDefinition)) {
+                    chainDefinition = await chainDefinition;
+                }
+
+                var candidates = asArray(chainDefinition);
+                var resolvedNodes = [];
+
+                for (var i = 0; i < candidates.length; i++) {
+                    var nodeCandidate = candidates[i];
+                    var resolvedNode = nodeCandidate;
+
+                    if (isFunction(resolvedNode)) {
+                        resolvedNode = resolvedNode({ context: offlineAudioCtx, source: bufferSource, config: this.config });
+                    }
+
+                    if (isPromise(resolvedNode)) {
+                        resolvedNode = await resolvedNode;
+                    }
+
+                    var normalizedNodes = asArray(resolvedNode);
+
+                    for (var j = 0; j < normalizedNodes.length; j++) {
+                        var node = normalizedNodes[j];
+                        resolvedNodes.push(isPromise(node) ? await node : node);
+                    }
+                }
+
+                return resolvedNodes;
+            }.bind(this);
+
+            var effectNodes = (await resolveEffectsChain()).map(normalizeEffectNode).filter(Boolean);
+
+            if (!effectNodes.length) {
+                bufferSource.connect(offlineAudioCtx.destination);
+            } else if (this.chainMode === 'parallel') {
+                effectNodes.forEach((node) => {
+                    bufferSource.connect(node.input);
+                    node.output.connect(offlineAudioCtx.destination);
+                });
+            } else {
+                var previousNode = bufferSource;
+                effectNodes.forEach((node) => {
+                    previousNode.connect(node.input);
+                    previousNode = node.output;
+                });
+                previousNode.connect(offlineAudioCtx.destination);
+            }
+
+            bufferSource.start();
+
+            this.previousConfig = this.config;
+            // Kick off the render, callback will contain rendered buffer in event
+            return offlineAudioCtx.startRendering();
+        };
+
+        this.draw = function(buffer, context, sourceX = 0, sourceY = 0, x = 0, y = 0, sourceWidth = this.imageData.width, sourceHeight = this.imageData.height, targetWidth = window.innerWidth, targetHeight = window.innerHeight) {
+            // Get buffer data
+            var bufferData = buffer.getChannelData(0);
+
+            // ImageData expects a Uint8ClampedArray so we need to make a typed array from our buffer
+            // @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer
+            var clampedDataArray = new Uint8ClampedArray(buffer.length);
+
+            for (var k = 0; k < bufferData.length; k++) {
+                var value = ((bufferData[k] + 1) * 128);
+                clampedDataArray[k] = value < 0 ? 0 : (value > 255 ? 255 : value);
+            }
+
+            // putImageData requires an ImageData Object
+            // @see https://developer.mozilla.org/en-US/docs/Web/API/ImageData
+            const transformedImageData = new ImageData(this.imageData.width, this.imageData.height);
+            transformedImageData.data.set(clampedDataArray);
+
+            const tmpCanvas = typeof OffscreenCanvas !== 'undefined'
+                ? new OffscreenCanvas(this.imageData.width, this.imageData.height)
+                : (() => {
+                    const element = document.createElement('canvas');
+                    element.width = this.imageData.width;
+                    element.height = this.imageData.height;
+                    return element;
+                })();
+            tmpCanvas.getContext('2d').putImageData(transformedImageData, sourceX, sourceY);
+            context.drawImage(tmpCanvas, sourceX, sourceY, sourceWidth, sourceHeight, x, y, targetWidth, targetHeight);
+        };
+
+        this.bend = function(data, context, sourceX = 0, sourceY = 0, x = 0, y = 0, targetWidth = window.innerWidth, targetHeight = window.innerHeight) {
+            return this.convert(data)
+                .then((buffer) => this.render(buffer))
+                .then((buffer) => this.draw(buffer, context, sourceX, sourceY, x, y, this.imageData.width, this.imageData.height, targetWidth, targetHeight));
+        };
+
+        return this;
+    }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "databender",
-  "version": "1.0.3",
+  "version": "2.0.0-alpha.0",
   "description": "Create interesting visuals by misusing the Web Audio API",
   "main": "index.js",
   "scripts": {
@@ -17,13 +17,9 @@
   ],
   "author": "Mike Vattuone",
   "license": "MIT",
-  "dependencies": {
-    "tunajs": "1.0.11"
-  },
   "devDependencies": {
-    "rollup": "0.58.2",
-    "rollup-plugin-commonjs": "9.1.0",
-    "rollup-plugin-json": "2.3.0",
-    "rollup-plugin-node-resolve": "3.3.0"
+    "@rollup/plugin-commonjs": "28.0.8",
+    "@rollup/plugin-node-resolve": "16.0.3",
+    "rollup": "4.52.4"
   }
 }

package/rollup.config.js

@@ -1,21 +1,23 @@
 // rollup.config.js
-import commonjs from 'rollup-plugin-commonjs';
-import resolve from 'rollup-plugin-node-resolve';
-import json from 'rollup-plugin-json';
+import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
 
 export default {
   input: 'index.js',
   output: {
     file: 'dist/databender.js',
     name: 'Databender',
-    format: 'iife'
+    format: 'iife',
+    sourcemap: false,
   },
   plugins: [
-    commonjs({ ignore: ['conditional-runtime-dependency']}),
-    resolve(),
-    json({
-      exclude: 'node_modules/**',
-      preferConst: true
-    })
+    resolve({
+      browser: true,       
+      preferBuiltins: false, 
+    }),
+    commonjs({
+      requireReturnsDefault: 'auto', 
+    }),
   ]
 };
+