How to use dat-gui - 10 common examples

window.addEventListener('resize', fit(canvas), false)

let animating = true
const toggleAnimation = () => { animating = !animating }

const settings = {
  particles: 800000,
  excitability: 10,
  pointWidth: 1,
  pullStrength: 2.5,
  decay: 2
}
const origSettings = Object.assign({}, settings)

const gui = new GUI()
gui.add(settings, 'particles', 4, 1500000).step(1).listen().onFinishChange(restart)
gui.add(settings, 'excitability', 10, 500).step(10).listen()
// gui.add(settings, 'pointWidth', 0.5, 6).listen()
gui.add(settings, 'pullStrength', 0, 3).step(0.1).listen()
gui.add(settings, 'decay', -10, 10).step(1).listen()
gui.add({ 'start / stop': toggleAnimation }, 'start / stop')
gui.add({ restart }, 'restart')
gui.add({ reset }, 'reset')

window.gui = gui

function reset () {
  Object.assign(settings, origSettings)
  restart()
}

UIModel.prototype.set = function(attr, value) {
    var oldValue = this[attr];
    this[attr] = value;
    this.emit('change', attr, value, oldValue);
    this.emit('change:' + attr, value, oldValue);
}

UIModel.prototype.get = function(attr) {
    return this[attr];
}

var uiModel = new UIModel();

// GUI
var gui = f1 = new dat.GUI();
var controllers = {};
// display settings
var folders = {};
folders['display'] = gui.addFolder('display settings');
folders['sound'] = gui.addFolder('sound settings');

_.each(settings, function(setting, attr) {
    controllers[attr] = folders[setting.folder].add(uiModel, attr, setting.range[0], setting.range[1]);
    controllers[attr].onChange(function(value) { uiModel.set(attr, value); })
});

// gui.close();

module.exports = uiModel;

BrotJS.prototype.setupGUI = function() {
        var self = this;
        self.gui = new dat.GUI();
        self.gui.add(self, 'addBuddhabrot');

        // The 'download' attribute is needed in order to provide a filename
        if (featureDetection.downloadAttribute) {
            self.gui.add(self, 'saveImage');
        }
    };

Math.cos(rads) * dist + canvasCenter[0],
      Math.sin(rads) * dist + canvasCenter[1]
    ]
    return { color, position }
  })

  const params = Object.assign({}, settings, {
    randomFn: rand,
    context: ctx,
    colors: colors
  })
  const draw = watercolor(params)
  draw()
}

const gui = new GUI()
gui.add(settings, 'colors', 1, 6).step(1).onChange(ctx.setup.bind(ctx))
// gui.add(settings, 'shapePoints', 3, 15).step(1).onChange(ctx.setup.bind(ctx))
gui.add(settings, 'spread', 1, 1000).onChange(ctx.setup.bind(ctx))
gui.add(settings, 'colorSize', 1, 1000).onChange(ctx.setup.bind(ctx))
gui.add(settings, 'deformations', 0, 5).step(1).onChange(ctx.setup.bind(ctx))
// gui.add(settings, 'layers', 1, 200).step(1).onChange(ctx.setup.bind(ctx))
gui.add(settings, 'sigma', 0.5, 3).onChange(ctx.setup.bind(ctx))
gui.add(settings, 'blend', ['lighten', 'darken']).onChange(ctx.setup.bind(ctx))
gui.add(settings, 'mask').onChange(ctx.setup.bind(ctx))
gui.add(settings, 'maskCircles', 1, 500).step(1).onChange(ctx.setup.bind(ctx))
gui.add(settings, 'maskCircleSize', 1, 500).onChange(ctx.setup.bind(ctx))
// gui.add(settings, 'fitToNeighbor', ['min', 'max']).onChange(ctx.setup.bind(ctx))
gui.add(settings, 'randomSeed', 0, 999).step(1).onChange(ctx.setup.bind(ctx))

domready(function () {
            // create app object
            var app = {
                renderer: PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight, options),
                root: new PIXI.DisplayObjectContainer(),
                tick: null,
                animate: null,
                stats: new Stats(),
                gui: new DatGui({ load: decodeGuiFromHash() }),
                onResize: null,
                deltaTime: 0,
                lastTime: Date.now()
            };

            // style stats and add to document
            app.stats.domElement.style.position = 'absolute';
            app.stats.domElement.style.bottom = '0';
            app.stats.domElement.style.right = '0';

            document.body.appendChild(app.stats.domElement);

            // serialize gui when it changes
            app.gui.domElement.addEventListener('click', saveGuiToHash.bind(null, app.gui));
            app.gui.domElement.addEventListener('tap', saveGuiToHash.bind(null, app.gui));

var createCaption = require('../../dom/caption');

var scene, camera, renderer, mesh;
var videoScene, videoMesh;
var plane, mesh;
var cubes = [];
var object, id;
import CamTexture from "vendors/video-texture/webcam"
import VideoTexture from "vendors/video-texture/video"
var camTexture, videoTexture;
var stats, wrapper;
var videoObj = {
    isVideo : false
};

var gui = new dat.GUI();
var videoController = gui.add(videoObj, "isVideo");
videoController.onChange(onVideoChange);

var isAnimation = true;

var videoFiles = {
    "mp4" : "assets/video/video.mp4",
    "ogv" : "assets/video/video.ogv"
};

function init(){
    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
    camera.position.z = 1000;

_hand = new Hand();
    _scene.add(_hand);

    ground.init();
    _scene.add(ground.mesh);

    particles.init(_renderer, _hand);
    _scene.add(particles.mesh);






    _gui = new dat.GUI();
    var simulatorGui = _gui.addFolder('Simulator');
    simulatorGui.add(settings.query, 'amount', settings.amountList).onChange(function(){
        if (confirm('It will restart the demo')) {
            window.location.href = window.location.href.split('#')[0] + encode(settings.query).replace('?', '#');
            window.location.reload();
        }
    });
    simulatorGui.add(settings, 'gravity', -5, 20);
    simulatorGui.add(settings, 'particlesFromY', 0, 500).name('from Y');
    simulatorGui.add(settings, 'particlesYDynamicRange', -500, 500).name('y dynamic range');
    simulatorGui.add(settings, 'particlesDropRadius', 0, 150).name('drop radius');
    simulatorGui.add(settings, 'handBounceRatio', 0, 1).name('hand bounce');
    simulatorGui.add(settings, 'handForce', 0, 0.1).name('hand force');


    var postprocessingGui = _gui.addFolder('Post-Processing');

public build (parentId: string): void {
        const parent = $('#' + parentId);

        this.element = new dat.GUI({
            autoPlace: false
        });
        this.element.width = parent.width();

        parent[0].appendChild(this.element.domElement);

        Tools.ImportScript('./css/dat.gui.css');
    }

function guiSettings (settings, onChange) {
  const settingsObj = {}
  const gui = new GUI()
  css(gui.domElement.parentElement, { zIndex: 11 })
  for (let key in settings) {
    settingsObj[key] = settings[key][0]
    const setting = gui
      .add(settingsObj, key, settings[key][1], settings[key][2])
    if (settings[key][3]) {
      setting.step(settings[key][3])
    }
    if (settings[key][4]) {
      setting.onChange(onChange)
    }
  }
  return settingsObj
}

function guiSettings (settings, onChange) {
  const settingsObj = {}
  const gui = new GUI()
  css(gui.domElement.parentElement, { zIndex: 11 })
  for (let key in settings) {
    settingsObj[key] = settings[key][0]
    const setting = gui
      .add(settingsObj, key, settings[key][1], settings[key][2])
    if (settings[key][3]) {
      setting.step(settings[key][3])
    }
    if (settings[key][4]) {
      setting.onChange(onChange)
    }
  }
  return settingsObj
}