codepens/generative-poster-v-css/dist/script.js

new Vue({
  el: '#app',
  data: function () {return {
      // things that will not show up in datGUI (for internal use)
      colorSrc: [],
      noise: new SimplexNoise(3.13),
      reverse: false,
      padding: 1.7,
      iteration: 20,
      stop1: '0%',
      stop2: '100%',
      // things that will show up in that gui
      settings: {
        seed: { value: 0.22557154953429298, min: 0, max: 1, fn: val => {
            this.noise = new SimplexNoise(val);
            this.colorSrc = new Array(Math.round(this.iteration + 2)).fill().map(
            (v, i) => chroma.num(Math.floor(Math.abs(this.noise.noise2D(this.iterations * i, this.noisePos) * 16711680))).hex());

          } },
        noisePos: { value: .4421, min: 0, max: 4, fn: val => {
            this.colorSrc = new Array(Math.round(this.iteration + 2)).fill().map(
            (v, i) => chroma.num(Math.floor(Math.abs(this.noise.noise2D(this.iterations * i, val) * 16711680))).hex());


            this.noiseVal1 = this.noise.noise2D(0, val);
            this.noiseVal2 = this.noise.noise2D(val, 0);
          } },
        iterations: { value: 20, min: 2, max: 20, fn: val => {
            this.iteration = Math.round(val);
            this.colorSrc = new Array(Math.round(val + 2)).fill().map(
            (v, i) => chroma.num(Math.floor(Math.abs(this.noise.noise2D(val * i, this.noisePos) * 16711680))).hex());

          } },
        stack: { value: 70, min: 30, max: 400, fn: val => {
            this.stack = Math.round(val);
            this.colorSrc = new Array(Math.round(val + 2)).fill().map(
            (v, i) => chroma.num(Math.floor(Math.abs(this.noise.noise2D(val * i, this.noisePos) * 16711680))).hex());

          } },
        density: { value: 2, min: 0, max: 10, fn: val => {
            this.density = val;
            this.colorSrc = new Array(Math.round(val + 2)).fill().map(
            (v, i) => chroma.num(Math.floor(Math.abs(this.noise.noise2D(val * i, this.noisePos) * 16711680))).hex());

          } },
        waves: { value: .7, min: 0, max: 3, fn: val => {
            this.colorSrc = new Array(Math.round(val + 2)).fill().map(
            (v, i) => chroma.num(Math.floor(Math.abs(this.noise.noise2D(val * i, this.noisePos) * 16711680))).hex());

          } },
        animate: { value: false },
        rotation: { value: 250, min: 0, max: 1024, fn: () => {
            this.colorSrc = [...this.colorSrc];
          } },
        bgrotation: { value: 90, min: 0, max: 359, fn: () => {
            this.colorSrc = [...this.colorSrc];
          } },
        alternate: { value: false, fn: val => {
            this.rotalt = val ? -1 : 1;
            this.colorSrc = [...this.colorSrc];
          } },
        padding: { value: 1.7, min: 0, max: 4 },
        background: { value: '#ff6464', color: true, fn: () => {
            this.colorSrc = [...this.colorSrc];
          } } } };

  },
  created() {
    this.buildGui();
  },
  mounted() {
    this.draw();
    this.anim();
  },
  computed: {
    colors: function () {
      // returns a function that takes a int between 0-1 
      let colors = [...this.colorSrc];
      if (this.reverse) {
        colors.reverse();
      }
      return chroma.scale(this.colorSrc);
    } },

  methods: {
    buildGui: function () {
      // builds the datgui things
      const gui = new dat.GUI();
      Object.keys(this.settings).forEach(key => {
        this[key] = this.settings[key].value;
        const method = this.settings[key].hasOwnProperty('color') ? 'addColor' : 'add';
        const guiProp = gui[method](this, key, this.settings[key].hasOwnProperty('min') ? this.settings[key].min : 0, this.settings[key].hasOwnProperty('max') ? this.settings[key].max : 1);
        guiProp.onChange(value => {
          if (this.settings[key].hasOwnProperty('fn')) {
            this.settings[key].fn(value);
          }
        });
        if (this.settings[key].hasOwnProperty('fn')) {
          this.settings[key].fn(this.settings[key].value);
        }
      });
    },
    draw: function () {

    },
    anim: function () {
      requestAnimationFrame(this.anim);
      if (!this.animate) return;
      // if you intend to animate something 
      // do it here:
      this.noisePos += 0.01;
      this.settings.noisePos.fn(this.noisePos);
    } } });