[WIP] Fractal Effect

js/effects/fractal.js

@@ -0,0 +1,113 @@
+import Effect, { ConfigUI, fract } from './effect';
+import WorkerCode from './workers/fractal.wjs';
+import { parseHtml } from '../ui/util';
+import Ease from './ease-mixins';
+
+const EffectName = 'Fractal';
+const EffectDescription = 'Lets the particles converge towards a fractal shape';
+
+class FractalConfigUI extends ConfigUI {
+  constructor() {
+    super();
+    const classPrefix = 'effect-fractal';
+    this.element = parseHtml(`
+      <fieldset>
+        <legend>${EffectName}</legend>
+      </fieldset>
+    `);
+    const ui = this.element;
+    Ease.extend(this, classPrefix);
+  }
+
+  getElement() {
+    return this.element;
+  }
+
+  getConfig() {
+    return {};
+  }
+
+  applyConfig(config) {
+  }
+}
+
+class FractalFactory {
+  constructor() {
+    this.props = null;
+    this.worker = new Worker(URL.createObjectURL(new Blob([WorkerCode], { type: "text/javascript" })));
+  }
+
+  createDisplacmentMap() {
+    if (!this.props)
+      throw new Error('Cannot create displacement map prior to setting props');
+    const { props } = this;
+    const { config } = props;
+    return new Promise((resolve, reject) => {
+      this.worker.onmessage = (e) => {
+        resolve(e.data);
+      }
+      this.worker.postMessage({ action: 'push', params: { width: config.xParticlesCount, height: config.yParticlesCount } });
+    }).then((pushed) => new Promise((resolve, reject) => {
+      this.worker.onmessage = (e) => {
+        const map = new Float32Array(e.data);
+        resolve(map);
+      }
+      this.worker.postMessage({ action: 'pop', params: null });
+    }));
+  }
+
+  setProps(props) {
+    this.props = props;
+  }
+}
+
+export default class FractalEffect extends Effect {
+  static registerAsync(instance, props, uniforms, vertexShader, frag, attributes) {
+    const factory = FractalEffect.getFactory(props);
+    return factory.createDisplacmentMap().then((map) => {
+      const { id, buffer } = props.state.createBuffer(map);
+      const offset = attributes.add('offset', 'vec2', buffer);
+      const easeFunc = Ease.setupShaderEasing(instance, uniforms);
+      // eslint-disable-next-line no-param-reassign
+      vertexShader.mainBody += `
+        {
+          float ease = ${easeFunc};
+          position = position + ease * vec3(${offset}, 0.);
+        }
+      `;
+    });
+  }
+
+  static getDisplayName() {
+    return EffectName;
+  }
+
+  static getDescription() {
+    return EffectDescription;
+  }
+
+  static getConfigUI() {
+    if (!this._configUI) {
+      this._configUI = new FractalConfigUI();
+    }
+
+    return this._configUI;
+  }
+
+  static getDefaultConfig() {
+    return {};
+  }
+
+  static getRandomConfig() {
+    return {};
+  }
+
+  static getFactory(props) {
+    if (!this._factory) {
+      this._factory = new FractalFactory();
+    }
+    this._factory.setProps(props);
+
+    return this._factory;
+  }
+}

js/effects/index.js

@@ -1,47 +1,45 @@
-import HueDisplaceEffect from './hue-displace';
-import ConvergePointEffect from './converge-point';
-import ConvergeCircleEffect from './converge-circle';
-import WaveEffect from './wave';
 import ChangeImageEffect from './change-image';
+import ConvergeCircleEffect from './converge-circle';
+import ConvergePointEffect from './converge-point';
+import DummyEffect from './dummy';
 import FlickrImageEffect from './flickr-image';
-import TrailsEffect from './trails';
-import SmoothTrailsEffect from './smooth-trails';
-import SmearEffect from './smear';
-import StandingWaveEffect from './standing-wave';
-import SparkleEffect from './sparkle';
-import ParticleSpacingEffect from './particle-spacing';
+import FractalEffect from './fractal';
+import HueDisplaceEffect from './hue-displace';
 import ParticleDisplaceEffect from './particle-displace';
+import ParticlesReduceEffect from './particles-reduce';
 import ParticleSizeByHueEffect from './particle-size-by-hue';
+import ParticleSpacingEffect from './particle-spacing';
 import ResetDefaultImageEffect from './reset-default-image';
-import WebcamEffect from './webcam';
-import ParticlesReduceEffect from './particles-reduce';
+import SmearEffect from './smear';
+import SmoothTrailsEffect from './smooth-trails';
+import SparkleEffect from './sparkle';
+import StandingWaveEffect from './standing-wave';
+import TrailsEffect from './trails';
 import VignetteEffect from './vignette';
-
-// should be last
-import DummyEffect from './dummy';
+import WaveEffect from './wave';
+import WebcamEffect from './webcam';
 
 const effectList = [
-  HueDisplaceEffect,
+  ChangeImageEffect,
   ConvergePointEffect,
   ConvergeCircleEffect,
-  WaveEffect,
-  ChangeImageEffect,
+  DummyEffect,
   FlickrImageEffect,
-  TrailsEffect,
-  SmoothTrailsEffect,
-  SmearEffect,
-  StandingWaveEffect,
-  SparkleEffect,
-  ParticleSpacingEffect,
+  FractalEffect,
+  HueDisplaceEffect,
   ParticleDisplaceEffect,
-  ParticleSizeByHueEffect,
   ParticlesReduceEffect,
+  ParticleSizeByHueEffect,
+  ParticleSpacingEffect,
   ResetDefaultImageEffect,
-  WebcamEffect,
+  SmearEffect,
+  SmoothTrailsEffect,
+  SparkleEffect,
+  StandingWaveEffect,
+  TrailsEffect,
   VignetteEffect,
-
-  // Should be last
-  DummyEffect
+  WaveEffect,
+  WebcamEffect
 ];
 const byId = {};
 for (let i = 0; i < effectList.length; i++) {